EasyUI Tree(树)isLeaf 叶子节点和顶级节点过滤

在生成功能树后,我们可以选择对所拥有的模块进行追加子节点,如果选中节点已拥有path,当追加子节点后就会变为叶子节点(文件夹形式),那么怎样设置叶子节点可以点击呢?可以使用$(this).tree('getParent', node.target) 进行顶级节点过滤

树控件数据格式化

每个节点都具备以下属性:

  • id:节点ID,对加载远程数据很重要。

  • text:显示节点文本。

  • state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。

  • checked:表示该节点是否被选中。

  • attributes: 被添加到节点的自定义属性。

  • children: 一个节点数组声明了若干节点。 

事件的回调函数都包含'node'参数,其具备如下属性:

  • id:绑定节点的标识值。

  • text:显示的节点文本。

  • iconCls:显示的节点图标CSS类ID。

  • checked:该节点是否被选中。

  • state:节点状态,'open' 或 'closed'。

  • attributes:绑定该节点的自定义属性。

  • target:目标DOM对象。

通过“$(this).tree('isLeaf', node.target)” 可以判断当前选中节点是否包含子节点,如果包含则返回false阻止选中,若不包含,则为叶子节点,可以正常选择。

通过 $(this).tree('getParent', node.target) 可以获取当前选中节点的父节点,如果该节点为最顶级节点则获取值为null,只过滤顶级节点,其他节点均可选择,因此可以判断是否为顶级节点进行过滤。

代码示例:

function loadTree() {
		$('#menuTree').tree({
			url : "GetSysRightsHtmlTreeString",
			onSelect : function(node) { //当点击tree的节点时发生
				var re = node.text;
				//alert(re);
				var url = node.attributes.url;
				//alert(url)
				var flag = $("#tt").tabs('exists', re);//在选项卡中获取指定的名称的选项卡是否已经构建过。
				var isLeaf = $('#menuTree').tree('getParent', node.target);
				if (isLeaf!=null) {//是叶子节点么?叶子节点才会对应一个具体的功能块。
					if (!flag) {
						$('#tt').tabs('add', { //在tt选项卡中,创建一个选项页
							title : re,
							closable : true,
							content : "