jgGrid注销表格（动态修改表头）以及前台分页

实例代码  

<!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,
                //width:'100%',
                autowidth:true, //自适应宽度
                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>

 

 效果

posted @ 2019-02-22 10:27  人在路途  阅读(347)  评论(0)  编辑  收藏  举报