jq前端分页插件jqgrid
1.写div
<div class="ibox-content">
<div class="jqGrid_wrapper">
<!-- jqGrid数据列表 开始-->
<table id="table_list_1"></table>
<!-- jqGrid数据列表 结束-->
<!-- jqGrid翻页导航栏 开始-->
<div id="pager_list_1"></div>
<!-- jqGrid翻页导航栏 结束-->
</div>
</div>
2.引用js,css
<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>
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});
}
}
});
});
});
}
}
});
});
源码:
- <%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
- <%@ include file="../inc.jsp" %>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>环境规划管理系统</title>
- <!-- 公用js,css文件引入开始 -->
- <jsp:include page="/comJSP/commonFile.jsp"></jsp:include>
- <!-- 公用js,css文件引入结束 -->
- <!-- 自有js,css文件引入开始 -->
- <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>
- <!-- 自有js,css文件引入结束 -->
- <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>
- <!-- <button type="button" class="btn btn-outline btn-default btn-xs" id="btnUserEdit" title="编辑">
- <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>编辑
- </button> -->
- <button type="button" class="btn btn-outline btn-default btn-xs"
- id="roledelmore" title="批量删除">
- <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>批量删除
- </button>
- <button type="button" class="btn btn-outline btn-default btn-xs"
- id="role" title="导出">
- <i class="glyphicon glyphicon-export" aria-hidden="true"></i>导出
- </button>
- <button type="button" class="btn btn-outline btn-default btn-xs"
- id="btnUserPrint" title="打印">
- <i class="glyphicon glyphicon-print" aria-hidden="true"></i>打印
- </button>
- </div>
- </div>
- <!-- 列表标题及操作按钮 结束 -->
- <!-- 表格开始 -->
- <div class="ibox-content">
- <div class="jqGrid_wrapper">
- <!-- jqGrid数据列表 开始-->
- <table id="table_list_1"></table>
- <!-- jqGrid数据列表 结束-->
- <!-- jqGrid翻页导航栏 开始-->
- <div id="pager_list_1"></div>
- <!-- jqGrid翻页导航栏 结束-->
- </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>