計(jì)算機(jī)書(shū)目錄清單

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

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

系統(tǒng) 2017 0

這節(jié)主要總結(jié)下通過(guò)jQuery簡(jiǎn)單操作GridView,以避免通過(guò)后臺(tái)服務(wù)操作刷新頁(yè)面。

要操作簡(jiǎn)單的列表,首先需要設(shè)計(jì)界面和初始化數(shù)據(jù):

頁(yè)面結(jié)構(gòu):

View Code
        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< fieldset >
< div class ="header" >
計(jì)算機(jī)書(shū)目錄清單 </ div >
< div >
< asp:GridView ID ="gvBooks" runat ="server" SkinID ="gvBooksSkin" AutoGenerateColumns ="false" >
< Columns >
< asp:BoundField DataField ="BookId" HeaderText ="序號(hào)" />
< asp:BoundField DataField ="Title" HeaderText ="書(shū)名" />
< 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 >

要使用皮膚還需注意在頁(yè)面page標(biāo)簽里面添加StylesheetTheme屬性:

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

頁(yè)面還使用了樣式代碼:

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 >

后臺(tái)初始化代碼:

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 " , " 持續(xù)交付:發(fā)布可靠軟件的系統(tǒng)方法 " , " (英) 亨布爾 (Humble,J.),(英) 法利 (Farley,D.) 著 喬梁 譯 " , " 人民郵電出版社 " );
dt.Rows.Add( " 2 " , " 人件集:人性化的軟件開(kāi)發(fā) " , " (澳) Larry L. Constantine 著 謝超 等 譯 " , " 機(jī)械工業(yè)出版社 " );
dt.Rows.Add( " 3 " , " 一線架構(gòu)師實(shí)踐指南 " , " 溫昱 著 " , " 電子工業(yè)出版社 " );
dt.Rows.Add( " 4 " , " 設(shè)計(jì)模式:可復(fù)用面向?qū)ο筌浖幕A(chǔ) " , " Erich Gamma 等 著 " , " 機(jī)械工業(yè)出版社 " );
dt.Rows.Add( " 5 " , " 重構(gòu):改善既有代碼的設(shè)計(jì) " , " (美)福勒 著 熊節(jié) 譯 " , " 人民郵電出版社 " );
return dt;
}
}

界面顯示效果:

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

下面是實(shí)現(xiàn)GridView各種操作的代碼集合:

?鼠標(biāo)移動(dòng)到列表每行高亮顯示:

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

?下面的代碼是對(duì)hover函數(shù)的解釋,不用解釋?xiě)?yīng)該能看明白吧

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

?鼠標(biāo)移動(dòng)到列表每個(gè)單元格高亮顯示,很簡(jiǎn)單直接把tr改成td

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

?鼠標(biāo)單擊每行列表刪除所選行

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

?鼠標(biāo)單擊每單元格并刪除所選單元格

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

?通過(guò)單擊標(biāo)題刪除對(duì)應(yīng)的全部列

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

?實(shí)現(xiàn)列表每行拖拽操作

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

    

??實(shí)現(xiàn)鼠標(biāo)移動(dòng)到每行改變鼠標(biāo)樣式

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

?實(shí)現(xiàn)列表各行背景變色和列表動(dòng)畫(huà)加載效果

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

    

??實(shí)現(xiàn)單擊單元格獲得該單元格內(nèi)的內(nèi)容

                  $("#<%=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 (通過(guò)jQuery操作GridView技巧集合)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 欧美综合图区亚洲综合图区 | 日韩在线a视频免费播放 | 老司机深夜免费福利 | 国产精品美女自在线观看免费 | 国产特级毛片aaaaaa | 日本不卡高清中文字幕免费 | 动漫精品欧美一区二区三区 | 国内毛片视频 | 一本大道加勒比久久综合 | 国产拍在线 | 五月天激情视频 | 操操操天天操 | 97午夜视频 | 天天槽天天槽天天槽 | 亚洲国产精品久久日 | 国产精品爱久久久久久久三级 | 日本在线播放一区 | 日韩日b视频 | 伊人久久成人成综合网222 | 无遮挡一级毛片视频 | 久久99九九99九九精品 | 欧美激情在线免费观看 | 四虎最新永久免费网址 | 国产福利在线观看精品 | 青青久在线视频免费视频 | 四虎aⅴ| www国产视频 | 久久国产精品久久久久久久久久 | 五月精品| 国产精品播放 | 欧美性猛交xxxx免费看手交 | 伊人久久视频 | 精品国产综合区久久久久久 | 九九久久精品国产 | 久99久爱精品免费观看视频 | 国产精品福利在线观看免费不卡 | 久久成人免费播放网站 | 99精品国产高清一区二区麻豆 | 久久影| 亚拍精品一区二区三区 | 久久九九有精品国产56 |