Easyui tree 从数据库中动态加载数据

来源：互联网发布：龙腾世纪3优化补丁编辑：程序博客网时间：2024/04/29 22:09

用到easyui，顺便做了个关于easyui tree 加载数据的DEMO，比较简单。

先看样式

废话少说，直接上代码。

1. 前端html代码（就是这么简单）

 <div region="west" class="west" title="导航菜单">    <ul id="tree"></ul>  </div>

2. js脚本代码主要是在页面初始化的时候，去后台请求数据，然后组装成tree所需要的json格式

<span style="white-space:pre"></span>$(function () {            // 实例化树菜单    $("#tree").tree({    url:'getNodesById.do?id=1',//请求路径，id为根节点的id    onLoadSuccess:function(node,data){     var tree = $(this);     if(data){     $(data).each(function(index,d) {                             if (this.state=='closed') {                                 tree.tree('expandAll');                             }                         });     }    }        });

3. 数据库设计

其中id为表id，pid为父id，text为节点名称，attributes为其他（比如路径）

4. 后台请求代码

这里使用的是springmvc来实现的，其他的也是同理

处理json是需要自己去拼接成你需要的目录json数据格式。先拼接根节点，然后再循环遍历子节点，如果子节点还存在子节点，就会一直去遍历。

<span style="white-space:pre"></span>/** * 初始化所有的树形节点 */@RequestMapping(value="/getNodesById")public void getNodesById(int id ,HttpServletResponse response){System.out.println("kaishi");String str ="";StringBuilder json = new StringBuilder();// 获得根节点Tree treeRoot = IopDataService.getNodeById(id);// 拼接根节点json.append("[");json.append("{\"id\":" +String.valueOf(treeRoot.getId()));         <span style="white-space:pre"></span>json.append(",\"text\":\"" +treeRoot.getText() + "\"");         <span style="white-space:pre"></span>json.append(",\"state\":\"open\"");// 获取根节点下的所有子节点List<Tree> treeList = IopDataService.getNodesById(id);// 遍历子节点下的子节点if(treeList!=null && treeList.size()!=0){json.append(",\"children\":[");for (Tree t : treeList) {json.append("{\"id\":" +String.valueOf(t.getId()));             json.append(",\"text\":\"" +t.getText() + "\"");             json.append(",\"state\":\"open\""); // 该节点有子节点// 设置为关闭状态,而从构造异步加载treeList<Tree> tList = IopDataService.getNodesById(t.getId());if(tList!=null && tList.size()!=0){// 存在子节点 json.append(",\"children\":["); json.append(dealJsonFormat(tList));// 存在子节点的都放在一个工具类里面处理了 json.append("]");}json.append("},");}str = json.toString();str = str.substring(0, str.length()-1);str+="]}]";}try {System.out.println("输出json数据"+str);response.getWriter().print(str);} catch (IOException e) {e.printStackTrace();}}

所使用到的实体类和工具类方法

Tree.java

public class Tree {private int id;// 表idprivate int pid;// 父节点idprivate String text;// 节点内容private String attributes;// 请求路径public int getId() {return id;}public void setId(int id) {this.id = id;}public int getPid() {return pid;}public void setPid(int pid) {this.pid = pid;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getAttributes() {return attributes;}public void setAttributes(String attributes) {this.attributes = attributes;}}

工具类

/** * 处理数据集合，将数据集合转为符合格式的json * @param tList 参数 * @return json字符串 */public String dealJsonFormat(List<Tree> tList){StringBuilder json = new StringBuilder();for (Tree tree : tList) {json.append("{\"id\":" +String.valueOf(tree.getId()));             json.append(",\"text\":\"" +tree.getText() + "\"");             json.append(",\"state\":\"closed\"");             json.append("},");}String str = json.toString();str = str.substring(0, str.length()-1);System.out.println("---------"+str);return str;}

以上就是所有的代码了，代码没有优化，还有点小细节没有处理，但能生成树。大家看到就是一层一层的拼接的，其实用集合直接转也行，不过你需要将集合和封装好，可以定义一个实体或多个实体类，最里层的实体定义tree的属性，外层定义tree的一些属性和该节点所对应的数据集合，最外层定义为总的实体，一次类推，类似于bean实体包含一个List<bean2>,bean2中包含List<bean3>等，最后转为JSONObject也行。

0 0