树 插件 ztree 的基本用法
因业务需要 用到 ztree 插件
第一次用tree插件上手有点难度
官网 http://www.treejs.cn/v3/main.php#_zTreeInfo
第一步:初始化树,树的所有数据从后台请求所得
//首页加载左边树形AJAX $.ajax({ dataType:'json', type:'post', url:'http://192.168.0.51:8184/wd-service/api/dict/findParentDict', //请求成功=============== success:function(data){ console.log(data) var list=data.data console.log(data.data[0].parentId) zNodes=list // tres插件 var setting = { view: { addHoverDom: false, //去掉添加图标 removeHoverDom: false, //去掉删除图标 selectedMulti: false, addDiyDom: true, dblClickExpand: false,//屏蔽双击 isSilent : false }, check: { enable: false }, data: { simpleData: { //简单数据模式 enable: true, idKey: "id", pIdKey: "pid", rootPId: "", } }, edit: { enable: false, removeTitle : "删除节点", }, callback:{ onClick:zTreeOnClick, }, async:{ enable:true, }, }; $.fn.zTree.init($("#treeDemo"), setting,zNodes); //初始化树形结构 ,treeDemo是树容器
初始化根节点
var zNodes var zTreeObj; // 初始化根节点 function initTree() { $.get(basePath + "/design/detain/initNode?type=1", function(data) { // 设置父节点不显示checkbox data.returnData.node.nocheck = true; zTreeObj = $.fn.zTree.init($("#zTree"), setting, data.returnData.node); }); }
得到渲染效果
二、单击树节点时向后台发起数据请求
这里用到了
function zTreeOnClick(event, treeId, treeNode) {
console.log(treeNode.id) //当单击节点的时候会输出节点的id
}
三、动态添加节点,当添加一天数据节点的时候,在不刷新页面的前提下更新节点
这里用到了 addNodes (详细看IPA文档)
//刷新树============================== var name=data.data[0].name //数据从后台请求得来 console.log(name) var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //treeDemo是树所在容器 var selectedNode = treeObj.getSelectedNodes(); //所选择的节点 console.log(selectedNode[0]) var newNode = {name:name,id:data.data[0].id}; //新增的节点的名称name 和 节点id newNode = treeObj.addNodes(selectedNode[0],newNode); console.log(newNode)
分类:
ztree相关
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?