Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap treeview Select children on root click

i am using Bootstrap Treeview (bootstrap-treeview.js v1.0.2); how can i activate selection effect on all chidren of root node on click of root?

This snippet doesn't work as expected

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            children[i].states.expanded = true;
            children[i].states.selected = true;
        }
});

and this works only on the first child

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            nodeId=children[i]['nodeId'];
            console.log(nodeId);
            $('.node-tree[data-nodeid="'+nodeId+'"]').click();
        }
});
like image 926
zuk Avatar asked Mar 03 '15 10:03

zuk


2 Answers

Refer to my code below,
note that you need make sure your data option "multiSelect" is true.

var tree = $('#caseview').treeview({
    levels: 2,
    showTags: true,
    showCheckbox: true,
    multiSelect: true,
    data: caseData
});

caseview.on('nodeSelected', function(e, node){
    if (typeof node['nodes'] != "undefined") {
        var children = node['nodes'];
        for (var i=0; i<children.length; i++) {
            caseview.treeview('selectNode', [children[i].nodeId, { silent: true } ]);
        }
    }
});
like image 186
xgao Avatar answered Nov 08 '22 05:11

xgao


I adapted the function "_getChildren" from feiyuw:

function _getChildren(node) {
    if (node.nodes === undefined) return [];
    var childrenNodes = node.nodes;
    node.nodes.forEach(function(n) {
        childrenNodes = childrenNodes.concat(_getChildren(n));
    });
    return childrenNodes;
}

var tree = $('#tree').treeview({
    level: 3,
    expandIcon: "fa fa-plus-square",
    collapseIcon: "fa fa-minus-square",
    emptyIcon: "fa fa-truck",
    showTags: true,
    showCheckbox: true,
    selectable: false,
    highlightSelected: false,
    data: getTree()
}).on('nodeChecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('checkNode', [ this.nodeId, { silent: true } ]);;
    });
}).on('nodeUnchecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('uncheckNode', [ this.nodeId, { silent: true } ]);;
    });
});
like image 40
Aline Matos Avatar answered Nov 08 '22 04:11

Aline Matos