EasyUI中tree的使用

       展示树的方法有很多，在DRP中用过最原始的递归的方法，接触过ztree这次在公司使用的是比较熟悉的easyui，虽然easyui使用的比较多，但是从来没有用过tree，这次是边看帮助边做总结一下其中自己认为的关键点。

首先从帮助文档上得知tree中的每个节点包括一下几个属性：

• id：节点ID，对加载远程数据很重要。
• text：显示节点文本。
• state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
• checked：表示该节点是否被选中。
• attributes: 被添加到节点的自定义属性。
• children: 一个节点数组声明了若干节点。
• iconCls：显示的节点图标CSS类ID。

       所以在使用的时候要先封住一个tree的类，以上的属性也是要封装在tree中的属性，但是因为要做的树是一层一层的，这样就需要每个节点知道自己的父节点，所以在封装的类中还有添加一个pid，最后封装出的类是这样的：

<span style="font-size:18px;">public classTree implements java.io.Serializable{
   public String id;
   public String text;
   public String state="closed";//默认为关闭，不展开子节点的
   public String checked;
   public Object attributes;
   public String iconCls;
   public String pid;
//因为子节点不仅一个，所以使用list
   public List<Tree> children =newArrayList<Tree>();
 
   //改构造函数在进行数据返回时需要用到
   public Tree(String id,Stringpid,String text,String icon,Object obj,boolean haveChild){
      this.id=id;
      this.pid=pid;
      this.text=text;
      this.attributes=obj;
      if(!haveChild){
         this.state="open";
      }
   }
   //每个属性的get和set略
}</span>
 

       最终要的类封装完成，这次总前台开始看整个树是如何显示出来的。因为在页面上tree是以ul-li这样的页面标签展示的，所以在页面上要如下的定义一个标签：

<span style="font-size:18px;"><ulid="tree" class="easyui-tree"></ul></span>

       然后再js里开始控制后台数据在前台的展示，代码如下：

<span style="font-size:18px;"><script type="text/javascript">
      $(function(){
         $("#tree").tree({
            method:"get",
            url:"test/tree",//这里写用来调用的后台的方法           
            onBeforeExpand:function(node,param){
                url:"test/tree?pid="+node.id;
//在节点展开之前触发,这里将单击节点的id传到后台，就可以查出所有该节点的子节点，然后展示
            }
         });
      });
   </script></span>

       以上的三个是展示一棵树所必须的，其他的一些可以根据具体的树展示的要求使用。前台的代码写完了之后就是后台的代码，公司使用的是springMVC的框架，controller—>service—>dao，在controller和service层中没有没有写过多的代码就是调用的关系，比较重要的代码是写在dao层，在dao层整体的逻辑是这样的：首席从数据库中查出所有要显示的数据得到的结果放在list中，这个list的数据想要返回前台时能够被以树的形式展示直接返回list是不行的，因为数据库中保存的字段名和tree的属性是无法对应的，这时候就需要在分装一个方法，将从数据库中返回的结果一一的对应到tree中。

 

/<span style="font-size:18px;">/从数据库中得到list
public List<Tree> getTrees() {
      List<Tree>trees=newArrayList<Tree>();
      ListresList=null;//将从数据库中查到的结果放在改list中
      assembleTree(trees,list, true);
      return trees;
     
     
   }
 
 
//被调用的用来实例化tree的
   public voidassembleTree(List<Tree> trees,List<Map> list,boolean haveChild) {
      Stringicon="";//这里是图标的名称，要和自己的css中一样，前台才能显示
      for(Maprecord:list){
         record=lowerMap(record);
         //其中的id，pid，name都是数据库中的字段，在new的时候回调用Tree中国的构造函数，然后将数据库的数据对应到tree的属性上，然后在前台显示
         Treetree=newTree((String)record.get("id"), (String)record.get("pid"), (String)record.get("name"), icon, record, haveChild)
         trees.add(tree);
      }
   }</span>

       最后返回数据，tree在做展示的时候机可以根据id和pid一层一层的进行展示。

 

小结

       这次树的完成让自己深深的感觉到后台的代码相对好些一些，前台的调试比较麻烦，虽然是借助了第三方份前台框架有帮助文档单数如果没有亲身的实践过第一次还是比较困难的，帮助文档中一些词语的表达都不是特别的明白什么意思。