使用 jQuery 对表格列进行排序

Sandeepkumar Ramani

4.72/5 (8投票s)

2010年9月10日

CPOL

3分钟阅读

100441

这段代码包含一个 GridView，它将“员工姓名”作为列以及一些数据展示出来。现在，当用户按下排序按钮时，该列将与数据一起按升序排列。

背景

我一直听说过表格数据排序，并阅读了很多文章，解释了如何使用 jQuery 实现它。你还会发现很多可用于排序表格数据的插件，例如 Table sorter、Flexigrid、jqGrid、ExtJs Grid 等等。除了排序功能外，它还支持许多其他功能，例如分页、可调整大小的列、炫酷的主题、搜索等等...

但我认为这个库中必须还有一个功能来排序表格列，以便用户通过处理表格排列以及列数据来拥有充分的灵活性。

某些库可能支持这些功能，或者如果不支持，他们也计划在即将发布的版本中添加它。

Using the Code

这段代码包含一个GridView，它将“员工姓名”作为列以及一些数据展示出来。现在，当用户按下排序按钮时，该列将与数据一起按升序排列。

在这里，我尝试使用一些 jQuery 代码来实现这些功能，而无需任何库。我们这里唯一需要的是 jQuery 库。

步骤 1

将 jQuery 文件引用添加到页面的 <Head> 标记中。

<script src="Js/jquery-1.4.2.js" type="text/javascript"></script>

第二步

接下来，我们需要在页面上拖放gridview，并将AutoGenerateColumns属性设置为false。指定 grid 的 ID 为 "gvEmployees"。

<asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false" Width="500">
   <Columns>
      <asp:BoundField DataField="Sandeep" HeaderText="Sandeep" />
      <asp:BoundField DataField="Nishar" HeaderText="Nishar" />
      <asp:BoundField DataField="Dharmik" HeaderText="Dharmik" />
      <asp:BoundField DataField="Ravi" HeaderText="Ravi" />
      <asp:BoundField DataField="Jigish" HeaderText="Jigish" />
      <asp:BoundField DataField="Kapil" HeaderText="Kapil" />
   </Columns>
</asp:GridView>

步骤 3

在页面上拖放一个按钮，并将其 ID="btnSortColumn" 和 Text="Sort Column"。

<asp:Button ID="btnSortColumn" runat="server" Text="Sort Column" />

步骤 4

为按钮点击事件编写 jQuery 脚本，该脚本将对表格列以及数据进行排序。

$('#btnSortColumn').click(function() {

            //Get all the rows of employee grid
            var rows = $('#gvEmployees tr');

            //Start sorting column along with data
            rows.eq(0).find('th').sort(function(a, b) {

                return $.text([a]) > $.text([b]) ? 1 : -1;

            }).each(function(new_Index) {

                //Original Index
                var original_Index = $(this).index();

                //Reorder Header Text
                rows.each(function() {
                    var th = $(this).find('th');
                    if (original_Index !== new_Index)
                        th.eq(original_Index).insertAfter(th.eq(new_Index));
                });
                
                //Reorder Column Data
                rows.each(function() {
                    var td = $(this).find('td');
                    if (original_Index !== new_Index)
                        td.eq(original_Index).insertAfter(td.eq(new_Index));
                });

            });
            return false;
        });

代码本身解释了很多事情。

在这里，'rows' 变量包含 Employee 行的集合。接下来，我们使用标题标签 (th) 找出列名，并调用 JavaScript 的 sort 函数来调用排序机制。

rows.eq(0).find('th').sort(function(a, b) 
{
    return $.text([a]) > $.text([b]) ? 1 : -1;
})

当这样的函数传递给 array.sort() 时，数组元素会根据每对元素 "a" 和 "b" 之间的关系以及函数的返回值进行排序。三个可能的返回值是：<0 (小于 0)、0 或 >0 (大于 0)

小于 0：排序 "a" 使其索引低于 "b"
零：应认为 "a" 和 "b" 相等，不执行排序
大于 0：排序 "b" 使其索引低于 "a"

例如，要按数字升序排序数组，你的函数主体应如下所示

function sortfunction(a, b){
return (a - b) //causes an array to be sorted numerically and ascending
}

th.eq(original_Index).insertAfter(th.eq(new_Index));

会将每个表格标题元素 (th) 从原始位置插入到新位置。

td.eq(original_Index).insertAfter(td.eq(new_Index));

会将每个表格数据元素 (td) 从原始位置插入到新位置。

步骤 5

现在我们只完成了 aspx 页面编码，但是数据填充逻辑呢？它是这样的。在 Page Load 事件中调用 gridview 的数据绑定函数。

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridData();
        }
    }

    private void BindGridData()
    {
        DataTable table = new DataTable();
        table.Columns.Add("Sandeep");
        table.Columns.Add("Nishar");
        table.Columns.Add("Dharmik");
        table.Columns.Add("Ravi");
        table.Columns.Add("Jigish");
        table.Columns.Add("Kapil");
        table.Rows.Add("20", "25", "45", "33", "22", "12");
        table.Rows.Add("40", "15", "15", "13", "12", "40");

        gvEmployees.DataSource = table;
        gvEmployees.DataBind();
    }

在这里，我创建了动态 datatable 并填充了一些数据，而不是建立数据库连接并获取数据。但是你可以做任何你想做的事情来绑定 grid。

步骤 6

一切都已设置好，现在只需按 F5 并查看页面的输出。

排序列之前

SortingTableColumnsJQuery/Sorttable-1.JPG

排序列之后

SortingTableColumnsJQuery/Sorttable-2.JPG

浏览器支持

我已经在 Firefox 3.6.8 和 Internet Explore 8 上测试了此代码。你也可以在任何浏览器上进行测试。我确信此代码将在所有最新的浏览器上运行。