jQuery Tree问题

时间：2014-03-28 17:10:44

标签： javascript jquery html css

大家好，让我试着解释一下我的问题：

我有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/

请有人帮助我，谢谢！

EDITED

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

问题是，在转移到右侧后，当我尝试将其删除时（如果我选择了错误的用户）它没有删除，我需要删除右侧的所选用户并启用左侧再次选中复选框。另外我注意到当我选择左侧的用户转移到右侧时，它会复制最后一个用户。

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

2 个答案:

答案 0 :(得分：2)

使用.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();
        });
    });

Fiddle

UPDATE2

我正在添加编辑过的代码部分以及小提琴：

    $("#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();
            }
        });
    });

New Fiddle

答案 1 :(得分：1)

您已发布新信息，您只需要为列表添加/删除功能，而无需在左右之间进行传输。这是一种不同的方法：

演示：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>
相关问题
最新问题