Gridview自定义控件和javascript函数c#

Posted 2023-03-31

【中文标题】Gridview自定义控件和javascript函数c#

【英文标题】：Gridview Custom controls and javascript functions c#

【发布时间】：2013-10-08 03:59:39

【问题描述】：

我有一个自定义控件，它基本上是一个 Gridview，它的第一列是一个 TemplateField，标题中有一个复选框，每行都有一个复选框。单击标题复选框应该调用一些 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（控件应该在哪里be) 拥有 0 个控件。

...

我还尝试添加一个隐藏按钮，在页面加载时，我可以为其分配正确的 javascript 函数（这将影响正确的 gridview），然后主复选框触发隐藏按钮 onClientClick 事件，但随着页面重新加载，它会混淆并触发两次点击事件，并且显然来自两个网格！

请帮忙！！

【参考方案1】：

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

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

它总是会选择 gridPublishers，而不是 GridSelectedPublishers。

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

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

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

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

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

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

您现在的问题是如何在其中获取第二个参数....您也许可以为此考虑自己的解决方案，但我很想将该复选框设置为 ASP 复选框，并在此期间找到它datagrid 渲染并使用 Attribute.Add 为其分配 onClick

有意义吗？

【参考方案2】：

我已经将“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');");
                
            
        
    

要从后面的代码访问“主”复选框 - 它必须是 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>

【参考方案3】：

您想使用参数。无需将 # 硬编码到您的 javascript 函数中，而是使用传递给函数的 this 参数来确定包含复选框的网格视图的名称，然后检查该网格视图内的所有内容。

【讨论】：

感谢 Vulcronos，但这是我的第一个方法，“this”参数仍然很混乱，并且总是会影响页面生命周期中加载的第二个自定义控件。

@wotney 这个参数不应该被混淆。 IT 应该传递被单击的复选框。如果它变得混乱，那就太奇怪了。

@ Vulcronos - 我已将我的 javascript 行更改为：this.find("input:checkbox").each(function () if (this != chk) this.checked = chk.checked; ... 但我收到“JavaScript 运行时错误：对象不支持属性或方法‘find’”

JS函数的第一行现在是：alert($(this).attr('id'));但警报返回“未定义”

@wotney 试试 alert(this.attr("id"));