zTree简单实现

用zTree简单实现从后台传数据生成树

1.在jsp上引入js,jsp的head完整的部分

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="yesurl" uri="http://www.springframework.org/tags"%>
<yesurl:url value="/" var="path" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}css/zTreeStyle/zTreeStyle.css"
    type="text/css">
<script type="text/javascript" src="${path}js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${path}js/createTree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var zNodes =<%=request.getAttribute("tree") %> ;
    createTree(zNodes);
});
</script>

</head>

jsp加载完自动加载树

2.createTree.js自己添加的,用来生成树,具体代码为:

/**
 * 建立树并提供点击响应
 */
function onclick(event, treeId, treeNode, clickFlag) {

    alert("treeid:" + treeId + ";treeNode.id:" + treeNode.id
            + ";treeNode.name:" + treeNode.name + ";treeNode.pId:"
            + treeNode.pId);
};

var setting = {
    callback : {
        onClick : onclick
    },
    data : {
        simpleData : {
            enable : true,
            idKey : "id",
            pIdKey : "pId",
            rootPId : 0
        }
    }
};
function createTree(zNodes) {
    $.fn.zTree.init($("#tree"), setting, zNodes);
};

启用simpleData方便后台形成格式.节点需要由后台提供,会在id为"tree"的标签的地方生成树

3.jsp的body部分:

<body>
            <div id="tree" class="ztree"></div>
</body>

4.后台部分,可以利用数据库的查询结果组合成节点信息的String,再用List<String>传到前台,前后台传输这里用的是SpringMVC.

后台tree.java的完整内容为:

package action;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Tree {

    @RequestMapping(value = "tree.do")
    public String getTree(Model model) {

        List<String> lstTree = getNodes();

        model.addAttribute("tree", lstTree);
        System.out.println("ok");
        return "tree";
    }

    private List<String> getNodes() {
        List<String> lstTree = new ArrayList<String>();
        for (int x = 0; x < 4; x++) {
            String n = "test" + x;
            String s = getTreeNodeFormat(x, 0, n, true);
            lstTree.add(s);
        }
        return lstTree;
    }

    private String getTreeNodeFormat(int id, int pId, String name, boolean open) {
        String s = "{id:" + id + ", pId:" + pId + ", name:\"" + name + "\" , open:" + open + "}";
        return s;
    }
}

效果如图:

posted @ 2016-01-05 10:12  渚之汐酱  阅读(370)  评论(0)    收藏  举报