jQuery树插件zTree使⽤⽅法详解
最近要做⼀个树结构，就使⽤了jQuery 的树插件，感觉还不错，做个随笔
页⾯的基本结构是这样的
这⾥的样式是使⽤了metroStyle⽂件夹⾥的类bootstrap风格，当然⾸先需要下载ztree插件，直接百度即可，下载完成后由对应的api和⼀些例⼦，这⾥使⽤的是复选框模板
jQuery  zTree树的
页⾯jsp如下：
<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="/core.js"></script>
<script type="text/javascript" src="/excheck.js"></script>
<script type="text/javascript" src="/exedit.js"></script>
<script type="text/javascript">
var setting = {
check: {
enable: truediscuz手机端模板
},
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 = $.ZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
mouse中文翻译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.append("<li>"+str+"</li>");
}
var zNodes =[];
$(document).ready(function(){
var t = $("#treeDemo");
$.ajax({springer电子期刊数据库
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);
jquery下载文件插件});
function onCheck(e,treeId,treeNode){
var treeObj=$.ZTreeObj("treeDemo"),
CheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}
</script>
</head>
<body>
<div class="tree" >
<ul id="treeDemo" class="ztree" ></ul>
</div>
<input type="checkbox" id="py" class="checkbox first" checked />
<input type="checkbox" id="sy" class="checkbox first" checked />
<input type="checkbox" id="pn" class="checkbox first" checked />
<input type="checkbox" id="sn" class="checkbox first" checked />
</body>
</html>
上⾯的死数据替换为后台赋予的值，⽤的是ajax⽅式，当然后台需要⽤json⽅式进⾏交互java代码控制器代码如下：
@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}
UnitsId() == NodeData()){
JSONObject json1 = new JSONObject();
json1.put("id", UnitsId());
json1.put("pId", 0);
json1.put("name", UnitsName());
json1.put("open", false);
jsonList.add(json1);
json.put("id", -1);
json.put("pId", NodeData());
json.put("name", SectorName());
json.put("open", false);
}else{
json.put("id", UnitsId());
json.put("pId", NodeData());
json.put("name", SectorName());
json.put("open", false);
}
jsonList.add(json);
}
// for (JSONObject units : jsonList) {
//  System.out.String());
// }
return jsonList;
}
}
这样就可以实现所需要的树结构，ztree树是可以⽆限扩展的，就按照个⼈所需，来选择模板就可以了jsp中的这段代码是获得当前选择值得id
function onCheck(e,treeId,treeNode){
var treeObj=$.ZTreeObj("treeDemo"),
CheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";dataframe取列
alert(nodes[i].id); //获取选中节点的值
}
}
以上就是使⽤ztree的基本⽅法，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。