溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用jQuery zTree實現改變指定節點文本樣式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
示例：顯示自定義字體的樹
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
fontCss: getFont,
nameIsHTML: true
}
};
var zNodes =[
{ name:"粗體字", <span >font:{'font-weight':'bold'}</span> },
{ name:"斜體字", font:{'font-style':'italic'}},
{ name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
{ name:"紅色字", font:{'color':'red'}},
{ name:"藍色字", font:{'color':'blue'}},
{ name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
{ name:"zTree 默認樣式"}
];
function getFont(treeId, node) {
return node.font ? node.font : {};
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT> 示例：自定義圖標 -- icon 屬性
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"展開、折疊 自定義圖標不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"},
{ id:11, pId:1, name:"葉子節點1", icon:"../../../css/zTreeStyle/img/diy/2.png"},
{ id:12, pId:1, name:"葉子節點2", icon:"../../../css/zTreeStyle/img/diy/3.png"},
{ id:13, pId:1, name:"葉子節點3", icon:"../../../css/zTreeStyle/img/diy/5.png"},
{ id:2, pId:0, name:"展開、折疊 自定義圖標相同", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"},
{ id:21, pId:2, name:"葉子節點1", icon:"../../../css/zTreeStyle/img/diy/6.png"},
{ id:22, pId:2, name:"葉子節點2", icon:"../../../css/zTreeStyle/img/diy/7.png"},
{ id:23, pId:2, name:"葉子節點3", <span >icon:"../../../css/zTreeStyle/img/diy/8.png"</span>},
{ id:3, pId:0, name:"不使用自定義圖標", open:true },
{ id:31, pId:3, name:"葉子節點1"},
{ id:32, pId:3, name:"葉子節點2"},
{ id:33, pId:3, name:"葉子節點3"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT> 可以看到每個NODE都有一個FONT的屬性，和NAME同等級。可以通過設置FONT來指定其文本樣式。
通過第二個示例可以看到，還有一個ICON屬性。可以通過設置ICON屬性來設置更改后的圖標。
應用：實時更新樹狀態ICON和FONT樣式
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
rMenu = $("#rMenu");
setTimeout("updateDev()",1000); // 在初始化樹之后，開始更新狀態，就別用setInterval了
});
var baseImgPath = "<%=basePath%>img/"; // basePath是通過JSP獲得的系統根路徑，不用相對路徑
function updateTree(){
toDwr.getAllCode(function back(values){
if(null != values && ""!=values){
for(var code in values){
<span >var node = zTree.getNodeByParam("id", code, null);</span> // 每個樹都有編號，通過編號找節點
if(null != node){
<span >node.font={'color':'red'};</span> // 設置文本樣式，這里設置文本顏色
<span >node.icon=baseImgPath+"monitor.png";</span> // 設置節點圖標
zTree.updateNode(node); // 更新該節點
}
}
}
setTimeout("updateTree()",1000);
}
} 備注：
這里使用DWR進行異步交互，返回需要更新的列表編碼。實際應用中可以根據實際情況，返回響應對象，并根據對象的屬性判斷到底更新為那種樣式。
這里不建議使用 setInterval，建議采用setTimeout在輪詢一次以后再開始下次更新操作。
以上就是使用jQuery zTree實現改變指定節點文本樣式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
