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:
##
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> ZTREE DEMO - checkbox</title>
<link rel="stylesheet" href="/css/demo.css" rel="external nofollow" >
<link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" >
<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback:{
onCheck:onCheck
}
};
// var zNodes =[
// { id:1, pId:0, name:"随意勾选 1", open:true},
// { id:11, pId:1, name:"随意勾选 1-1", open:false},
// { id:111, pId:11, name:"随意勾选 1-1-1"},
// { id:112, pId:11, name:"随意勾选 1-1-2"},
// { id:12, pId:1, name:"随意勾选 1-2", open:false},
// { id:121, pId:12, name:"随意勾选 1-2-1"},
// { id:122, pId:12, name:"随意勾选 1-2-2"},
// { id:2, pId:0, name:"随意勾选 2", checked:false, open:false},
// { id:21, pId:2, name:"随意勾选 2-1"},
// { id:22, pId:2, name:"随意勾选 2-2", open:false},
// { id:221, pId:22, name:"随意勾选 2-2-1", checked:false},
// { id:222, pId:22, name:"随意勾选 2-2-2"},
// { id:23, pId:2, name:"随意勾选 2-3"},
// { id:3, pId:0, name:"随意勾选 3", checked:false, open:false},
// { id:231, pId:3, name:"随意勾选 3-1"},
// { id:232, pId:3, name:"随意勾选 3-2", open:false},
// { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false},
// { id:2322, pId:232, name:"随意勾选 3-2-2"},
// { id:233, pId:3, name:"随意勾选 3-3"}
// ];
var code;
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
zTree.setting.check.chkboxType = type;
// showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
// showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };');
showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };');
// setting.check.chkboxType = { "Y" : "", "N" : "" };
}
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}
var zNodes =[];
$(document).ready(function(){
var t = $("#treeDemo");
$.ajax({
type: "POST",
url: "/Units/ListTree",
dataType: 'json',
success: function(result) {
console.log(result);
$.extend( true, zNodes, result );
console.log(zNodes);
t = $.fn.zTree.init(t, setting, zNodes);
// demoIframe = $("#testIframe");
}
});
});
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#py").bind("change", setCheck);
$("#sy").bind("change", setCheck);
$("#pn").bind("change", setCheck);
$("#sn").bind("change", setCheck);
});
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); //获取选中节点的值
}
}
</script>
</head>
<body>
<p class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;">
<ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul>
</p>
<input type="checkbox" id="py" class="checkbox first" checked style="display:none;" />
<input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/>
<input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/>
<input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/>
</body>
</html>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:"随意勾选 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;
}
}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); //获取选中节点的值
}
}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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
