jQuery Tree issue

本文关键字：issue Tree jQuery 更新时间：2023-09-26

大家好，让我来解释一下我的问题:

我有2列，在左边我有一个jquery/CSS树列表。在右边我有一个空白栏。

当我从左侧选择一个节点时，我可以将该节点转移到右侧，因此该节点在右侧进行剪切/粘贴。我也可以把右边的节点移回左边，问题来了。

当节点返回到左侧时，我需要它返回到它之前的父级，而不是作为左侧的最后一个节点。

我用来转移节点的jquery是:

$("#move_right").click(function() {
        var users = $('#selected_users .innertxt2').size();
        var selected_users = $('#all_users .innertxt_bg').size();
        if (users + selected_users > 5) {
            alert('You can only chose maximum 5 users.');
            return;
        }
$("#move_left").click(function() {
        $('#selected_users .innertxt_bg').each(function() {
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');
            $('#all_users').append(user_clone);
            $(this).remove();
        });
    });

完整的视图在jsfiddle:

http://jsfiddle.net/muzkle/LMbV3/1/

谁来帮帮我，谢谢!

使用Zword的解决方案，现在我没有从左侧删除节点，现在我有能力禁用复选框，以避免在右侧重复。

问题是，转移到右侧后，当我试图删除它(万一我选择了错误的用户)它不删除，我需要删除选中的用户在右侧和启用复选框在左侧再次。我还注意到，当我选择左边的用户转移到右边时，它会复制最后添加的用户。

JsFiddle更新:http://jsfiddle.net/muzkle/LMbV3/3/

使用.insertBefore()或.insertAfter()代替追加。

insertBefore(): http://api.jquery.com/insertbefore/

insertAfter(): http://api.jquery.com/insertafter/

或

不要从左侧删除元素。只要用display:none;隐藏它，然后当你想让它可见时，就用display:block;/* or inline-block; */重新显示它。

<标题> 更新

$("#move_left").click(function() {
            $('#selected_users .innertxt2').each(function() {  /* on this line you were writing .innertxt_bg instead of .innertxt2 which is the actual class assigned to the righr side elements */
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');
            
            $('#all_users').append(user_clone);
            $(this).find('.selectit').attr("disabled","enabled");
            $(this).remove();
        });
    });

小提琴

<标题>更新2 h1> 正在添加编辑的部分代码与小提琴:

    $("#move_right").click(function() {
        var users = $('#selected_users .innertxt2').size();
        var selected_users = $('#all_users .innertxt_bg').size();
        
        //if (users + selected_users > 5) {
            //alert('You can only chose maximum 5 users.');
            //return;
        //}
        
        $('#all_users .innertxt_bg').each(function() {
            if($(this).find('.selectit').is(':checked')){
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt2');
            
            $('#selected_users').append(user_clone);
            $(this).find('.selectit').attr("disabled","disabled");
            }
        });
    });
    
    $("#move_left").click(function() {
        $('#selected_users .innertxt2').each(function() {
            if($(this).find('.selectit').is(':checked')){
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function() {this.checked = false;});
            
            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');
            
            $('#all_users #select' + user_id).attr('disabled',false);
            $(this).remove();
            }
        });
    });

新小提琴

您已经发布了新的信息，您只需要为您的列表添加/删除功能，而不需要在左和右之间传输它。下面是另一种方法:

演示:http://jsfiddle.net/NicoO/LMbV3/6/

$(document).ready(function () {
    var maxAllowed = 2;
    var $selectTable = $("#mytable");
    var $selectList = $("#selected_users ul")
    $("#max-count").html(maxAllowed);
    var getActivated = function () {
        var activated = new Array();
        $selectTable.find('input[type="checkbox"]:checked').closest("li").each(function () {
            var $obj = new Object;
            var currentBox = $(this).find('input[type="checkbox"]');
            $obj.id = currentBox.val();
            $obj.boxid = currentBox.attr("id");
            $obj.name = $(this).find("label").text();
            activated.push($obj);
        });
        return activated;
    }
    var updateActiveList = function () {
        // Truncate list
        $selectList.html("");
        $(getActivated()).each(function () {
            $selectList.append("<li>" + this.name + ' <a href="#" class="remove" data-id="' + this.id + '" data-box-id="' + this.boxid + '">x</a>' + "</li>");
        });
    }
    var countActivated = function () {
        return getActivated().length;
    }
    $('#view').click(function () {
        allIds = new Array();
        getActivated().each(function () {
            allIds.push($(this).attr("id"));
        });
        alert(allIds);
    });
    $selectList.on("click", "a.remove", function () {
        $('#' + $(this).data("box-id")).prop("checked", false);
        updateActiveList();
    });
    $selectTable.on("change", 'input[type="checkbox"]', function (event) {
        if ($(this).is(":checked") && countActivated() > maxAllowed) {
            event.preventDefault();
            console.log("max reached!");
            $(this).prop("checked", false);
        }
        updateActiveList();
    });
});

HTML:

<div class="stack">
    <div class="form_top"></div>
    <div class="float_break"></div>
    <div class="form">
        <br />
        <div class="formbox">
             <h5>All Users</h5>
            <br />
            <div id="all_users">
                <!--<ul id="user1" userid="1" class="innertxt">
                        <li>
                            <li><input type="checkbox" id="select1" value="1" class="selectit" /><label for="select1">Name: William</label></li>
                        </li>
                 </ul>-->
                <div id="mytable">
                    <ul data-depth="0" class="collapse level0">
                        <li><span class="toggle collapse"></span>Item 1</li>
                    </ul>
                    <ul data-depth="1" class="collapse level1">
                        <li><span class="toggle"></span>Item 2</li>
                    </ul>
                    <ul data-depth="2" class="collapse level2" id="user1" userid="1">
                        <li>
                            <input type="checkbox" id="select1" value="1" class="selectit" />
                            <label for="select1">William</label>
                        </li>
                    </ul>
                    <ul data-depth="2" class="collapse level2" id="user2" userid="2">
                        <li>
                            <input type="checkbox" id="select2" value="2" class="selectit" />
                            <label for="select2">João</label>
                        </li>
                    </ul>
                    <ul data-depth="0" class="collapse collapsable level0">
                        <li><span class="toggle collapse"></span>Item 5</li>
                    </ul>
                    <ul data-depth="1" class="collapse collapsable level1" id="user3" userid="3">
                        <li>
                            <input type="checkbox" id="select3" value="3" class="selectit" />
                            <label for="select3">João</label>
                        </li>
                    </ul>
                </div>
                <div class="float_break"></div>
            </div>
            <div id="selected_users">
                <ul></ul>
            </div>
            <div class="float_break"></div>
            <div style="float:right; padding:5px 160px 0 0">
                 <h6>Select maximum <span id="max-count"></span>.</h6>
            </div>
        </div>
        <div class="float_break"></div>
        <div class="formbox">
            <input type="button" value="View Selected users Id" id="view" class="form_button" />
            <div class="float_break"></div>
        </div>
    </div>
    <div class="form_bot"></div>
</div>