个人中心
gpt4 book ai didi

c# - 使用 Javascript 隐藏 Gridview

转载 作者：行者123 更新时间：2023-11-28 01:42:27 25 4
gpt4 key购买 nike

我在使用 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 之后放置了一个按钮(按钮 id="Btn")，我想隐藏所选内容使用复选框的行..我尝试了下面的代码..但它不起作用..问题是什么？这是错误的方式吗？？？

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" +"')");

        }
    }

这不起作用，请帮助我解决 Javascript 的问题...

最佳答案

编辑3

在你的第二个问题中，我发现有几个问题:

  1. 您不应在 RowDataBound 中添加属性。它将添加每行的属性而不是仅一次。

  2. 您的 JavaScript 错误。

  3. 您应该将 bool 值 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 的所有行并找到第一个复选框。如果选中，我将隐藏该行:

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

关于c# - 使用 Javascript 隐藏 Gridview，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20720018/

25 4 0
文章推荐： css - 如何使用 simple_form_for 更改 Rails 应用程序中文本区域的大小和位置？
文章推荐： javascript - 如何从 chrome 扩展程序填写网页表单中的文本字段？
文章推荐： c++ - gdb 用户定义函数 : how to pass complex argument?
文章推荐： c++ - 无法在 Windows 上构建 Soundpipe DSP 库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com