GridView 隔行变色 光棒效果 搜索及时过滤

主要代码如下:
一、样式

<style type="text/css">
.over
{
background:#ace1eb;
}
.alt
{
background: #fafeff;
}
</style>

二、js

<script type="text/javascript" src="../../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
//---------------隔行变色、搜索框输入及时过滤,兼容UpdatePanel--------------
var t = false; //此变量用于判断行是否存在偶行变色样式类
$(function() {
load();
});
//分开写为了是在后台触发此方法,兼容UpdatePanel
function load() {
$("#gvFieldData tr:even").addClass("alt"); //此#gvFieldData 为GridView在客户端id
$("#gvFieldData tr").hover(
function() {
t = $(this).hasClass("alt");
if (t)
$(this).removeClass("alt"); //移除此背景样式类后,再添加另外一个背景样式类
$(this).addClass("over");
},
function() {
if (t)
$(this).addClass("alt");
$(this).removeClass("over");
}
);
var $trs = $("tr"); //选择所有行
//实时筛选,#txtSearchKey此为关键字收集文本框
$("#txtSearchKey").keyup(function() {
$trs.show();
var countrys = []; //存放及时搜索内容
if (this.value != "") {
$trs.hide();
//一、不兼容指定列查询,不兼容title等属性的处理
//$trs.filter(":first,:contains('" + this.value + "')").show();
//二、兼容指定列查询-----------------
$trs.filter(":first").show();
var tds = $("#gvTableData tr").find("td:eq(2),td:eq(3),td:eq(4)");
var v = this.value;
tds.filter(function(index) {
//span标签为适应页面显示长内容,截取部分显示,而全部的则放在titile中,将截取的要显示部分用span包裹起来
var t = $(this).children("span").attr("title");
if (t.toUpperCase().indexOf(v.toUpperCase()) != -1) {
countrys.push($(this).parent());
$(this).parent().show();
}

});
//------------------------------------------
}
$trs.removeClass("alt"); //移除背景色为新内容准备

//一、不兼容指定列查询,不兼容title等属性的处理
//$trs.filter(":contains('" + this.value + "'):even").addClass("alt"); //给偶数行添加odd样式
//------------------------------------------
//二、兼容指定列查询
var tds = $("#gvTableData tr").find("td:eq(2),td:eq(3),td:eq(4)");
if (countrys.length > 0) {
$.each(countrys, function(i, n) {
if (i % 2 != 0)
this.addClass("alt");
});
} else {
$trs.filter(":even").addClass("alt");
}

});
}
//--------------------------------------------------------------------------
</script>

三、后台关键代码
绑定数据到GridView等等操作省略……

//因为有UpdatePanel1所以onload事件要重新触发一次
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "load", "load()", true);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值