Ztree java front and back code (input combined with ztree)

Recently, I was writing a complete set, and I used ztree to record it.

First, construct a ZNodes entity class in the background

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;
    }
    
}

 

Then the dao layer, the framework I use is spring springmvc hibernate:

/**
     * Tree to get poets
     * @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;
        }
        
    };

The service layer will not be posted, the controller is like this

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

That's it for the code behind.

Next is the front

Import js and css files

<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>

Because I modified the style of ztree here, I introduced another css, which I found online.

then the html element

 <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>

then js

// Click on a node and assign the name of the node to the text box 
    function zTreeOnClick(e, treeId, treeNode) {
                 var zTree = $.fn.zTree.getZTreeObj("treeDemo" );
                 // Get the selected node 
                 var   nodes =zTree.getCheckedNodes( true );
                 // sort by id 
                   v = nodes[0 ].name;
                    postId = nodes[0].id;
                    zTree.checkNode(nodes, true , false );
                 // Display the name of the selected node in the text box 
//                 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 parameter 
        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( "Please select a child node!" )
                             return  false ;
                        }
                    }
}
            };
  // ztree data initialization 
    var zNodes = ${zNodes};
    
    
    // Show tree 
    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");
    }
           
     // Hide the tree 
    function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $( '#menuContent').attr('show','false' );
 //                  $("body").unbind("mousedown", onBodyDown); 
    }
     // Restore the initial data of 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);//Specify the node with the selected ID   
                zTree_Menu.checkNode(node1, true , false );
                zTree_Menu.expandNode(node, true , false ); // Specify the selected ID node to expand   
    }
    
    // /Automatically match the nodes in the tree for fuzzy search according to the keyword input in the text box 
    function AutoMatch() {
                  InitialZtree();
                  if($('#menuContent').attr('show')=='false'){
                      showMenu();
                  }else{
//                       $('#menuContent').css('display','none');
                    hideMenu();
                  }
                  
    }

The final effect: