ztree示例

ztree官网：http://www.ztree.me/v3/main.php#_zTreeInfo

官网提供了很多Demo。

 

示例：

步骤1-ztree数据结构类：

ZTreeNodes.java

import java.util.List;

import com.alibaba.fastjson.JSONObject;

public class ZTreeNodes {

	private List<ZTreeNode> nodes;

	public List<ZTreeNode> getNodes() {
		return nodes;
	}

	public void setNodes(List<ZTreeNode> nodes) {
		this.nodes = nodes;
	}

	/**
	 * 解决因为双引号的问题导致的列表展现失败
	 * 
	 * @param nodes
	 * @return
	 */
	public static String orgNodesToJson(ZTreeNodes nodes) {
		if (nodes == null) {
			return "";
		}
		String jsonStr = JSONObject.toJSONString(nodes);
		return jsonStr.replace("\"", "");
	}

}

 ZTreeNode.java

import java.util.List;

public class ZTreeNode {

	private long id;// 自己的ID

	private long pid;// 父类的ID

	private String name;// 名称

	private String url;// 数据请求地址

	private String divid;// 目标divID

	private List<ZTreeNode> children;// 儿子数据

}

 

ZTreeUtils.java

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

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * ZTree的实现
 * 
 * @author Administrator
 * 
 */
@Service("zTreeUtils")
public class ZTreeUtils {
    
    public String getTreeJson(String infoCatId, String actionUrl, String targetId) {
        
        List<ZTreeNode> nodes = new ArrayList<ZTreeNode>();
        
        // 根节点ID这里为0，查找一级
        List<XXX> listChildrenOrg = xxxFacade.listByParentId(Long.valueOf(0));
        for (XXX org : listChildrenOrg) {
            
            List<ZTreeNode> listTree = new ArrayList<ZTreeNode>();
            // 一级栏目等
            ZTreeNode zTreeNode = new ZTreeNode();
            zTreeNode.setId();
            zTreeNode.setPid();
            zTreeNode.setName();
            zTreeNode.setUrl(actionUrl + "id=" + id);
            zTreeNode.setDivid(targetId);
            listTree.add(zTreeNode);
            
            // 一级的孩子
            List<ZTreeNode> parentTree = getZTreeChildren(zTreeNode, actionUrl, targetId);
            zTreeNode.setChildren(parentTree);
            
            // 一级栏目
            nodes.add(zTreeNode);
        }
        
        ZTreeNodes znode = new ZTreeNodes();
        znode.setNodes(nodes);
        String json = ZTreeNodes.orgNodesToJson(znode);
        return json;
    }
    
    // 找孩子
    private List<ZTreeNode> getZTreeChildren(ZTreeNode parentTree, String actionUrl, String targetId) {
        List<ZTreeNode> listZTree = new ArrayList<ZTreeNode>();
        // 找到孩子列表
        List<XXX> listChildrenOrg = xxxFacade.listByParentId(parentTree.getId());
        
        if (listChildrenOrg.size() == 0) {
            // 如果列表为空
        } else {
            // 有孩子
            for (XXX xxx : listChildrenOrg) {
                ZTreeNode zTreeChildren = new ZTreeNode();
                zTreeChildren.setId();
                zTreeChildren.setPid();
                zTreeChildren.setName();
                zTreeChildren.setUrl(actionUrl + "id=" + id);
                zTreeChildren.setDivid(targetId);
                listZTree.add(zTreeChildren);
                
                // 找孙子
                List<ZTreeNode> zTreeChildren2 = getZTreeChildren(zTreeChildren, actionUrl, targetId);
                zTreeChildren.setChildren(zTreeChildren2);
            }
            
        }
        return listZTree;
    }
    
}

 Controller类

@RequestMapping(value = "/xxx-xxx.html")
public String xxxXxx(HttpServletRequest req, Model model) {

	model.addAttribute("pageBean", pageBean);
	
	String treeJson = zTreeUtils.getTreeJson("0" ,"xxx-list.html?","#pageListXxx");
	req.getSession().setAttribute("treeJson", treeJson);

	return "admin/webSource/xxx-xxx.html";
}

 

HTML/JSP文件：

<script type="text/javascript">
	function do_open_layout(event, treeId, treeNode) {
		$(event.target).bjuiajax('doLoad', {
			url : treeNode.url,
			target : treeNode.divid
		})
		event.preventDefault()
	}
</script>

<div class="bjui-pageContent" style="top: 0px; bottom: 0px;">
	<div style="width: 250px; height: 100%; float: left;">
		<ul id="ztree-1" class="ztree" data-toggle="ztree"
			data-options="${treeJson }" data-on-click="do_open_layout"></ul>
	</div>
	<div
		style="height: 99.9%; overflow: auto; hidden: 100%; margin-left: 260px;">
		<fieldset style="height: 100%">
			<legend>xxx列表</legend>
			<div id="pageListXxx" style="height: 94%; overflow: hidden;">

			</div>
		</fieldset>
	</div>
</div>

 

The End！谢谢。