ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客

zTree简介：

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

实践版本：zTree-verson : 3.5.28

1.首先引入：插件css和js文件

//js引入可以根据需要引入局部模块

2.页面html节点

//zTree 的容器样式名固定设置为： "ztree"

3.ztree初始化

var zTreeObj;

// zTree 的参数配置，深入使用请参考 API 文档(setting 配置详解)

var setting = {};

// zTree 的数据属性，深入使用请参考 API 文档(zTreeNode 节点数据详解)

var zNodes = [

{name:"test1", open:true, children:[

{name:"test1_1"}, {name:"test1_2"}]},

{name:"test2", open:true, children:[

{name:"test2_1"}, {name:"test2_2"}]}

];

$(document).ready(function(){

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

实践示例：

自定义不同层级显示不同操作按钮，皮肤样式自定义，操作更新数据，保持折叠展开状态。

思路：

1. 自定义控件利用zTree初始化配置的view的addDiyDom方法js拼接Dom结构，Dom结构css自定义写成自己的样式。

2. 操作数据更新视图，由于实践示例的数据结构是经过加工处理的，采用的是zTree更新整个树的方法：treeObj.reAsyncChildNodes(null, "refresh");

3. 记录展开折叠状态，借助cookie记录，引入jquery.cookie.js,通过记录zTree节点id的状态方法来处理展开折叠状态：treeObj.getNodeByParam('id', z_tree[i])

4.展开折叠视图方法：treeObj.expandNode(node, true)； 折叠展开回调事件：onExpand，onCollapse

html：

js(代码框架为avalonjs)：

//新增节点

addNodesFun:function(){

var orgIdVal;

var orgNameVal;

if(organizationStructure.communityOrgLevel == 99){

if(organizationStructure.addPropertyCompany.communityId == ''){

util.showTip('请选择小区');

return;

}

orgIdVal = organizationStructure.addPropertyCompany.communityId;

orgNameVal = $(".selectbox2 option:selected").text();

}else{

if(organizationStructure.addPropertyCompany.propertyCompanyId == ''){

var strTxt = $('#addModal1 .j-modalLabel').text();

if(strTxt.indexOf("物业公司")>=0){

util.showTip('请选择物业公司');

return;

}

if(strTxt.indexOf("分公司")>=0){