3级嵌套中继器

时间:2015-04-07 13:14:57

标签: javascript asp.net nested-repeater

有一个3级嵌套转发器,显示每个组的菜单标题和菜单项,如图所示

在第二个中继器有4个复选框来检查第三个复制器中的一些复选框如图所示

     <asp:Repeater ID="RpGroups" runat="server" OnItemDataBound="RpGroups_ItemDataBound">
                <ItemTemplate>
                    <asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
                    <div class="panel  panel-primary ">

                        <div class="panel-heading">

                            <h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>


 </a>
                        </div>

                        <div class="panel-heading">



                        </div>

                        <div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
                            <div>

                                <asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
                                    <ItemTemplate>
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">

                                                <h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
                                                    <div class="navbar-right"></div>
                                                </h3>
                                            </div>
                                            <div class="panel-body">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>

                                                </table>
                                        <asp:Repeater ID="RbItems" runat="server">
                                            <HeaderTemplate>
                                                <div class="table-responsive">
                                                    <table class="table table-striped table-responsive  ">
                                                        <thead>
                                                            <tr class="alert-danger table-responsive">

                                                                <th class="col-sm-2 ">Page Name</th>
                                                                <th>

                                                                    <input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>

                                                                <th>
                                                                    <input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this), 'View'" />Full View</th>

                                                                <th>
                                                                    <input id="Checkbox3" type="checkbox" value="Full Update" onclick="checkadd(this), 'Edit'" />Full Updte</th>

                                                                <th>
                                                                    <input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>

                                                            </tr>
                                                        </thead>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <%--<div class="table-responsive">
                                                   <table class="table table-striped table-hover">--%>


                                                <tr class="view" >

                                                    <asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
                                                    <td class="col-sm-2"><strong>
                                                        <div><%# Eval("MenuItemName")%></div>
                                                    </strong></td>


                                                    <td>
                                                        <asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="View" runat="server" Text="View" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
                                                </tr>

                                                <%-- </table>
                                                </div>--%>
                                                <%-- <li>
                                                    <a href="<%# Eval("MenuItemLink")%>"><%# Eval("MenuItemName")%></a>
                                                </li>--%>
                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </table>
                                                </div>
                                            </FooterTemplate>
                                        </asp:Repeater>

                                            </div>
                                        </div>

                                    </ItemTemplate>

                                </asp:Repeater>
                            </div>
                        </div>



                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
                    <div class="panel  panel-Lightblue ">

                        <div class="panel-heading">

                            <h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>


 </a>
                        </div>


                        <div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
                            <div>

                                <asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
                                    <ItemTemplate>
                                        <div class="panel panel-Lightblue">
                                            <div class="panel-heading">

                                                <h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
                                                    <div class="navbar-right"></div>
                                                </h3>
                                            </div>
                                            <div class="panel-body">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>

                                                </table>
                                        <asp:Repeater ID="RbItems" runat="server">
                                            <HeaderTemplate>
                                                <div class="table-responsive">
                                                    <table class="table table-striped table-responsive  ">
                                                        <thead>
                                                            <tr class="alert-danger table-responsive">

                                                                <th class="col-sm-2 ">Page Name</th>
                                                                <th>
                                                                    <input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>

                                                                </script>
                                                                <th>
                                                                    <input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this, 'View')" />Full View</th>

                                                                <th>
                                                                    <input id="Checkbox3" type="checkbox" value="Full Updte" onclick="checkadd(this, 'Edit')" />Full Updte</th>

                                                                <th>
                                                                    <input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>

                                                            </tr>
                                                        </thead>
                                            </HeaderTemplate>
                                            <ItemTemplate>



                                                <tr class="view">

                                                    <asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
                                                    <td class="col-sm-2"><strong>
                                                        <div><%# Eval("MenuItemName")%></div>
                                                    </strong></td>


                                                    <td>
                                                        <asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="View" runat="server" Text="View" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
                                                </tr>


                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </table>
                                                </div>
                                            </FooterTemplate>
                                        </asp:Repeater>

                                            </div>
                                        </div>

                                    </ItemTemplate>

                                </asp:Repeater>
                            </div>
                        </div>



                    </div>
                </AlternatingItemTemplate>
            </asp:Repeater>

       <script type="text/javascript">
                    function checkadd(chk, name) {
                        if (chk.checked == true) {
                            document.getElementById('<% = RpGroups.ClientID %>');

                            var chk = div.getElementsByTagName('input');
                            var len = chk.length;

                            for (var i = 0; i < len; i++) {
                                if (chk[i].type === 'checkbox' && chk[i].name===name) {
                                    chk[i].checked = elem.checked;
                                }
                            }

                        }
                        else
                        {
                            var div = document.getElementById('<% = RpGroups.ClientID %>');

                            var chk = div.getElementsByTagName('input');
                            var len = chk.length;

                            for (var i = 0; i < len; i++) {
                                if (chk[i].type === 'checkbox' && chk[i].name === name) {
                                    chk[i].checked = false;
                                }
                            }

                        }

                    }

                </script>

我需要checkbox的值(完全添加)选中rpitems中的所有复选框,并在名称中添加错误

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您查看源并研究渲染的标记,您会注意到复选框是使用特定模式创建的。您可以根据自己的要求使用该事实。

现在对于javascript方面的东西......你需要走向DOM树并找到与单击的复选框对应的关闭表。

你正在做这样的事情:

onclick="checkadd(this, 'View')

因此该函数的第一个参数是对用户点击的复选框的引用...因此我们要找到最近的表。因此我们做这样的事情......

var tbl = findClosestTable(chk); //stores reference to the table that houses checkbox

findClosestTable的实现方式如下:

function findClosestTable(el) {
    while(!el.tagName.toLowerCase() === 'table' && el !== document.body)
        el = el.parentNode;
    if(el == document.body)
        return null;
    else
        return el; //should be the table reference.
}

完成后,您可以使用该引用按标记名获取所有输入元素。

var inputElements = tbl.getElementsByTagName('input');

现在任务相当简单。

for(var i = 0, j = inputElements.length; i < j; i++ ) {
    var el = inputElements[i];
    if(el.type === 'checkbox' && el.id.indexOf('Add') > 0 && el !== chk) {
        //el is now a reference to your desired checkbox element...
    }
}