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