为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 核心业务功能开发

【金秋打卡】第24天 核心业务功能开发

2022.11.16 15:44 86浏览

课程名称:Spring Cloud+ Vue前后端分离开发企业级在线视频系统

课程章节:第7章  核心业务功能开发

讲师姓名:甲蛙老师

课程内容

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

课程收获

首先在zTree的首页中下载并添加到本机项目中,在index.html中引入css和js文件。

https://img3.sycdn.imooc.com/6372e51c0001d50819110920.jpg

initTree() {
 
let _this = this;
 
let setting = {
   
check: {
     
enable: true
   
},
   
data: {
     
simpleData: {
       
idKey: "id",
       
pIdKey: "parent",
       
rootPId: "00000000",
       
enable: true
     
}
    }
  };

 
let zNodes = _this.categorys;

 
$.fn.zTree.init($("#tree"), setting, zNodes);
}


 

创建 zTree 必须使用$.fn.zTree.init(obj,setting,zNodes);方法。

第一个参数obj:用于展现 zTree 的 DOM 容器,可以使用$(".ztree")获取dom元素;如果元素写为<div class="ztree" id="tree"></div>,也可以使用$("#tree")获取dom元素。

第二个参数setting:zTree的配置数据。

data:设置zTree的数据格式。simpleData:enable:true使用简单数据格式;

check:enable:true,每个节点显示多选框;

callback:onclick用于捕获节点被点击的事件回调函数。

第三个参数zNodes:zTree的节点数据,使用json数据格式。每个节点都有自己的编号id(每个都不同);pId表示此节点的父节点是哪个。0表示没有父节点,1表示id为1的节点为此节点的父节点,即此节点会显示在id为1的节点下。name为节点名称。

https://img1.sycdn.imooc.com/6372e52d0001b2be19200922.jpg

总结:html文件中写zTree的容器并将容器样式 设置为class="ztree";

js文件中设置setting:zTree的配置数据;zNodes:zTree的节点数据;

初始化zTree:$.fn.zTree.init($(".ztree"),setting,zNodes)。


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
0
获赞与收藏
6

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消