欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » EasyUI开发经验汇总 » 正文

EasyUI中数据表格DataGrid添加排序功能

创建时间:2017年09月16日 08:59  阅读次数:(225)
分享到:
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果。

下面开始演示从服务器端排序功能。

第一步,启用EasyUI DataGrid的排序功能:
具体就是为列设置sortable属性,如下:
{ field: "SOID", title: "订单单号", width: "80px",sorttable:true }

如果是要为项目中所有EasyUI DataGrid的列开启排序功能,一个一个列的设置就太麻烦了,可以使用以下方法统一添加sorttable属性:
function initDataGrid(grid) {
var columns = $("#gridlist").datagrid("options").columns[0];
    for (i = 0; i < columns.length; i++) {
        columns[i].sortable = true;
}
}

第二步,为EasyUI DataGrid绑定排序事件,如下:
$("#gridlist").datagrid({
 onSortColumn: function (sort, order) {
            loadlistgrid(sort, order);
        }
})

onSortColumn事件有两个sort与order两个参数,sort是指当前用户点击列的列头名,即列的field属性,order就是当前排序的方式,有desc与asc两个值。

有了这两个信息,我们就可以将这两个值传入到服务器,将按当前排序处理后的数据源重新绑定到EasyUI DataGrid即可:

第三步,返回排序后的数据源:
在第二步中我们有定义loadlistgrid方法,方法如下:
function loadlistgrid(sortname, sortvalue) {
    var url = "/WebService/ashx/Presentation.ashx?sys_sortname=" + sortname + "&sys_sortvalue=" + sortvalue;
    }

    $.ajax({
        cache: false,
        async: false,
        url: url,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            easyuialert(XMLHttpRequest.responseText)
        },
        success: function (data) {
            data.total = data.rows.length;
            $("#gridlist").datagrid({
                data: data
            })
        }
    })
}

这样,服务器就可以接收到sort和order两个值了,再根据这两个值在服务器排序数据源,可参考下面代码:
以下是C#代码:
public static DataTable GetList(HttpContext context, string tableName)
        {
            if (string.IsNullOrEmpty(tableName))
            {
                throw new Exception("请配置正确的tableName值!");
            }

            string sortName = context.Request.QueryString["sys_sortname"];
            string sortValue = context.Request.QueryString["sys_sortvalue"];
            string columns = context.Server.UrlDecode(context.Request.QueryString["columns"]);

            if (string.IsNullOrEmpty(columns))
            {
                columns = "*";
            }
            else
            {
                columns = columns.substring(1);
            }         

    StringBuilder strSql = new StringBuilder();
            strSql.Append("select " + columns + " from " + tableName);       

            if (!string.IsNullOrEmpty(sortName) && !string.IsNullOrEmpty(sortValue))
            {
                strSql.Append(" order by " + sortName + " " + sortValue);
            }

            return DbHelperSQL.Query(strSql.ToString()).Tables[0];
        }

将查询到的DataTable转为Json格式返回给页面就完成我们想要的排序效果了。
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 80+33=? 的结果(结果是:113)
结  果: