0

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

所以我有两个问题：

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

2）如果是这样，您会推荐什么作为设置行复选框以与标题中的主复选框一起使用的更快替代方法？

由于我是论坛的新手，我要感谢这里的每个人已经收到的帮助。我已经潜伏了好几个星期了，你们的知识和乐于助人都给我留下了深刻的印象。

更新：

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

首先，我必须在我的 aspx 中设置一些变量来捕获母版页环境的 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/

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

无论如何，现在我有一个全选标题/子复选框模式，我可以放在任何地方。以前的版本必须查找特定的复选框名称，因此它仅限于那一列，这意味着您必须在需要的地方复制/粘贴功能。分歧已经悄悄出现，我的行为变得不一致和错误。使用此解决方案，到目前为止，没有错误，并且到处都有相同的行为。

并且没有行数据绑定。生活很好。

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

4

2 回答 2

0

如果我的理解是正确的，您添加 JavaScript 只是为了与 Master 的复选框交互以选中/取消选中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>

这是一个现场样本

于 2012-10-14T04:39:55.000 回答
0

您可以在不使用 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;
        }
    }

}

让我知道这是如何执行的。

于 2012-10-14T04:39:59.090 回答