jqgrid加载本地数据

 1.jqgrid需要的js和css，看个人需要

<!-- jqgridjs -->
<script src="../../shared/jqgrid/js/jquery.jqGrid.min.js"
    type="text/javascript"></script>
<script src="../../shared/jqgrid/js/jquery.jqGrid.extend.js"
    type="text/javascript"></script>
<script type="text/javascript"
    src="../../shared/jqgrid/js/i18n/grid.locale-cn.js"></script>

css

<!-- jqgrid样式 -->
<link href="../../shared/jqgrid/css/ui.jqgrid.css" type="text/css"
    rel="stylesheet" />

2.准备jqgrid页面容器div

            <!-- 页面主内容 -->    
            <div class="gridcontent" style="margin-top:5px">
                <table id="doc_table"></table>
                <div id="doc_page"></div>
            </div>

3.js加载个空表格，类型是local加载本地数据，json访问后台地址

function loadGrid_doc() {
    $("#doc_table").jqGrid(
        {
            //url : urlPath+'/documents?noCache='+new Date().getTime(),
        //    datatype : "json",//页面加载的时候不显示数据
            datatype : "local",//加载本地数据
            colNames : ['ID','文档编号','文档名称','文档类型','文档来源','所属部门','创建人','创建时间','状态','操作'],
            colModel : [ 
                         {name : 'id',index : 'id',hidden:true},
                         {name : 'sn',index : 'sn',width : 100,align:"center"},
                          {name : 'name',index : 'name',width : 100,align : "center"},
                          {name : 'secretName',index : 'secretName',width : 100,align : "center"},
                         {name : 'sourceType',index : 'sourceType',width : 80,align : "center"},
                         {name : 'departmentName',index : 'departmentName',width : 150,align : "center"},
                         {name : 'creator',index : 'creator',width : 110,align:"center"},
                         {name : 'create_time',index : 'create_time',width : 150,align:"center",formatter:timeFormatter},
                            {name : 'doStatus',index : 'doStatus',width : 80,align:"center",formatter:statusFormatter},
                         {name : '',index : '',width : 200,align:"center" ,formatter:opFormatter}, //name为空，拼数据时可以忽略
                        ], 
                        multiselect: false,
                        rowNum : 10,
                        rowList : [ 10, 15,30 ],
            pager : '#doc_page'
        });
    }

4.准备本地数据，数组里套对象，注意数据个数和列数对应，最后一列操作按钮列，由于没有name,可以不考虑

var rows=[{id:1,sn:123,name:'文档1',secretName:'普通',sourceType:'OA',departmentName:'部门1',creator:'管理员',create_time:'1574673022',doStatus:''}];
 

5.加载进jqgrid插件

//加载jqGrid，页面加载成功函数
    $(document).ready(function() {
        loadGrid_doc(); //加载空的表格
        $(window).resize(function() {
            $("#doc_table").jqGrid("autoSize");
        }).trigger('resize');    
          //本地数据循环遍历，加载进表格
           for(var i=0;i<rows.length;i++){
                    $("#doc_table").jqGrid('addRowData',i+1,rows[i]);
                  }
        
    });

6.格式化方法，例如格式化按钮，在文字上绑定超链接，跳转方法

  function opFormatter(cellvalue, options, rowObject){
          if(rowObject.sourceType == 1){
              return "<a style=\"color:blue\" href=\"javascript:show('"+rowObject.id+"');\">查看</a>";
          }else{
              var opt =" | ";
             var opt1= "<a style=\"color:blue\" href=\"javascript:showServer('"+rowObject.id+"');\">查看</a>";
             var opt2= "<a style=\"color:blue\" href=\"javascript:showServer('"+rowObject.id+"');\">打印</a>";
             var opt3= "<a style=\"color:blue\" href=\"javascript:showServer('"+rowObject.id+"');\">外发</a>";
             var opt4= "<a style=\"color:blue\" href=\"javascript:showServer('"+rowObject.id+"');\">删除</a>";
             
              return opt1+opt+opt2+opt+opt3+opt+opt4;
          }
     }

 

7.效果图