zoukankan      html  css  js  c++  java
  • [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果。

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

    第一步,启用EasyUI DataGrid的排序功能: 具体就是为列设置sortable属性,如下:

    { field: "SOID", title: "订单单号", "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学习网 http://www.lmwlove.com/ac/ID1150

  • 相关阅读:
    [原创]益盟软件测试流程培训
    一图教你如何管理自己的时间
    [原创]质量控制思维导图
    [原创]常用Web服务器日志工具介绍
    [原创]常见的测试类型思维导图
    [原创]软件项目研发控制流程(草稿)
    [原创]Top 15 free SQL Injection Scanners
    [原创]2010年12月测试团队培训表
    [原创]Firefox Throttle 网络带宽限速工具介绍
    [原创]对5W1H分析法应用到工作中的理解
  • 原文地址:https://www.cnblogs.com/ziranquliu/p/4721680.html
Copyright © 2011-2022 走看看