miniUI中的tree

雨点打透心脏的1/2处 2022-05-15 08:49 618阅读 0赞

总结一下在最近做统计学的一个项目中，用到的关于tree的知识点，前端使用的是miniUI,所以谈到的基本都是miniUI框架中的tree。  
![这里写图片描述][70]  
如上图所示，我来说一下这种树的构造和实现。  
（1）首先可以看到它是一颗多层的树形  
（2）不同的层级有不同的节点内容，我们把节点叫做node  
（3）如何构造这棵树？

我们使用了mini自带的class=“mini-tree”，他会将我们在后台组织的树的数据自动解析为树并显示，所以后台只需要组织好数据就行.

showArrow:是否显示树前面的箭头，true/false
    showTreeIcon：显示树前面的图标，默认是白板,true/false
    resultAsTree：url数据是否列表 true/false

简单说一下后台的数据组织：  
方式1：你可以每层的的内容进行查询，将所有的内容全部放到你的实体就可以。  
方式2：根据树的形式，你可以直接利用SQL来组织好数据，最后在java代码里面通过循环来处理子节点也是可以的。  
特别声明：  
用miniUI的tree控件，那么你的后台实体应该如下声明，否则数据将不能被miniUI框架识别和正确显示数据：

public class TreeVo{
    private String id;//代表树的每个节点的id
    private String text;//代表树的每个节点的文本值
    private List<TreeVo> children;//代表该节点的子节点集合
    }

因为在开发中，有个同事写了个children2，结果无论怎么处理，树的数据是对的，就是不能显示正确的树结构，最后经过查看文档和分析，发现是因为框架不能识别children2这个属性。

--------------------

前面说了后台如何构造树的数据以及会使用mini-tree的控件，现在说一下前端如何触发请求后台，寻找数据：

mini.parse();//表示将控件等解析为miniUI框架的
    var tree = mini.get("leftTree");//表示获取到树这个对象
    tree.setUrl(url);//url是你请求后台组织数据的地址

--------------------

如上图所示，假设，我的每层节点都有一个url地址，表示点击每个节点，在树的右侧会显示一张数据表单，那么如何给该节点加上url呢？而且不同层级的节点的url不同，同层级的节点的url相同，所传参数的值不同，此时又改如何处理？  
（1）大概思路  
通过查阅官网API，我们可看到一些关于tree的事件，关于给每层节点添加url，我选用了drawnode事件，可以理解为在我初始化界面的时候，动态画树的每个节点的时候，我们就将相应的URL画上去。  
（2）具体实现

tree.on("drawnode",function (e) {
           var node = e.node;
           //我们可以通过getLevel来获取节点的层级，表示该节点属于第几层
           var level = tree.getLevel(node);
           //假设我们要给第二层添加url
           if(level === '2'){
    			e.nodeHtml = '<a href="#" jumpTo(\''+node.id+'\')><img src="${ctxStatic}/images/li.png"></a>'+'<a href="#" showNewPage("${ctx}/xxxx/xx?id=' + node.id + '","1")>' + node.text + '</a>';
    		}
    		//我们可以通过如下方法获取该节点的父节点,如果你想使用父节点的属性，自己可以console.info(parentNode);然后看其中的属性值
    		var parenetNode = tree.getParentNode(node);
    		
       });

总结一下：  
（1）给节点加url可以通过drawnode事件在绘制树的时候动态绘制  
（2）不同的层级节点url不同，可以通过tree.getLevel(node);方法来获取节点的层级  
（3）获取父节点，可通过tree.getParentNode(node);来实现

--------------------

接着说关于点击节点，右侧显示表单的问题，表单是放在一个iframe里面的，具体实现如下：

如何让iframe里面显示表单的具体内容，需要进行如下的操作：

$('#content-iframe').attr("src",url);

--------------------

最后要说的关于这棵树的问题是，看上图，大概可以看出他们是放在一个div里,class="mini-tabs"的控件中，里面有两个div，分别是主题和数据，需求还有一个是通过点击图标跳转到数据的树，并且展开树，右侧显示对应的表单信息。  
问题点：  
（1）tab的切换  
（2）找到对应的节点  
（3）展开树  
具体实现如下：

这棵树就总结到这里，具体右侧的表单操作以后有时间再说，因为是第一次接触树这种控件，所以才想抽时间总结一下，方便以后复习用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[70]: /images/20220515/4736a3c3b3c84d5382f1f8387342704a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20220515/d7253c855e3b4c2181e575fed0168727.png