jQuery树插件zTree使用方法详解

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

页面的基本结构是这样的

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

jQuery zTree树的301_104@" target="_blank" href="http://www.treejs.cn/v3/main.PHP#_zTreeInfo">下载链接

页面jsp如下：

<Meta http-equiv="content-type" content="text/html; charset=UTF-8"> ZTREE DEMO - check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>

// 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,name:"随意勾选 1-1-2"},// { id:12,name:"随意勾选 1-2",// { id:121,pId:12,name:"随意勾选 1-2-1"},// { id:122,name:"随意勾选 1-2-2"},// { id:2,name:"随意勾选 2",checked:false,// { id:21,pId:2,name:"随意勾选 2-1"},// { id:22,name:"随意勾选 2-2",// { id:221,pId:22,name:"随意勾选 2-2-1",checked:false},// { id:222,name:"随意勾选 2-2-2"},// { id:23,name:"随意勾选 2-3"},// { id:3,name:"随意勾选 3",// { id:231,pId:3,name:"随意勾选 3-1"},// { id:232,name:"随意勾选 3-2",// { id:2321,pId:232,name:"随意勾选 3-2-1",// { id:2322,name:"随意勾选 3-2-2"},// { id:233,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+"

");
}

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),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<nodes.length;i++){
v+=nodes[i].name + ",";
alert(nodes[i].id); //获取选中节点的值
}
}

Box" id="sy" class="checkBox first" checked style="display:none;"/> Box" id="pn" class="checkBox first" checked style="display:none;"/> Box" id="sn" class="checkBox first" checked style="display:none;"/>

上面的死数据替换为后台赋予的值，用的是ajax方式，当然后台需要用json方式进行交互 java代码控制器代码如下：

<div class="jb51code">
<pre class="brush: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,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",false);

}

jsonList.add(json);

}
// for (JSONObject units : jsonList) {

// System.out.println(jsonList.toString());

// }

return jsonList;
}
}

这样就可以实现所需要的树结构，ztree树是可以无限扩展的，就按照个人所需，来选择模板就可以了

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

jQuery树插件zTree使用方法详解

猜你在找的jQuery相关文章