隐藏GridView的使用JavaScript

我有隐藏的GridView的行使用JavaScript的一些问题...隐藏GridView的使用JavaScript

我的js函数是

<script type="text/javascript"> 
     function HideRows(Gdview) { 

      rows = document.getElementById(Gdview).rows; 
      for (var i = 0; i < rows.length; i++) { 
       if (rows[i].cells[0].type == "checkbox") { 

        if (rows[i].cells[0].childNodes[0].checked) { 

         rows[i].style.display = "none"; 
        } 

       } 
      } 


     } 
    </script>

我有一个GridView ID = “Gdview” 其中有5列和每列都有一个复选框id =“Chk”，我在Gridview（Button id =“Btn”）后放置了一个Button我想隐藏选中的行使用复选框..我试着在后面的代码..但它不是工作..什么是wud是问题？这是错误的方式吗？

protected void Btn_Click1(object sender, EventArgs e) 
    { 
     Btn.Attributes.Add("onclick", "HideRows('" + Gdview + "')"); 

    }

第二个问题同样相同，第一个：

我在这里试图选择并使用相应的链接按钮取消选择所有复选框在GridView的...查看我的标记和JS：

<script type="text/javascript"> 
     function SelectAll(b) { 

      var grid = document.getElementById("<%= Gdview.ClientID %>"); 
      var cell; 
      if (grid.rows.length > 0) { 

       for (var i = 0; i < grid.rows.length; i++) { 


        cell = grid.rows[i].cells[0]; 
        if (cell.childNodes[0].type == "checkbox") 
         cell.childNodes[0].checked = b; 

       } 
      } 

     } 
    </script> 


<asp:GridView ID="Gdview" runat="server" AutoGenerateColumns="False" 
onrowdatabound="Gdview_RowDataBound"> 
<Columns> 
<asp:TemplateField> 
<ItemTemplate> 
<asp:CheckBox ID="Chk" runat="server" /> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:BoundField HeaderText="SNO" DataField="SerialNo" /> 
<asp:BoundField HeaderText="Organization" DataField="Organization" /> 
<asp:BoundField DataField="Origin" HeaderText="Origin"/> 
<asp:BoundField DataField="Location" HeaderText="Location" /> 
<asp:BoundField DataField="Established" HeaderText="Established"/> 
<asp:TemplateField> 
<ItemTemplate> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
<asp:LinkButton ID="lnkChekall" runat="server" Text="Chekall"></asp:LinkButton> 
<asp:LinkButton ID="lnkUncheck" runat="server" Text="UnCheckAll"></asp:LinkButton>

和我增加RowDataBound事件在代码隐藏：

protected void Gdview_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 
      lnkChekall.Attributes.Add("onclick","javascript:SelectAll('" +"true" +"')"); 
      lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll('" + "false" +"')"); 

     } 
    }

它不工作克UYS plz帮助我在我的问题与Javascript角...

来源

2013-12-21 Ajay Finian

编辑3

在你的第二个问题，我可以看到有几个问题：

您不应该在RowDataBound中添加属性。它会为每行添加属性，而不是仅添加一次。
您的JavaScript错误。
您应该将布尔true/false传递给javascript函数，而不是字符串。

要使其工作，在Page_Load中添加的属性：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
     //PopulateGridView 
     PopulateGrid(); 
    } 
    lnkChekall.Attributes.Add("onclick", "javascript:SelectAll(true)"); 
    lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll(false)"); 

}

，改变你的JavaScript这样的：

<script type="text/javascript"> 
    function SelectAll(b) { 

     var grid = document.getElementById("<%= Gdview.ClientID %>"); 
     var cell; 
     if (grid.rows.length > 0) { 

      for (var i = 0; i < grid.rows.length; i++) { 
       cell = grid.rows[i].getElementsByTagName("input"); 
       if (cell.length > 0) { 
        cell[0].checked = b; 
       } 
      } 
     } 
    } 
</script>

你这样做是错误的方式！没有必要从后面的代码中调用JS。只需添加样式即可使行不可见。这是我该怎么做：

在标记中我有我的GridView与五个复选框和一个行号（只是用数据填充Gridview）。我也有一个按钮：

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server"> 
      <Columns> 
       <asp:TemplateField HeaderText="CheckBox 1"> 
        <ItemTemplate> 
         <asp:CheckBox ID="chk1" Text="CheckBox 1" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="CheckBox 2"> 
        <ItemTemplate>       
         <asp:CheckBox ID="chk2" Text="CheckBox 2" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="CheckBox 3"> 
        <ItemTemplate>       
         <asp:CheckBox ID="chk3" Text="CheckBox 3" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="CheckBox 4"> 
        <ItemTemplate>       
         <asp:CheckBox ID="chk4" Text="CheckBox 4" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="CheckBox 5"> 
        <ItemTemplate>       
         <asp:CheckBox ID="chk5" Text="CheckBox 5" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Row"> 
        <ItemTemplate> 
         <%#Container.DataItem %> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 
     <asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" /> 
    </div> 
    </form> 
</body> 
</html>

现在在代码中我用测试数据填充GridView。在按钮的单击事件中，我循环遍历GridView的所有行并查找第一个CheckBox。如果被选中，我躲在行：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
     //Test Data 
     var lst = new List<string>() { "Row 1", "Row 2", "Row 3" }; 
     GridView1.DataSource = lst; 
     GridView1.DataBind(); 
    } 

} 

protected void Button1_Click(object sender, EventArgs e) 
{ 
    foreach (GridViewRow row in GridView1.Rows) 
    { 
     var chk = row.FindControl("chk1") as CheckBox; 
     if (chk != null && chk.Checked) 
     { 
      row.Attributes.Add("style", "display:none"); 
     } 
    } 
}

编辑：如果要使用JavaScript，还没有必要从分配代码，它后面。输入添加到标记调用JS HideRows()功能：

<asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" />

，并在页面的功能应该是这样的：

<script type="text/javascript" > 
    function HideRows(Gdview) { 
     var rows = document.getElementById(Gdview).rows; 

     for(var i=0; i < rows.length; i++) { 
      var inputs = rows[i].getElementsByTagName("input"); 
      if (inputs.length > 0 && inputs[0].checked) { 
         rows[i].style.display = "none"; 
      }  
     } 
    } 
</script>

这里之前，点击按钮后截图： enter image description here

您可以下载我的测试项目here。

编辑2：如果需要调用后面从代码的功能，只是这样做：

protected void Button1_Click(object sender, EventArgs e) 
{ 
    //Your other code goes here 
    // 
    Page.ClientScript.RegisterStartupScript(GetType(), "HideRows", "HideRows('" + GridView1.ClientID + "');", true); 
}

来源

2013-12-22 03:14:12 afzalulh

多数民众赞成它工作,,,但是任何方式来使用JAvascript函数做到这一点？我的意思是我想隐藏按钮点击后检查的行！ –

@ user3035687 - 是的，你可以在js中完成。请参阅编辑。 – afzalulh

但为什么我不能在按钮中调用JS单击...我试着用linkbutton还没有实现功能..我试过另一个例子也.. –

客户端服务器控件的ID是你分配的ID的不同，所以尝试：

document.getElementById("<%= Gdview .ClientID %>")

完整代码：

//dont pass as parameter 
function HideRows() { 

     rows = document.getElementById("<%= Gdview.ClientID %>").rows; 
     for (var i = 0; i < rows.length; i++) { 
      if (rows[i].cells[0].type == "checkbox") { 

       if (rows[i].cells[0].childNodes[0].checked) { 

        rows[i].style.display = "none"; 
       } 

      } 
     } 
    }

来源

2013-12-21 14:32:43

在代码隐藏？我有这样的呼吁？ Btn.Attributes.Add（“onclick”，“HideRows（）”）; –

仍然选择的行不隐藏伴侣！ –

你得到的任何错误，也尝试删除像'getElementById（<％= Gdview.ClientID％>）的引号' –

隐藏GridView的使用JavaScript

回答

相关问题