1、基本引用
1、jquery
<script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
2、fontawesome
<link rel="stylesheet" type="text/css" href="plugins/fontawesome-5.11.2/css/all.min.css"/>
3、bootstrap
<link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.3.1/css/bootstrap.min.css"/>
<script src="plugins/bootstrap-4.3.1/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
4、ui.jqgrid-bootstrap4
<link rel="stylesheet" type="text/css" href="plugins/jqGrid/css/ui.jqgrid-bootstrap4.css"/>
5、jqgrid
<script src="plugins/jqGrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
2、基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="plugins/fontawesome-5.11.2/css/all.min.css"/>
<link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.3.1/css/bootstrap.min.css"/>
<script src="plugins/bootstrap-4.3.1/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="plugins/jqGrid/css/ui.jqgrid-bootstrap4.css"/>
<script src="plugins/jqGrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
<script type="text/javascript">
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = 'fontAwesome';
$("#grid").jqGrid({
datatype: 'json',
url: 'data/data.json',
regional: 'cn',
colModel: [
{ name: 'name', label : '名稱' },
{ name: 'phone', label : '電話' }
],
height: 'auto',
autowidth: true,
pager: '#pager',
rownumbers: true,
rownumWidth: 40,
rowNum: 20,
rowList: [10, 15, 25],
viewrecords: true,
})
</script>
</html>
3、自定義返回數據格式
<script type="text/javascript">
$("#grid").jqGrid({
//... 省略 ...
jsonReader : {
root: "customRows", //列表數據根節點
page: "customPage", //當前頁碼
total: "customTotal", //總頁數
records: "customRecords", //總條數
id: "customId", //行唯一標識
userdata: "customUserdata" //返回用戶數據
}
})
</script>
返回數據格式
{
"customTotal": "10",
"customPage": "1",
"customRecords": "20",
"customUserdata": {
"username": "admin",
"password": "admin"
},
"customRows" : [
{"customId" :"111", "name": "Bob", "phone": "232-532-6268", "addres":"address 1"},
{"customId" :"222", "name": "Jeff", "phone": "365-267-8325", "addres":"address 2"}
]
}
//獲取自定義數據方式
var customUserdata = $("#grid").jqGrid('getGridParam', 'userData');
4、自定義請求接口
<script type="text/javascript">
$("#grid").jqGrid({
//自定義請求
datatype: function(postdata){
var thegrid = this;
$.ajax({
url: 'data/data.json',
dataType:"json",
complete: function(data,stat){
if(stat=="success") {
thegrid.addJSONData(data.responseJSON);
}
}
});
},
//... 省略 ...
})
</script>
5、行選中設置及事件
<script type="text/javascript">
$("#grid").jqGrid({
//... 省略 ...
multiselect: true,
})
$("#grid").on("jqGridSelectRow", function(e, rowid, status){ });
$("#grid").on("jqGridSelectAll", function(e, rowids, status){ });
</script>
6、樹形表格
<style type="text/css">
.tree-leaf{
font-size: 10px;color: #1890ff;
line-height: 24px !important;
}
.tree-minus{
font-size: 16px;color: #1890ff;
line-height: 20px !important;
}
.tree-plus{
font-size: 16px;color: #1890ff;
line-height: 20px !important;
}
</style>
<script type="text/javascript">
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = 'fontAwesome';
$.jgrid.no_legacy_api = true;
$("#grid").jqGrid({
//... 省略 ...
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "json",
tree_root_level: 0,
treeIcons: {
plus:'fa fa-caret-right',
minus:'fa fa-caret-down',
leaf:'fa fa-circle'
},
ExpandColumn : 'name',
ExpandColClick: true,
treeReader: {
level_field: "treeLevel",
parent_id_field: "treeParentId",
leaf_field: "treeLeaf",
expanded_field: "treeExpanded",
loaded_field: true,
},
})
</script>
//返回數據格式
[
{
"id": 1, "name": "系統管理", "url": "/sys/system", "sort": 10,
"treeLevel": 1, "treeParentId": 0, "treeLeaf": false, "treeExpanded": true
},
{
"id": 10, "name": "系統用戶", "url": "/sys/user", "sort": 10,
"treeLevel": 2, "treeParentId": 1, "treeLeaf": true, "treeExpanded": true
},
{
"id": 20, "name": "角色管理", "url": "/sys/role", "sort": 10,
"treeLevel": 2, "treeParentId": 1, "treeLeaf": true, "treeExpanded": true
}
]
