CODEWITHSUNDEEP
jquerytwitter-bootstraptreeviewbootstrap-treeview
zuk
zuk

Reputation: 65

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

Upvotes: 5

Views: 30438

Answers (6)

Trần Quang Hồng
Trần Quang Hồng

Reputation: 26

Hope that helps you

$('#tree').on('click', (event) => {
  handleEventClick(event.target, false);
});

function handleEventClick(target) {
  if ($(target) && $(target).attr('data-nodeid')) {
    const nodeIdSelected = +$(target).attr('data-nodeid');
    const currentNode = $('#tree').treeview('getNode', nodeIdSelected);
    if (currentNode) {
      const isSelected = currentNode.state.selected;
      const listNodeChild = getNodeChildByNodeInfo(currentNode);
      if (listNodeChild.length) {
        listNodeChild.forEach(nodeChild => {
          $('#tree').treeview('expanded', nodeChild.nodeId);
          $('#tree').treeview(isSelected ? 'selectNode' : 'unselectNode', nodeChild.nodeId);
        });
      }
      toggleNodeSelectedParent(currentNode);
    }
  }
}

function getNodeChildByNodeInfo(currentNode) {
  let listNodeChild = [];
  if (currentNode.nodes && currentNode.nodes.length) {
    currentNode.nodes.forEach(item => {
      listNodeChild.push(item);
      if (item.nodes && item.nodes.length) {
        listNodeChild = [...listNodeChild, ...getNodeChildByNodeInfo(item)];
      }
    });
  }
  return listNodeChild;
}

function toggleNodeSelectedParent(nodeId) {
  const nodeParent = $('#tree').treeview('getParent', nodeId);
  if (nodeParent && nodeParent.nodes) {
    $('#tree').treeview('expanded', nodeParent.nodeId);
    $('#tree').treeview(nodeParent.nodes.length === nodeParent.nodes.filter(itemChild => itemChild.state.selected).length
      ? 'selectNode' : 'unselectNode', nodeParent.nodeId);
    toggleNodeSelectedParent(nodeParent.nodeId);
  }
  return;
}

Upvotes: 0

m.mustafa
m.mustafa

Reputation: 1

I tried the previous answers and it has bugs. I fixed it according the below code

                var treeCheck = $('.treeCheck').treeview({
                    data: res,
                    nodeIcon: "fa fa-desktop",
                    expandIcon: 'fa fa-angle-left',
                    collapseIcon: 'fa fa-angle-down',
                    checkedIcon: 'fa fa-check-circle',
                    uncheckedIcon: 'fa fa-circle-o',
                    showBorder: false,
                    showCheckbox: true
                }).on('nodeChecked', function (event, node){
                    
                    var childrenNodes = _getChildren(node);
                    for (i = 0; i < childrenNodes.length; i++) {
                         $('.treeCheck').treeview('checkNode', [ childrenNodes[i], { silent: true } ]);
                    } 
                    
                }).on('nodeUnchecked', function (event, node){
                    var childrenNodes = _getChildren(node);

                    for (i = 0; i < childrenNodes.length; i++) {
                        $('.treeCheck').treeview('uncheckNode', [ childrenNodes[i], { silent: false } ]);
                    }
                });

Upvotes: -1

Denis Rohlinsky
Denis Rohlinsky

Reputation: 300

just make select = true

var tree = $('#caseview').treeview({
    selectable: true, // enable here, if exist, otherwise append it line
    data: caseData
})
.on('nodeSelected', function(e, node){
    if (node['text'].includes(".doc") { // text as name of node
        doit()
    }
})

".doc" - is example of file extension to select files instead folders

doit() - is your code to continue

Upvotes: 0

Aline Matos
Aline Matos

Reputation: 497

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 } ]);;
    });
});

Upvotes: 3

feiyuw
feiyuw

Reputation: 119

I also meet this problem, below is my solution (NOTE: I use lodash here):

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

  return childrenNodes;
}

$('#tree').treeview({
  data: data,
  levels: 1,
  showCheckbox: true,
  showBorder: false,
  showTags: false,
  selectable: false,
  multiSelect: true,
  highlightSelected: false,
  onNodeChecked: function(event, node) {
    var parentNodes = _getParents([node], $(this));
    var childrenNodes = _.map(_getChildren(node), 'nodeId');
    var allNodes = parentNodes.concat(childrenNodes);
    $(this).treeview('checkNode', [allNodes, {silent: true}]);
  },
});

Upvotes: 0

xgao
xgao

Reputation: 71

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 } ]);
        }
    }
});

Upvotes: 7

Related Questions