jq前端分页插件jqgrid

╰+哭是因爲堅強的太久メ 2022-05-28 04:45 201阅读 0赞

# jq前端分页插件jqgrid #

原创  2017年03月24日 17:20:46

*  标签：
 *  [jqgrid][] /
 *  [前端][Link 1] /
 *  [插件][Link 2] /
 *  [分页][Link 3]

*  1689

1.写div

2.引用js，css

3.写js

$(function() \{  
$.jgrid.defaults.styleUI = "Bootstrap";  //指定表格使用样式风格,不可修改  
$("\#table\_list\_1").jqGrid(\{  
       url:'$\{pageContext.request.contextPath\}/roleController/list',//获取数据的地址,需修改    
       mtype : "POST",    
       contentType : "application/json",    
       datatype : "json",  
       page : 1,  
       autowidth: true,                       //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度  
       shrinkToFit: true,                     //此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度  
       rownumbers: true,                      //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.  
       rowNum: 10,                            //在grid上显示记录条数，这个参数是要被传递到后台  
       rowList: \[10, 20, 30\],              //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台  
       colNames: \["角色名称" , "角色代码", "创建时间","创建人" ,"修改人","修改时间","状态" ,"操作"\],//列显示名称，是一个数组对象,需修改  
       cellEdit : false,                      //启用或者禁用单元格编辑功能,可修改  
       colModel: \[//常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序  
  \{name: "fRoleName",index: "fRoleName",sortable :false\},  
  \{name: "fRoleCode",index: "fRoleCode",sortable :false\},  
  \{name: "fCreateTime",index: "fCreateTime"\},  
  \{name: "fCreator",index: "fCreator",sortable :false\},  
  \{name: "fModifier",index: "fModifier",sortable :false\},  
  \{name: "fModifiedTime",index: "fModifiedTime"\},  
  \{name: "fSysFlag",index: "fSysFlag",sortable :false,formatter:function(cellvalue, options, rowObject)\{  
   if(cellvalue=='1')return '<span style="color:green">有效</span>';  
   else if(cellvalue=='0')return '<span style="color:red">无效</span>';  
   else return '';  
  \}\},  
  \{name: "fRoleId",index: "fRoleId", sortable :false, formatter:function(cellvalue, options, rowObject)\{  
  return \['<button type="button" class="btn btn-outline btn-default btn-xs btn-edit" data-id="'+cellvalue+'" title="编辑" ><i class="glyphicon glyphicon-edit" aria-hidden="true"></i></button><button type="button" class="btn btn-outline btn-default btn-xs btn-del" data-id="'+cellvalue+'" title="删除"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>'\].join('');  
  \}\}\],  
       pager: "\#pager\_list\_1",              //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置,可修改  
       viewrecords: true,                   //是否要显示总记录数,可修改  
       caption: "角色管理",                         //表格名称,可修改  
       hidegrid: false,                     //启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效,可修改  
       multiselect: true,                   //定义是否可以多选,可修改  
       multiboxonly:true,                   //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用,可修改  
       jsonReader: \{                        //描述json 数据格式的数组,需修改  
        root: 'list',  
   page: "current",                   // json中代表当前页码的数据  
   total: "pages",    // json中代表页码总数的数据  
   records: "total",// json中代表数据行总数的数据  
   repeatitems: false,             // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。  
   cell: "cell",  
   id: "fRoleId",  
   userdata: "userdata",  
   \},onSelectRow: function(id)\{        //当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用  
     
       \},gridComplete:function()\{          //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件  
        //返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，value为所在行的列的值，如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据，它得到的并不是编辑后的值  
        var rowData=$("\#table\_list\_1").jqGrid("getRowData");  
        //角色添加  
        $('\#roleadd').click(function () \{   
            layer.open(\{  
            type: 2,  
            title: '角色添加',  
               shadeClose: true,  
               shade: 0.8,  
               area: \['850px', '400px'\],  
               content: 'role-add'   
            \});   
            \});  
        if(rowData.length>0)\{  
        //选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow，onselectrow默认为ture  
        $("\#table\_list\_1").setSelection(rowData\[0\].id);  
        //搜索功能  
        $("\#rolefind").click(function() \{  
           $("\#table\_list\_1").jqGrid('searchGrid', \{  
           multipleSearch:false,  
           multipleGroup:false,  
             /\* sopt : \[ 'cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew' \] \*/  
           \});  
        \});  
        $("\#rolerepeat").click(function() \{  
/\*          $("input\[name='fRoleName'\]").val("");  
               $("\#table\_list\_1").jqGrid('setGridParam',\{    
                   datatype:'json',    
                   postData:\{'searchString':''\}, //发送数据    
                   page:1    
               \}).trigger("reloadGrid"); //重新载入  \*/  
        window.location.reload();  
           \});  
        //批量删除  
        $("\#roledelmore").click(function()\{    
                   var rowDelData = jQuery('\#table\_list\_1').jqGrid('getGridParam','selarrrow');    
                   if(rowDelData.length > 0)\{    
                       var ids = "";    
                       for(var i=0;i<rowDelData.length;i++)\{    
                           //mainId是colModel中的一属性    
                           console.log(rowDelData\[i\]);  
                           var mainId = rowDelData\[i\];    
                           if(ids != "")\{    
                               ids = ids + "," + mainId;    
                           \}else\{    
                           ids = mainId;    
                           \}    
                       \}    
            layer.confirm('确认要删除吗？',function(index)\{  
            $.ajax(\{  
                        type: "POST",  
                        url: "$\{pageContext.request.contextPath\}/roleController/delmore",  
                        data: \{fRolemore:ids\},  
                        dataType: "json",  
                        async:false,   
                        success: function(data)\{  
                       if(data.success)\{  
                         layer.msg('已删除!',\{icon:1,time:1500\});  
                         setTimeout(function () \{   
                        $("\#table\_list\_1").trigger("reloadGrid");  
                         \}, 1500);      
                       \}else\{  
                      layer.msg('操作失败!',\{icon:1,time:1500\});  
                   \}   
                        \}  
                 \});  
              \});   
                       //$.jqgridDeleteButtonClick(pageGrid.gridName,pageGrid.searchParameters,deleteUrl)    
                   \}else\{    
                   layer.msg('请选择需要删除的记录！!',\{icon:1,time:1500\});  
                   \}    
               \});   
        //角色修改  
            $('.btn-edit').click(function () \{  
            var dataid=$(this).data("id");  
            layer.open(\{  
               type: 2,  
               title: '角色修改',  
               shadeClose: true,  
               shade: 0.8,  
               area: \['850px', '400px'\],  
               content: 'role-up?fRoleId='+dataid   
            \});   
            \});  
        //角色删除  
            $('.btn-del').click(function () \{   
            var dataid=$(this).data("id");  
            layer.confirm('确认要删除吗？',function(index)\{  
            $.ajax(\{  
                        type: "POST",  
                        url: "$\{pageContext.request.contextPath\}/roleController/del",  
                        data: \{fRoleId:dataid\},  
                        dataType: "json",  
                        async:false,   
                        success: function(data)\{  
                       if(data.success)\{  
                         layer.msg('已删除!',\{icon:1,time:1500\});  
                         setTimeout(function () \{   
                        $("\#table\_list\_1").trigger("reloadGrid");  
                         \}, 1500);      
                       \}else\{  
                      layer.msg('操作失败!',\{icon:1,time:1500\});  
                   \}   
                        \}  
                 \});  
              \});  
            \});  
        \}  
       \}      
   \});   
\});

源码：

**\[html\]**  [view plain][]  [copy][view plain]

1.  <%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>  
2.  <%@ include file="../inc.jsp" %>  
3.  <!DOCTYPE html>  
4.  <html>  
5.      <head>  
6.      <meta charset="UTF-8">  
7.      <title>环境规划管理系统</title>  
8.        
9.      <jsp:include page="/comJSP/commonFile.jsp"></jsp:include>  
10.       
11.       
12.       
13.     <link href="$\{pageContext.request.contextPath\}/css/plugins/jqgrid/ui.jqgridffe4.css?0820" rel="stylesheet">  
14.       
15. <script src="$\{pageContext.request.contextPath\}/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>  
16. <script src="$\{pageContext.request.contextPath\}/js/plugins/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>  
17. <script src="$\{pageContext.request.contextPath\}/js/plugins/layer/layer.min.js"></script>  
18.       
19.     <style type="text/css">  
20.         .conn \{  
21.             border: 0 solid \#000;  
22.             height: 100%;  
23.             text-align: center;  
24.             width: 100%;  
25.         \}  
26.         .conn img \{  
27.             height: 100%;  
28.             vertical-align: middle;  
29.             width: 100%;  
30.         \}  
31.         .ui-search-table .columns,.ui-search-table .operators\{  
32.             display: none;;  
33.         \}  
34.     </style>  
35.     <script type="text/javascript">  
36.     </script>  
37.     </head>  
38. <body>  
39.     <div class="all">  
40.           
41.         <jsp:include page="/comJSP/menu.jsp"></jsp:include>  
42.           
43.           
44.         <div class="pagebody">  
45.           
46.           
47.         <div class="ibox-title">  
48.             <div class="ibox-tools">  
49.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
50.                     id="rolerepeat" data-toggle="modal" data-target="\#roleModal" title="刷新 ">  
51.                     <i class="glyphicon glyphicon-repeat " aria-hidden="true"></i>刷新  
52.                 </button>  
53.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
54.                     id="rolefind" data-toggle="modal" data-target="\#roleModal" title="搜索">  
55.                     <i class="glyphicon glyphicon-search " aria-hidden="true"></i>搜索  
56.                 </button>  
57.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
58.                     id="roleadd" data-toggle="modal" data-target="\#roleModal" title="新增">  
59.                     <i class="glyphicon glyphicon-plus " aria-hidden="true"></i>新增  
60.                 </button>  
61.                   
64.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
65.                     id="roledelmore" title="批量删除">  
66.                     <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>批量删除  
67.                 </button>  
68.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
69.                     id="role" title="导出">  
70.                     <i class="glyphicon glyphicon-export" aria-hidden="true"></i>导出  
71.                 </button>  
72.                 <button type="button" class="btn btn-outline btn-default btn-xs"  
73.                     id="btnUserPrint" title="打印">  
74.                     <i class="glyphicon glyphicon-print" aria-hidden="true"></i>打印  
75.                 </button>  
76.             </div>  
77.         </div>  
78.           
79.           
80.           
81.         <div class="ibox-content">  
82.             <div class="jqGrid\_wrapper">  
83.                   
84.                 <table id="table\_list\_1"></table>  
85.                   
86.                   
87.                 <div id="pager\_list\_1"></div>  
88.                   
89.             </div>  
90.         </div>  
91.           
92.           
93.           
94.           
95.         <jsp:include page="/comJSP/foot.jsp"></jsp:include>  
96.           
97.         </div>  
98.     </div>  
99.     <script type="text/javascript">  
100.         $(function() \{  
101.              $.jgrid.defaults.styleUI = "Bootstrap";       //指定表格使用样式风格,不可修改  
102.              $("\#table\_list\_1").jqGrid(\{  
103.                     url:'$\{pageContext.request.contextPath\}/roleController/list',//获取数据的地址,需修改    
104.                     mtype : "POST",    
105.                     contentType : "application/json",    
106.                     datatype : "json",  
107.                     page : 1,  
108.                     autowidth: true,                       //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度  
109.                     shrinkToFit: true,                     //此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度  
110.                     rownumbers: true,                      //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'.  
111.                     rowNum: 10,                            //在grid上显示记录条数，这个参数是要被传递到后台  
112.                     rowList: \[10, 20, 30\],              //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台  
113.                     colNames: \["角色名称" , "角色代码", "创建时间","创建人" ,"修改人","修改时间","状态" ,"操作"\],     //列显示名称，是一个数组对象,需修改  
114.                     cellEdit : false,                      //启用或者禁用单元格编辑功能,可修改  
115.                     colModel: \[     //常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序  
116.                                \{name: "fRoleName",index: "fRoleName",sortable :false\},  
117.                                \{name: "fRoleCode",index: "fRoleCode",sortable :false\},  
118.                                \{name: "fCreateTime",index: "fCreateTime"\},  
119.                                \{name: "fCreator",index: "fCreator",sortable :false\},  
120.                                \{name: "fModifier",index: "fModifier",sortable :false\},  
121.                                \{name: "fModifiedTime",index: "fModifiedTime"\},  
122.                                \{name: "fSysFlag",index: "fSysFlag",sortable :false,formatter:function(cellvalue, options, rowObject)\{  
123.                                     if(cellvalue=='1')  return '<span style="color:green">有效</span>';  
124.                                     else if(cellvalue=='0') return '<span style="color:red">无效</span>';  
125.                                     else return '';  
126.                                \}\},  
127.                                \{name: "fRoleId",index: "fRoleId", sortable :false, formatter:function(cellvalue, options, rowObject)\{  
128.                                    return \['<button type="button" class="btn btn-outline btn-default btn-xs btn-edit" data-id="'+cellvalue+'" title="编辑" ><i class="glyphicon glyphicon-edit" aria-hidden="true"></i></button><button type="button" class="btn btn-outline btn-default btn-xs btn-del" data-id="'+cellvalue+'" title="删除"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>'\].join('');  
129.                                \}\}\],  
130.                     pager: "\#pager\_list\_1",              //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置,可修改  
131.                     viewrecords: true,                   //是否要显示总记录数,可修改  
132.                     caption: "角色管理",                         //表格名称,可修改  
133.                     hidegrid: false,                     //启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效,可修改  
134.                     multiselect: true,                   //定义是否可以多选,可修改  
135.                     multiboxonly:true,                   //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用,可修改  
136.                     jsonReader: \{                        //描述json 数据格式的数组,需修改  
137.                         root: 'list',  
138.                         page: "current",                   // json中代表当前页码的数据  
139.                         total: "pages",    // json中代表页码总数的数据  
140.                         records: "total",// json中代表数据行总数的数据  
141.                         repeatitems: false,             // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。  
142.                         cell: "cell",  
143.                         id: "fRoleId",  
144.                         userdata: "userdata",  
145.                     \},onSelectRow: function(id)\{        //当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用  
146.                           
147.                     \},gridComplete:function()\{          //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件  
148.                         //返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，value为所在行的列的值，如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据，它得到的并不是编辑后的值  
149.                         var rowData=$("\#table\_list\_1").jqGrid("getRowData");  
150.                         //角色添加  
151.                         $('\#roleadd').click(function () \{   
152.                             layer.open(\{  
153.                                 type: 2,  
154.                                 title: '角色添加',  
155.                                 shadeClose: true,  
156.                                 shade: 0.8,  
157.                                 area: \['850px', '400px'\],  
158.                                 content: 'role-add'   
159.                             \});   
160.                         \});  
161.                         if(rowData.length>0)\{  
162.                             //选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow，onselectrow默认为ture  
163.                             $("\#table\_list\_1").setSelection(rowData\[0\].id);  
164.                             //搜索功能  
165.                             $("\#rolefind").click(function() \{  
166.                                     $("\#table\_list\_1").jqGrid('searchGrid', \{  
167.                                         multipleSearch:false,  
168.                                         multipleGroup:false,  
169.                                       /\* sopt : \[ 'cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew' \] \*/  
170.                                     \});  
171.                             \});  
172.                             $("\#rolerepeat").click(function() \{  
173. /\*                                  $("input\[name='fRoleName'\]").val("");  
174.                                 $("\#table\_list\_1").jqGrid('setGridParam',\{    
175.                                     datatype:'json',    
176.                                     postData:\{'searchString':''\}, //发送数据    
177.                                     page:1    
178.                                 \}).trigger("reloadGrid"); //重新载入  \*/  
179.                                 window.location.reload();  
180.                             \});  
181.                             //批量删除  
182.                             $("\#roledelmore").click(function()\{    
183.                                 var rowDelData = jQuery('\#table\_list\_1').jqGrid('getGridParam','selarrrow');    
184.                                 if(rowDelData.length > 0)\{    
185.                                     var ids = "";    
186.                                     for(var i=0;i<rowDelData.length;i++)\{    
187.                                         //mainId是colModel中的一属性    
188.                                         console.log(rowDelData\[i\]);  
189.                                         var mainId = rowDelData\[i\];    
190.                                         if(ids != "")\{    
191.                                             ids = ids + "," + mainId;    
192.                                         \}else\{    
193.                                             ids = mainId;    
194.                                         \}    
195.                                     \}    
196.                                     layer.confirm('确认要删除吗？',function(index)\{  
197.                                         $.ajax(\{  
198.                                                  type: "POST",  
199.                                                  url: "$\{pageContext.request.contextPath\}/roleController/delmore",  
200.                                                  data: \{fRolemore:ids\},  
201.                                                  dataType: "json",  
202.                                                  async:false,   
203.                                                  success: function(data)\{  
204.                                                      if(data.success)\{  
205.                                                       layer.msg('已删除!',\{icon:1,time:1500\});  
206.                                                       setTimeout(function () \{   
207.                                                           $("\#table\_list\_1").trigger("reloadGrid");  
208.                                                       \}, 1500);      
209.                                                      \}else\{  
210.                                                       layer.msg('操作失败!',\{icon:1,time:1500\});  
211.                                                      \}   
212.                                                  \}  
213.                                           \});  
214.                                        \});   
215.                                     //$.jqgridDeleteButtonClick(pageGrid.gridName,pageGrid.searchParameters,deleteUrl)    
216.                                 \}else\{    
217.                                     layer.msg('请选择需要删除的记录！!',\{icon:1,time:1500\});  
218.                                 \}    
219.                             \});   
220.                             //角色修改  
221.                             $('.btn-edit').click(function () \{  
222.                                 var dataid=$(this).data("id");  
223.                                 layer.open(\{  
224.                                     type: 2,  
225.                                     title: '角色修改',  
226.                                     shadeClose: true,  
227.                                     shade: 0.8,  
228.                                     area: \['850px', '400px'\],  
229.                                     content: 'role-up?fRoleId='+dataid   
230.                                 \});   
231.                             \});  
232.                             //角色删除  
233.                             $('.btn-del').click(function () \{   
234.                                 var dataid=$(this).data("id");  
235.                                 layer.confirm('确认要删除吗？',function(index)\{  
236.                                     $.ajax(\{  
237.                                              type: "POST",  
238.                                              url: "$\{pageContext.request.contextPath\}/roleController/del",  
239.                                              data: \{fRoleId:dataid\},  
240.                                              dataType: "json",  
241.                                              async:false,   
242.                                              success: function(data)\{  
243.                                                  if(data.success)\{  
244.                                                   layer.msg('已删除!',\{icon:1,time:1500\});  
245.                                                   setTimeout(function () \{   
246.                                                       $("\#table\_list\_1").trigger("reloadGrid");  
247.                                                   \}, 1500);      
248.                                                  \}else\{  
249.                                                   layer.msg('操作失败!',\{icon:1,time:1500\});  
250.                                                  \}   
251.                                              \}  
252.                                       \});  
253.                                    \});  
254.                             \});  
255.                         \}  
256.                     \}         
257.                 \});   
258.         \});  
259.     </script>  
260. </body>  
261. </html>

效果图：

![Center][]

[jqgrid]: http://so.csdn.net/so/search/s.do?q=jqgrid&t=blog
[Link 1]: http://so.csdn.net/so/search/s.do?q=%E5%89%8D%E7%AB%AF&t=blog
[Link 2]: http://so.csdn.net/so/search/s.do?q=%E6%8F%92%E4%BB%B6&t=blog
[Link 3]: http://so.csdn.net/so/search/s.do?q=%E5%88%86%E9%A1%B5&t=blog
[view plain]: https://blog.csdn.net/lze693/article/details/65633835#
[Center]: /images/20220528/46c9a33569b847e18119a7aff2061f9c.png