How to use jQuery tree plug-in zTree correctly-JS Tutorial-php.cn

This article mainly introduces the use of jQuery tree plug-in zTree in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

I recently made a tree structure, so I used the jQuery tree plug-in. It feels pretty good. Let me write an essay.

The basic structure of the page is like this

The style here uses the bootstrap-like style in the metroStyle folder. Of course, you first need to download the ztree plug-in, just go directly to Baidu. After the download is completed, the corresponding api and some examples are used. Here, check selection is used Box template

jQuery zTree tree download link

The page jsp is as follows:

ZTREE DEMO - checkbox

Copy after login

The above dead data is replaced with the background The value assigned is in ajax mode. Of course, the backend needs to use json mode for interaction.

The java code controller code is as follows:

@Controller @RequestMapping("/Units") public class UnitsController{ @Autowired private UnitsService unitsService; @RequestMapping("/ListTree") @ResponseBody public List ListTree(){ List jsonList = new ArrayList(); List zTreeAll = unitsService.zTreeAll(); for (Units units : zTreeAll) { JSONObject json = new JSONObject(); // { id:1, pId:0, name:"随意勾选 1", 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; } }

Copy after login

This way you can achieve what you need The tree structure, ztree tree can be infinitely expanded, just select the template according to personal needs

This code in jsp is to obtain the current selection value id

function onCheck(e,treeId,treeNode){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; for(var i=0;i
        
         Copy after login

Related recommendations:

jQuery zTree tree plug-in dynamic loading

Detailed example of jQuery EasyUI combined with zTree Tree structure production web page

zTree asynchronous loading and expansion of the first level node method implementation

The above is the detailed content of How to use jQuery tree plug-in zTree correctly. For more information, please follow other related articles on the PHP Chinese website!