datagrid排序問題

本文轉載自查看原文 2017-06-09 17:35 4199 jQuery easyUI

排序我主要注意了三部分內容：

1、在控制表格的JavaScript代碼中，加入datagerid的onSortColum事件，

onSortColum: function (sort,order) {  //其中sort代表排序列字段名稱；order:排序列的順序（ASC或DESC）
　　　$('#dg').datagrid('reload', {
　　　sort: sort,
　　　order: order
　　});
}

２、在需要排序的單元格將 sortable設置為true

columns: [[ 
{ field: 'adminName', title: '登錄名', width: 300},
{ field: 'trueName', title: '用戶名', width: 300, sortable: true },//sortable設置為true
{ field: 'mobilePhone', title: '聯系電話', width: 200 }
]],

3、.ashx文件需要得到前台界面反饋回來的值，然后對其進行操作；將得到的 sort和order作為查詢的一個條件，傳至后台

得到dataset數據，將dataset數據轉換為JSON數據格式返回

這里的JSON數據轉換的方法我封裝起來，在這里只是進行了調用，前面的幾節的代碼是沒有封裝過的，是寫在.ashx里，直接用的。

 public void ProcessRequest(HttpContext context)
        {
            string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"]) ? context.Request.QueryString["sort"] : "trueName";   //獲得前端的sort string order = !string.IsNullOrEmpty(context.Request.QueryString["order"]) ? context.Request.QueryString["order"] : "asc";     //獲得前端的order
            Query(context, sort, order);  
        }
        public void Query(HttpContext context, string sort, string order)
        {
            context.Response.ContentType = "text/plain";
            

            DataTable dta = BRL.BLL.A_admin.GetListByOrder(sort,order).Tables[0];   //獲得數據庫數據（這里我將獲取數據的方法進行了封裝，這里只是調用就可以了，具體如何獲取數據參照本節后面的內容） int count = dta.Rows.Count;
            string strJson =BRL.Common.JsonDatachange.Dataset2Json(BRL.BLL.A_admin.GetListByOrder(sort,order), count);//DataSet數據轉化為Json數據 ，這里的方法我也進行了封裝，這里只是實現了方法的調用
            context.Response.Write(strJson);




        }

4、在后台根據篩選調用數據庫數據時，應將篩選條件改為：

 public static DataSet GetListByOrder(string sort, string order)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("SELECT * FROM A_Admin order by "+sort+" "+order); //修改篩選條件 return DBUtility.DbHelperSQL.Query(strSql.ToString());
          
        }

具體的全部代碼：

前端部分的：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/themes/icon.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/shine.js"></script>
    <script type="text/javascript">  
        $(function () {  
            $('#dg').datagrid({
                url: 'ashx/Handler1.ashx',
                width: 800,  
                title: '設備管理',  
                method:'get',  
                columns: [[  
                    { field: 'adminName', title: '登錄名', width: 300},
                    { field: 'trueName', title: '用戶名', width: 300, sortable: true },
                    { field: 'mobilePhone', title: '聯系電話', width: 200 }
                ]],  
                pagination: true,  
                pageSize:1,  
                pageList: [1, 2, 3],
                onSortColum: function (sort,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> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table id="dg"></table>  
    </div>
    </form>
</body>
</html>

.ashx：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace Web.Management.ashx
{
    /// <summary>
    /// Handler1 的摘要說明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"]) ? context.Request.QueryString["sort"] : "trueName";
            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";
            

            DataTable dta = BRL.BLL.A_admin.GetListByOrder(sort,order).Tables[0];



            int count = dta.Rows.Count;
            string strJson =BRL.Common.JsonDatachange.Dataset2Json(BRL.BLL.A_admin.GetListByOrder(sort,order), count);//DataSet數據轉化為Json數據    
            context.Response.Write(strJson);




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

封裝的轉換JSON方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;

namespace BRL.Common
{
    public class JsonDatachange
    {
        public static string Dataset2Json(DataSet ds, int total = -1)
        {
            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)
            {
                //{"total":5,"rows":[  
                json.Append("{\"total\":");
                if (total == -1)
                {
                    json.Append(dt.Rows.Count);
                }
                else
                {
                    json.Append(total);
                }
                json.Append(",\"rows\":[");
                json.Append(DataTable2Json(dt));
                json.Append("]}");
            }
            return json.ToString();
        }

        public static string DataTable2Json(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }

            return jsonBuilder.ToString();
        }  
    }
}

sql語句封裝的方法：

 public static DataSet GetListByOrder(string sort, string order)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("SELECT * FROM A_Admin order by "+sort+" "+order);
            return DBUtility.DbHelperSQL.Query(strSql.ToString());
          
        }

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="easyui/themes/default/easyui.css" rel="stylesheet" /> <link href="easyui/themes/icon.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <script src="easyui/jquery.min.js"></script> <script src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script src="js/echarts.js"></script> <script src="js/shine.js"></script> <script type="text/javascript"> $(function () { $('#dg').datagrid({ url: 'ashx/Handler1.ashx', width: 800, title: '設備管理', method:'get', columns: [[ { field: 'adminName', title: '登錄名', width: 300}, { field: 'trueName', title: '用戶名', width: 300, sortable: true }, { field: 'mobilePhone', title: '聯系電話', width: 200 } ]], pagination: true, pageSize:1, pageList: [1, 2, 3], onSortColum: function (sort,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> </head><body> <form id="form1" runat="server"> <div> <table id="dg"></table> </div> </form></body></html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF DataGrid分組和排序 datagrid中的排序 datagrid點擊標題進行排序 easyui datagrid insertRow 問題 easyUI 自定義排序datagrid 數據表格 - DataGrid - 字段排序 easyui datagrid 多行刪除問題 Datatable 篩選條件、排序和獲取datagrid當前頁面數據 (1)、JEasyUI 之 Datagrid的Combobox 顯示 textField 值的問題關於easyui的datagrid屬性出現亂碼問題