Jquery easyui从零单排之datagrid排序

来源：互联网发布：昏君培养系统知风编辑：程序博客网时间：2024/05/06 03:40

上篇文章，写了如何实现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数据返回。

三、运行结果截图：

以上基本上就实现了datagrid的排序功能。

0 0