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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
