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指定函数.

④如需排序, type=json时, 需后台支持