安科网

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

jqgrid 分页

软件设计

软件设计

3 关注 6 粉丝 0 动态

关注 关注

相关推荐

jqgrid 前端分页

　　total ：总页数 ，

林大夏 2019-12-21

jqGrid自定义列的用法

在jqGrid可以实现自定义列，比如说，某一列是“申请名称”，点击后弹出对应的“正式项目预算查看”页面。则可在定义“申请名称”列中加入如下所示处理。GPS平台、网站建设、软件开发、系统运维，找森大网络科技！

yfisaboy 2020-06-06

jqGrid basic demo

一 数据来自本地(客户端)<!rowNum:10, // sets how many records we want to view in the grid

编程的初衷是什么 2013-01-03

关于Jquery jqGrid的使用

待确认哪种是有效的。其实跟getDataIDs()这个方法一模一样，这个方法就是获得所有rowId的。var colNames= grid.jqGrid;相反，设定使用setGridParam

XTUxiaoxin 2012-04-19

jqgrid 删除操作的前端实现和后台实现

}这样就搞定了！

bluemengcom 2016-06-13

JqGrid应用

{ id: "1", invdate: "2007-10-01", name: "test1", note: "note1", amount: "200.00&

itclkang 2015-08-12

jqgrid在chrome下水平滚动条的处理方法

chrome里默认的table计算值会比ie或者firefox中的多出一个像素。即便添加如下配置

pworld 2015-07-29

jqGrid Summary

{id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00&q

小丫00 2013-11-26

jqGrid插件学习(2)-重新加载数据

.trigger;②如果jqGrid的colModel也变了,暴力一点吧

huzai 2013-10-21

jQuery $ is not defined——js引入报错

今天在项目里使用jquery、jqgrid等js时报错了：jQuery $ is not defined（"$" 是在jquery里面定义的。但我确实引入了呀，而且自己写测试能在jqgrid里得到数据呀！这是什么问题呢？后来查了一下，才

87281248 2013-07-25

jqGrid常用功能设置

-- 引入js 顺序：jquery、jquery-ui、grid.locale-cn、jqGrid -->

wysjwh 2013-06-13

JQgrid 笔录

4.设置某行选中 jQuery.jqGrid;

恋雨烟梦 2013-05-09

jqGrid，JQuery

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!

Web全栈笔记 2013-04-07

jqgrid在chrome下有滚动条的问题

因为在chrome里默认的table计算值会比ie或者firefox中的多出一个像素。就是因为这一个像素的差别会导致在chrome下本来100%显示的表格出现滚动条。这个问题怎么解决呢？这是我自己想的一个办法，挺不好用的，但是还能奏效，以后有了更好的再贴上

蚊子的逗比世界 2013-01-21

基于Struts2的SingleEdit插件的使用。

前些日子看到网友wbfsa发布了SingleEdit插件，基于JQuery的表单信息修改工具。项目中我使用Struts2，已经整合了Uploadify和JqGrid两个组件，基本可实现操作的异步处理，效果更佳绚丽。这次使用SingleEdit，在页面中也就

十一郎的IT 2009-12-17

jqgrid总结

3jqgrid操作字段，防止样式ID冲突，操作必须添加$，直接利用jquery操作属性，会产生ID冲突：

liyifan 2012-10-06

jQuery学习之：jqGrid表格插件——从Struts2获得数据

对于Struts2，同样需要按jqGrid的要求返回相应的json数据格式。当然，我们可以在Struts2的Action中通过返回null来干Servlet一样的事情，这样也能够同Servlet一样实现与jqGrid集成。然而，此时Struts2实际上相当

杉林的HelloWord 2012-09-25

jqGrid处理http错误和服务器端错误

jqGrid处理http错误和服务器端错误作者：ldzyz007 |2011/10/26 16:11:10 | 阅读46次我们知道，jqGrid从服务器端获取数据时，用的是ajax请求，如果请求过程中发生http错误或者服务器端方法发生异常或错误，默认设置

TangCuYu 2012-04-28

jqgrid常用方法

现在我们有一个需求就是如果当没有搜索到符合条件的数据时，需要在界面上提示。查了一下jqgrid的api，使用loadComplete事件可以满足这个要求。

Fecker曹 2012-04-01

jqgrid常用方法

当使用jqgrid来做数据表格控件时，如果搜索不到数据，是没有提示的。现在我们有一个需求就是如果当没有搜索到符合条件的数据时，需要在界面上提示。查了一下jqgrid的api，使用loadComplete事件可以满足这个要求。}1. 如何获取grid选中的行

郭文睿 2011-12-27
软件设计

软件设计

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号