php与ztree使用方法,jQuery树插件zTree使用方法详解

最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔

页面的基本结构是这样的

这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先需要下载ztree插件，直接百度即可，下载完成后由对应的api和一些例子，这里使用的是复选框模板

jQuery  zTree树的下载链接

页面jsp如下：

ZTREE DEMO - checkbox

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

"+str+"");

}

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

v+=nodes[i].name + ",";

alert(nodes[i].id); //获取选中节点的值

}

}

上面的死数据替换为后台赋予的值，用的是ajax方式，当然后台需要用json方式进行交互

java代码控制器代码如下：

@Controller

@RequestMapping("/Units")

public class UnitsController{

@Autowired

private UnitsService unitsService;

@RequestMapping("/ListTree")

@ResponseBody

public List ListTree(){

List jsonList = new ArrayList();

List 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

v+=nodes[i].name + ",";

alert(nodes[i].id); //获取选中节点的值

}

}

以上就是使用ztree的基本方法，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。