jquery 分页插件 jqgrid分页

转载

jkfox 2023-06-19 16:20:58

文章标签 jquery 分页插件 jqgrid json 数据控件 文章分类 jQuery 前端开发

工作中为了，处理分页问题，使用了两种分页控件，一种是处理表格的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'> 查看会诊报告</span>";
      //      nr +=" <span class='nolink'> 评价</span>";
        }
        else if(status ==10)
        {
        //    nr +=" <span class='nolink'> 修改</span>";
            nr += '<a title="查看会诊报告" href="javascript:void(0);" onclick="baogaoFunc(\''+index.ID+'\',\''+index.CARDNO+'\')" class="custom_link"> 查看会诊报告</a>';
      //      nr +=" <span class='nolink'> 评价</span>";
        }
        else if(status ==11)
        {
        //    nr +=" <span class='nolink'> 修改</span>";
            nr +=" <span class='nolink'> 查看会诊报告</span>";
   //         nr +=" <span class='nolink'> 评价</span>";
        }
        else if(status ==12)
        {
         //   nr +=" <span class='nolink'> 修改</span>";
            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'> 修改</span>";
      //      nr +=" <span class='nolink'> 查看会诊报告</span>";
  //          nr +=" <span class='nolink'> 评价</span>";
        }
        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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。