如何使用 JavaScript 或 Jquery select 在 GridView 中 select 编辑行项目的 sub-items？

Question

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

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

请注意，在命名模式中，"Main Titles" 不包括破折号作为起始字符，而其他标题有。

我想要的是，当我单击 "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中处理，而不是在服务器端处理。在这方面的任何帮助或建议将不胜感激。

Answer 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();

如何使用 JavaScript 或 Jquery select 在 GridView 中 select 编辑行项目的 sub-items？

How to select the sub-items of a row item selected in GridView by using JavaScript or Jquery?

javascript

jquery

asp.net

gridview

asp.net-3.5