`
njmnjx
  • 浏览: 236604 次
  • 性别: 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);
分享到:
评论

相关推荐

    Asp.net GridView隔行变色和光棒效果2种方法实现

    接着,在后台代码(如.aspx.cs文件)中,我们需要处理`RowCreated`事件,添加JavaScript代码来实现鼠标悬停时的变色效果: ```csharp protected void gvProjectList_RowCreated(object sender, ...

    Gridview隔行换色

    本文将深入探讨如何通过JavaScript实现GridView的隔行换色功能,这不仅能够提高数据的可读性,还能增强视觉效果,使得界面更加吸引人。 ### GridView隔行换色的概念 GridView是一种常见的数据展示控件,它以表格...

    gridview 光棒效果.txt

    在探讨“gridview光棒效果”这一主题时,我们首先需要理解几个关键概念:`GridView`控件、光棒效果以及代码片段中的具体实现。`GridView`是ASP.NET Web Forms框架中用于展示数据的一种强大控件,它能够以表格的形式...

    gridcontrol隔行变色、焦点行颜色、改变显示值、固定列

    在本文中,我们将深入探讨如何利用GridControl实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能,并提供相关的源码示例。 1. **隔行变色**: 隔行变色是一种常见的视觉增强技巧,它可以...

    gridview,repeater光棒效果,不出现交替色

    做开发时列表展示时经常会有光棒效果,我们往往在.cs文件中写很多后台代码,如果列表展示页面很多时,几乎等同于复制粘贴。该JS代码只需在aspx页面里引入就行,非常方便易维护,注意列表的ID

    点击GridView行变色

    在实际应用中,我们有时需要实现用户交互效果,例如,当用户点击GridView的某一行时,该行背景色发生变化,以提供更好的用户体验。这个例子就展示了如何实现这样的功能。 首先,我们需要在后台代码(C#)中为...

    gridview选中变色实现方法,.net

    其中,为GridView添加行选中变色效果是一种常见的需求,能够提升用户体验,使用户更直观地感知当前选中的行。 #### 代码解析 在题目给出的代码片段中,主要实现了当鼠标悬停在GridView的某一行时,该行背景颜色会...

    gridview荧光棒效果

    在探讨“gridview荧光棒效果”的实现时,我们首先需要理解几个关键概念:GridView控件、CSS样式以及JavaScript事件处理。GridView是ASP.NET中一个非常强大的数据绑定控件,用于展示和操作数据库中的数据。而荧光棒...

    ASPXGridView用法

    ASPXGridView详解(上) 一。ASPXGridView外观显示 属性: Caption----列的标题( KeyFieldName----数据库字段 SEOFriendly 是否启用搜索引擎优化 Summary 指定分页汇总信息的格式 Setting节点的ShowFilterRow=...

    GridView荧光棒效果

    ### GridView荧光棒效果解析 在探讨GridView荧光棒效果之前,我们首先需要了解几个基本概念:GridView控件、荧光棒效果以及相关的JavaScript代码如何实现这一效果。 #### GridView控件简介 `GridView`是ASP.NET ...

    Android 点击ListView 或GridView 的一个item 使其里面textview变色

    Android 点击ListView 或GridView 的一个item 使其里面textview变色 详情可访问博客地址:http: blog csdn net gaolei1201 article details 39084159

    .net基础框架gridview单选变色

    当我们谈到“gridview单选变色”,这通常涉及到在GridView中实现一种功能,即当用户选择一行时,这一行会改变颜色,以突出显示所选行,同时确保只有一个行处于选中状态。 首先,我们需要理解GridView的基本结构。...

    GridView选定行变色

    要实现“GridView选定行变色”的效果,主要涉及以下几个步骤: 1. **定义选择样式**:我们需要创建一个新的CSS类,用于指定被选中行的样式。例如,可以定义一个名为`SelectedRowStyle`的CSS类,设置背景颜色、字体...

    android gridview分页和滑动效果

    本教程将详细讲解如何实现GridView的分页和滑动效果。 首先,我们需要了解GridView的基本用法。GridView继承自AbsListView,通过设置其`android:numColumns`属性来指定每行显示的列数。数据通常是通过Adapter来绑定...

    gridview图片点击变暗效果

    在Android开发中,GridView是一种常用的布局控件,它允许我们以网格的形式展示数据,通常用于创建类似相册或应用列表的界面。在这个场景下,"gridview图片点击变暗效果"是一个常见的交互设计,用于突出显示用户点击...

    gridview排序 变色 分页添加命令实例

    行变色通常是根据特定条件来改变GridView中某一行或某一列的背景颜色,以提高数据可读性和视觉效果。可以使用RowDataBound事件来实现这一功能。在事件处理程序中,可以通过检查数据行的类型(`e.Row.RowType == ...

    GridView实现漂亮的多选效果

    本篇文章将深入探讨如何使用GridView实现漂亮的多选效果,以便用户可以方便地选择多个项目。 首先,我们需要了解GridView的基本用法。GridView继承自AbsListView,它会在垂直方向上滚动,并将子视图排列成行和列。...

    asp.net下让Gridview鼠标滑过光棒变色效果

    当希望增强用户体验,使界面更具交互性时,我们可以为GridView添加一些动态效果,如鼠标滑过时的高亮(光棒)变色效果。标题和描述提到的“asp.net下让Gridview鼠标滑过光棒变色效果”正是这样一个功能,下面将详细...

    ListView嵌套GridView实现左右滑动的效果

    当需要在一个列表项中展示多列内容时,我们可能会考虑将GridView嵌套在ListView中,以实现更复杂的视图效果。本教程将探讨如何在Android中实现ListView嵌套GridView,并使其支持左右滑动。 首先,我们需要理解...

Global site tag (gtag.js) - Google Analytics