Question

我在使用Javascript隐藏Gridview的行时遇到一些问题...

我的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（Button id =“Btn”）我想隐藏选中使用checkboxes..i的行尝试了下面的代码...但它不工作..问题是什么？这是错误的方式????

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

    }

2ND问题与第一个问题相同：

在这里，我尝试使用相应的链接按钮选择和取消选择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>

我在codebehind中添加了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" +"')");

        }
    }

它不起作用的人PLZ帮助我解决Javascripts的问题...

Answer 1

编辑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);
}

Answer 2

服务器控件的客户端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";
                }

            }
        }
    }

使用Javascript隐藏Gridview

2 个答案: