jQuery ztree实现动态树形多选菜单
前端之家收集整理的这篇文章主要介绍了
jQuery ztree实现动态树形多选菜单，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我用到的版本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
js
后台的值
},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,chk
BoxType :{ "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
后台截取下
}
/* alert(classpurview); */
},},view: {
showLine: true,showIcon: true,dblClickExpand: true
},};
var zNodes = dataObj;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
},error : function() {
alert("异常！");
}
});
});
后台部分可以参考2延迟加载
2、延迟加载ztree
jsp一样的，js有所有区别，这个参考了官方api
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);
});
后台部分，也包含了1的后台，先看核心代码，这个用的struts，哪个框架都差不多。
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
list = new ArrayList();
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 list = getChilds(Integer.valueOf(id));//通过父id取得子节点集合，测试就自己写个方法，应该从数据库中获取。
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}
}
这里涉及了一些方法，我为了测试方便自己写了个测试bean，正式的直接从数据库中获取。下面是bean及一些小方法。
显示的
内容
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();
}
这些方法可忽略，测试用的，可通过数据库获取
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 list=new ArrayList();
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 list = getTrees();
for (Inner inner : list) {
if(id==inner.getId()){
Inner in=inner;
return in;
}
}
return null;
}
public List getChilds(Integer id){
List list = getTrees();
List result =new ArrayList();
for (Inner inner : list) {
if(id.intValue()==inner.getpId().intValue()){
result.add(inner);
}
}
return result;
}
更多关于ztree控件的内容，请参考专题插件ztree使用汇总》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/jquery/46616.html
