Home > Developer > Java

Ztree + java asynchronous loading tree menu example

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article will share with you the ztree + java asynchronous loading demo. Ztree supports loading a large amount of data. It is expected that more than 5000 of a page can be loaded.

Ztree asynchronous loading means that when you click to expand the tree node, the system requests the background action to return and load the data of the subnode of The clicked node.

This demo uses SpringMvc + Mybatis. See the code structure:


Front-end code jsp:

The code is as follows: Copy code

<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + "://"
+ Request. getServerName () + ":" + request. getServerPort ()
+ Path + "/";
%>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> Ztree </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" type = "text/css"
Href = "<% = request. getContextPath () %>/css/zTreeStyle.css">
<Script type = "text/javascript"
Src = "<% = request. getContextPath () %>/js/jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript"
Src = "<% = request. getContextPath () %>/js/jquery. ztree. core. js"> </script>
<Script type = "text/javascript"
Src = "<% = request. getContextPath () %>/js/jquery. ztree. excheck. min. js"> </script>
<Script type = "text/javascript">
/**
* Asynchronous loading means that when you click to expand a tree node,
* Requests the background action to return the subnode of The clicked node.
* Data is loaded.
*/
Var setting = {
Data :{
Key :{
Name: "catalogName"
},
SimpleData :{
Enable: true,
IdKey: "catalogId ",
PIdKey: "parentId ",
            }
},
Async :{
Enable: true,
Url: "ztree/list. ht ",
AutoParam: ["catalogId", "catalogName"],
DataFilter: filter
// Filter the returned result asynchronously
},
Callback :{
// BeforeAsync: zTreeBeforeAsync, // get the relevant information before loading events asynchronously
OnAsyncSuccess: zTreeOnAsyncSuccess, // fun loaded asynchronously
AOnAsyncError: zTreeOnAsyncError, // load the wrong fun
BeforeClick: beforeClick, // capture the event callback function before clicking a node
OnRightClick: zTreeOnRightClick
        }
};
// TreeId is treeDemo. This method is used after asynchronous loading.
Function filter (treeId, parentNode, childNodes ){
If (! ChildNodes)
Return null;
ChildNodes = eval (childNodes );
Return childNodes;
    }
// Click a node to trigger the event
Function beforeClick (treeId, treeNode ){
If (! TreeNode. isParent ){
Alert ("Select parent node ");
Return false;
} Else {
Return true;
        }
    }
// This method is used when asynchronous loading fails.
Function zTreeOnAsyncError (event, treeId, treeNode ){
Alert ("asynchronous loading failed! ");
    }
// This method is used for asynchronous loading.
Function zTreeOnAsyncSuccess (event, treeId, treeNode, msg ){
    }
// Right-click the event
Function zTreeOnRightClick (){
Alert ("asdas ");
    }
/********** When you click the parent node, the controller will be accessed asynchronously, pass the id *************/
Var zNodes = [];
$ (Document). ready (function (){
$. Fn. zTree. init ($ ("# treeDemo"), setting, zNodes );
});
</Script>
</Head>
<Body>
<Div style = "height: 600px; width: 98%">
<Div style = "height: 600px; width: 20%; border: 1px solid #999999; float: left">
<Ul id = "treeDemo" class = "ztree"> </ul>
</Div>
<Div style = "height: 600px; width: 79.5%; border: 1px solid #999999; float: left; overflow: auto">
<Iframe id = "testIframe" name = "testIframe" frameborder = 0 scrolling = auto width = 90% height = 580px src = "ztree/welcome. ht"> </iframe>
</Div>
</Div>
</Body>
</Html>


Background processing logic:

The code is as follows: Copy code

Package com. henu. controller;
Import java. io. PrintWriter;
Import java. util. List;
Import javax. annotation. Resource;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
Import net. sf. json. JSONArray;
Import org. springframework. stereotype. Controller;
Import org. springframework. web. bind. annotation. RequestMapping;
Import com. henu. model. Ztree;
Import com. henu. service. ZtreeService;
@ Controller
@ RequestMapping ("/ztree /")
Public class ZtreeController {
@ Resource
Private ZtreeService ztreeService;
    
@ RequestMapping ("page ")
Public String page (){
Return "ztree/ztreeList ";
    }
    
@ RequestMapping ("welcome ")
Public String welcome (){
Return "ztree/welcome ";
    }
    
@ RequestMapping ("list ")
Public void list (HttpServletRequest request, HttpServletResponse response) throws Exception {
String catalogIdParam = request. getParameter ("catalogId ");
Long catalogId = null;
If (catalogIdParam! = Null ){
CatalogId = Long. parseLong (catalogIdParam );
        }
String catalogName = request. getParameter ("catalogName ");
System. out. println (catalogId + "|" + catalogName + "| ");
List <Ztree> ztreeList = ztreeService. getZtree (catalogId );
PrintWriter out = response. getWriter ();
String str = JSONArray. fromObject (ztreeList). toString ();
System. out. println (str );
Out. print (str );
    }
}

Service Code Service layer ZtreeService. java:

The code is as follows: Copy code

Package com. henu. service;
Import java. util. List;
Import com. henu. model. Ztree;
Public interface ZtreeService {
List <Ztree> getZtree (Long catalogId );
}

ServiceImpl layer ZtreeServiceImpl. java:

The code is as follows: Copy code

Package com. henu. service. impl;
Import java. util. List;
Import javax. annotation. Resource;
Import org. springframework. stereotype. Service;
Import com. henu. dao. ZtreeDAO;
Import com. henu. model. Ztree;
Import com. henu. service. ZtreeService;
@ Service
Public class ZtreeServiceImpl implements ZtreeService {
@ Resource
Private ZtreeDAO ztreeDAO;
Public List <Ztree> getZtree (Long catalogId ){
Return ztreeDAO. getZtree (catalogId );
    }
}

Persistent layer ZtreeDAO:

The code is as follows: Copy code

Package com. henu. dao;
Import java. util. List;
Import javax. annotation. Resource;
Import org. mybatis. spring. SqlSessionTemplate;
Import org. springframework. stereotype. Component;
Import com. henu. model. Ztree;
@ Component
Public class ZtreeDAO {
@ Resource
Private SqlSessionTemplate sqlSessionTemplate;
    
Public List <Ztree> getZtree (Long catalogId ){
List <Ztree> ztreeList = sqlSessionTemplate. selectList ("com. henu. model. Ztree. getZtree", catalogId );
Return ztreeList;
    }
}

Ztree. map. xml

 

The code is as follows: Copy code
<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE mapper PUBLIC "-// mybatis.org//DTD Mapper 3.0 //" http://mybatis.org/dtd/mybatis-3-mapper.dtd ">
<! -- Specify a unique namespace for this mapper. Set the namespace value to package name + SQL ing file name. This ensures that the namespace value is unique.
For example, namespace = "com. henu. mapping. userMapper" is com. henu. mapping (package name) + userMapper (remove suffix from userMapper. xml file)
-->
<Mapper namespace = "com. henu. model. Ztree">
<Select id = "getZtree" resultType = "com. henu. model. Ztree">
Select * from henu_catalog where 1 = 1
<If test = "_ parameter! = Null and _ parameter! = ''">
And parentId =#{_ parameter, jdbcType = NUMERIC}
</If>
<If test = "_ parameter = null">
And parentId = 1
</If>
Order by catalogId
</Select>
</Mapper>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
asynchronous javascript example php tree menu progressive image loading example red black tree java php tree structure example matlab decision tree example php binary tree example

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More