GridView 변색 막대 효과 검색 즉시 필터링

3929 단어 JavaScriptcss
기본 코드는 다음과 같습니다.
스타일

<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>

3. 백그라운드 키 코드
GridView에 데이터를 바인딩하는 등의 작업은 생략됩니다.

//   UpdatePanel1  onload         
            ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "load", "load()", true);

좋은 웹페이지 즐겨찾기