計算機書目錄清單

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ASP.NET jQuery 食譜19 (通過jQuery操作GridVie

系統 2404 0

這節主要總結下通過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;
}
}

界面顯示效果:

ASP.NET jQuery 食譜19 (通過jQuery操作GridView技巧集合)_第1張圖片

下面是實現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元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 手机看片高清国产日韩片 | 午夜网站在线观看免费网址免费 | 国产一区二区三区欧美 | 日本免费不卡视频一区二区三区 | 中文字幕视频免费 | 四虎影院在线网址 | 欧洲亚洲综合一区二区三区 | 四虎永久视频 | 中文字幕一区二区三区在线播放 | 亚洲综色 | 亚洲欧美日韩中文字幕在线一 | 国产一级一片免费播放 | 久久99亚洲精品久久99 | 国产成人精品久久 | 亚洲视频欧洲视频 | 国产精品一区二区在线观看 | 中文字幕一区二区三区精彩视频 | 成人短视频在线在线观看 | 国产羞羞事1000部在线观看 | 国产高清精品一区 | 欧美图片一区 | 中文字幕在线观看亚洲日韩 | 九九99香蕉在线视频免费 | 精品色视频| 亚洲国产最新在线一区二区 | 午夜宅男在线观看 | 亚洲精品区在线播放一区二区 | 99精品国内不卡在线观看 | 久久久久久久久久免观看 | 国产精品午夜波多野结衣性色 | 久久99在线| 性生活视频网 | 人人爱天天做夜夜爽毛片 | 日本精品在线 | 日韩毛片欧美一级国产毛片 | 深夜福利院 | a级毛片免费完整视频 | 97精品国产高清在线看入口 | 亚洲成人免费 | 久在线观看 | 久久欧美精品欧美九久欧美 |