ASP.NET jQuery 食譜19 (通過jQuery操作GridView技巧集合)

這節主要總結下通過jQuery簡單操作GridView，以避免通過后台服務操作刷新頁面。

要操作簡單的列表，首先需要設計界面和初始化數據：

頁面結構：

    <form id="form1" runat="server">
    <div align="center">
        <fieldset>
            <div class="header">
                計算機書目錄清單</div>
            <div>
                <asp:GridView ID="gvBooks" runat="server" SkinID="gvBooksSkin" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="BookId" HeaderText="序號" />
                        <asp:BoundField DataField="Title" HeaderText="書名" />
                        <asp:BoundField DataField="Author" HeaderText="作者" />
                        <asp:BoundField DataField="Publish" HeaderText="出版社" />
                    </Columns>
                </asp:GridView>
            </div>
        </fieldset>
        <br />
        <div id="message">
        </div>
    </div>
    </form>

GridView使用皮膚代碼：

<asp:GridView runat="server" SkinId="gvBooksSkin" Font-Names="Verdana" Font-Size="12pt" CellPadding="4"
    HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White" Width="100%">
</asp:GridView>

要使用皮膚還需注意在頁面page標簽里面添加StylesheetTheme屬性：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe19.aspx.cs" Inherits="Chapter3_Recipe19"
    StylesheetTheme="Standard" %>

頁面還使用了樣式代碼：

    <style type="text/css">
        .header
        {
            background-color: Gray;
            color: White;
            margin: 5px;
            padding: 5px;
            font-size: 15pt;
        }
        
        .highlight
        {
            background-color: #9999FF;
        }
        
        td
        {
            cursor: pointer;
        }
    </style>

后台初始化代碼：

public partial class Chapter3_Recipe19 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvBooks.DataSource = GetBooksInfo();
            gvBooks.DataBind();
        }
    }

    private DataTable GetBooksInfo()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("BookId", typeof(string));
        dt.Columns.Add("Title", typeof(string));
        dt.Columns.Add("Author", typeof(string));
        dt.Columns.Add("Publish", typeof(string));

        dt.Rows.Add("1", "持續交付：發布可靠軟件的系統方法", "（英） 亨布爾 （Humble，J.），（英） 法利 （Farley，D.） 著 喬梁 譯 ", "人民郵電出版社");
        dt.Rows.Add("2", "人件集：人性化的軟件開發", "（澳） Larry L. Constantine 著 謝超 等 譯 ", "機械工業出版社");
        dt.Rows.Add("3", "一線架構師實踐指南", "溫昱 著 ", "電子工業出版社");
        dt.Rows.Add("4", "設計模式：可復用面向對象軟件的基礎", "Erich Gamma 等 著 ", "機械工業出版社");
        dt.Rows.Add("5", "重構：改善既有代碼的設計", "（美）福勒 著 熊節 譯 ", "人民郵電出版社");
        return dt;
    }
}

界面顯示效果：

下面是實現GridView各種操作的代碼集合：

•鼠標移動到列表每行高亮顯示：

<script type="text/javascript">   
        $(function () {
            $("#<%=gvBooks.ClientID %> tr").hover(function () {
            $(this).addClass("highlight");
            }, function () {
            $(this).removeClass("highlight");
            });
         });
</script>

•下面的代碼是對hover函數的解釋，不用解釋應該能看明白吧

            $("#<%=gvBooks.ClientID %> tr").mouseenter(function () {
            $(this).addClass("highlight");
            }).mouseout(function () {
            $(this).removeClass("highlight");
            });

•鼠標移動到列表每個單元格高亮顯示，很簡單直接把tr改成td

            $("#<%=gvBooks.ClientID %> td").hover(function () {
            $(this).addClass("highlight");
            }, function () {
            $(this).removeClass("highlight");
            });

•鼠標單擊每行列表刪除所選行

            $("#<%=gvBooks.ClientID %> tr").filter(":not(:has(table, th))") // table, th元素不需要被單擊刪除
            .click(function () {
            $(this).addClass("highlight");
            $(this).fadeOut(1000, function () {
            $(this).remove(); // 這里只是在客戶端刪除數據，服務端沒做任何操作
            });
            });

•鼠標單擊每單元格並刪除所選單元格

            // :has:選擇含有選擇器所匹配的至少一個元素的元素
            // :not:選擇所有去除不匹配給定的選擇器的元素
            // filter():篩選出與指定表達式匹配的元素集合
            $("#<%=gvBooks.ClientID %> td").filter(":not(:has(table, th))") // table, th元素不需要被單擊刪除
            .click(function () {
            $(this).addClass("highlight");
            $(this).fadeOut(1000, function () {
            $(this).remove(); // 這里只是在客戶端刪除數據，服務端沒做任何操作
            });
            });

•通過單擊標題刪除對應的全部列

            // closest():從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素
            // prevAll():獲得集合中每個匹配元素的所有前面的兄弟元素
            // parents():獲得集合中每個匹配元素的祖先元素
            // find():獲得當前元素匹配集合中每個元素的后代
            $("#<%=gvBooks.ClientID %> th").click(function () {
            // 獲取當前單擊標題列的索引
            var thCurIndex = $(this).closest("th").prevAll("th").length;
            // 給列表每行添加回調函數
            $(this).parents("#<%=gvBooks.ClientID %>").find("tr").each(function () {
            $(this).find("td:eq(" + thCurIndex + ")").remove(); // 刪除當前單元格
            $(this).find("th:eq(" + thCurIndex + ")").remove(); // 刪除當前標題
            });
            });

•實現列表每行拖拽操作

<script type="text/javascript" src="../Scripts/jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
$(function () {
            // 下載一個JQuery Table拖拽插件：http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
            // tableDnD函數還包含一些參數，具體可以參看以上網站
            $("#<%=gvBooks.ClientID %>").tableDnD();
});
</script>

 •實現鼠標移動到每行改變鼠標樣式

            // :odd:選擇奇數元素，從 0 開始計數.
            // :even:選擇偶數元素，從 0 開始計數.
            $("#<%=gvBooks.ClientID %> tr").filter(":even").bind("mouseover", function () {
            $(this).css("cursor", "pointer");
            });
            $("#<%=gvBooks.ClientID %> tr").filter(":odd").bind("mouseover", function () {
            $(this).css("cursor", "wait");
            });

•實現列表各行背景變色和列表動畫加載效果

            $("#<%=gvBooks.ClientID %>").slideUp(2500).slideDown(2500);
            $("#<%=gvBooks.ClientID %> tr").filter(":odd").css("background-color", "#c8ebcc");

 •實現單擊單元格獲得該單元格內的內容

            $("#<%=gvBooks.ClientID %> tr").filter(":not(th)").click(function (e) {
                var $cell = $(e.target).closest("td");
                $("#<%=gvBooks.ClientID %> td").removeClass("highlight");
                $cell.addClass("highlight");
                $("#message").text('你選擇了:' + $cell.text());
            });