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: