本文主要是介绍miniUI中的tree，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
总结一下在最近做统计学的一个项目中，用到的关于tree的知识点，前端使用的是miniUI,所以谈到的基本都是miniUI框架中的tree。
如上图所示，我来说一下这种树的构造和实现。
（1）首先可以看到它是一颗多层的树形
（2）不同的层级有不同的节点内容，我们把节点叫做node
（3）如何构造这棵树？
<div size="250" maxSize="500" minSize="100" showCollapseButton="true" style="border-width:1px;overflow-x: hidden"><td style="width:100%;overflow-x: hidden" align="left"><ul id="leftTree" class="mini-tree" style="width:100%;height:100%;"showArrow="true" showTreeIcon="false" textField="text" idField="id" parentField="pid" expandOnLoad="0" resultAsTree="true" ></ul></td></div>
我们使用了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);//假设我们要给第二层添加urlif(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 src="" id="content-iframe2" frameborder="0" style="width:100%;height:100%;"></iframe>
如何让iframe里面显示表单的具体内容，需要进行如下的操作：
$('#content-iframe').attr("src",url);
最后要说的关于这棵树的问题是，看上图，大概可以看出他们是放在一个div里,class="mini-tabs"的控件中，里面有两个div，分别是主题和数据，需求还有一个是通过点击图标跳转到数据的树，并且展开树，右侧显示对应的表单信息。
问题点：
（1）tab的切换
（2）找到对应的节点
（3）展开树
具体实现如下：
var tabs = mini.get("listDiv");tabs.activeTab("tabs2");var list = tree1.getList();var url = "${ctx}/xxx/xxx?id="+id;for(var i=0;i<list.length;i++){if(list[i].id == id){tree1.expandPath(list[i]);$('#content-iframe2').attr("src",url);}}
这棵树就总结到这里，具体右侧的表单操作以后有时间再说，因为是第一次接触树这种控件，所以才想抽时间总结一下，方便以后复习用。
这篇关于miniUI中的tree的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
