jqgrid表格loca本地数据，实现翻页

首页 > 随笔作者：sunflower 2018年11月14日 15:53 星期三热度：2131° 百度已收录

时间：2018-11-14 15:53 热度：2131°

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
height: 100%;
}
body{
background:burlywood;
height: 100%;
}
#table{
width: 500px;
}
.jqgfirstrow{
height: auto;
}
.ui-jqgrid-pager {
height: 50px!important;
}
</style>
<link rel="stylesheet" href="js/jqGrid/ui.jqgrid.css" />
<link rel="stylesheet" href="js/jqGrid/redmond/jquery-ui-1.8.16.custom.css" />
</head>
<body>
<div>
<table id="table" class="table"></table>
<div id="pager" class="pager"></div>
</div>
<button>点击选中</button>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jqGrid/jquery.jqGrid.js"></script>
<script src="js/jqGrid/grid.locale-cn.js"></script>
<script>
var mydata=[
{name:"张三",sex:"男",id:"1"},
{name:"张三",sex:"男1",id:"2"},
{name:"张三",sex:"男2",id:"3"},
{name:"张三",sex:"男3",id:"4"},
{name:"张三",sex:"男4",id:"5"},
{name:"张三",sex:"男",id:"6"},
{name:"张三",sex:"男",id:"7"},
{name:"张三",sex:"男",id:"8"},
{name:"张三",sex:"男",id:"9"},
{name:"张三",sex:"男",id:"10"},
{name:"张三",sex:"男",id:"11"},
{name:"张三",sex:"男",id:"12"},
{name:"张三",sex:"男",id:"13"},
{name:"张三",sex:"男",id:"14"},
{name:"张三",sex:"男",id:"15"},
{name:"张三",sex:"男",id:"16"},
{name:"张三",sex:"男",id:"17"},
{name:"张三",sex:"男",id:"18"},
{name:"张三",sex:"男",id:"19"},
{name:"张三",sex:"男",id:"20"},
{name:"张三",sex:"男",id:"21"},
{name:"张三",sex:"男",id:"22"},
{name:"张三",sex:"男",id:"23"},
{name:"张三",sex:"男",id:"24"},
{name:"张三",sex:"男",id:"25"},
{name:"张三",sex:"男",id:"26"},
{name:"张三",sex:"男",id:"27"},
];
var grid = $('#table').jqGrid({
datatype: 'local',
data: mydata,
rownumbers: true, //显示序列号
multiselect: false, //单选
colNames:["姓名","性别",""],
colModel: [
{
name: 'name',
index: 'name',
width: 200,
align: "center",
sortable: false
},
{
name: 'sex',
index: 'sex',
width: 200,
align: "center",
sortable: false
},{
name:"id",
index: 'id',
hidden: true
}
],
pager: "#pager",
rowNum: 5,
height: 230,
autowidth: '100%'
});
// 为序号列添加标题
$("#table").jqGrid('setLabel','rn', '序号', {'text-align':'center','vertical-align':'middle'},'');
$("button").click(function(){
var page=26%5==0?(26/5):(parseInt(26/5)+1);
$("#table").setGridParam({page:page}).trigger("reloadGrid");
$("#table").setSelection(26);
});

</script>

╭(′▽`)╯标签走丢啦~

本文作者：sunflower 文章标题： jqgrid表格loca本地数据，实现翻页
本文地址：?post=259
版权声明：若无注明，本文皆为“覆手为雨”原创，转载请保留文章出处。

正文到此结束

js原型链图解

echarts图，设置渐变色

分享本文至：

搜索