Jquery ztree implements a drop down tree box that USES json data

2020-03-30 02:57:32
OfStack

The company's recent projects need to use the tree drop-down box, looking for a lot of source code on the Internet, finally adopted zTree to achieve, because the code of high portability, and data acquisition is relatively easy. Without further ado, go straight to the code.

The index. The JSP

 
<%@ page language="java" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<html> 
<head> 
<link rel="stylesheet" href="<c:url value='/js/ztree/css/demo.css'/>" type="text/css"></link> 
<link rel="stylesheet" href="<c:url value='/js/ztree/css/zTreeStyle/zTreeStyle.css'/>" type="text/css"></link> 
<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery-1.4.4.min.js'/>"></script> 
<script type="text/javascript" src="<c:url value='/js/ztree/js/jquery.ztree.core-3.5.js'/>"></script> 
<SCRIPT type="text/javascript"> 
<!-- 
var setting = { 
view: { 
dblClickExpand: false 
}, 
data: { 
simpleData: { 
enable: true 
} 
}, 
callback: { 
beforeClick: beforeClick, 
onClick: onClick 
} 
}; 

//Json data sources can also read json strings from the background and convert to json objects, as shown below
//var strNodes = '${jsonList}'; 
//var zNodes = eval("("+strNodes+")"); // will json String conversion to json Object array, strNode Be sure to add " (a) " , or you won't succeed  
var zNodes =[ 
{id:1, pId:0, name:" Beijing "}, 
{id:2, pId:0, name:" tianjin "}, 
{id:3, pId:0, name:" Shanghai "}, 
{id:6, pId:0, name:" chongqing "}, 
{id:4, pId:0, name:" In hebei province ", open:true}, 
{id:41, pId:4, name:" shijiazhuang "}, 
{id:42, pId:4, name:" baoding "}, 
{id:43, pId:4, name:" handan "}, 
{id:44, pId:4, name:" chengde "}, 
{id:5, pId:0, name:" Guangdong province, ", open:true}, 
{id:51, pId:5, name:" Guangzhou "}, 
{id:52, pId:5, name:" shenzhen "}, 
{id:53, pId:5, name:" dongguan "}, 
{id:54, pId:5, name:" foshan "}, 
{id:6, pId:0, name:" Fujian province ", open:true}, 
{id:61, pId:6, name:" fuzhou "}, 
{id:62, pId:6, name:" xiamen "}, 
{id:63, pId:6, name:" quanzhou "}, 
{id:64, pId:6, name:" sanming "} 
]; 

function beforeClick(treeId, treeNode) { 
var check = (treeNode && !treeNode.isParent); 
if (!check) alert(" You can only choose the city ..."); 
return check; 
} 

function onClick(e, treeId, treeNode) { 
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
nodes = zTree.getSelectedNodes(), 
v = ""; 
nodes.sort(function compare(a,b){return a.id-b.id;}); 
for (var i=0, l=nodes.length; i<l; i++) { 
v += nodes[i].name + ","; 
} 
if (v.length > 0 ) v = v.substring(0, v.length-1); 
var cityObj = $("#citySel"); 
cityObj.attr("value", v); 
} 

function showMenu() { 
var cityObj = $("#citySel"); 
var cityOffset = $("#citySel").offset(); 
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast"); 

$("body").bind("mousedown", onBodyDown); 
} 
function hideMenu() { 
$("#menuContent").fadeOut("fast"); 
$("body").unbind("mousedown", onBodyDown); 
} 
function onBodyDown(event) { 
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { 
hideMenu(); 
} 
} 

$(document).ready(function(){ 
$.fn.zTree.init($("#treeDemo"), setting, zNodes); 
}); 
//--> 
</SCRIPT> 
</head> 
<body> 
<div class="zTreeDemoBackground left"> 
<ul class="list"> 
<li class="title"> <span class="highlight_red"> When selecting a city, press  Ctrl  or  Cmd  Keys can be selected multiple times </span></li> 
<li class="title">  City: <input id="citySel" type="text" readonly value="" style="width:120px;"/> 
<a id="menuBtn" href="#" onclick="showMenu(); return false;"> choose </a></li> 
</ul> 
</div> 
<div id="menuContent" class="menuContent" style="display:none; position: absolute;"> 
<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul> 
</div> 
</body> 
</html>

Spring background

Json data classes

 
public class EquipTypeJson { 
private String id; 
private String pId; 
private String name; 

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


}

The controller page

 
public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception { 
Map map=new HashMap(); 
List<EquipTypeJson> list = testService.getAllEquipType();//Get the source data from the database
JSONArray jsonArray = JSONArray.fromObject(list); //Convert the list data into a json object
String json = jsonArray.toString(); //Converts the json object to a string
map.put("jsonList", json); 
return new ModelAndView("equip/List").addAllObjects(map); 
}