如何使用 JavaScript 或 Jquery 选择 GridView 中选定的行项的子项？

Posted 2023-05-08

【中文标题】如何使用 JavaScript 或 Jquery 选择 GridView 中选定的行项的子项？

【英文标题】：How to select the sub-items of a row item selected in GridView by using JavaScript or Jquery?

【发布时间】：2019-12-21 03:45:39

【问题描述】：

我在 asp.net 页面中有一个 GridView，如下所示：

Checkbox   Name          Link
[]         MainName      myLink
[]         -somename1    myLink1
[]         -somename2    myLink2
[]         --somename2.1 myLink2.1
[]         MainName2     mylink3
[]         -somename3    Mylink4

请注意，在命名模式中，“主要标题”不包括短划线字符作为起始字符，而其他标题有。

我想要的是，当我单击“MainName”附近的复选框时，我需要自动选择属于所选 MainName 的所有子行。假设我点击第一行的复选框：MainName，那么应该可以看到：

Checkbox          Name          Link
[checked]         MainName      myLink
[checked]         -somename1    myLink1
[checked]         -somename2    myLink2
[checked]         --somename2.1 myLink2.1
[]                MainName2     mylink3
[]                -somename3    Mylink4

我使用 C# 来管理它，如下所示：

protected void SelectCheckBox_OnCheckedChanged(object sender, EventArgs e)

    System.Web.UI.WebControls.CheckBox chk = sender as System.Web.UI.WebControls.CheckBox;
    GridViewRow row = (GridViewRow)chk.NamingContainer;
    bool checkVal = false;

    String cellText = row.Cells[2].Text;
    if (cellText.IndexOf('-') < 0)
    
        foreach (GridViewRow r in dgMenuItems.Rows)
        
            if (row == r)
            
                checkVal = true;
            

            if (checkVal)
            
                if (r.Cells[2].Text.IndexOf('-') < 0)
                
                    break;
                
                else
                
                    var cb = (System.Web.UI.WebControls.CheckBox)r.FindControl("chbSelect");
                    cb.Checked = true;
                
            

        
    

但我想在 javascript 或 JQuery 中处理它，而不是在服务器端。在这方面的任何帮助或建议将不胜感激。

【参考方案1】：

这是一种方法。

<script>
    $('.GridWithCheckBox input[type=checkbox]').change(function () 
        var $cb = $(this);

        //get the value of the cell to the right
        var $name = $cb.parent('td').next('td').html().trim();

        //check if the first value is not a '-'
        if ($name.substring(0, 1) !== '-') 

            //find all next rows and loop them
            $cb.closest('tr').nextAll().each(function () 

                //find the next cell value
                var $nextName = $(this).find('td:eq(1)').html().trim();

                //if it has a '-', check the checkbox
                if ($nextName.substring(0, 1) === '-') 
                    $(this).find('input[type=checkbox]').prop('checked', $cb.prop('checked'));
                 else 
                    //if not found stop the function
                    return false;
                
            );
        
    );
</script>

带有演示源的 GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="GridWithCheckBox">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <%# Eval("Name") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Link">
            <ItemTemplate>
                <%# Eval("Link") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

以及背后的代码

DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("Name", typeof(string));
table.Columns.Add("Link", typeof(string));

table.Rows.Add(0, "MainName", "myLink");
table.Rows.Add(1, "-somename1", "myLink1");
table.Rows.Add(2, "-somename2", "myLink2");
table.Rows.Add(3, "--somename2.1", "myLink2.1");
table.Rows.Add(4, "MainName2", "mylink3");
table.Rows.Add(5, "-somename3", "Mylink4");
table.Rows.Add(6, "MainName3", "mylink5");
table.Rows.Add(7, "-somename4", "Mylink6");

GridView1.DataSource = table;
GridView1.DataBind();