原文:http://www.cnblogs.com/iamlixin/archive/2012/02/04/2338571.html
这节主要总结下通过jQuery简单操作GridView,以避免通过后台服务操作刷新页面。
要操作简单的列表,首先需要设计界面和初始化数据:
页面结构:
View Code
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
后台初始化代码:
View Code
界面显示效果:
下面是实现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()); });