jQuery ztree实现动态树形多选菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery ztree实现动态树形多选菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5443字，纯文字阅读大概需要8分钟。
内容图文
我用到的版本ztree core v3.5.24，需要引入的js，css，jquery.js，jquery.ztree.core.js，jquery.ztree.excheck.js（多选框可选），zTreeStyle.css。
需要注意的指向父节点的pId，我开始写的是pid一开始没注意，默认的是pId，当然可以pIdKey指定自定义的（未测）。还有如果图片没显示肯定是没引入img图片，记得写好路径。
1、先介绍初始化加载ztree
jsp
<div > <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;"> </ul> </div>
js
<script type="text/javascript">
$(function(){
$.ajax({
url: '${contextPath}/om/quoteOmRequest.do?flag=init',
data: {
name : '1' //随便写的，传入后台的值
},
type:'post',
traditional: true,
success: function(data){
var dataObj = eval(data);
var zTreeObj;
var setting = {
data: {
simpleData: {
enable:true,
/* idKey: "id",
pIdKey: "pId" */
}
},
check: {
enable: true,
chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数，参数都不写""为全不影响]
},
callback: {
onCheck:
function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var checkCount = zTree.getCheckedNodes(true);
var classpurview = "";
for(var i=0;i<checkCount.length;i++) {
classpurview += checkCount[i].id+"," //存入数据的id，比如这种形式"1,2,5," 后台截取下
}
/* alert(classpurview); */
} ,
},
view: {
showLine: true,
showIcon: true,
dblClickExpand: true
},
};
var zNodes = dataObj;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
},
error : function() {
alert("异常！");
}
});
});
</script>
后台部分可以参考2延迟加载
2、延迟加载ztree
jsp一样的，js有所有区别，这个参考了官方api
<script type="text/javascript">
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true,
chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数，参数都不写""为全不影响]
},
async: {
enable: true,
url:"${contextPath}/om/quoteOmRequest.do?flag=ajax",
autoParam:["id"],
dataFilter: filter
},
callback: {
beforeClick: beforeClick,
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeClick(treeId, treeNode) {
if (!treeNode.isParent) {
alert("请选择父节点，此节点是根节点...");
return false;
} else {
return true;
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
后台部分，也包含了1的后台，先看核心代码，这个用的struts，哪个框架都差不多。
String flag = request.getParameter("flag");
if(flag.equals("init")){//直接加载ztree
List<Inner> list = getTrees();//得到所有节点
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}else if(flag.equals("ajax")){//延迟加载ztree
String id = request.getParameter("id");
if(id==null){//第一次进入初始化父节点
List<Inner> list = new ArrayList<OmRequestImpl.Inner>();
Inner in1=getById(1);
Inner in5=getById(5);
list.add(in1);
list.add(in5);//测试用的，得到初始化0级父节点，应该从数据库中获取。
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}else{//根据父节点id加载对应的子节点
List<Inner> list = getChilds(Integer.valueOf(id));//通过父id取得子节点集合，测试就自己写个方法，应该从数据库中获取。
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}
}
这里涉及了一些方法，我为了测试方便自己写了个测试bean，正式的直接从数据库中获取。下面是bean及一些小方法。
public class Inner{
private Integer id;
private Integer pId; //指向父节点id
private String name; //显示的内容
private String isParent;//是否是父节点
public Inner(){
this.isParent="false";
}
public String getIsParent() {
return isParent;
}
public void setIsParent(String isParent) {
this.isParent = isParent;
}
public Integer getpId() {
return pId;
}
public void setpId(Integer pId) {
this.pId = pId;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
// -- 将运行结果用json字符返回客户端
public void convertListToJson(List<?> list)throws Exception{
JSONArray json = JSONArray.fromObject(list);
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/html; charset=UTF-8");
PrintWriter writer;
writer = response.getWriter();
writer.write(json.toString());
writer.close();
}
这些方法可忽略，测试用的，可通过数据库获取
public List<Inner> getTrees(){
Inner in=new Inner();
in.setId(1);
in.setpId(0);
in.setIsParent("true");
in.setName("父节点1");
Inner in1=new Inner();
in1.setId(2);
in1.setpId(1);
in1.setName("子节点11");
in1.setIsParent("true");
Inner in2=new Inner();
in2.setId(3);
in2.setpId(1);
in2.setName("子节点12");
Inner in3=new Inner();
in3.setId(4);
in3.setpId(2);
in3.setName("子节点111");
Inner in4=new Inner();
in4.setId(5);
in4.setpId(0);
in4.setIsParent("true");
in4.setName("父节点2");
Inner in5=new Inner();
in5.setId(6);
in5.setpId(5);
in5.setName("子节点21");
List<Inner> list=new ArrayList<Inner>();
list.add(in);
list.add(in1);
list.add(in2);
list.add(in3);
list.add(in4);
list.add(in5);
return list;
}
public Inner getById(Integer id){
List<Inner> list = getTrees();
for (Inner inner : list) {
if(id==inner.getId()){
Inner in=inner;
return in;
}
}
return null;
}
public List<Inner> getChilds(Integer id){
List<Inner> list = getTrees();
List<Inner> result =new ArrayList<OmRequestImpl.Inner>();
for (Inner inner : list) {
if(id.intValue()==inner.getpId().intValue()){
result.add(inner);
}
}
return result;
}
更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的jQuery ztree实现动态树形多选菜单全部内容，希望文章能够帮你解决jQuery ztree实现动态树形多选菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】