Question

我正在学习更多关于jQuery和Javascript的知识，我很喜欢它！使用这种语言对网络表单，控件等的强大功能胜过客户端 - 服务器方法论！

人们使用脚本语言最常见的事情之一是控制Gridview行和列。在我的情况下，我试图控制另一个gridview的单元格内的Gridview。我想要做的是复选子GridView控件中的所有复选框。

这是我的主要GridView的ASP.net代码和其中一列中的子Gridview：

        **<asp:GridView ID="gvStudents"** runat="server" DataSourceID="SqlDataSourceStudents" AutoGenerateColumns="False" Width="100%" OnRowDataBound="gvStudents_RowDataBound">
            <HeaderStyle BackColor="#5D7B9D" ForeColor="White" />
            <AlternatingRowStyle BackColor="#EEEEEE" />
            <RowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField HeaderText="Student" >
                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("StudentName") %>' ToolTip='<%# Eval("ProgramName") %>'></asp:Label>
                    </ItemTemplate>
                    <ControlStyle Width="120px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Mobile" >
                    <ItemTemplate>
                        <asp:Label ID="lblMobile" runat="server" Text='<%# Eval("StudentMobilePhone") %>'></asp:Label>
                    </ItemTemplate>
                    <ControlStyle Width="70px" />
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="cbNOKall" runat="server" Text="Next Of Kin" TextAlign="Left"/>
                    </HeaderTemplate>
                    <ItemTemplate>
                        **<asp:GridView ID="gvNOKs"** runat="server" AutoGenerateColumns="False" BorderStyle="None" GridLines="Vertical" ShowHeader="false" ShowFooter="false" BackColor="transparent" >
                            <Columns>
                                <asp:TemplateField HeaderText="Given Name" >
                                    <ItemTemplate>
                                        <asp:Label ID="lblNOKGivenName" runat="server" Text='<%# Eval("NOKname") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ControlStyle Width="150px" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="NoK Type" >
                                    <ItemTemplate>
                                        <asp:Label ID="lblNOKType" runat="server" Text='<%# Eval("NOKType") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ControlStyle Width="100px" />
                                    <ItemStyle HorizontalAlign="Center" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Mobile" >
                                    <ItemTemplate>
                                        <asp:Label ID="lblNOKMobile" runat="server" Text='<%# Eval("NOKMobile") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ControlStyle Width="100px" />
                                    <ItemStyle HorizontalAlign="Center" />
                                </asp:TemplateField>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="cbNOKAdd" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);" />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" />
                                </asp:TemplateField>
                           </Columns>
                        </asp:GridView>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox id="CheckBoxAll" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);"/>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBoxAdd" runat="server" onclick="javascript:HighlightRow(this);"/>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

现在您可以看到，主GridView有一列复选框和一个标题复选框。

我按照以下方式控制这些复选框和每行的高亮显示：

    <script type="text/javascript" >
        //jQuery to select all checkboxes on the last column (4th column) of gvStudents
        function SelectAllCheckboxesCol(chk) 
        {
            var cBox = $('#<%=gvStudents.ClientID %> >tbody >tr >td:nth-child(4) > input:checkbox');
            cBox.attr('checked', chk.checked);  //check all the checkboxes
            cBox.click();                       //click them all to fire the Highlightrow() function. This un-ticks the checkboxes!
            cBox.attr('checked', chk.checked);  //re-check them again!
        }

        //jQuery to highlight a row selected
        function HighlightRow(chk) {
            var isChecked = chk.checked;
            var $selectedRow = $("#" + chk.id).parent("td").parent("tr");
            var selectedIndex = $selectedRow[0].rowIndex;
            var sColor = '';

            if(selectedIndex%2 == 0)
                sColor = '#EEEEEE';
            else
                sColor = 'white';

            if(isChecked)
                $selectedRow.css({
                    "background-color" : "Yellow",
                    "color" : "Black"
                });
            else
                $selectedRow.css({
                    "background-color" : sColor,
                    "color" : "Black"
                });
        }
</script>

我的问题是：

我如何使用＆＃34;内部＆＃34;网格视图;和，
如何将Gridview ID传递到jQuery脚本和列号中，而无需在脚本中对其进行硬编码以检查所有复选框？

感谢您的时间。

Answer 1

首先，既然你是从Javascript / jQuery开始的，我会给你一些建议：

始终关注ASP.NET生成的HTML代码
由于您将操纵Nodes，HTMLElements等，因此了解它们非常重要
如果您不确定如何查找节点，请花点时间了解CSS selectors
在转到jQuery之前研究pure / vanilla Javascript。知道你在做什么
看看style guides。例如，函数应命名为camelCased。

我已将您的功能更改为通用，独立于父GridView。

完整评论的代码如下。如果您有任何疑问，请发表评论！

function gridViewCheckAll(chk) {
  // parentNode of the chk is the td
  // parentNode of the td is the tr
  // parentNode of the tr is the tbody
  // children of the tbody is the trs
  var cell = chk.parentNode,
      row = cell.parentNode,
      tbody = row.parentNode,
      rows = tbody.children;

  // querySelectorAll to get all the td tags children of tr
  // and indexOf to get what is the index of the chk's td
  // note that I'm using the indexOf Array's method
  // I'm doing that since the property children is not an Array
  var index = [].indexOf.call(row.children, cell);

  // loop through the rows
  for (var i = 1; i < rows.length; i++) {
    // gets the current row, and gets the cell with the same index of the chk's cell
    // then, finds all the checkboxes inside it
    var checkBoxes = rows[i].children[index].querySelectorAll('input[type=checkbox]');

    // loops through the checkboxes and check/highlight them
    for (var j = 0; j < checkBoxes.length; j++) {
      checkBoxes[j].checked = chk.checked;
      highlightRow(checkBoxes[j]);
    }
  }
}

您可以使用CSS类，而不是手动更改行颜色，而且可以使用tr:nth-of-type(even)和tr:nth-of-type(odd)。

您的HighLightRow功能可以重新填写如下：

function highlightRow(chk) {
  var row = chk.parentNode.parentNode;
  if (chk.checked)
    row.classList.add('selected-row');
  else
    row.classList.remove('selected-row');
}

然后，你应该有这样的CSS：

table.grid-view > tbody > tr {
  background-color: white;
}

table.grid-view > tbody > tr:nth-of-type(odd) {
  background-color: #EEE;
}

table.grid-view > tbody > tr.selected-row {
  background-color: yellow;
}

您需要将CssClass属性放入GridView：

<asp:GridView ID="gvStudents" runat="server" CssClass="grid-view" (...)>

然后移除AlternatingRowStyle和RowStyle，因为他们每行都放置一个style属性：

<AlternatingRowStyle BackColor="#EEEEEE" />
<RowStyle BackColor="White" />

我created a plunker for you，所以你可以使用上面的代码。

如何将GridView ID和其他控件传递给jQuery函数？

1 个答案: