首页 > 编程语言 > 详细

EasyUI - DataGrid 组建 - [ 排序功能 ]

时间:2015-10-28 14:18:21      阅读:346      评论:0      收藏:0      [点我收藏+]

效果:

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

技术分享

 

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

技术分享

 

html代码:

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

 

JS代码:

$(function () {
    $(#tab).datagrid({
        width: 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);
        }

 

EasyUI - DataGrid 组建 - [ 排序功能 ]

原文:http://www.cnblogs.com/KTblog/p/4917108.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!