html动态绑定树形菜单,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

$(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

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("异常！");

}

});

});

后台部分可以参考2延迟加载

2、延迟加载ztreejsp一样的，js有所有区别，这个参考了官方api

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

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，哪个框架都差不多。

String flag = request.getParameter("flag");

if(flag.equals("init")){//直接加载ztree

List 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及一些小方法。

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 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控件的内容，请参考专题《jQuery插件ztree使用汇总》

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