easyui datagrid分页代码

原创 2012年03月21日 17:38:02
   最近在用easyui插件想做个分页效果,于是在网上找了好几天,可能是架构的问题,没有找到哪篇文章能照抄过来就能用的,当时那个头大啊,现在做好了,整理出来与大家分享。其中黑体为重点,其它的不是每个人都这么写的,不需要特别关注。

//获取列名、设置分页
function loadGridClomns() {
    var cols = $.data(document.body, "selectcols");
    postAjax("Report", "CreateGridCol", "&selectcols=" + cols, function (json) {
        if (!json.iserror) {
            $("#grid").datagrid({
                singleSelect: true,
                rownumbers: true,
              pagination: true,//设置分页
              pageSize: 15,//设定每页显示15条数据
              pageList: [10, 15, 20, 25, 30],
                frozenColumns: [json.frozenColumns], //后台json构造的动态列,需指定宽度
                columns: [json.columns1, json.columns2]  //后台自动获取的列名
            });
        }
    });
}


 //查询
 $("#getprefrominfo").click(function () {
        var cols = $.data(document.body, "selectcols");
        if (cols == null) {
            AlertMsg("请选择列!");
            return;
        }
        else {
            $("#grid").datagrid("loading");
            var index = 0; //0为查询
            var qp = {
                cols: cols,
                sortway: $.data(document.body, "sortway"),
                index: index
            };
            $("#result").empty();
            $("#grid").datagrid({
                queryParams: qp,      //datagrid中自带的传值函数
                //这边可以不用queryParams传值,可以写成:
                // url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000)+data,
                //其中data为字符串类型的数据
                //但是在IE下不用queryParams的话,数据中出现中文字符或出现乱码

                url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000),
                onRowContextMenu: function (e, rowIndex, rowData) {   //右键菜单的触发事件
                    $.data(document.body, "selectupdaterodno", rowData['入库棒号']); //将右键选中的数据放在数据缓存中
                    $('#menu').menu('show', {
                        left: e.pageX,    //右键菜单坐标
                        top: e.pageY
                    });
                    e.preventDefault();//阻止浏览器弹出自带的右键菜单
                }
            });
        }
    });

//只要代码写的没问题,easyui下面的分页插件中,比如选择每页显示多少行和上一页、下一页事件是自动触发的。
//page和rows也是esyui每次自动传到后台的,不需要自己手写

//如:
var index = Convert.ToInt32(Request["index"]);
var page = Convert.ToInt32(Request["page"]);
var rows = Convert.ToInt32(Request["rows"]);

//最重要的是在后台取数据放在json中要添加个参数total来存放数据的总行数,如果没有这个参数则不能分页
比如:json.Data = new { rows = common.EasyJson(dt), total = totalrows };

Easyui 使用datagrid分页 详解 代码

做网站的后台设计,用到了easyui,在使用datagrid的分页时遇到了很多问题,比如如何传递分页参数,如何接收总的数据量,经过小半天的研究,终于搞出来了,下面是一些常遇到的问题,可能会对新手有所帮...
  • jp571534020
  • jp571534020
  • 2014年12月16日 11:30
  • 15029

EasyUI数据分页实现(真假分页)

数据分页功能的实现是在任何一个项目中都非常实用的一个功能,在ASP.NET学习的时候,曾写过一篇关于分页功能的实现(点击查看),上面已经介绍的真假分页的优缺点,在这里我们就不过多的赘述了。现在的分页实...
  • why15732625998
  • why15732625998
  • 2016年08月14日 11:56
  • 10272

easyui 中的datagrid分页技术实现

一些基本的知识参考官网          http://www.jeasyui.com/documentation/index.php# 这里我强调一点 datagrid会...
  • cao478208248
  • cao478208248
  • 2014年06月13日 17:59
  • 3723

easyui的datagrid使用以及分页

easyui对于开发桌面级的WEB应用界面确实十分方便,而且美观。这里着重记录一下datagrid的使用,以及通过前后端配合实现的超简单的数据分页查询方式。...
  • tzdwsy
  • tzdwsy
  • 2015年08月09日 13:57
  • 3407

EasyUI 之 DataGrid分页组件中文显示的两种方法

在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用。         JQueryEasyUI:一组...
  • u010786678
  • u010786678
  • 2015年01月21日 11:48
  • 8896

easyui datagrid 客户端搜索、分页、排序

easyui datagrid的排序默认是服务器端排序,可以用sorter实现客户端排序[2];客户端分页可用filter实现[3];客户端搜索同样可以用filter实现。...
  • junglezax
  • junglezax
  • 2014年06月26日 14:22
  • 2175

easyui datagrid本地分页排序

html代码 加载数据 js代码 var listData = []; $(function(){ $('#dg').datagr
  • lnkToKing
  • lnkToKing
  • 2016年11月18日 10:45
  • 1674

easyui datagrid 数据组装格式

这两天开发报表,用到了easyui datagrid 数据表,记录一下:    在页面中只需要:                                                 ...
  • u013303551
  • u013303551
  • 2016年10月19日 16:10
  • 1371

easyui下的datagrid后台数据加载和分页

Datagrid的创建需要做以下几件事情,   第一步,我们需要引入以下几个个包,少一个都不可以,否则你会发现你无论做的再怎么对结果都会出错,       第二步,引入了这些包之后,我们需...
  • m0_37560267
  • m0_37560267
  • 2017年04月27日 10:08
  • 1539

EasyUI 之 DataGrid分页组件中文显示的两种方法(语言的切换)

在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用。         JQueryEasyUI:一组...
  • zhongqing_fzq
  • zhongqing_fzq
  • 2016年06月27日 19:35
  • 3273
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui datagrid分页代码
举报原因:
原因补充:

(最多只允许输入30个字)