jQuery Tree问题 - 添加第一个孩子li [英] jQuery Tree issue - add first child li

问题描述

我有两列，在左侧一个团队与用户，在右列，将显示我已选择的用户。所以一切它的工作，但我试图实现一个新的功能如下：

I have 2 columns, on the left side a team with users, on the right column, will be displayed the users i have selected. so everything its working but i'm trying to implement a new feature as follow:

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

I have 2 list level like a tree (only 2 levels). When i click on a user, i'm able to select it sending to the right column. Also, when i click (single click) on the first level (team name), the second level (users) appear as toggle jquery function. i need so, when i double click on a team (level 1) all users on that tree turns selected and go to column on the right side.

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

My code to add the users jquery current is:

$(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工作示例：

Here's a jsFiddle with working example:

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

感谢所有！

EDIT

你好，我只是添加了一个代码来分开单击和双击。所以当用户单击时，会打开树。现在我需要当用户双击第一级，添加两个（第一级，他们是孩子的右侧。

Hi, i just added a code to separate single click from double click. So when the user single click, will open the tree. now i need when the user double click on the first level, add both (first level and they're childrens to the right side.

按照代码单次和双次点击：

Follow code for single and double clicks:

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/

And new jsFiddle is: http://jsfiddle.net/muzkle/LMbV3/8/

推荐答案

为了区分不同的组，我用类 .wrapper 在包装器div中包装每个组/部分

To distinguish different groups I am wrapping each group/section in a wrapper div with class .wrapper

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

我还附加了一个双击事件到 .wrapper 目前我已经使它警告其内部标签。只写一些额外的代码添加这些标签到右侧，就像你目前正在添加一个元素点击。下面是代码与 jQuery .dblclick（）函数，它将一个双击事件附加到 .wrapper 。

Also I attached a double click event to .wrapper and currently I have made it to alert its inner labels.Just write some additional code to add these labels to the right side like you are currently adding one element on click.Below is the code with jQuery .dblclick() function which attaches a double-click event to .wrapper.

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

这篇关于jQuery Tree问题 - 添加第一个孩子li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！