ztree树节点名称太长怎么办

最新推荐文章于 2024-03-07 10:06:01 发布

原创最新推荐文章于 2024-03-07 10:06:01 发布 · 1.1w 阅读

8 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍如何使用zTree的addDiyDom方法实现树节点名称的截取显示，当节点名称过长时，通过设置特定长度并在超出部分使用省略号替代，保持树状结构的清晰易读。

做项目时发现有的树节点名称太长，想截取制定长度显示，其余用"..."省略显示，仔细翻阅一下ztree文档发现ztree提供了一个addDiyDom方法，这不就是自己想找的diy dom方法吗，发现ztree果然强大。

1.首先不要忘记在view中配置addDiy:addDiyDom

view: {
			showLine: false,
			showIcon: false,
			selectedMulti: false,
			dblClickExpand: false,
			addDiyDom: addDiyDom
		},

2.下面就可以按照自己的意愿来显示树节点了

function addDiyDom(treeId, treeNode) {
		var spaceWidth = 5;
		var switchObj = $("#" + treeNode.tId + "_switch"),
		icoObj = $("#" + treeNode.tId + "_ico");
		switchObj.remove();
		icoObj.before(switchObj);

		if (treeNode.level > 1) {
			var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
			switchObj.before(spaceStr);
		}
		var spantxt=$("#" + treeNode.tId + "_span").html();
		if(spantxt.length>17){
			spantxt=spantxt.substring(0,17)+"...";
			$("#" + treeNode.tId + "_span").html(spantxt);
		}
	}