网格视图自定义控件和 JavaScript 函数 c#

Gridview Custom controls and javascript functions c#

本文关键字：函数 JavaScript 视图 自定义控件 网格      更新时间：2023-09-26

我有一个自定义控件，它基本上是一个网格视图，它的第一列是一个模板字段，标题中有一个复选框，每一行都有一个复选框。单击标题复选框应该调用一些 javascript 来切换显示的每一行中的每个复选框......正如我们所知，这是一个常见的要求。

我的问题是(我稍后会更详细地介绍(当我在同一页面上有 2 个这些控件时，我单击选择所有 chkbox 的复选框，页面调用错误的 javascript 位(仅在呈现的 html 页面上出现一次(并选中错误网格上的所有复选框！

这是我的代码：

<asp:TemplateField>
    <HeaderTemplate>
        <input type="checkbox" ID="chkSelectAll" onclick="SelectAllCheckboxes(this)"/>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox runat="server" ID="chkSelected"></asp:CheckBox>
    </ItemTemplate>
</asp:TemplateField>

Javascript：

<script>
    function SelectAllCheckboxes(chk) {
        $('#<%=gridPublishers.ClientID%>').find("input:checkbox").each(function () 
            {
                if (this != chk) { this.checked = chk.checked; }
            });
        }
 </script>

因此，父页面上有 2 个这样的控件。第一个网格显示所有发布者，另一个网格显示从第一个网格中选择的发布者...

<h2>Selected Publishers</h2>
<cac:GridPublishers id="GridSelectedPublishers" runat="server" CssClass="GridSelectedPublishers" BindSource="DynamicFromSession" ShowMultiSelectCol="true" ShowFilterControls="false" NoRecordsMessage="No Publishers have been selected yet." />
<br /><br />
<h2>All Publishers</h2>
<cac:GridPublishers id="GridPublishers" runat="server" ShowMultiSelectCol="true" CssClass="GridPublishers"  />

正如我之前所说，javascript 只在呈现的 html 页面上出现一次(我明白为什么(，但是我如何让自定义控件的每个实例调用它自己的 javascript(或替代方法(，以便它只切换自己的复选框？

。

我还尝试添加 2 个 javascript 事件并在网格绑定上尝试找到主复选框并为其分配正确的 JS 函数，但我搜索了标题行的每个单元格，并且 col 0(控件应该在哪里(包含 0 个控件。

。

我还尝试添加一个隐藏按钮，在页面加载时，我可以为其分配正确的 javascript 函数(这将影响正确的网格视图(，然后主复选框在 ClientClick 事件上触发隐藏按钮，但随着页面重新加载，它会感到困惑并触发单击事件两次，并且显然是从两个网格触发

！

请帮忙！！

所以我想你意识到这行代码导致了在错误的数据网格中选择复选框的根本问题：

#<%=gridPublishers.ClientID%>').find

它总是会选择网格发布者，而不是网格选择发布者。

所以这是要修复的区域。 你需要做的是让这个函数更抽象一点：

<input type="checkbox" ID="chkSelectAll" onclick="SelectAllCheckboxes(this)"/>

onclick 事件传递"this"，但这只是对复选框的引用，没有太大帮助。

我建议你试着把它做成这样：

<input type="checkbox" ID="chkSelectAll" onclick="SelectAllCheckboxes(this,'GridSelectedPublishers')"/>

然后使用 javascript 函数中的第二个参数来获取正确的数据网格。

你现在的问题是如何让第二个论点在那里......您也许可以为此想到自己的解决方案，但是我很想将该复选框设置为ASP复选框，并在datagrid渲染期间找到它并为其分配带有属性的onClick

有道理吗？

我已经将"ben_the_builder"的答案标记为正确，因为它让我沿着正确的路线前进。

当我绑定我的网格时，我调用这个函数：

private void Register_CheckAllControl_JScript()
    {
        // THIS IS A WORKAROUND FOR WHEN TWO OF THE SAME CUSTOM CONTROL LIVE ON THE SAME PAGE, EACH CONTROL'S JAVASCRIPT MUST SPECIFY THE ID OF THE CONTROL TO AFFECT
        if (gridPublishers.HeaderRow != null)
        { 
            CheckBox chkAll = gridPublishers.HeaderRow.FindControl("chkSelectAll") as CheckBox;
            if (chkAll != null)
            {
                if (this.BindSource == Enumerators.BindSource.DynamicFromSession)
                {
                    chkAll.Attributes.Add("onclick", "SelectAllCheckboxes(this,'GridSelectedPublishers');");
                }
                else
                {
                    chkAll.Attributes.Add("onclick", "SelectAllCheckboxes(this,'GridPublishers');");
                }
            }
        }
    }

若要从代码隐藏访问"master"复选框 - 它必须是 ASP 控件。 循环访问标头单元格集合时无法识别输入控件。

我的Javascript需要稍微调整一下才能使ID正确。我传递的控件名称必须是它在父页面上给出的名称，该父页面属于三层最终 html 输出名称的中间(请参阅示例，这是有意义的......

我的Javascript现在看起来像这样：

<script>
        function SelectAllCheckboxes(chk, ctrlName) {
            //if ctrlName = "
            $("#MainContent_" + ctrlName + "_gridPublishers").find("input:checkbox").each(function () {
                if (this != chk) { this.checked = chk.checked; }
            });
        }
    </script>

你想使用参数。 不要将 #<%=gridPublishers.ClientID%> 硬编码到 javascript 函数中，而是使用传递给函数的 this 参数来确定包含复选框的网格视图的名称，然后检查该网格视图中的所有内容。

相关文章：