使用JQuery插件，排序Gridview的某个字段

浏览数：41 / 时间：2015年06月08日

1. 前台代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.10.2.js"></script>
    <script src="../../Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#GridView2").tablesorter();
        });
    </script>
    <style type="text/css">
        th {
            cursor: pointer;
            background-color: #dadada;
            color: Black;
            font-weight: bold;
            text-align: left;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView2" CellPadding="5" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Item" HeaderText="Item" />
                    <asp:BoundField DataField="Price" HeaderText="Price" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

View Code

2. 后台代码

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
                dt.Rows.Add("AItem", 20);
                dt.Rows.Add("BItem", 30);
                dt.Rows.Add("CItem", 40);
                dt.Rows.Add("DItem", 50);
                dt.Rows.Add("EItem", 60);
                dt.Rows.Add("FItem", 70);
                GridView2.DataSource = dt;
                GridView2.DataBind();


            }
            GridView2.UseAccessibleHeader = true;
            GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
        }