RuoYi 若依后台管理系统-学习笔记-部门管理表格树实现只渲染某个分支

Posted 2021-12-05 笑虾

RuoYi 若依后台管理系统-学习笔记-【部门管理】表格树实现只渲染某个分支

• `responseHandler` 预处理后端返回的数组
• • 导致 responseHandler 不生效的BUG
• 不改`ry-ui.js`也行
• • 直接偷懒
  • 改写一下

responseHandler 预处理后端返回的数组

在初始化表格树的时候添加 responseHandler 预处理后端返回的数组。

var options = { 
 	// 其他配置略...
 	// 添加一个 responseHandler 从整个树中取一个分支来渲染
	responseHandler: function(res) {
		var id = this.code;
		var pid = this.parentCode;
		// 通過id取出用來當根的分支节点
		var rootNode = res.find(e => e[id] == 10);
		// 设置根节点id
		this.rootIdValue = rootNode[id];
		// 遍历数组取出 rootNode下所有节点
		function recursionFun(list, arr=[], temp=[]){
			list.sort((a,b)=> a[pid] - b[pid]);  
			temp.push(rootNode[id])
			
			list.forEach( (item, i) => {
				if(temp.includes(item[pid])){
					arr.push(item);
					temp.push(item[id]);
				}
			});
			return arr;
		}
		return recursionFun(res,[rootNode]);
	}
};
$.treeTable.init(options);

导致 responseHandler 不生效的BUG

127.0.0.1/ruoyi/js/ry-ui.js 这里有个BUG导致 responseHandler 不生效。

// 请求获取数据后处理回调函数，校验异常状态提醒
responseHandler: function(res) {
    if (typeof table.options.responseHandler == "function") {
        res = table.options.responseHandler(res); // 就是这里，接收一下 responseHandler 返回的结果
    }
    if (res.code != undefined && res.code != web_status.SUCCESS) {
        $.modal.alertWarning(res.msg);
        return [];
    } else {
        return res;
    }
},

不改ry-ui.js也行

直接偷懒

修改下返回语句：

 var arr = recursionFun(res,[rootNode]);
 return res.splice(0, res.length, ...arr)

改写一下

res数组是传地址的，我们直接修改res即可。

responseHandler: function(res) {
	var id = this.code;
	var pid = this.parentCode;
	// 通過id取出用來當根的分支节点
	var rootNode = res.find(e => e[id] == 2);
	// 设置根节点id
	this.rootIdValue = rootNode[id];
	// 标记数组，默认把我们要的根节点放进去
	var temp =[rootNode[id]];
                // 遍历数组取出 rootNode下所有子节点
	for (var i = 0; i < res.length; i++) {
		var item = res[i];
	    if(temp.includes(item[pid])){
			temp.push(item[id]);
		}else{
			res.splice(i--, 1);
		}
	}
    res.unshift(rootNode);

    console.clear();
    console.table(res);
}