這節(jié)主要總結(jié)下通過jQuery簡單操作GridView，以避免通過后臺服務(wù)操作刷新頁面。
要操作簡單的列表，首先需要設(shè)計(jì)界面和初始化數(shù)據(jù)：
頁面結(jié)構(gòu)：
View Code
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
>
<
div
class
="header"
>
計(jì)算機(jī)書目錄清單
</
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標(biāo)簽里面添加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
"
,
"
持續(xù)交付：發(fā)布可靠軟件的系統(tǒng)方法
"
,
"
（英） 亨布爾 （Humble，J.），（英） 法利 （Farley，D.） 著 喬梁 譯
"
,
"
人民郵電出版社
"
);
dt.Rows.Add(
"
2
"
,
"
人件集：人性化的軟件開發(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;
}
}
界面顯示效果：
下面是實(shí)現(xiàn)GridView各種操作的代碼集合：
?鼠標(biāo)移動到列表每行高亮顯示：
<script type="text/javascript">
$(
function
() {
$("#<%=gvBooks.ClientID %> tr").hover(
function
() {
$(
this
).addClass("highlight");
},
function
() {
$(
this
).removeClass("highlight");
});
});
</script>
?下面的代碼是對hover函數(shù)的解釋，不用解釋應(yīng)該能看明白吧
$("#<%=gvBooks.ClientID %> tr").mouseenter(
function
() {
$(
this
).addClass("highlight");
}).mouseout(
function
() {
$(
this
).removeClass("highlight");
});
?鼠標(biāo)移動到列表每個單元格高亮顯示，很簡單直接把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ù)端沒做任何操作
});
});
?鼠標(biāo)單擊每單元格并刪除所選單元格
//
:has:選擇含有選擇器所匹配的至少一個元素的元素
//
: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ù)端沒做任何操作
});
});
?通過單擊標(biāo)題刪除對應(yīng)的全部列
//
closest():從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素
//
prevAll():獲得集合中每個匹配元素的所有前面的兄弟元素
//
parents():獲得集合中每個匹配元素的祖先元素
//
find():獲得當(dāng)前元素匹配集合中每個元素的后代
$("#<%=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 () {
// 下載一個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)移動到每行改變鼠標(biāo)樣式
//
:odd:選擇奇數(shù)元素，從 0 開始計(jì)數(shù).
//
:even:選擇偶數(shù)元素，從 0 開始計(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)列表各行背景變色和列表動畫加載效果
$("#<%=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 (通過jQuery操作GridView技巧集合)