jQuery之datagrid详细案例(包含常用方法)

关于jQuery的datagrid(数据表格)的案例：
$("#table控件id").datagrid({
onLoadSuccess:compute ,//加载完毕后执行计算function方法名
url : "请求数据url1",
striped : true,//是否显示斑马线效果。
fit : true,//窗口大小自适应
border : false,//如果为true，设置面板具有边框
pagination : true,//如果为true，则在DataGrid控件底部显示分页工具栏。
rownumbers : true,//如果为true，则显示一个行号列。
showFooter:true,//定义是否显示行脚。
pageSize : 20,//在设置分页属性的时候初始化页面大小
pageList : [ 5, 10, 20, 100, 200, 1000 ],//在设置分页属性的时候初始化页面大小选择列表。
queryParams: { //在请求远程数据的时候发送额外的参数
params: {
"datefirst":datefirst, //额外参数
"datefinal":datefinal,
"shippingStatus":shippingStatus,
"buyBack":buyBack
}
},
columns : [ [
{field:'ckbox',title:'全选', align:'center',checkbox:true},
{field : "domain",title : "域名",width : 200,align:'center'},
{field : "contributed",title : "提供人",width : 90,align:'center',
hidden:true},//如果为true，则隐藏列。--动态控制时不好用,下面会有其他方法
{field : "orderNum",title : "订单数量",width : 90,align:'center'},
{field : "buyBackNum",title : "回购率",width : 90,align:'center',
formatter: function(value,row){ //单元格formatter(格式化器)函数，带3个参数：value：字段值。row：行记录数据。index: 行索引。
if (null == value || undefined == value){
return "0.00%";
}else {
//return ((row.buyBackNum)*100/(row.orderNum)).toFixed(2)+"%"; //返回格式化参数百分比取2位小数
return "" + ((row.buyBackNum)*100/(row.orderNum)).toFixed(2)+"%" + "";
//展示鼠标悬浮单元格内容 "" + 单元格内容 + "";
}
}
}
] ]
});

//------------------------第二部分代码------------------------------------------------------------------------------------------------

function compute(){
//增加统计行
var datefirst = $("#menuComb").find('#datefirst').val();
var datefinal = $("#menuComb").find('#datefinal').val();
$.ajax({
url : '请求数据url2',
type : "post",
data : {
params: {
"datefirst":datefirst,
"datefinal":datefinal
}
},
dataType : "json",
success: function(data){
if(null!=data&&data!=''){
var orderNum = data.orderNum,buyBackNum=data.buyBackNum；
$('#table控件id').datagrid('appendRow', { domain: '统计：', orderNum: orderNum,buyBackNum: buyBackNum});//列名需一致，值会被格式化无需再次处理
}
}
});

DynamicDisplay(); //调用动态展示列方法
}

function DynamicDisplay(){

var buyBack = $("input[name='buyBack']:checked").val();
//动态显示与隐藏回购率
if(buyBack!='true'){
//隐藏
$('#operatorGrid').datagrid('hideColumn', 'buyBackNum');
}else{
//展示
$('#operatorGrid').datagrid('showColumn', 'buyBackNum');
}
}

//最新jQuery中文api 1.55下载链接：https://download.csdn.net/download/richie696/10367838

jQuery之datagrid详细案例(包含常用方法)

猜你喜欢