bootstrap treeview 增删改的正确姿势

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/54798737

我的engineercms中大量使用bootstrap treeview,如果不能实现增删改那只能换成ztree了。不过还是找到了解决方法。

网上的方法都是基于https://github.com/jonmiles原版的treeview,采用在源码中增加方法达到目的

bootstrap treeview lazyload懒加载实践

而用google搜索bootstrap treeview addnode,就找到了https://www.npmjs.com/package/patternfly-bootstrap-treeview也就是这个https://github.com/patternfly/patternfly-bootstrap-treeview,这里实现了增删改的方法。

addNode(nodes, parentNode, index, options)

Add nodes to the tree.

$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);

If parentNode evaluates to false, node will be added to root If index evaluates to false, node will be appended to the nodes

Triggers nodeRendered event; pass silent to suppress events.

removeNode()

Removes given nodes from the tree.

$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);

updateNode(node, newNode, option)

Updates / replaces a given tree node.

$('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);

Triggers nodeRendered event; pass silent to suppress events.

当然,还有其他非常好的方法,比如父子孙节点联动。

hierarchicalCheck

Boolean. Default: false

Whether or not to enable hierarchical checking/unchecking of checkboxes.

propagateCheckEvent

Boolean. Default: false

Whether or not to propagate nodeChecked and nodeUnchecked events to the parent/child nodes, used in conjunction with hierarchicalCheck.

这里的坑,就是nodeid已经不是一个数字,旧版的nodeid是将展开后的tree从上往下排序,1代表最上面那个节点,以此类推。而新的变成了,0.0或者1.0.0.0类似这样的,分别表示第一个一级目录的第一个节点,第二个一级目录下的第三级目录的第一个节点。位数代表分级,数字代表序号。

向选中的节点下添加子节点

function savecate(){
        var projcatename2 = $('#projcatename2').val();
        var projcatecode2 = $('#projcatecode2').val();
        arr=$('#tree').treeview('getChecked');
      if (projcatename2)
        {  
            $.ajax({
                type:"post",
                url:"/admin/project/addprojectcate",
                data: {id:arr[0].id,name:projcatename2,code:projcatecode2},//父级id
                success:function(data,status){
                  alert("添加“"+data+"”成功!(status:"+status+".)");
                  var singleNode = {
                    text: projcatename2,
                    id:data,
                    code:projcatecode2
                  };
                  $("#tree").treeview("addNode", [singleNode,arr]);
                  $('#modalTable2').modal('hide');
                 }
            });  
        }  
    }
//编辑节点
    function updatecate(){
        var projcatename3 = $('#projcatename3').val();
        var projcatecode3 = $('#projcatecode3').val();
        // var parentid = $('#pid').val();
        arr=$('#tree').treeview('getChecked');
        // var nid = $('#nid').val();//节点顺序号nodeId
        // alert(projcatename2);
        // alert(nid);
        // $.getJSON("treeAddData.json", function (data) {
        // }); 
      if (projcatename3)
        {
          $.ajax({
            type:"post",
            url:"/admin/project/updateprojectcate",
            data: {id:arr[0].id,name:projcatename3,code:projcatecode3},
            success:function(data,status){
              alert("编辑成功!(status:"+status+".)");
              var singleNode = {
                text: projcatename3,
                id:data,
                code:projcatecode3
              };
              $('#tree').treeview('updateNode', [ arr, singleNode,{ silent: true } ]);
              // $('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);
              $('#modalTable3').modal('hide');
            }
          });
        }
    }
//删除节点
    $("#removeButton").click(function() {
      arr=$('#tree').treeview('getChecked');
        if (arr.length==0){
          alert("请先勾选!");
          return;
        }
      var ids="";
      for(var i=0;i<arr.length;i++){
        if(i==0){
          ids=arr[i].id;
        }else{
          ids=ids+","+arr[i].id;
        }  
      }
    // var obj = JSON.stringify(arr);
    // alert(arr);
    // alert(obj);
      if(confirm("确定删除吗?第一次提示!")){
      }else{
        return false;
      }

      if(confirm("确定删除吗?一旦删除将无法恢复!")){
        $.ajax({
          type:"post",
          url:"/admin/project/deleteprojectcate",
          data: {ids:ids},
          success:function(data,status){
            alert("删除“"+data+"”成功!(status:"+status+".)");
            $('#tree').treeview('removeNode', [ arr, { silent: true } ]);
          }
        });
      }
    })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java编程技术

SpringBoot之class is not visible from class loader

最近在搭建SpringBoot的新应用,遇到个有意思的问题,如题就是在加载某一个类时候抛出了class is not visible from class lo...

1112
来自专栏犀利豆的技术空间

徒手撸框架--实现 RPC 远程调用

微服务已经是每个互联网开发者必须掌握的一项技术。而 RPC 框架,是构成微服务最重要的组成部分之一。趁最近有时间。又看了看 dubbo 的源码。dubbo 为了...

1352
来自专栏博岩Java大讲堂

Java日志体系(commons-logging)Java日志系统学习

6055
来自专栏Java呓语

单元测试以及JUnit框架解析

我们都有个习惯,常常不乐意去写个简单的单元测试程序来验证自己的代码。对自己的程序一直非常有自信,或存在侥幸心理每次运行通过后就直接扔给测试组测试了。然而每次测试...

1292
来自专栏IT杂记

通过Java程序提交通用Mapreduce无法回收类的问题

问题描述 上次发布的博客 通过Java程序提交通用Mapreduce,在实施过程中发现,每次提交一次Mapreduce任务,JVM无法回收过程中产生的MapRe...

3066
来自专栏進无尽的文章

简述OC语言

对于一门语言的学习是需要时间领悟的,而对于一些原理性的问题,我们需要清楚其核心思想,知其然而知其所以然,这样才能有利于自己的后续发展。本文只是简述,没有面面具到...

1842
来自专栏青玉伏案

iOS逆向工程之Hopper中的ARM指令

虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学。现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少...

3027
来自专栏猿天地

用aop加redis实现通用接口缓存

系统在高并发场景下,最有用的三个方法是缓存,限流,降级。 缓存就是其中之一,目前缓存基本上是用redis或者memcached。 redis和memcached...

3357
来自专栏大内老A

IoC+AOP的简单实现

对EnterLib有所了解的人应该知道,其中有一个名叫Policy Injection的AOP框架;而整个EnterLib完全建立在另一个叫作Unity的底层框...

2089
来自专栏Golang语言社区

理解Go语言Web编程(上)

断断续续学Go语言很久了,一直没有涉及Web编程方面的东西。因为仅是凭兴趣去学习的,时间有限,每次去学,也只是弄个一知半解。不过这两天下定决心把Go语言Web编...

37112

扫码关注云+社区

领取腾讯云代金券