miniUI中的tree_mini-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>
1
2
3
4
5
6
7

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

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

1
2
3
4

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

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

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

---

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

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

---

如上图所示，假设，我的每层节点都有一个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
2
3
4
5
6
7
8
9
10
11
12

总结一下：
（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>
1

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

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

---

最后要说的关于这棵树的问题是，看上图，大概可以看出他们是放在一个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);
           }
       }
1
2
3
4
5
6
7
8
9
10

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