实例代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ //buttonInit() //pageInit(dataObj["yc"],titleArr['yc']); initType(); initEvent(); }); /** * 初始化按钮的事件 */ function initEvent(){ $("#btn-gro").on("click",".btn-h",function(){ var param={}; param.id="123";//获取主页面选中的端口id $("#btn-gro .btn-h").removeClass("active"); $(this).addClass("active"); initType(); }) } function initType(){ var type=$("#btn-gro .btn-h.active").attr("data-id"); var param={}; //根据type获取数据 param.data=dataObj[type],param.title=titleArr[type]; switch(type){ case "yc" : param.colModel= [ {name : 'ID',width : 60,align : "center",sorttype : "int",editable:false,editoptions:{size:50}}, {name : 'devID',width : 90,align : "center",editable:true,sorttype : "text"}, //sorttype按照排序方式 {name : 'funNum',width : 100,align : "center",editable:true,sorttype : "text"}, {name : 'infoID',width : 100,align : "center",sorttype : "text"}, {name : 'largeCoeff',width : 100,align : "center",sorttype : "text"}, {name : 'correctData',width : 100,align : "center",sorttype : "text"}, {name : 'addedVal',width : 100,align : "center",sorttype : "text"}, {name : 'pointDesc',width : 100,align : "center",sorttype : "text"}, {name : 'value',width : 100,align : "center",sorttype : "text"}, {name : 'setVal',width : 100,align : "center",sorttype : "text"}, {name : 'equiCoeff',width : 100,align : "center",sorttype : "text"}, {name : 'shorthand',width : 100,align : "center",sorttype : "text"}, ] break; case 'yx': param.colModel= [ {name : 'ID',width : 60,align : "center",sorttype : "int",editable:false,editoptions:{size:50}}, {name : 'devID',width : 90,align : "center",editable:true,sorttype : "text"}, //sorttype按照排序方式 {name : 'funNum',width : 100,align : "center",editable:true,sorttype : "text"}, {name : 'infoID',width : 100,align : "center",editable:true,sorttype : "text"}, {name : 'relPoint',width : 100,align : "center",sorttype : "text"}, {name : 'property',width : 100,align : "center",sorttype : "text"}, {name : 'value',width : 100,align : "center",sorttype : "text"}, {name : 'setVal',width : 100,align : "center",sorttype : "text"}, {name : 'desc',width : 100,align : "center",sorttype : "text"}, {name : 'pointWrite',width : 100,align : "center",sorttype : "text"}, {name : 'userDef',width : 100,align : "center",sorttype : "text"} ] break; } console.log(param); initTable(param); } function getData(data,title){ $.jgrid.gridUnload('list2'); //注销表格 pageInit(data,title); } /** * 初始化表格 */ function initTable(param){ var mydata=param.data; $.jgrid.gridUnload('list2'); //注销表格 var lastsel; jQuery("#list2").jqGrid( { datatype : "local", colNames : param.title, colModel :param.colModel, gridComplete:function(){ $("#gridpager").css("width","100%"); var newWidth=$("#gridpager").width()+2; //表格多了2像素边框 $("#gridpager").css("width",newWidth); }, rowNum:20, scrollOffset:0, viewrecords : true, rowList:[10,20,40], pager :'#gridpager', multiselect : true, rownumbers:true, //'100%', autotrue, //自适应宽度 height:'auto' }); var localData = {page: 1, total: 2, records: 2, rows: []}; localData.rows = param.data; localData.records =mydata.length; localData.total = (mydata.length % 2 == 0) ? (mydata.length / 2) : (Math.floor(mydata.length / 2) + 1); var reader = { root: function(obj) { return localData.rows; }, page: function(obj) { return localData.page; }, total: function(obj) { return localData.total; }, records: function(obj) { return localData.records; }, repeatitems : false}; $("#list2").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid'); } </script> </body> </html>
效果
