jqgrid分页控件
软件设计 2017-04-10
工作中为了，处理分页问题，使用了两种分页控件，一种是处理表格的jqgrid控件，一种是自定义的jquery.page.js。
jqgrid(http://blog.mn886.net/jqGrid/ 中文的控件教程，https://github.com/tonytomov/jqGrid 这是控件的github)
使用前的引用
<script type="text/javascript" src="js/jquery/jquery.min.js"></script> <script type="text/javascript" src="js/jqgrid/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/jqgrid/i18n/grid.locale-cn.js"></script><br> <script type="text/javascript" src="js/fenye.js"></script>
使用jqgrid首先在body里定义一个div段，这是为后台呈现json的数据保留位置。
<div class="casetalbe">
<!-- main content -->
<div class="busi_main">
<table id="jqgrid"></table>
<div id="jqpage"></div>
</div>
</div>
接下来就是js部分
定义一个showgrid()函数来负责加载数据，然后在里面引用jqgrid方法来加载数据。
$("#jqgrid").jqGrid(
{
url : 'data/JSONData.json',
datatype : "json",
mtype:'get',
jsonReader : {
root: "items",//集合的根名称
page: "currentpage",//开始页面
total: "totalpage",//总页数
records: "recordcount", //总记录数
repeatitems: false,
id: "id" //此处需和表主健对应
},
colNames : ["","","","医疗号","申请时间","患者","机构", "专家","类型","病情","状态","状态","状态","预计完成时间","操作"],
colModel : [
{name:'ID',index:'ID', width:0,sortable: false,hidden:true,align:"center"},//ID，隐藏
{name:'CONSULTID',index:'CONSULTID', width:0,sortable: false,hidden:true,align:"center"},//参数Consultid，负责下面的链接地址，隐藏
{name:'CARDNO',index:'CARDNO', width:0,sortable: false,hidden:true,align:"center"},//参数cardno，隐藏
{name:'MEETID',index:'MEETID', width:0,sortable: false,align:"center"},//医疗号
{name:'REGDATE',index:'REGDATE', width:100,sortable: false,align:"center"},//提交申请时间 隐藏某行数据加入hidden:true
{name:'APPLYDOCTOR',index:'APPLYDOCTOR', width:100,sortable: false,align:"center"},//姓名
{name:'ORDEREXPERTUNIT',index:'ORDEREXPERTUNIT', width:100,sortable: false,align:"center"},//机构
{name:'ARRANGEDOCTOR',index:'ARRANGEDOCTOR', width:100,sortable: false,align:"center"},//医生
{name:'CONSULTTYPE',index:'CONSULTTYPE', width:100,sortable: false,align:"center"},//诊疗方式、类型
{name:'CONSULTLEVEL',index:'CONSULTLEVEL', width:100,sortable: false,align:"center"},//严重程度
{name:'ID',index:'ID', width:100,sortable: false,formatter:status1Formatter,align:"center"},//状态
{name:'ID',index:'ID', width:100,sortable: false,formatter:status2Formatter,align:"center"},//状态
{name:'ID',index:'ID', width:100,sortable: false,formatter:status3Formatter,align:"center"},//状态
{name:'ID',index:'ID', width:200,sortable: false,formatter:FinishTimeFormatter,align:"center"},//预计完成时间
{name:'ID',index :'ID',sortable: false,formatter:handleFormatter,align:"center"}//操作
],
rowNum:50,//每页数据显示条数
rowList:[50,75,100],//每页数据显示条数
pager: '#jqpage',//Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true,//显示数据总记录数
sortorder: "desc",//倒序
//caption:"",
multiselect: false, //复选框
recordpos: 'right', //总记录显示位置：居右
height: $(window).height - 90, //行高 height: "100%"
//height:document.body.clientHeight -3,
hidegrid: false, //Grid是否隐藏
altRows:true,//隔行变色
altclass:'ui-custom-back',//隔行变色class
// width:document.body.clientWidth -3,
//width:$(window).width()-100,
autoWidth:true, //自动列宽
shrinkToFit:true,//则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
onSelectRow:null,//单击方法
ondblClickRow:null//双击方法
});
jqgrid()这个方法和ajax方法很类似，url是json的地址，datatype是数据类型，mtype是请求类型，jsonReader是请求时候的json里面传递的参数，colName列表的标题，colModel标题下面对应的数据。需要指出来的是可以直接展示数据，也可以通过调用函数的形式让数据展示，甚至形成一个操作处理，例如状态栏是返回计算后的结果，操作栏是显示可以点击的操作链接。
下面是整个的showgrid()函数
function showgrid(){
var date = new Date();
$("#jqgrid").jqGrid(
{
url : 'data/JSONData.json',
datatype : "json",
mtype:'get',
jsonReader : {
root: "items",//集合的根名称
page: "currentpage",//开始页面
total: "totalpage",//总页数
records: "recordcount", //总记录数
repeatitems: false,
id: "id" //此处需和表主健对应
},
//colNames : ["","","","远程医疗号","会诊申请时间","患者","会诊机构", "会诊专家","会诊类型","患者病情","","","申请","报告","质评","状态"],
colNames : ["","","","远程医疗号","会诊申请时间","患者","会诊机构", "会诊专家","会诊类型","患者病情","分诊状态","会诊状态","扣款状态","预计会诊完成时间","操作"],
colModel : [
{name:'ID',index:'ID', width:0,sortable: false,hidden:true,align:"center"},//ID，隐藏
{name:'CONSULTID',index:'CONSULTID', width:0,sortable: false,hidden:true,align:"center"},//参数Consultid，负责下面的链接地址，隐藏
{name:'CARDNO',index:'CARDNO', width:0,sortable: false,hidden:true,align:"center"},//参数cardno，隐藏
{name:'MEETID',index:'MEETID', width:0,sortable: false,align:"center"},//远程医疗号
{name:'REGDATE',index:'REGDATE', width:100,sortable: false,align:"center"},//提交申请时间 隐藏某行数据加入hidden:true
{name:'APPLYDOCTOR',index:'APPLYDOCTOR', width:100,sortable: false,align:"center"},//患者姓名
{name:'ORDEREXPERTUNIT',index:'ORDEREXPERTUNIT', width:100,sortable: false,align:"center"},//会诊机构
{name:'ARRANGEDOCTOR',index:'ARRANGEDOCTOR', width:100,sortable: false,align:"center"},//会诊医生
{name:'CONSULTTYPE',index:'CONSULTTYPE', width:100,sortable: false,align:"center"},//诊疗方式、类型
{name:'CONSULTLEVEL',index:'CONSULTLEVEL', width:100,sortable: false,align:"center"},//严重程度
{name:'ID',index:'ID', width:100,sortable: false,formatter:status1Formatter,align:"center"},//分诊状态
{name:'ID',index:'ID', width:100,sortable: false,formatter:status2Formatter,align:"center"},//会诊状态
{name:'ID',index:'ID', width:100,sortable: false,formatter:status3Formatter,align:"center"},//扣款状态
{name:'ID',index:'ID', width:200,sortable: false,formatter:FinishTimeFormatter,align:"center"},//预计会诊完成时间
{name:'ID',index :'ID',sortable: false,formatter:handleFormatter,align:"center"}//操作
],
rowNum:50,//每页数据显示条数
rowList:[50,75,100],//每页数据显示条数
pager: '#jqpage',//Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true,//显示数据总记录数
sortorder: "desc",//倒序
//caption:"",
multiselect: false, //复选框
recordpos: 'right', //总记录显示位置：居右
height: $(window).height - 90, //行高 height: "100%"
//height:document.body.clientHeight -3,
hidegrid: false, //Grid是否隐藏
altRows:true,//隔行变色
altclass:'ui-custom-back',//隔行变色class
// width:document.body.clientWidth -3,
//width:$(window).width()-100,
autoWidth:true, //自动列宽
shrinkToFit:true,//则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
onSelectRow:null,//单击方法
ondblClickRow:null//双击方法
});
function status1Formatter(value,row,index){
var nr = "--";
var status = index.STATUS;
if (status == "0"){
nr = "分诊中";
}
else if (status == "1"){
nr ="分诊未通过";
}
else if (status == "3"){
nr = "撤销";
}
else if (status == "4"){
nr = "--";
}
else {
nr = "分诊通过";
}
var nr= '<a href="#" >'+ nr +'</a>';
return nr;
}
function status2Formatter(value,row,index){
var nr = "--";
var status = index.STATUS;
if (status == "10"){
nr = "会诊中";
}
else if (status == "11"){
nr = "会诊未通过";
}
else if (status == "12"){
nr = "已会诊";
}
else if (status == "4"){
nr = "--";
}
else{
nr = "未会诊";
}
var nr= '<a href="#" >'+ nr +'</a>';
return nr;
}
function status3Formatter(value,row,index){
var nr = "--";
var status = index.STATUS;
if (status == "12"){
nr = "已扣款";
}
else {
nr = "未扣款";
}
var nr= '<a href="#" >'+ nr +'</a>';
return nr;
}
function handleFormatter(value,row,index) {
var status = index.STATUS;
var nr = "";
//12.12 根据产品设计按照状态来显示status.
if( status==0 ||status ==2 ||status ==12 ||status ==10){
nr ='<a title="浏览" href="javascript:void(0);" onclick="liulanFunc(\''+index.ID+'\',\''+index.CARDNO+'\',\''+index.STATUS+'\')" class="custom_link">浏览</a>';
}
if(status == 1 || status == 4)
{
if(status==4){
nr +=' <a title="编辑" href="javascript:void(0);" onclick="xiugaiFunc(\''+index.ID+'\',\''+index.CARDNO+'\',\''+index.STATUS+'\')" class="custom_link">编辑</a>';
}
else nr +=' <a title="修改" href="javascript:void(0);" onclick="xiugaiFunc(\''+index.ID+'\',\''+index.CARDNO+'\',\''+index.STATUS+'\')" class="custom_link">修改</a>';
// nr +=" <span class='nolink'> 查看会诊报告";
// nr +=" <span class='nolink'> 评价";
}
else if(status ==10)
{
// nr +=" <span class='nolink'> 修改";
nr += '<a title="查看会诊报告" href="javascript:void(0);" onclick="baogaoFunc(\''+index.ID+'\',\''+index.CARDNO+'\')" class="custom_link"> 查看会诊报告</a>';
// nr +=" <span class='nolink'> 评价";
}
else if(status ==11)
{
// nr +=" <span class='nolink'> 修改";
nr +=" <span class='nolink'> 查看会诊报告";
// nr +=" <span class='nolink'> 评价";
}
else if(status ==12)
{
// nr +=" <span class='nolink'> 修改";
nr += '<a title="查看会诊报告" href="javascript:void(0);" onclick="baogaoFunc(\''+index.ID+'\',\''+index.CARDNO+'\')" class="custom_link"> 查看会诊报告</a>';
// nr += '<a href="javascript:void(0);" onclick="zhipingFunc(\''+index.ID+'\')" class="custom_link"> 评价</a>';
}
else {
// nr +=" <span class='nolink'> 修改";
// nr +=" <span class='nolink'> 查看会诊报告";
// nr +=" <span class='nolink'> 评价";
}
return nr;
}
function FinishTimeFormatter(value,row,index) {
var nr = "";
if (index.REQUESTDATE == null){
nr= '--';
}
else {
// var endtime = Date.parse(index.REQUESTDATE);
// var startime =new Date(endtime - 24 * 1000 * 60 * 60 * 3);
// var year = startime.getFullYear();
// var month = startime.getMonth() + 1 < 10 ? "0" + (startime.getMonth() + 1) : startime.getMonth() + 1;
// var date = startime.getDate() < 10 ? "0" + startime.getDate() : startime.getDate();
// var start = year+"-"+month+"-"+date;
var start ="XXXX-XX-XX";
if(index.ARRANGEDATE !=null){
start = index.ARRANGEDATE;
}
nr = '<a href="#" >' + start + '--' + index.REQUESTDATE + '</a>';
}
return nr;
}
function baogaoFormatter(value,row,index) {
var nr = "";
if (index.STATUS ==3){
nr= '<a href="#" onclick="baogaoFunc(\''+index.ID+'\')" class="custom_link">浏览</a>';
}
else nr = '<a href="#" >浏览</a>';
return nr;
}
function zhipingFormatter(value,row,index) {
var nr ="";
if (index.STATUS ==3){
nr= '<a href="#" onclick="zhipingFunc(\''+index.MEETID+'\')" class="custom_link">未评价</a>';
}
else nr= '--';
return nr;
}
$("#jqgrid").jqGrid('navGrid','#jqpage',{edit:false,add:false,del:false,search:false});
doResize();
}
上面的showgrid()是负责加载数据的，当查询数据的时候表格的数据也会发生变化，定义一个search函数负责表格变化的时候重新生成表格
function search(){
var tiaojian = "";
var date = new Date();
var meetID = $('#meetID').val();
var applyDoctor = $('EpplyDoctor').val();
var experterHospital = $('#experterHospital option:selected').val();
var experters = $('#experters').val();
var applybegin = $('Epplybegin').val();
var arrangeStatus = $('ErrangeStatus').val();
var huiZhenStatus = $('#huiZhenStatus').val();
var consultType = $('#consultType option:selected').val();
if(meetID != ""){
tiaojian = tiaojian + "&meetID="+encodeURI(meetID);
}
if(applyDoctor != ""){
tiaojian = tiaojian + "&applyDoctor="+encodeURI(applyDoctor);
}
if(experterHospital!= ""){
tiaojian = tiaojian + "&experterHospital="+encodeURI(experterHospital);
}
if(experters != ""){
tiaojian = tiaojian + "&experters="+encodeURI(experters);
}
if(applybegin!= ""){
tiaojian = tiaojian + "&applybegin="+encodeURI(applybegin);
}
if(arrangeStatus!="")
{
tiaojian = tiaojian + "&arrangeStatus="+encodeURI(arrangeStatus);
}
if(huiZhenStatus!="")
{
tiaojian = tiaojian + "&huiZhenStatus="+encodeURI(huiZhenStatus);
}
if(consultType!="")
{
tiaojian = tiaojian + "&consultType="+encodeURI(consultType);
}
$("#jqgrid").jqGrid('setGridParam',{
url:rootpath +
gridUrl +'?date=' + date.getTime()+ tiaojian,
page:1
}).trigger("reloadGrid"); //重新载入
}
页面加载的时候高度也是变化的，可以根据需要定义一个判断高度的函数来调整页面布局
/**
* 页面reresize
*/
$(window).resize(function() {
doResize();//jqgrid重置
});
/**
* 当页面大小发生变化时对jqGrid宽度，高度进行重新设置
*/
function doResize(){
//jggrid设置
//$("#jqgrid").jqGrid('setGridWidth',$(this).parent().width()-5);//宽度设置\\
$("#jqgrid").jqGrid('setGridWidth',$(window).width() - 80);//宽度设置\\
// $("#jqgrid").jqGrid('setGridWidth',800);//宽度设置\\
// var i=$("[role='row']").size();
// $("#jqgrid").jqGrid('setGridHeight',$(window).height() - 1000*(50-i));//高度设置
$("#jqgrid").jqGrid('setGridHeight',$(window).height() - 360);//高度设置
// $("#jqgrid").jqGrid('setGridHeight',800);//高度设置
}
后面我会上传一个demo，需要注意的是jqgrid的排序只对本地的json起作用，另外比较复杂的表格，例如合并表格，统计之类的可能用这个处理起来比较难。
下载demo
相关推荐
yfisaboy 0喜欢 / 0评论 2020-06-06
编程的初衷是什么 0喜欢 / 0评论 2013-01-03
XTUxiaoxin 0喜欢 / 0评论 2012-04-19
itclkang 0喜欢 / 0评论 2015-08-12
pworld 0喜欢 / 0评论 2015-07-29
小丫00 0喜欢 / 0评论 2013-11-26
87281248 0喜欢 / 0评论 2013-07-25
Web全栈笔记 0喜欢 / 0评论 2013-04-07
蚊子的逗比世界 0喜欢 / 0评论 2013-01-21
十一郎的IT 0喜欢 / 0评论 2009-12-17
杉林的HelloWord 0喜欢 / 0评论 2012-09-25
TangCuYu 0喜欢 / 0评论 2012-04-28
Fecker曹 0喜欢 / 0评论 2012-04-01
郭文睿 0喜欢 / 0评论 2011-12-27
lxyd000 0喜欢 / 0评论 2011-10-26
chongxiaocheng 0喜欢 / 0评论 2011-07-05
海欣海夜 0喜欢 / 0评论 2011-06-08
yyzhu 0喜欢 / 0评论 2011-04-18
Balalala 0喜欢 / 0评论 2011-04-13
maoye 0喜欢 / 0评论 2011-02-28
msyndra 0喜欢 / 0评论 2011-01-24
83284158 0喜欢 / 0评论 2018-07-14
85403969 0喜欢 / 0评论 2017-03-03
HTML中国 0喜欢 / 0评论 2019-04-23
林大鹏 0喜欢 / 0评论 2019-04-23
fancy0 0喜欢 / 0评论 2013-12-28
xiongfeng 0喜欢 / 0评论 2013-12-28
melissahexiu 0喜欢 / 0评论 2013-11-08
talentluke 0喜欢 / 0评论 2011-11-04
xiyang 0喜欢 / 0评论 2011-08-23
84533871 0喜欢 / 0评论 2011-01-01
87407607 0喜欢 / 0评论 2010-10-22
黄国渝 0喜欢 / 0评论 2013-07-10
CleanData 0喜欢 / 0评论 2018-04-12
purerender 0喜欢 / 0评论 2018-01-30
软件设计 0喜欢 / 0评论 2017-05-19
编程爱好者联盟 0喜欢 / 0评论 2016-11-25