jq前端分页插件jqgrid

jq前端分页插件jqgrid

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

• 标签：
• jqgrid /
• 前端 /
• 插件 /
• 分页

• 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 '有效';
   else if(cellvalue=='0')return '无效';
   else return '';
  }},
  {name: "fRoleId",index: "fRoleId", sortable :false, formatter:function(cellvalue, options, rowObject){
  return [''].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                           //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});
                     } 
                         }
                  });
               });
             });
         }
       }     
   }); 
});

源码：

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../inc.jsp" %>
>
<html>
    <head>
    <meta charset="UTF-8">
    <title>环境规划管理系统title>

    <jsp:include page="/comJSP/commonFile.jsp">jsp:include>



    <link href="${pageContext.request.contextPath}/css/plugins/jqgrid/ui.jqgridffe4.css?0820" rel="stylesheet">

<script src="${pageContext.request.contextPath}/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js?0820">script>
<script src="${pageContext.request.contextPath}/js/plugins/jqgrid/jquery.jqGrid.minffe4.js?0820">script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js">script>

    <style type="text/css">
        .conn {
            border: 0 solid #000;
            height: 100%;
            text-align: center;
            width: 100%;
        }
        .conn img {
            height: 100%;
            vertical-align: middle;
            width: 100%;
        }
        .ui-search-table .columns,.ui-search-table .operators{
            display: none;;
        }
    style>
    <script type="text/javascript">
    script>
    head>
<body>
    <div class="all">

        <jsp:include page="/comJSP/menu.jsp">jsp:include>


        <div class="pagebody">


        <div class="ibox-title">
            <div class="ibox-tools">
                <button type="button" class="btn btn-outline btn-default btn-xs"
                    id="rolerepeat" data-toggle="modal" data-target="#roleModal" title="刷新 ">
                    <i class="glyphicon glyphicon-repeat " aria-hidden="true">i>刷新
                button>
                <button type="button" class="btn btn-outline btn-default btn-xs"
                    id="rolefind" data-toggle="modal" data-target="#roleModal" title="搜索">
                    <i class="glyphicon glyphicon-search " aria-hidden="true">i>搜索
                button>
                <button type="button" class="btn btn-outline btn-default btn-xs"
                    id="roleadd" data-toggle="modal" data-target="#roleModal" title="新增">
                    <i class="glyphicon glyphicon-plus " aria-hidden="true">i>新增
                button>



        <div class="ibox-content">
            <div class="jqGrid_wrapper">

                <table id="table_list_1">table>


                <div id="pager_list_1">div>

            div>
        div>




        <jsp:include page="/comJSP/foot.jsp">jsp:include>

        div>
    div>
    <script type="text/javascript">
        $(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});
                                                 }
                                             }
                                      });
                                   });
                            });
                        }
                    }
                });
        });
    script>
body>
html>

效果图：