Easyui tree节点禁用灰化处理

最新推荐文章于 2024-04-03 10:26:15 发布

转载最新推荐文章于 2024-04-03 10:26:15 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mandy4107/blog/491021

文章标签：

#javascript #json #python #ViewUI

本文详细介绍了如何使用JavaScript对tree.json文件中的特定节点进行禁用，并通过自定义样式使其显示为灰色，同时在加载时阻止其被选择。此教程适用于前端开发者，特别关注树形控件的交互性和展示效果。

2019独角兽企业重金招聘Python工程师标准>>>

一、tree.json文件给要禁用掉的节点添加自定义属性："disabled":true

[{
		"id": "1",
		"text": "系统管理",
		"iconCls":"icon-Site",
		"children": [{
				"id": 11,
				"text": "用户管理",
				"iconCls":"icon-Device",
			}, {
				"id": 12,
				"text": "角色管理",
				"iconCls":"icon-Device",
			}, {
				"id": 13,
				"text": "权限设置",
				"iconCls":"icon-Device",
				"disabled":true            //要禁用的节点
			}]
	}]

二、加载tree.json

$("#tt").tree({
                url: "tree.json",
                animate: true,
                method: "get",
                formatter: function(node) {
                    var s;
                    if (node.disabled) {//判断该节点的disabled属性是否等于true,如果是则将字体颜色设置成灰色#D4D4D4
                        s = '<span class=\'tree-title\' style=\'color:#D4D4D4\' disable=true>' + node.text + '</span>';
                        return s;
                    } else {
                        s = '<span class=\'tree-title\' style=\'color:#000000\' disable=true>' + node.text + '</span>';
                    }
                    return s;
                },
                onBeforeSelect:function(node) {
                    if (node.disabled) {
                        return false;//在选中该节点前，判断该节点的disabled属性是否等于true,如果是则返回false,该节点则不会被选中
                    } 
                }
});

转载于:https://my.oschina.net/mandy4107/blog/491021