jqgrid表格loca本地数据,实现翻页
首页 > 随笔    作者:sunflower   2018年11月14日 15:53 星期三   热度:808°   百度已收录  
时间:2018-11-14 15:53   热度:808° 
<!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
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: sunflower