JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
更新时间:2023年03月06日 11时29分52秒 来源:黑马程序员论坛
|
日常在Web项目开发时，经常会碰到树形架构数据的显示，从数据库中获取数据，并且显示成树形。为了方便，我们可以写一个javascript的一个跨浏览器树控件，后续可以重复使用。本节分享一个自己开发的JS tree插件，对有需要的朋友可以直接下载使用。 Tree插件 需要实现 （1）、自动将数据组织成上下级关系，这样我们在前端手工添加数据或者从数据库中获取到的数据不需要我们来组织上下级关系 （2）、支持自定 加载目录树 支持XML、JSON 格式的数据加载 （3）、实现树节点的选择（单选、复选[级联选择]）功能 （4）、支持大数据的一次性加载 。。。。。。 下面开始分享自己写的一个Tree 插件： 此插件基于Jquery 需要引用 第一：插件中每个树节点Node的参数JSON对象如下所示 nodeItem: function () { return { nodecode: "", // 节点编码 nodetext: "", // 节点文本 [节点显示文本] nodetitle: "", // 节点标题 [用于鼠标移过时显示的节点文本] supnodecode: "", // 上级节点编码 [定义此节点所属的上级节点编码，通过此编码来组成上下级关系] nodeurl: "", // 节点URL 表示当前节点自定的链接URL地址 iconexpand: "", // 节点展开图标 [目录树节点自定展开状态下显示的图标，如果为空，则采用默认的图标] iconcollapse: "" // 节点收缩图标 [目录树节点自定收缩状态下显示的图标，如果为空，则采用默认的图标] } } 第二：加载目录树的三种方法 1、loadJson(Json) JSON 对象目录树节点数组(一次性完成) JSON 格式 是一个Array 数组 每项为一个 nodeItem 对象的参数 [ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" }, {},... ] 2、loadXml(xml) XML字符串格式的节点数据(一次性完成) 说明：采用XML字符串格式 注意节点 tagName：nodecode nodetext 等 不允许变更 因为程序内部是直接采用这个名字来获取的 <root> <item> // 每一个节点 内包含多个数据值 <nodecode><![CDATA[节点编码值]]></nodecode> <nodetext><![CDATA[节点名称文本 ]]></nodetext> <nodetitle><![CDATA[节点鼠标移入显示提示文本]]></nodetitle> <supnodecode><![CDATA[节点所属上级即父节点编码]]></supnodecode> <nodeurl><![CDATA[节点关联链接地址]]></nodeurl> <iconexpand><![CDATA[节点展开时显示图标路径]]></iconexpand> <iconcollapse><![CDATA[节点收缩时显示图标路径]]></iconcollapse> </item> ... ... </root> 3、通过插件对象 的方法 addNodeItem(nodeItem) 通过手工一条一条的添加节点项目(需要两步完成) 全部添加完成后 通过插件对象 makeTree() 再手工调用此方法，则可以创建树 第三：目录树内部重组上下级关系的事件方法 通过此方法，可以解决我们前端不再需要按照上下级关系来区分。 |
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程【点击播放】
| Python入门教程完整版（懂中文就能学会） | 零起点打开Java世界的大门 |
| C++| 匠心之作 从0到1入门学编程 | PHP|零基础入门开发者编程核心技术 |
| Web前端入门教程_Web前端html+css+JavaScript | 软件测试入门到精通 |
