zTree树插件怎么在jQuery项目中使用-创新互联
这篇文章将为大家详细讲解有关zTree树插件怎么在jQuery项目中使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联是一家集网站建设,全州企业网站建设,全州品牌网站建设,网站定制,全州网站建设报价,网络营销,网络优化,
全州网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
一、介绍
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 大优点。
官网地址
特点：
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
二、使用
（1）引入ztree组件
注意：需要添加jquery依赖
（2）向body中添加div
（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);
zTreeObj.expandAll(true);//展开树
（4）页面效果
（5）项目截图及html代码
html页面
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）设置展开树
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
//展开所以节点
//zTreeObj.expandAll(true);
//展开第一级数节点
var nodes = zTreeObj.getNodesByParam("level", 0);
for(var i = 0; i < nodes.length; i++) {
zTreeObj.expandNode(nodes[i], true, false, false);
}
});四、setting 配置详解
一些比较常用的配置
（一）check
1、enable: true
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false
（二）view
selectedMulti: false 设置是否允许同时选中多个节点。默认是true
（三）data
simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }
var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
{ "id": 11, "pid": 1, "name": "test11" },
{ "id": 12, "pid": 1, "name": "test12" },
{ "id": 111, "pid": 11, "name": "test111" }
];效果：
关于zTree树插件怎么在jQuery项目中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
名称栏目：zTree树插件怎么在jQuery项目中使用-创新互联
转载注明：http://bzwzjz.com/article/dcjoss.html
