zoukankan      html  css  js  c++  java
  • EasyUI

    效果:

    红框的字段看,为设置了,列排序,向后台Post数据sort/order。

    原理:向后台POST数据,sort/post数据。

    html代码:

                <table id="tab"></table>

    JS代码:

    $(function () {
        $('#tab').datagrid({
             500,//宽度
            title: '信息列表',//标题名
            iconCls: 'icon-search',//图标
            singleSelect: true,//是否单选
            striped: true,//是否开启斑马线
    
    
    
    
            //============================= 加载数据,要显示的字段 =========================================//
            //要加载的数据
            url: "../Json/datagridjson.ashx",
            //要显示的列
            columns: [[
                { field: 'id', title: '编号' },
                { field: 'name', title: '姓名' },
                { field: 'sex', title: '性别' },
                //在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
                { field: 'createtime', title: '创建时间',sortable:true, }
            ]],
            //==========================================================================================//
    
    
    
    
    
            //===================================== 分页 ===============================================//
            //显示分页控件栏
            pagination: true,
            pageNumber: 1,//初始化的时候在第几页
            pageSize: 5,//,每页显示的条数
            pageList: [5, 10, 15],//每页显示的条数
            //==========================================================================================//
    
    
    
    
    
            //===================================== 排序 ===============================================//
            //通过POST传递到后台,然后进行排序。
            sortName: 'createtime',
            sortOrder: 'desc',
            //==========================================================================================//
    
    
    
    
    
        });
    })

    一般处理程序(ashx)后台数据:

    • 要修改的SQL语句:
    •   order by " + sortfield + " " + sortDescOrasc + " 
    •  (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") 
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "application/json";
    
    
                //接受前台传递来的页数和每页显示的条数
                //前台开启分页之后,传递来的参数
                int pageIndex = Convert.ToInt32(context.Request["page"]);
                int pagenumber = Convert.ToInt32(context.Request["rows"]);
    
    
                //接收排序字段
                string sortfield = context.Request["sort"];
                string sortDescOrasc = context.Request["order"];
    
                //存储数据
                DataTable dt = new DataTable();
    
                if (pageIndex == 1)
                {
                    //加载第一页
                    string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person order by " + sortfield + " " + sortDescOrasc + "";
                    //获取数据
                    dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
                }
                else if (pageIndex != 1)
                {
                    //加载非第一页
                    string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person) as a where a.rownum > " + (pageIndex - 1) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
                    //获取数据
                    dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
                }
                else { }
    
    
                //将datatable转换为json
                //在返回的JSON数据中,加入total属性(总记录数)
                //那么他就会在加载的时候,显示总记录数。
                //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
                string strjson = "{"total":15, "rows":" + DatatableToJson.ToJson(dt) + "}";
    
                context.Response.Write(strjson);
            }
  • 相关阅读:
    linux软件安装方式
    docker 安装 jenkins touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var/jenkins_home/copy_reference_file.log. Wrong volume permissions?
    [ERR] Node goodsleep.vip:6379 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    Linux 常用命令 服务器间scp 用户 export 创建文件、软连接
    redis 安装 集群 主从 哨兵 docker
    WPF密码框中禁止复制、粘贴
    Application 统计在线人数
    【转义字符】HTML 字符实体&lt; &gt: &amp;等
    SQL语句统计每天的数据
    正则表达式计算代码数
  • 原文地址:https://www.cnblogs.com/KTblog/p/4917108.html
Copyright © 2011-2022 走看看