Bootstrap 引导树视图在根目录单击时选择子目录

bejyjqdl  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(6)|浏览(173)

我正在使用引导树视图(bootstrap-treeview.js v1.0.2);我怎样才能激活选择效果对所有子根节点上点击根?
此代码段未按预期工作

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

这只对第一个孩子有效

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

mf98qq941#

参考我下面的代码,
注意你需要确保你的数据选项“multiSelect”是真的。

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

字符串

gt0wga4j

gt0wga4j2#

我改编了feiyuw中的函数“_getChildren”:

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

jc3wubiy3#

我也遇到了这个问题,下面是我的解决方案(注:我在这里使用lodash):

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

zfciruhq4#

只需使 * 选择=真 *

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”-是选择文件而不是文件夹的文件扩展名示例
doit()-是继续的代码

polhcujo

polhcujo5#

希望对你有帮助

$('#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;
}
rslzwgfq

rslzwgfq6#

我尝试了前面的答案,它有错误。我根据下面的代码修复它

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

相关问题