jQuery树插件zTree使用方法详解
程序员文章站
2023-12-01 20:01:34
最近要做一个树结构，就使用了jquery 的树插件，感觉还不错，做个随笔
页面的基本结构是这样的
这里的样式是使用了metrostyle文件夹里的类bootstra...
最近要做一个树结构，就使用了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="/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>
<div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;">
<ul id="treedemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul>
</div>
<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>
上面的死数据替换为后台赋予的值，用的是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}
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;
}
}
这样就可以实现所需要的树结构，ztree树是可以无限扩展的，就按照个人所需，来选择模板就可以了
jsp中的这段代码是获得当前选择值得id
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); //获取选中节点的值
}
}
以上就是使用ztree的基本方法，希望对大家的学习有所帮助，也希望大家多多支持。