色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

easyui動態加載json樹

錢淋西1年前8瀏覽0評論

EasyUI是一個非常流行的jQuery UI插件,提供了各種易于使用的UI組件。其中包括一個動態加載JSON樹的組件,本文將介紹如何使用EasyUI實現。

首先,需要在頁面中引入EasyUI的JS和CSS文件:

<link rel="stylesheet" ><link rel="stylesheet" ><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.11/jquery.easyui.min.js">

接下來,需要創建一個HTML元素用于顯示樹結構。

<ul id="tree"></ul>

然后,編寫JS代碼動態加載JSON數據并展示樹結構。

<script>$(function(){
$('#tree').tree({
url: 'tree_data.json',
onLoadSuccess: function(node, data){
if (data){
$(data).each(function(index, value){
if ($("#tree").tree("isLeaf", value)){
value.iconCls = 'icon-leaf';
} else {
value.iconCls = 'icon-tree';
}
});
}
}
});
});
</script>

在代碼中,我們通過調用tree方法來創建樹結構,并使用url屬性指定JSON數據的URL。當樹結構加載完成后,會調用onLoadSuccess回調函數。在該回調函數中,我們對每個節點進行遍歷操作,通過isLeaf方法判斷該節點是否為葉子節點,并設置相應的圖標。在JSON數據中可以為每個節點設置iconCls屬性,EasyUI會自動根據該屬性設置節點圖標。

最后,需要準備一個JSON數據用于測試。

[
{
"id":1,
"text":"Node1",
"children":[
{
"id":2,
"text":"Node2",
"state":"closed"
},
{
"id":3,
"text":"Node3",
"iconCls":"icon-save"
}
]
},
{
"id":4,
"text":"Node4",
"iconCls":"icon-add",
"children":[
{
"id":5,
"text":"Node5",
"attributes":{
"url":"/demo/demo.action"
}
}
]
}
]

使用EasyUI動態加載JSON樹就是這么簡單,希望能幫助你完成開發任務。