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设置
(4)页面效果
(5)项目截图及html代码
html页面
ztree测试页面
三、一些方法
(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://pwwzsj.com/article/dcjoss.html