`
njmnjx
  • 浏览: 232345 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics