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,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后台截取下 } /* 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使用汇总》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章