zoukankan      html  css  js  c++  java
  • easyui datagrid分页代码

       最近在用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 };

  • 相关阅读:
    属性选择器
    优先级
    hj_html&css
    hj_解决gpedit.msc不存在的问题
    hj_designPatterns
    hj_ssm
    hj-springmvc
    hj_mybatis
    hj_Python踩坑之旅
    hj_Python学习笔记
  • 原文地址:https://www.cnblogs.com/QiuJL/p/4524221.html
Copyright © 2011-2022 走看看