JavaScript 隐藏多个 GridView 行

本文关键字：GridView 隐藏 JavaScript | 更新日期: 2023-09-27 17:56:56

DropDownList items

a
b
c

网格视图

X | B | C | D | E
a | 1 | 2 | 3 | 4
b | 2 | 2 | 2 | 2
c | 3 | 3 | 3 | 3

当DropDownList.SelectedItem = a

隐藏GridView.Rows = b & c

当DropDownList.SelectedItem = b

隐藏GridView.Rows = a & c

等等

有人知道在客户端执行此操作的 JavaScript 吗？

JavaScript 隐藏多个 GridView 行

假设下拉列表的 id 是alpha并且网格视图tbl，您可以这样做：

$(document).ready(function(){
  $("#alpha").change(function(){
    var selVal = $(this).find(":selected").text();   
   var rows =   $("#tbl tr:gt(0)");    
    if (selVal == "ALL") {           
       $("#tbl tr").show();          
    }
    else {        
       var rowToShow = rows.find("td:eq(0)").filter(":contains(" + selVal + ")").closest("tr");
    rows.show().not( rowToShow ).hide();
    }
  });   
});

这是 JS BIN 中的一个例子

在下面共享一个子伪代码： 

Array listFromGridView = [a,b,c];
// get parent dropdownbox and save for future reference
var drop=$("#dropdownBoxID);
drop.bind('click',function(e){ 
// get all element in an array
Array tempList= listFromGridView;
// remove the element which was clicked
// $(this) = the dropdownbox, $(this).val() = selected value
tempList.remove( $(this).val() );
// iterate and hide rows
foreach( element el in tempListView)
// code for hide goes here
});
// Done :-)
相关文章：