Describes how to use zTree of jQuery tree plug-in. jqueryztree

Last Update:2017-05-09 Source: Internet

Author: User

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

I recently used jQuery's tree plug-in to create a tree structure. It feels pretty good.

The basic structure of the page is as follows:

The style here uses the bootstrap Style Class in the metroStyle folder. Of course, you need to download the ztree plug-in directly to Baidu. After the download is complete, the corresponding api and some examples are provided, the checkbox template is used here.

Download link of the jQuery zTree

The page jsp is as follows:

<Html> 

The preceding dead data is replaced with the value assigned by the background, which is in ajax mode. Of course, the background needs to interact in json mode.
The java code controller code is as follows:

@ Controller @ RequestMapping ("/Units") public class UnitsController {@ Autowired private UnitsService unitsService; @ RequestMapping ("/ListTree") @ ResponseBody public List <JSONObject> ListTree () {List <JSONObject> jsonList = new ArrayList <JSONObject> (); List <Units> zTreeAll = unitsService. zTreeAll (); for (Units units: zTreeAll) {JSONObject json = new JSONObject (); // {id: 1, pId: 0, name: "select 1 at will ", open: false} if (units. getUnitsId () = units. getNodeData () {JSONObject json1 = new JSONObject (); json1.put ("id", units. getUnitsId (); json1.put ("pId", 0); json1.put ("name", units. getUnitsName (); json1.put ("open", false); jsonList. add (json1); json. put ("id",-1); json. put ("pId", units. getNodeData (); json. put ("name", units. getSectorName (); json. put ("open", false);} else {json. put ("id", units. getUnitsId (); json. put ("pId", units. getNodeData (); json. put ("name", units. getSectorName (); json. put ("open", false);} jsonList. add (json);} // for (JSONObject units: jsonList) {// System. out. println (jsonList. toString (); //} return jsonList ;}}
In this way, the required tree structure can be implemented. The ztree can be infinitely expanded. You can select a template as needed.

In jsp, this code is used to obtain the id of the current selection.
Function onCheck (e, treeId, treeNode) {var treeObj = $. fn. zTree. getZTreeObj ("treeDemo"), nodes = treeObj. getCheckedNodes (true), v = ""; for (var I = 0; I <nodes. length; I ++) {v + = nodes [I]. name + ","; alert (nodes [I]. id); // obtain the value of the selected node }}
The above is the basic method of using ztree. I hope it will be helpful for your learning and a lot of support for helping customers.

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.

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

Describes how to use zTree of jQuery tree plug-in. jqueryztree

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support