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,
                "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 "<span title='回购数：" + value + "'>" +  ((row.buyBackNum)*100/(row.orderNum)).toFixed(2)+"%" + "</span>";
                        //展示鼠标悬浮单元格内容 "<span title='悬浮内容'>" + 单元格内容 + "</span>";
                    }    
                }
            }
        ] ]
    });

第二部分代码：

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: '<b>统计：</b>', 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