Jquery easyui从零单排之datagrid排序

最新推荐文章于 2018-12-29 13:38:53 发布

我本良人

最新推荐文章于 2018-12-29 13:38:53 发布

阅读量1.5k

点赞数

分类专栏： Jquery easyui从零单排

本文链接：https://blog.csdn.net/yangmingxing980/article/details/50235187

版权

Jquery easyui从零单排专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上篇文章，写了如何实现datagrid的客户端分页，这次来实现datagrid的排序功能。

一、前台页面代码：

<head>
    <meta charset="UTF-8">
    <title>Start from zero</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>
    <form id="fm">
    <table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true"
        showfooter="true" style="width: 640px; height: 600px" data-options="
				remoteSort:false,
                rownumbers:true,
				singleSelect:false,
				autoRowHeight:true,
				pagination:true,
                showFooter: true,
                fitColumns: true,
				pageSize:20">
        <thead frozen="true">
            <tr>
                <th data-options="field:'ck',checkbox:true,width:40">
                </th>
                <th data-options="field:'LoginID',width:100" sortable="true">
                    LoginID
                </th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th data-options="field:'UserName',width:120" sortable="true">
                    UserName
                </th>
                <th data-options="field:'Sex',align:'center',width:80" sortable="true">
                    Sex
                </th>
                <th data-options="field:'Department',width:140" sortable="true">
                    Department
                </th>
                <th data-options="field:'Age',width:80" sortable="true">
                    Age
                </th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        function getData()
        {
            $('#dg').datagrid({
                url: 'Handler.ashx',
                method: 'get',
                striped: true,
                title: "员工列表",
                onSortColumn: function (sort, order)
                {
                    //alert("sort:" + sort + ",order：" + order + "");
                    $('#dg').datagrid('reload', {
                        sort: sort,
                        order: order
                    });
                }
            })
        }

        function pagerFilter(data)
        {
            if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize)
                {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
        $(function ()
        {
            $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData());
        });
    </script>
    </form>
</body>
</html>

关键代码在这里：

 <th data-options="field:'LoginID',width:100" <span style="color:#ff0000;">sortable="true"</span>>
                    LoginID
                </th>

这里需要把sortable属性设置true，即对其激活。

onSortColumn: function (sort, order)
                {
                    //alert("sort:" + sort + ",order：" + order + "");
                    $('#dg').datagrid('reload', {
                        sort: sort,
                        order: order
                    });
                }

这里是向数据处理页面传递需要对其排序的字段sort（比如我设置的字段LoginID，当然也可以是其他字段），以及按何种方式排序order（asc，desc）。

二、处理代码

<%@ WebHandler Language="C#" Class="Handler" %>


using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using Newtonsoft.Json;
using System.Text;


public class Handler : IHttpHandler {


    public void ProcessRequest(HttpContext context)
    {
        string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"])?context.Request.QueryString["sort"]:"LoginID"; 
        string order = !string.IsNullOrEmpty(context.Request.QueryString["order"])?context.Request.QueryString["order"]:"asc";
        Query(context,sort,order);
    }
    public void Query(HttpContext context,string sort,string order)
    {
        context.Response.ContentType = "text/plain";
        SqlHelp sqla = new SqlHelp();
        string stra = "select * from tTestTable order by "+sort+" "+order;
        
        DataTable dta = sqla.GetDataTable(stra);
        sqla.SqlClose();


        string json = JsonConvert.SerializeObject(dta);


        context.Response.Write(json);


    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }


}

这里就不用多复述了，就是根据传过来的值进行sql查询，通过Newtonsoft.Json把DataTable转换为Json数据返回。