欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

bootstrap-combotree异步加载子节点数据

程序员文章站 2024-02-03 21:00:58
...

bootstrap-combotree异步加载子节点数据

小木子第一次写博客，代码基础也不是那么完美，只是分享一下自己的一些自己的想法，如果有什么不对的，希望您留言，ღ( ´･ᴗ･` )比心

在做项目的过程中，前端的框架是bootstrap，想找一个下拉树，就在https://blog.csdn.net/u010506919/article/details/52304142 绯月魍魉 这个博主找到相关的资源 但是看过源码之后，觉得和自己当初要的有一点距离，想要异步加载子节点的下拉树，我就尝试着重新改造了一下。
我下载了博主的源码，感谢博主。
下拉树的数据是插件本来就构建的，如果要使用这个插件，就必须使用这样的数据结构：

text: 'Parent 1',//节点名称
  id : 'p1',//节点ID
     nodes:[{   //该节点的子节点
	text: 'Parent 2',
      id : 'p2',
  nodes:[{
  text: 'Parent 3',
          id : 'p3',
          nodes:[{}]
          }]
}]

插件有很多事件，下面列出部分事件：

		onNodeChecked: function,//树形菜单被选中时 触发事件
		onNodeCollapsed: function,//树形菜单伸缩时 触发事件		
		onNodeExpanded: function,//树形菜单被展开时 触发事件
		onNodeSelected: function,//树形菜单被选中时 触发事件
		onNodeUnchecked: function,////树形菜单没有被选中 触发事件

我需要实现的是，选中父节点的时候，异步加载所选的子节点列表，重构插件中onNodeExpanded 这个时间能达到目的，我就开始动手了。
inst_asyncombotree.js 文件内容如下：

/**
*urlPath:一部请求的路径
*InstElementID：元素的id
*nameField：表单name
*给后台传入父级id，得到的结果是{success：true,code:0,data:[{id:1,text:'p1',nBqjb:1},{id:2,text:'p2',nBqjb:1}]}
*/

 AsynInstCombotreeRender = function (path, InstElementID, nameField) {
       $.ajax({
           url:path,
           data:{},//像后台传入的数据
           type:'post',
           dataType:'json',
           success:function (data) {
               var json=data.data;
               if(json.length){
                   json.forEach(function (item) {
                       item.nodes=[];
                   });
                   /***上面的代码是第一次请求，得到根节点***/
                   $('#' + InstElementID).bootstrapCombotree({
                       nameField: nameField,
                       data: json,
                       showCheckbox: false,
                       onNodeExpanded: function (event, node) {//展开子节点的时候出发的事件
                           if (!node.nodes.length) {//子节点的长度为0
                               $.ajax({
                                   url:path,
                                   data:{
                                       id:node.id
                                   },
                                   type:'post',
                                   dataType:'json',
                                   success:function (data) {
                                       data=data.data;
                                       if(data.length){
                                           if(node.nBqjb !=3){//当标签级别不为3时，给每一个子节点添加属性nodes
                                               data.forEach(function (item) {
                                                   if(item.nBqjb!=3){//子节点中，子节点不为3的才会添加nodes
                                                       item.nodes=[];
                                                   }

                                               });
                                           }
                                           node.nodes=[];
                                           node.nodes.push(data);//把上面组装好的数据存入父节点的nodes数组中
                                           $('#combotree').bootstrapCombotree('append', {//把子节点拼接到父节点下面
                                               node: node,
                                               data: data
                                           });
                                       }
                                   }
                               })

                           }
                       }
                   })
               }

           }
       })
   }
};

在项目中，我需要的是标签列表，以及很多，对应的二级也很多，一次性加载太浪费网络资源了，使用重构之后的下拉树就比合适了，在使用之前是需要依赖其他的bootstrap的插件的

<script src="/resources/jquery/jquery.min.js"></script>
<script src="/js/bootstrap/bootstrap-combotree/bootstrap-combotree.js"></script>
<script src="/js/bootstrap/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<script src="/js/stampywzj/inst_asyncombotree.js"></script>
<script>
    $(function () {
        var orgmanage_combtree =  '/newstamp/orgmanage/orgmanage_combtree.action';
        AsynInstCombotreeRender(orgmanage_combtree, 'combotree','tags');
    })
</script>
<body>
<div class="col-sm-4">
    <div id="combotree"></div>
</div>
</body>

项目中请求一级标签的列表效果图：
bootstrap-combotree异步加载子节点数据
二级列表：
bootstrap-combotree异步加载子节点数据
三级列表：
bootstrap-combotree异步加载子节点数据
相关的css样式，可以根据自己项目的要求自己写，有问题木子期待您的留言~~·
···ღ( ´･ᴗ･` )比心

上一篇： sklearn学习笔记：决策树

下一篇： 高端果酱包装设计作品多图欣赏

推荐阅读