• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

这节主要总结下通过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());
});

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap