ztree實現非同步載入(點選節點,請求後臺資料,新增資料到對應節點)
阿新 • • 發佈：2019-01-28
首先準備好後臺資料：這裡我就不貼SQL了,因為資料是別人部落格裡面的.後面會標明出處.
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css"/>
<script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"> 核心程式碼:
<body>
<div style="width:15%;">
<ul id="demotree" class="ztree"></ul>
</div>
</body>
<script type 後臺controller層
這裡我用的是springMvc
@RequestMapping(value="/testYbTree2")
public void testYbTree2(HttpServletRequest request,HttpServletResponse response)throws Exception{
String pid = request.getParameter("pid");
if(pid == null || pid == ""){//初始化節點的時候 預設查詢最頂級的節點 即pid=0
pid="0";
}
List<TestYbTree> list = departmentService.listTestYbTree1(pid);
for(int i=0;i<list.size();i++){
int flag = list.get(i).getFlag();
if(flag == 1){//對應資料庫的flag欄位
//因為初始化查詢的節點沒有子節點 為了不讓圖示太難看 所以這裡自己定義一個樣式
list.get(i).setIcon("plugins/zTree/3.5/img/diy/1_open.png");
}
}
JSONArray arr = JSONArray.fromObject(list);
response.setCharacterEncoding("UTF-8");
response.getWriter().print(arr);
}arr的資料格式如圖
可能有的小夥伴和我的controller層寫法不同,這其實是問題不大的,只要我們最後返回的json格式一樣滿足zTree的格式要求即可.
實體類TestYbTree
private int id;
private int pId;
private String name;
private int isParent;
private String icon;
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public int getIsParent() {
return isParent;
}
public void setIsParent(int isParent) {
this.isParent = isParent;
}
private String url;
private int flag;
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getpId() {
return pId;
}
public void setpId(int pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}頁面效果圖如下:
初始化的時候:
單擊節點(點選“清華大學”):
繼續點選節點效果如圖:
PS:departmentService.listTestYbTree1(pid)方法是我呼叫資料庫層獲取資料的方法,每個可能都不同,如我上面所說,只要保持最後的返回格式一致就行.
<%-- async:{-- zTree官方文件說明 非同步載入必須寫上這個引數 但是我這裡沒寫T-T 一樣的可以 不知道我是不是假的非同步載入 本人在這裡也有疑問 %>
<%-- enable: true,--%>
<%-- url: "<%=basePath%>department/testYbTree2.do",--%>
<%-- autoParam: ["id"]--%>
<%-- },--%>這段我註釋掉的方法,ztree官方Api說明必須新增,但是我沒新增,所以我現在也有點懷疑我是不是實現的是假的非同步載入,可是又確實達到了我要的效果,如果有什麼不妥之處,希望各位看官多加指點.