用fastjson为Ztree生成多级树形菜单JSON数据源

最新推荐文章于 2017-09-22 17:11:06 发布

转载最新推荐文章于 2017-09-22 17:11:06 发布 · 3.9k 阅读

文章标签：

#ztree json

java web开发专栏收录该内容

21 篇文章

订阅专栏

本代码主要演示如何用fastjson为Ztree生成多级树形菜单JSON数据源，实际应用当中可将菜单信息放入数据库，然后循环生成一个 Menu 的 ArrayList 然后用fastjson 转换成JSON传递给HTML中zTree的Nodes变量即可。
若要为一个菜单添加子菜单只需在数据库新建一菜单使其pId指向父菜单id即可

标签： fastjson zTree jQuery

代码片段(5) [全屏查看所有代码]

1. [代码]表示一个菜单节点的类

 
      01import java.util.ArrayList;
 
      02import java.util.List;
 
      03 
 
      04public class Menu {
 
      05 
 
      06    private String id = "";
 
      07    private String pId = "0"; //夫级菜单的 id
 
      08    private String name = "";
 
      09    private String target = "";
 
      10    private List<Menu> menus = new  ArrayList<Menu>();
 
      11    //可根据需要添加其他属性
 
      12 
 
      13    public String getId() {
 
      14        return id;
 
      15    }
 
      16 
 
      17    public void setId(String id) {
 
      18        this.id = id;
 
      19    }
 
      20 
 
      21    public String getName() {
 
      22        return name;
 
      23    }
 
      24 
 
      25    public void setName(String name) {
 
      26        this.name = name;
 
      27    }
 
      28 
 
      29    public String getTarget() {
 
      30        return target;
 
      31    }
 
      32 
 
      33    public void setTarget(String target) {
 
      34        this.target = target;
 
      35    }
 
      36 
 
      37    public List<Menu> getMenus() {
 
      38        return menus;
 
      39    }
 
      40 
 
      41    public void setMenus(List<Menu> menus) {
 
      42        this.menus = menus;
 
      43    }
 
      44 
 
      45    public String getpId() {
 
      46        return pId;
 
      47    }
 
      48 
 
      49    public void setpId(String pId) {
 
      50        this.pId = pId;
 
      51    }
 
      52}

2. [代码]测试方法,生成JSON

 
      01import com.alibaba.fastjson.JSON;
 
      02import java.util.ArrayList;
 
      03import java.util.List;
 
      04 
 
      05public class JSONTest {
 
      06 
 
      07    public static void  main(String[] args) {
 
      08 
 
      09        Menu m3 = new Menu();
 
      10        m3.setId("13");
 
      11        m3.setpId("12");
 
      12        m3.setName("third");
 
      13 
 
      14        Menu m2 = new Menu();
 
      15        m2.setId("12");
 
      16        m2.setpId("11");
 
      17        m2.setName("second");
 
      18        m2.getMenus().add(m3);
 
      19 
 
      20        Menu m1 = new Menu();
 
      21        m1.setId("1");
 
      22        m1.setpId("0");
 
      23        m1.setName("first");
 
      24        m1.getMenus().add(m2);
 
      25 
 
      26 
 
      27        Menu m6 = new Menu();
 
      28        m6.setId("23");
 
      29        m6.setpId("22");
 
      30        m6.setName("third");
 
      31 
 
      32        Menu m5 = new Menu();
 
      33        m5.setId("22");
 
      34        m5.setpId("21");
 
      35        m5.setName("second");
 
      36        m5.getMenus().add(m6);
 
      37 
 
      38        Menu m4 = new Menu();
 
      39        m4.setId("21");
 
      40        m4.setpId("0");
 
      41        m4.setName("first");
 
      42        m4.getMenus().add(m5);
 
      43 
 
      44        List<Menu> m = new ArrayList<Menu>();
 
      45        m.add(m1);
 
      46        m.add(m4);
 
      47 
 
      48        String jsonString = JSON.toJSONString(m);
 
      49        System.out.println(jsonString.replaceAll("menus", "nodes"));//zTree里面节点一定要用nodes所以要将menus替换为nodes，也可以该前面Menu.java 为 Nodes.java
 
      50         
 
      51    }
 
      52}

3. [图片] 1.jpg

4. [代码]在HTML中查看下效果

 
      01<!DOCTYPE html>
 
      02<html>
 
      03    <head>
 
      04        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
      05        <script type="text/javascript" src="jquery-1.4.2.js"></script>
 
      06        <script type="text/javascript" src="jquery.ztree-2.6.js"></script>
 
      07        <link rel="stylesheet" href="./demo.css"  type="text/css" />
 
      08        <link rel="stylesheet" href="./zTreeStyle.css"  type="text/css" />
 
      09        <script type="text/javascript">
 
      10            var zTreeObj;
 
      11            var setting = {
 
      12                showLine:true
 
      13            };
 
      14            var testNodes = [{"nodes":[{"nodes":[{"nodes":[],"name":"third","id":"13","target":""}],"name":"second","id":"12","target":""}],"name":"first","id":"1","target":""},{"nodes":[{"nodes":[{"nodes":[],"name":"third","id":"23","target":""}],"name":"second","id":"22","target":""}],"name":"first","id":"21","target":""}];           
 
      15            $(document).ready(function(){
 
      16                zTreeObj = $("#treeDemo").zTree(setting, testNodes);
 
      17            });
 
      18        </script>
 
      19        <title>ztree测试用例</title>
 
      20    </head>
 
      21    <body>
 
      22        <div>
 
      23            <ul id="treeDemo" class="tree">
 
      24            </ul></div>
 
      25    </body>
 
      26</html>