jqGrid 初始化本地模拟数据

https://blog.****.net/idweiwei/article/details/81286021

jqGrid 初始化本地模拟数据

onSelectRow 是jqgrid 点击事件 ；

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-cn.js"></script>
</head>
<body>
<div style="width: 1000px;margin: 50px auto;">
<table id="gridTable"></table>
<div id="gridTablepager"></div>
</div>
<script>
$(function () {

var dataList = [
{"id": "1", "hnbc": "海纳百川1", "yrnd": "有容乃大1", "blqr": "壁立千仞1", "wyzg": "无欲则刚1"},
{"id": "2", "hnbc": "海纳百川2", "yrnd": "有容乃大2", "blqr": "壁立千仞2", "wyzg": "无欲则刚2"},
{"id": "3", "hnbc": "海纳百川3", "yrnd": "有容乃大3", "blqr": "壁立千仞3", "wyzg": "无欲则刚3"},
{"id": "4", "hnbc": "海纳百川4", "yrnd": "有容乃大4", "blqr": "壁立千仞4", "wyzg": "无欲则刚4"},
{"id": "5", "hnbc": "海纳百川5", "yrnd": "有容乃大5", "blqr": "壁立千仞5", "wyzg": "无欲则刚5"}
];

$("#gridTable").jqGrid({
datatype: 'local', // 重点一定要设置为local！！！
autowidth: true,
autoheight: true,
multiboxonly: true, //复选框
multiselect: true, //复选框
colNames: ["ID", "海纳百川", "有容乃大", "壁立千仞", "无欲则刚"],
colModel: [
{name: "id", index: "id", hidden: true},
{name: "hnbc", index: "hnbc", align: "center", sortable: false},
{name: "yrnd", index: "yrnd", align: "center", sortable: false},
{name: "blqr", index: "blqr", align: "center", sortable: false},
{name: "wyzg", index: "wyzg", align: "center", search: false, sortable: false}
],
pager: "#gridTablepager", //分页容器
rowNum: 10,
rownumbers: true, //是否显示序号
rowList: [10, 20, 30],
sortname: "createDate",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
onSelectRow: function() {
//当前点击行id 点击触发
selectedRowIndex = $("#" + this.id).getGridParam('selrow');
alert(selectedRowIndex)
},
});
var localData = {page: 1, total: 0, records: "0", rows: dataList};
localData.rows = dataList;
localData.records = dataList.length;
localData.total = (dataList.length % 5 == 0) ? (dataList.length / 5) : (Math.floor(dataList.length / 5) + 1);
var reader = {
root: function (obj) {
return localData.rows;
},
page: function (obj) {
return localData.page;
},
total: function (obj) {
return localData.total;
},
records: function (obj) {
return localData.records;
}, repeatitems: false
};
$("#gridTable").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid');

});
</script>

</body>
</html>

jqGrid 初始化本地模拟数据

相关推荐