jstree動態生成樹

      前篇文章簡單介紹了靜態生成樹，這篇文章將通過后台把數據通過json形式傳到前台，進行動態生成樹。

      本篇的程序所用框架為Spring MVC，可以很方便的通過controller層傳json到前台。

      前端jsp頁面部分代碼：

        $.get("${ctx}/tree/treeList",function(data){
          tree(data);
         }); 
        function tree(data){
            //樹形菜單
            $('#tree')
                .on("changed.jstree", function (e, data) {
                    alert(data);
                }).jstree({'core' : {'data' : data} });
        }
        

       controller層部分代碼如下：     

    @Resource
    private ITreeService<TreeVo> treeService;  

    @RequestMapping(value = "/treeList")
    @ResponseBody
    public List<TreeVo> treeList(HttpServletRequest req, Map<String, Object> rep) {
        List<TreeVo> treeList=treeService.getTree();
        return treeList;
    }

     model層TreeVo代碼如下：

public class TreeVo {
    private Long id;   //保存該節點ID
    private String parent;  //保存父節點ID
    private String text;    //保存名稱（因jstree識別text，故該屬性設為為text,而非name）
    // private List<Tree> children;
    ……
    …… （get set方法）
    ……
}

     service 層代碼如下：

本節只簡單介紹如何處理數據。
舉例從數據庫獲取的數據類型如下：
id   path    name
1   1.1      top1 
2   1.1.1   top11
3   1.1.2   top12
4    1.2     top2
通過程序把其轉化為
id:1  parent:#    text:top1
id:2  parent:1    text:top11
id:3  parent:1    text:top12
id:4  parent:#    text:top2

protected void getTree(List<Entity> list, List<TreeVo> treeList) {
        for (Entity dep : list) {
            if (dep.getPath().substring(0, dep.getPath().lastIndexOf(".")).equals("1")) {
                TreeVo tvo = new TreeVo();
                tvo.setId(dep.getId());
                tvo.setParent("#");
                tvo.setText(dep.getName());
                getChildPath(list, dep, treeList);
                treeList.add(tvo);
            }
        }
    }

    private void getChildPath(List<Entity> list, Entity parent, List<TreeVo> treeList) {
        for (Entity dep : list) {
            if (!dep.getPath().equals(parent.getPath()) && dep.getPath().substring(0, dep.getPath().lastIndexOf(".")).equals(parent.getPath())) {
                TreeVo tvo = new TreeVo();
                tvo.setId(dep.getId());
                tvo.setText(dep.getName());
                tvo.setParent(parent.getId().toString());
                getChildPath(list, dep, treeList);
                treeList.add(tvo);
            }
        }
    }

 

都於使用Spring MVC 中的 @ResponseBody 傳遞json，若程序一切邏輯正常，卻無法把json傳至前台。可進行其下兩步操作：

1. 查看配置文件是否正確，spring-mvc.xml 中部分代碼如下：

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <!-- 將StringHttpMessageConverter的默認編碼設為UTF-8 -->
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8" />
            </bean>
            <!-- 將Jackson2HttpMessageConverter的默認格式化輸出設為true -->
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="prettyPrint" value="true"/>
            </bean>            
          </mvc:message-converters>
    </mvc:annotation-driven>
    

2.查看是否引入jackson等相應jar包。