jqgrid分页控件

工作中为了，处理分页问题，使用了两种分页控件，一种是处理表格的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
				


				
时间： 2024-07-29 20:41:22 

		


		


	

	
	

		


		
jqgrid分页控件的相关文章


								

		

			

                asp.net分页控件CSS
			

		

		

									

				.aspx代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample3_DataPager.aspx.cs" Inherits="Sample_03_DataPager" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "			

		

	

				

		

			

                WPF 实现 DataGrid/ListView 分页控件
			

		

		

									

				在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕.这篇博客将介绍如何创建一个分页控件. 为了简单起见,这个分页控件目前只有 首页/上一页/下一页/末页/总页数/第几页 等功能.实现思路,首页/上一页/下一页/末页 这四个通过路由事件来实现,在使用时可以使用命令进行绑定,或者直接使用均可.总页数和第几页通过依赖属性来实现,使用时将页数进行绑定显示			

		

	

				

		

			

                分页控件AspNetPager的样式美化
			

		

		

									

				自从吴旗娃推出了AspNetPager分页控件之后,受到了广大程序员朋友的喜爱,无数个网站都出现这个控件的身影.可是大部分网站程序员的朋友都是直接套用,导致满世界的分页控件样式都是一样的简洁,伤不起啊 在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /*			

		

	

				

		

			

                asp.net分页控件使用详解【附实例下载】
			

		

		

									

				本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"			

		

	

				

		

			

                在DevExpress程序中使用Winform分页控件直接录入数据并保存
			

		

		

									

				一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数据,这种对于字段比较少,而且内容相对比较简单的情况下,效率是比较高的一种输入方式.本篇随笔主要介绍在DevExpress程序中使用GridView直接录入数据并保存的实现,以及使用Winform分页控件来进行数据直接录入的实现操作. 1.在GridView上展示数据 在GridView上展示数据,只			

		

	

				

		

			

                PagedDataSource数据绑定控件和AspNetPager分页控件结合使用列表分页
			

		

		

									

				1.引用AspNetPager.dll. 2.放置Repeater数据绑定控件. <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> //绑定显示的列表代码 </ItemTemplate> </asp:Repeater> 3.在页面添加AspNetPager分页控件,会出现以下代码. <%@ Register Assembly="Asp			

		

	

				

		

			

                WinForm下编写分页控件，实现DataGridView的分页效果
			

		

		

									

				 前几天做C/S项目的时候用到了分页查询,所以就想去网上找一些封装好的分页控件,类似BS项目中的那种.但是找了好几个都不是特别的好,没有自己想要的.而且WinForm 里面的DataGridView也不像WebForm里面的GridView那样有自带的分页功能.没办法还是自己动手封装一个吧,以后复用也方便. 从网上找了几个demo做了一下,实现挺简单的. 用到的方法就是编写一个用户控件,下面说明如何实现: 一,先画界面 新建一个用户控件,然后拖拽几个标签,文本框和按钮,排列好.如下图所示:			

		

	

				

		

			

                paginationjs一款功能强大的分页控件
			

		

		

									

				在项目中,很多时候需要分页控件,分页控件自己写也比较简单,但是要写一个功能丰富的分页控件话,就麻烦了,这里推荐一款不错的空间,页数太多的话,显示总页数,搜索指定页码. github地址:https://github.com/superRaytin/paginationjs 简单demo代码: <!DOCTYPE html> <html> <head> <title>Paginationjs example</title> <meta htt			

		

	

				

		

			

                iOS中的分页控件(UIPageControl)
			

		

		

									

				#import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad { [super viewDidLoad]; /** * UIPageControl 分页控件,提供以下几个功能: 1.展示当前总页数 2.展示当前是第几页 3.切换pageControl的当前显示的点对应显示不同的界面 */ //1.创建控