我准备写一个ztree使用系列的教程基于asp.net的，希望能坚持下去。
本教程基于一个city.xml的全国数据文件，大家可以到这里下载。
1、Ztree介绍
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
2、部署说明
我们根据自己代码文件夹的习惯，把ztree的代码copy到你的项目中。
我一般是这样的：
BusinessJs：逻辑js代码
测试文件在根下面
注意：
1、由于需要使用ztree的样式，因此需要zTreeStyle.css和img放在一个同级目录下面。不然你就需要修改css的图片路径
2、完全引用ztree的全部js，根据需要引用。基本上的树功能都在core里面：
core 核心包
excheck 扩展
exedit 扩展
exhide 扩展
3、项目实战代码：
引用jquery和ztree core js代码及样式：
| 代码如下 | 复制代码 |
| < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >测试</ title > < link href = "Js/Ztree/zTreeStyle/zTreeStyle.css" rel = "stylesheet" /> </ head > < body > < ul id = "treeDemo" class = "ztree" ></ ul > < script src = "Js/jquery-1.9.1.js" ></ script > < script src = "Js/Ztree/js/jquery.ztree.core-3.5.js" ></ script > < script src = "BusinessJs/TestJson.js" ></ script > </ body > |
|
逻辑js代码TestJson.js 实现ajax请求服务器端的ashx的返回值json串，并调用ztree方法实现绑定。
| 代码如下 | 复制代码 |
| var AjaxUrl = "service/Cityhandler.ashx" ; var setting = { }; $(document).ready( function (){ GetCity(); }); //获取测试类型统计数据 function GetCity() { $.ajax({ type: "post" , dataType: "json" , traditional: true , data: { oper: "city" }, url: AjaxUrl, async: false , //表示同步执行 success: function (data, textStatus) { if (data != null ) { $.fn.zTree.init($( "#treeDemo" ),setting , data); } }, complete: function (XMLHttpRequest, textStatus) { }, error: function (e) { alert( "获取测试类型统计数据失败，请刷新页面重新加载！" ); } }); } $.fn.zTree.init($("#treeDemo"),setting , data); 是Ztree提供的数据绑定方法。 |
|
1、setting 配置信息说明
普通使用，无必须设置的参数
与显示相关的内容请参考 API 文档中 setting.view 内的配置信息
name、children、title 等属性定义更改请参考 API 文档中 setting.data.key 内的配置信息
2、treeNode 节点数据说明
标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如：
| 代码如下 | 复制代码 |
| var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]} ]; |
|
默认展开的节点，请设置 treeNode.open 属性
无子节点的父节点，请设置 treeNode.isParent 属性
其他属性说明请参考 API 文档中 "treeNode 节点数据详解"
服务端ashx的方法是负责组织json串