最近在寫畢設，用到了ztree，來記錄一下。

首先後臺先構造一個ZNodes實體類

public class ZNodes implements java.io.Serializable{
    private String id;
    private String pId;
    private String name;
    private Boolean open;
    private Boolean checked;
    private boolean doCheck;
    public String getId() {
        return id;
    }
    
 
public void setId(String id) {
        this.id = id;
    }
    public String getpId() {
        return pId;
    }
    public void setpId(String pId) {
        this.pId = pId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    
 
public Boolean getOpen() {
        return open;
    }
    public void setOpen(Boolean open) {
        this.open = open;
    }
    public Boolean getChecked() {
        return checked;
    }
    public void setChecked(boolean checked) {
        this.checked = checked;
    }
    public Boolean getDoCheck() {
        
 
return doCheck;
    }
    public void setDoCheck(boolean doCheck) {
        this.doCheck = doCheck;
    }
    
}

然後是dao層，我用的框架是spring springmvc hibernate：

/**
     * 樹形獲取詩人
     * @return
     */
    @SuppressWarnings("unchecked")
    public List<ZNodes> getPoetByTree(){
        String sql="select id,dynasty_id ,name from Poet";
        return jdbcTemplate.query(sql, zNodesDataMapper);
    }
    private RowMapper<ZNodes> zNodesDataMapper = new RowMapper<ZNodes>() {

        @Override
        public ZNodes mapRow(ResultSet rs, int index) throws SQLException {
            // TODO Auto-generated method stub
            ZNodes zNodes=new ZNodes();
            zNodes.setId(rs.getString("id"));
            zNodes.setName(rs.getString("name"));
            zNodes.setpId(rs.getString("dynasty_id"));
            return zNodes;
        }
        
    };

service層就不貼了，controller是這樣子的

List<ZNodes> poetTree=poetService.getPoetByTree();
model.put("zNodes", JSONArray.fromObject(zNodes));

後臺代碼就到此為止了。

接下來是前臺

引入js和css文件

<link rel="stylesheet" href="<%=basePath %>zTree/css/zTreeStyle/metro.css" type="text/css">
  <script  type="text/javascript"  src="<%=basePath %>assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="<%=basePath %>zTree/js/jquery.ztree.excheck.js"></script>

因為我這裏修改了ztree的樣式，所以引入的是另外的css，網上找的

然後是html元素

 <input type="text" class="form-control" id="name"  value="${data.poet.name }" onclick="AutoMatch()">
<div id="menuContent" class="menuContent" show="false" style="display: none; position: absolute;z-index: 999999; left: 114.156px;top: 115px;    width: 209px;">
                                <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
                                </ul>
                        </div>

然後是js

//點擊某個節點 然後將該節點的名稱賦值值文本框
    function zTreeOnClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //獲得選中的節點
                 var  nodes=zTree.getCheckedNodes(true);
                //根據id排序
                   v = nodes[0].name;
                    postId = nodes[0].id;
                    zTree.checkNode(nodes, true, false);
                //將選中節點的名稱顯示在文本框內
//                if (v.length > 0) v = v.substring(0, v.length - 1);
                var name = $("#name");
                name.attr("value", v);
                $(‘#poetId‘).val(postId);
                $(‘#dynastyId‘).val(nodes[0].getParentNode.id);
                //隱藏zTree
                hideMenu();
                return false;
    }
  //ztree參數
        var setting = {
                check: {
                    enable: true,
                    chkStyle: "radio",
                    radioType: "all",
                    chkboxType: { "Y":"s","N":"s"}
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback :{
//                     onClick : zTreeOnClick,
                    onCheck:zTreeOnClick,
                    beforeCheck : function(treeId, treeNode) {
                        if (treeNode.isParent) {
                            alert("請選擇子節點!")
                            return false;
                        }
                    }
}
            };
  //ztree數據初始化
    var zNodes =${zNodes};
    
    
    //顯示樹
    function showMenu() {
         $("#menuContent").fadeIn("fast");
         $(‘#menuContent‘).attr(‘show‘,‘true‘);
//                 var cityObj = $("#name");
//                 var cityOffset = $("#name").offset();
//                 $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
    }
           
     //隱藏樹
    function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $(‘#menuContent‘).attr(‘show‘,‘false‘);
//                 $("body").unbind("mousedown", onBodyDown);
    }
    //還原zTree的初始數據
    function InitialZtree() {
        
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
//                 setting.check.radioType = "all";  
                zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo"); 
                
                var node = zTree_Menu.getNodeByParam("id",$(‘#dynastyId‘).val() );  
                var node1 = zTree_Menu.getNodeByParam("id",$(‘#poetId‘).val() );  
               // zTree_Menu.selectNode(node1,true);//指定選中ID的節點  
                zTree_Menu.checkNode(node1, true, false);
                zTree_Menu.expandNode(node, true, false);//指定選中ID節點展開  
    } 
    
    ///根據文本框的關鍵詞輸入情況自動匹配樹內節點 進行模糊查找
    function AutoMatch() {
                  InitialZtree();
                  if($(‘#menuContent‘).attr(‘show‘)==‘false‘){
                      showMenu();
                  }else{
//                       $(‘#menuContent‘).css(‘display‘,‘none‘);
                    hideMenu();
                  }
                  
    }

最後的效果：

ztree java 前後臺代碼(input與ztree結合)