四、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>
