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

深藏阁楼爱情的钟 2022-01-29 01:17 358阅读 0赞

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

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

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的插件的

项目中请求一级标签的列表效果图：  
![在这里插入图片描述][20190520163813524.png]  
二级列表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjE2NTQ1_size_16_color_FFFFFF_t_70]  
三级列表：  
![在这里插入图片描述][20190520164035818.png]  
相关的css样式，可以根据自己项目的要求自己写，有问题木子期待您的留言~~·  
···ღ( ´･ᴗ･\` )比心

[Link 1]: https://me.csdn.net/u010506919
[20190520163813524.png]: /images/20220129/f51dbf2d55664755b72bb5abd97f56e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjE2NTQ1_size_16_color_FFFFFF_t_70]: /images/20220129/b9e941851a674125802677d1ae03fac0.png
[20190520164035818.png]: /images/20220129/32b00909125e456381a087e3f590b223.png