Question

enter code here我在我继承的一些代码中有一个gridview，它使用rowdatabound将javascript添加到复选框。这是为了使行复选框能够由标题中的主复选框设置。这一切都有效。问题是性能。用户不希望分页，其中一些网格可能有数千行。如果我们不使用Attributes.Add（）来连接javascript，渲染速度很快。如果我使用rowdatabound进行javascript注入，性能会从瞬间变为近一分钟，仅需600行。那不对。

所以我有两个问题：

1）rowdatabound永远处理这些javascript注入是否正常？

2）如果是这样，你会建议什么作为设置行复选框以使用标题中的主复选框的更快的替代方法？

由于我是论坛的新手，我要感谢大家在这里获得的帮助。我已经潜伏了几个星期了，你们的知识和愿意帮助你们都令人印象深刻。

更新：

感谢大家的帮助。这就是我最终做的事情：

首先，我必须在我的aspx中设置一些变量来捕获Master Page环境的clientID：

 <script language="javascript" type="text/javascript">
  //set the control id required by the external javascript 
  var ChangedAddressesGridViewID = '<%=ChangedAddressesGridView.ClientID%>';
 </script>

然后我将标题复选框的onclick设置为我的标题函数的名称，并将子复选框的onclick设置为我的子单击函数的名称。我只提供了三个参数，“this”用于单击的复选框本身，GridView的MasterPage友好名称和表示该列的数字。我知道硬编码，但列不是动态的，所以现在不是问题：

<asp:GridView id="ChangedAddressesGridView" runat="server" AutoGenerateColumns="False" >
    <Columns>
        <asp:BoundField datafield="AddressId" headertext="ID" />
        <asp:BoundField datafield="Code" headertext="Code" />
        <asp:BoundField datafield="Facility" headertext="Facility" />
        <asp:BoundField datafield="Address" headertext="Address" /> 

        <asp:TemplateField headertext="Select">
            <HeaderTemplate>
                <asp:Label id="LBLOverride" runat="server" text="Override" font-size="Smaller" font-names="Arial"></asp:Label><br />
                <asp:CheckBox id="chkBxHeader1" runat="server" onclick="HeaderClick(this,ChangedAddressesGridViewID,'4');"></asp:CheckBox> <br />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox id="chkBxSelect1" runat="server" onclick="ChildClick(this,ChangedAddressesGridViewID,'4');" ></asp:CheckBox> 
            </ItemTemplate>
            <headerstyle horizontalalign="Center" />
            <itemstyle horizontalalign="Center" />
        </asp:TemplateField>    

        <asp:BoundField datafield="CAddress" headertext="Corrected Address" />

        <asp:TemplateField headertext="Select">
            <HeaderTemplate>
                <asp:Label id="lblChange" runat="server" text="Change" font-size="Smaller" font-names="Arial"></asp:Label><br />
                <asp:CheckBox id="chkBxHeader2" runat="server" onclick="HeaderClick(this,ChangedAddressesGridViewID,'6');"></asp:CheckBox> 
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox id="chkBxSelect2" runat="server" onclick="ChildClick(this,ChangedAddressesGridViewID,'6');"></asp:CheckBox> 
            </ItemTemplate>
            <headerstyle horizontalalign="Center" />
            <itemstyle horizontalalign="Center" />
        </asp:TemplateField>  

     </Columns>
</asp:GridView>

以下是使其有效的JavaScript：

function GetHeaderCheckBox(grid, cellnum) {
    cell = grid.rows[0].cells[cellnum];
    for (j = 0; j < cell.childNodes.length; j++) {
        if (cell.childNodes[j].type == "checkbox") {return cell.childNodes[j]; }
    }
    return false;   
}

function CheckBoxIsChecked(row, cellnum) {
    cell = row.cells[cellnum];
    for (j = 0; j < cell.childNodes.length; j++) {
        if (cell.childNodes[j].type == "checkbox") {
            return cell.childNodes[j].checked;
        }
    }
}

function SetCheckBox(row, cellnum, checkedValue) {
     cell = row.cells[cellnum];
     for (j = 0; j < cell.childNodes.length; j++) {
         if (cell.childNodes[j].type == "checkbox") {
             cell.childNodes[j].checked = checkedValue;
         }
     }
}

function HeaderClick(HeaderCheckBox, GridViewID, checkboxcolumn) {

    var checkedValue;
    var grid = document.getElementById(GridViewID);
    var TotalChkBx = grid.rows.length;

    if (HeaderCheckBox.checked == true) { checkedValue = true; } else { checkedValue = false; }

    for (var n = 1; n < TotalChkBx; n++) {
        SetCheckBox(grid.rows[n], checkboxcolumn, checkedValue);
    };
}

function ChildClick(RowCheckBox, GridViewID, checkboxcolumn) {

    var grid = document.getElementById(GridViewID);
    var HeaderCheckBox = GetHeaderCheckBox(grid, checkboxcolumn);
    var TotalChkBx = grid.rows.length;
    var TotalChkBxChecked = 0;

    for (var n = 1; n < TotalChkBx; n++) {
        if (CheckBoxIsChecked(grid.rows[n], checkboxcolumn)) { TotalChkBxChecked++; }
    };

    if (TotalChkBxChecked == TotalChkBx - 1) { HeaderCheckBox.checked = true; } else { HeaderCheckBox.checked = false; }
}

你有它。与大多数类似的例子不同的是，我想通过列而不是仅仅旋转“输入”列表。这是因为我有两个复选框列，我不知道如何使用“输入”，我可以将它们分开而不会变得非常混乱。所以我找到了一个例子，帮助我在这里看到了如何做到这一点：

http://technico.qnownow.com/how-to-delete-multiple-rows-from-gridview-with-checkboxes/

另外，为了消除更多不必要的参数，我让子函数自己找出了它的标题复选框。

无论如何，现在我有一个select-all标题/子复选框模式，我可以放在任何地方。以前的版本必须查找特定的复选框名称，因此它仅限于一列，这意味着您必须在任何需要的位置复制/粘贴功能。差异已经悄悄进入，我的行为不一致和错误。有了这个解决方案，到目前为止，没有错误，并且到处都是相同的确切行为。

没有rowdatabound。生活很美好。

再次感谢大家。你们都帮助我思考问题的各个方面。

Answer 1

如果我的理解是正确的，您只需添加JavaScript以与主人的复选框进行交互，以选中/取消选中GridView

中的所有复选框

这是我的假设，因为你没有提供任何代码，也没有回答我上面的问题......

如果是这种情况，您可以在客户端使用JQuery来获得相同的效果：

示例：

<script>
    $(function () {
        var $grid = $("table[id$=myCustomGridView]");
        var $rows = $("> tbody > tr:not(:has(table, th))", $grid);
        var $master = $("input:checkbox[id$=masterCheck]");
        var $gridChecks = $("input:checkbox", $rows);

        $master.change(function (e) {
            e.preventDefault();

            $gridChecks.prop("checked", $master.is(":checked"));
        });

        $gridChecks.change(function (e) {
            e.preventDefault();

            var masterValue = true;

            for (var i = 0; i < $gridChecks.length; i++) {
                var $x = $gridChecks.eq(i);

                if (!$x.is(":checked")) {
                    masterValue = false;
                    break;
                }
            }

            $master.prop("checked", masterValue);
        });
    });
</script>
<asp:CheckBox Text="Check/Uncheck all" runat="server" ID="masterCheck" />
<asp:GridView runat="server" ID="myCustomGridView">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="myCheckBox" Text='<%# Eval("job_desc") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

This is a live sample

Answer 2

你可以在不使用javascript的情况下从后端做同样的事情。使用标题复选框的CheckedChanged功能执行此操作。代码应该看起来像这样 -

protected void chkAll_CheckedChanged(object sender, EventArgs e)
{
    CheckBox chk = (CheckBox)GridView1.HeaderRow.FindControl("chkAll");
    if (chk.Checked)
    {
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            CheckBox chkrow = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
            chkrow.Checked = true;
        }

    }
    else
    {
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            CheckBox chkrow = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
            chkrow.Checked = false;
        }
    }

}

让我知道这是如何表现的。

Gridview rowdatabound正在为行中的复选框永久设置onclick javascript

2 个答案: