主页 » 建站笔记 » 正文

bootstrap-treeview如何实现全选父节点下所有子节点

 bandian 9,750 ℃ 7条点评
小号字体中号字体大号字体
bootstrap-treeview勾选父节点, 同时勾选所有后代节点, 包含子节点、 孙子节点、 重孙子节点…… 直到末级叶子节点。( 如果存在后代节点)

最近由于工作需要实现权限管理,使用前端框架bootstrap,所以就直接选用了bootstrap的treeview扩展插件。先上图:sp20161203_111830
看了很多论坛朋友想要实现:选中父节点时,父节点下所有子节点也都全部选中。经过一番努力,终究实现了。看代码:

//结点json数据
       var defaultData = [
          {
            text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
			state: {
				checked: true,
			},
            nodes: [
              {
                text: 'Child 1',
                href: '#child1',
                tags: ['2'],
                nodes: [
                  {
                    text: 'Grandchild 1',
                    href: '#grandchild1',
                    tags: ['0']
                  },
                  {
                    text: 'Grandchild 2',
                    href: '#grandchild2',
                    tags: ['0']
                  }
                ]
              },
              {
                text: 'Child 2',
                href: '#child2',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0'],
			   nodes: [
              {
                text: 'Child 1',
                href: '#child1',
                tags: ['2'],
                nodes: [
                  {
                    text: 'Grandchild 1',
                    href: '#grandchild1',
                    tags: ['0']
                  },
                  {
                    text: 'Grandchild 2',
                    href: '#grandchild2',
                    tags: ['0']
                  }
                ]
              },
              {
                text: 'Child 2',
                href: '#child2',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Parent 3',
            href: '#parent3',
          },
          {
            text: 'Parent 4',
            href: '#parent4',
            tags: ['0']
          },
          {
            text: 'Parent 5',
            href: '#parent5'  ,
            tags: ['0']
          }
        ];
//结点接口实现
var $checkableTree = $('#treeview-checkable').treeview({
        data: defaultData,//数据
        showIcon: false,
        showCheckbox: true,
        levels:1,
        onNodeChecked: function(event, node) { //选中节点
            var selectNodes = getNodeIdArr(node);//获取所有子节点
            if(selectNodes){ //子节点不为空,则选中所有子节点
                $('#treeview-checkable').treeview('checkNode', [ selectNodes,{ silent: true }]);
            }
        },
        onNodeUnchecked: function (event, node) { //取消选中节点
            var selectNodes = getNodeIdArr(node);//获取所有子节点
            if(selectNodes){ //子节点不为空,则取消选中所有子节点
                $('#treeview-checkable').treeview('uncheckNode', [ selectNodes,{ silent: true }]);
            }
        }
});
//递归获取所有的结点id
function getNodeIdArr( node ){
        var ts = [];
        if(node.nodes){
            for(x in node.nodes){
                ts.push(node.nodes[x].nodeId)
                if(node.nodes[x].nodes){
                var getNodeDieDai = getNodeIdArr(node.nodes[x]);
                    for(j in getNodeDieDai){
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        }else{
            ts.push(node.nodeId);
       }
   return ts;
}
上一篇:echarts之我的第一个可视化图
下一篇:ThinkPHP5 Nginx下的配置——支持pathinfo访问和隐藏入口文件index.php的rewrite规则
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=992
转载请注明转自 » 格部落格 » bootstrap-treeview如何实现全选父节点下所有子节点

已有7条评论,欢迎点评!

  1. avatar#6418633135@Foxmail.com

    动态加载树节点的数据有问题,有做动态加载吗 求指教!

    2017-06-29 am11:32回复
  2. avatar#5418633135@Foxmail.com

    选中子节点如何选中它的所有父节点呢,求指教

    2017-06-29 am11:30回复
  3. avatar#4jhh

    Cannot read property ‘checked’ of undefined 这个错误是什么意思

    2017-06-26 pm1:41回复
  4. avatar#3jjj

    Cannot read property ‘checked’ of undefined 请问下会有这个问题啊

    2017-06-26 am11:20回复
  5. avatar#2nickname

    但是不能实现点击子节点时,父节点也能被选上

    2017-03-31 pm3:47回复
    • avatarbandian @ nickname

      按照一般的思维,父节点选上的时候应该是全选所有子节点吧

      2017-04-01 pm5:38回复
  6. avatar#1你好

    不错

    2017-03-07 pm4:17回复