使用jquery处理树视图 [英] treeview handling using jquery

问题描述

大家好，我正在尝试实现一个UI，例如，
a treeview，当我选中或取消选中节点复选框时，所选树结构应该在右侧形成。

i部分实现了代码..但它无法删除父节点

请帮帮我

Hello all, i am trying to implement a UI like,
a treeview, when i check or uncheck the node checkboxes the selected tree structure should get formed at right hand side.
i am implemented the code partially.. but it is unable to remove parent nodes
please help me

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
        <Nodes>
            <asp:TreeNode Text="Chapter1" Value="Chapter1">
                <asp:TreeNode Text="SubTopic1" Value="SubTopic1"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic2" Value="SubTopic2"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic3" Value="SubTopic3"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Chapter2" Value="Chapter2">
                <asp:TreeNode Text="SubTopic4" Value="SubTopic4"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic5" Value="SubTopic5"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Chapter3" Value="Chapter3"></asp:TreeNode>
            <asp:TreeNode Text="Chapter4" Value="Chapter4"></asp:TreeNode>
            <asp:TreeNode Text="Chapter5" Value="Chapter5"></asp:TreeNode>
        </Nodes>
    
    </asp:TreeView>
    <br />
    <br />
    <asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All">
    </asp:TreeView>

和jquery是，

and jquery is,

function ChangeSelection() {
            $("#<%=TreeView2.ClientID %>").children().remove().end().append($("#<%=TreeView1.ClientID %>").children().clone());
            var ids = $.map($("#<%=TreeView1.ClientID %> input[type=checkbox]:not(:checked)").closest("div"), function (item) { return item.id; });
            $(ids).each(function (index, item) {
                var childDiv = $("#<%=TreeView2.ClientID %>").find("div[id=" + item + "]");
                var childDivChecked = $("#<%=TreeView2.ClientID %>").find("div[id=" + item + "] input[type=checkbox]:checked").length;
                if (childDivChecked == 0) {
                    $(childDiv).remove();
                }
                $("input[type=checkbox]", $(childDiv)).each(function () {
                    $(this).parent().remove();
                });
            });
            $("#<%=TreeView2.ClientID %> input[type=checkbox]").attr("checked", true).closest("div").css('background', 'white');
        }
        $(function () {
            $("#<%=TreeView1.ClientID %> input[type=checkbox]").bind("click", function () {
                var table = $(this).closest("table");
                if (table.next().length > 0 && table.next()[0].tagName == "DIV") {
                    var childDiv = table.next();
                    var isChecked = $(this).is(":checked");
                    $("input[type=checkbox]", childDiv).each(function () {
                        if (isChecked) {
                            $(this).attr("checked", "checked");

                        } else {
                            $(this).removeAttr("checked");
                        }
                    });
                    ChangeSelection();
                }
                else {
                    var parentDIV = $(this).closest("DIV");
                    if ($("input[type=checkbox]", parentDIV).length == $("input[type=checkbox]:checked", parentDIV).length) {
                        $("input[type=checkbox]", parentDIV.prev()).attr("checked", "checked");
                    }
                    else {
                        $("input[type=checkbox]", parentDIV.prev()).removeAttr("checked");
                    }
                }
            });
        })

推荐答案

（ ＃<％= TreeView2.ClientID％>）。children（）。remove（）。end（）。append（

("#<%=TreeView2.ClientID %>").children().remove().end().append(

（ ＃<％= TreeView1.ClientID％>）。children（）。clone（） ）;
var ids =

("#<%=TreeView1.ClientID %>").children().clone()); var ids =

.map（

这篇关于使用jquery处理树视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！