针对节点名称和节点标题，提供前端渲染方法。

zTree · Aug 29, 2020 · 36499ff · 36499ff
1 parent 3b447ca
commit 36499ff
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/api/apiCss/api.js b/api/apiCss/api.js
@@ -147,7 +147,12 @@ var apiContent = {
 			{id:5202, pId:520, t:"idKey", name:"idKey : \"id\",", iconSkin:"core", showAPI:true},
 			{id:5203, pId:520, t:"pIdKey", name:"pIdKey : \"pId\",", iconSkin:"core", showAPI:true},
 			{id:5204, pId:520, t:"rootPId", name:"rootPId : null", iconSkin:"core", showAPI:true},
-			{id:521, pId:50, name:"}"},
+			{id:521, pId:50, name:"},"},
+
+			{id:530, pId:50, t:"render", name:"render : {", open:true},
+			{id:5301, pId:530, t:"name", name:"name : null,", iconSkin:"core", showAPI:true},
+			{id:5302, pId:530, t:"title", name:"title : null", iconSkin:"core", showAPI:true},
+			{id:531, pId:50, name:"}"},
 			{id:51, pId:1, name:"},"},
 			{id:52, pId:1, name:""},
 

diff --git a/api/cn/setting.data.render.name.html b/api/cn/setting.data.render.name.html
@@ -0,0 +1,33 @@
+<div class="apiDetail">
+	<div>
+		<h2><span>Function(name, treeNode)</span><span class="path">setting.data.render.</span>name</h2>
+		<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
+		<div class="desc">
+			<p></p>
+			<div class="longdesc">
+				<p>用于渲染节点名称时进行重新渲染节点名称，最终节点名称将以方法返回的值为准</p>
+				<p>默认值：null</p>
+			</div>
+		</div>
+		<h3>Function 参数说明</h3>
+		<div class="desc">
+		<h4><b>name</b><span>String</span></h4>
+		<p>对应 zTree 利用 setting.key.name 获取到的节点名称 </p>
+		<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
+		<p>待渲染节点的 JSON 数据对象</p>
+		<p class="highlight_red">针对根进行渲染时，treeNode = null</p>
+		<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
+		<p>返回值是 渲染后的节点名称</p>
+		</div>
+		<h3>setting & function 举例</h3>
+		<pre xmlns=""><code>
+	var setting = {
+		data: {
+			render: function(name,treeNode){
+				return name + treeNode.id;
+			}
+		}
+	};
+	......</code></pre>
+	</div>
+	</div>
diff --git a/api/cn/setting.data.render.title.html b/api/cn/setting.data.render.title.html
@@ -0,0 +1,33 @@
+<div class="apiDetail">
+	<div>
+		<h2><span>Function(title, treeNode)</span><span class="path">setting.data.render.</span>title</h2>
+		<h3>概述<span class="h3_info">[ 依赖 <span class="highlight_green">jquery.ztree.core</span> 核心 js ]</span></h3>
+		<div class="desc">
+			<p></p>
+			<div class="longdesc">
+				<p>用于渲染节点标题时进行重新渲染节点标题，最终节点标题将以方法返回的值为准</p>
+				<p>默认值：null</p>
+			</div>
+		</div>
+		<h3>Function 参数说明</h3>
+		<div class="desc">
+		<h4><b>title</b><span>String</span></h4>
+		<p>对应 zTree 利用 setting.key.title 获取到的节点标题 </p>
+		<h4 class="topLine"><b>treeNode</b><span>JSON</span></h4>
+		<p>待渲染节点的 JSON 数据对象</p>
+		<p class="highlight_red">针对根进行渲染时，treeNode = null</p>
+		<h4 class="topLine"><b>返回值</b><span>Boolean</span></h4>
+		<p>返回值是 渲染后的节点标题</p>
+		</div>
+		<h3>setting & function 举例</h3>
+		<pre xmlns=""><code>
+	var setting = {
+		data: {
+			render: function(title,treeNode){
+				return title + treeNode.id;
+			}
+		}
+	};
+	......</code></pre>
+	</div>
+	</div>
diff --git a/js/jquery.ztree.core.js b/js/jquery.ztree.core.js
@@ -84,6 +84,10 @@
           url: "url",
           icon: "icon"
         },
+        render: {
+          name: null,
+          title: null,
+        },
         simpleData: {
           enable: false,
           idKey: "id",
@@ -646,11 +650,19 @@
         if (typeof newName !== 'undefined') {
           node[key] = newName;
         }
-        return "" + node[key];
+        var rawName = "" + node[key];
+        if($.isFunction(setting.data.render.name)){
+          return setting.data.render.name.call(this,rawName,node);
+        }
+        return rawName;
       },
       nodeTitle: function (setting, node) {
         var t = setting.data.key.title === "" ? setting.data.key.name : setting.data.key.title;
-        return "" + node[t];
+        var rawTitle = "" + node[t];
+        if($.isFunction(setting.data.render.title)){
+          return setting.data.render.title.call(this,rawTitle,node);
+        }
+        return rawTitle;
       },
       removeNodeCache: function (setting, node) {
         var children = data.nodeChildren(setting, node);