ASP.NET jQuery 食谱19 (通过jQuery操作GridVie

这节主要总结下通过jQuery简单操作GridView，以避免通过后台服务操作刷新页面。

要操作简单的列表，首先需要设计界面和初始化数据：

页面结构：

View Code

        
          <
        
        
          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
      
      
        "
      
      
        %>

页面还使用了样式代码：

View Code

        
          <
        
        
          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
        
        
          >

后台初始化代码：

View Code

        
          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());
      

                  });

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

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义