jqGrid插件学习(1)-基本

阅读更多

var $areaTable = $("#areaTable"); 
$areaTable.jqGrid({ 
     caption: "全省各地区能耗概要", 
     colNames : ['id','全省地区','企业数量(家)','节能量当年完成比率(%)','当年能耗(吨标准煤)','操作'], 
     colModel : [ 
           {name:'areaId',index:'areaId',align : "center", hidden : true}, 
           {name:'areaName',index:'areaName',align : "center", width:175, sortable:false}, 
           {name:'companyCount',index:'companyCount',align:"center", width:60, formatter: "integer", sorttype: 'integer'}, 
           {name:'currentSaving',index:'currentSaving',align:"center", width:145, formatter: "number", sorttype: 'float'}, 
           {name:'currentConsume',index:'currentConsume',align:"center", width:145, formatter: "integer", sorttype:'integer'}, 
           {name:'option', index : 'option', width:50, sortable:false} 
        ], 
    height: 'auto', 
    url:"/mvc/myriadcompany/nav/areaOverview", 
    datatype: "json", 
    jsonReader:{ 
          root: 'data', 
          repeatitems: false, 
          id:'0', 
     }, 
     gridComplete:function(){ 
            var rows = $areaTable.find("tbody tr"); 
            $(rows).each(function(index, elem){ 
                if (index != 0) { 
                      $(elem).find("td:last") 
                                 .addClass("alink jsToAreaDetail") 
                                 .attr("title", "查看详情") 
                                 .html("查看详情"); 
                } 
            }); 
                
           $(".jsToAreaDetail").click(function(){ 
                self.enterAreaPage($(this).parent().attr('id')); 
            }); 
     },

});

要点:

①colNames 与colModel 数组长度必须一致

②jsonReader属性配置:

root指定返回JSON的数据的根节点;

repeatitems: false 指明返回结果无需按顺序列出各字段的值,甚至无需包含所有的字段, 因为jqGrid是按照colModel 来查找显示各列的.

③各列的数据如果需要特殊处理(如格式化,加超链接等), 可以使用colModel的formmater指定函数.

④如需排序, datatype=json时, 需后台支持 sidx=当前排序列, sord=排序方式asc desc