計算機書目錄清單

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

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

系統 2224 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條評論
主站蜘蛛池模板: 城步| 东海县| 阿拉尔市| 密山市| 故城县| 西乌珠穆沁旗| 肃北| 哈巴河县| 中西区| 外汇| 聂拉木县| 南皮县| 宜宾市| 兖州市| 荆门市| 开封县| 平定县| 鸡西市| 湟源县| 宝丰县| 全州县| 祁门县| 天峨县| 崇礼县| 乡宁县| 临江市| 苍南县| 田阳县| 元阳县| 新化县| 乌什县| 象州县| 锦屏县| 稻城县| 尚义县| 黔西县| 黄梅县| 临江市| 深水埗区| 广昌县| 临夏市|