ztree初始化时选中(ruoyi版)
ruoyi版本:4.6.0
问题描述
将后台传入的参数放到$.tree中,当ztree的Node中checked为true时,Node默认为选中,目前前台调用代码
var url = ctx + "获得List<Ztree>的URL";
var options = {
url: url,
expandLevel: 2,
beforeClick:function (treeId, treeNode, clickFlag){
// 节点之前的事件回调函数,并且根据返回值确定是否允许单击操作,如果返回 false,zTree 将不会选中节点,也无法触发 onClick 事件回调函数
},
onClick : function (event, treeId, treeNode){
// 用于捕获节点被点击的事件回调函数
},
callBack: function(){
// init方法调用后触发的回调函数
}
};
$.tree.init(options);
解决方案
前置条件
-
List
返回的值中checked为true -
改代码目前适用于ruoyi 4.6.0版本
解决代码
-
修改ry-ui.js中的$.tree.init方法,init方法中有通过option中url获得后台数值的代码
// 树插件封装处理的init方法,4.6.0版本的1439行 $.get(options.url, function(data) { if(typeof(options.beforeLoad) === "function"){ options.beforeLoad(data); } var treeId = $("#treeId").val(); tree = $.fn.zTree.init($("#" + options.id), setting, data); $._tree = tree; // 添加的了一个selectNode,用于存放属性为checked为true的Node // 该处也可以改为Array,这样子是不是就是多选,如果配置中不支持,那就不行 var selectNode = null; for (var i = 0; i < options.expandLevel; i++) { // 获得该级别下面的所有Node var nodes = tree.getNodesByParam("level", i); // 遍历nodes, for (var j = 0; j < nodes.length; j++) { // 1. 判断nodes[j]存在(一般肯定是存在的,这里可能多此一举) // 2. 判断nodes[j]的checked属性 if(nodes[j] && nodes[j].checked){ // 都符合,则将该Node赋值给selectNode,如果selectNode为Array则就是selectNode.push() selectNode = nodes[j]; } // ruoyi自带代码,之前尝试过第四个意思是focus,改为true时并不能选择 // 在if (!node || !node.isParent) return null;就返回了 tree.expandNode(nodes[j], true, false, false); } } var node = tree.getNodesByParam("id", treeId, null)[0]; $.tree.selectByIdName(treeId, node); // 如果selectNode有值,表述Node中有checked为true的 // tree.selectNode确实有这个方法(估计也是多此一举) if(selectNode && tree.selectNode){ // 调用ztree的selectNode tree.selectNode(selectNode); } if(typeof(options.callBack) === "function"){ options.callBack(tree); } });
最后效果
分类:
JavaScript
标签:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」