Question

我有2列，左侧是一个有用户的团队，在右栏中，将显示我选择的用户。所以一切正常，但我正在努力实现以下新功能：

我有2个列表级别，如树（只有2个级别）。当我点击一个用户时，我可以选择它发送到右栏。此外，当我在第一级（团队名称）上单击（单击）时，第二级（用户）显示为切换jquery功能。我需要这样，当我双击一个团队（级别1）时，该树上的所有用户都会被选中并转到右侧的列。

此外，当我点击右侧的团队（第一级）时，所有用户都会被删除。

我添加用户jquery current的代码是：

$(document).ready(function () {
var maxAllowed = 10000;
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><a href='#' class='remove' data-id='" + this.id + "' data-box-id='" + this.boxid + "'>" + this.name + "</li></a>");
    });
}

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();

});
});

这里是一个有工作范例的jsFiddle：

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

全部谢谢！

修改

嗨，我刚刚添加了一个代码来单击双击单击。因此，当用户单击时，将打开树。现在我需要当用户双击第一级时，添加两者（第一级和他们的孩子在右侧。

按照单击和双击的代码：

alreadyclicked=false;
$(document).ready(function () {
$('#mytable').on('click', '.toggle', function (ul) {
                    //Gets all <tr>'s  of greater depth
    //below element in the table
    var findChildren = function (ul) {
        var depth = ul.data('depth');
        return ul.nextUntil($('ul').filter(function () {
            return $(this).data('depth') <= depth;
        }));
    };

    var el = $(this);
    var ul = el.closest('ul'); //Get <tr> parent of toggle button
    var children = findChildren(ul);
    var el=$(this);
    if (alreadyclicked){
        alreadyclicked=false; // reset

        clearTimeout(alreadyclickedTimeout); // prevent this from happening


    }else{
        alreadyclicked=true;

        alreadyclickedTimeout=setTimeout(function(){
            alreadyclicked=false; // reset when it happens


    //Remove already collapsed nodes from children so that we don't
    //make them visible. 
    //(Confused? Remove this code and close Item 2, close Item 1 
    //then open Item 1 again, then you will understand)
    var subnodes = children.filter('.expand');
    subnodes.each(function () {
        var subnode = $(this);
        var subnodeChildren = findChildren(subnode);
        children = children.not(subnodeChildren);
    });

    //Change icon and hide/show children
    if (ul.hasClass('collapse')) {
        ul.removeClass('collapse').addClass('expand');
        children.hide();
    } else {
        ul.removeClass('expand').addClass('collapse');
        children.show();
    }
    return children;

            // do what needs to happen on single click. 
            // use el instead of $(this) because $(this) is 
            // no longer the element
        },300); // <-- dblclick tolerance here
    }
    return false;
});
});

新的jsFiddle是：http://jsfiddle.net/muzkle/LMbV3/8/

Answer 1

为了区分不同的群组，我使用类.wrapper

将包装div中的每个群组/部分包裹起来

<div class="wrapper">
.
.
</div>

此外，我将双击事件附加到.wrapper，目前我已将其设置为警告其内部标签。只需编写一些其他代码，将这些标签添加到右侧，就像您一样目前正在click上添加一个元素.Below是带有 jQuery .dblclick（）函数的代码，它将双击事件附加到.wrapper。

$('.wrapper').dblclick(function(){
    $(this).find('label').each(function(){
        alert($(this).text());
    });
});

jQuery Tree问题 - 添加第一个子li

1 个答案:

Check this fiddle