EasyUI 樹控件是一款非常常用的前端UI控件,它可以輕松的展示數據的層級關系,便于用戶查看和操作。而如果要動態加載數據,EasyUI 樹控件也是支持的,我們只需要在后臺返回的 JSON 數據中添加節點信息即可。
動態 JSON 數據中,每個節點都需要有以下幾個屬性:
{ text: '節點名稱', id: '節點 ID', state: '節點狀態,有 open 和 closed 兩種', checked: '節點是否被選中', attributes: '自定義屬性', children: '子節點,如果沒有子節點可以不寫' }
其中,id
和text
屬性是必須的,其它屬性是可選的。
下面是一個簡單的例子:
{ "id": "1", "text": "節點A", "state": "open", "children": [ { "id": "11", "text": "節點B", "state": "closed", "attributes": { "url": "http://www.baidu.com" }, "children": [ { "id": "111", "text": "節點C", "state": "open", "attributes": { "url": "http://www.google.cn" } } ] }, { "id": "12", "text": "節點D", "state": "closed" } ] }
在使用 EasyUI 樹控件時,我們需要設置以下屬性:
$('#tree').tree({ url: 'http://example.com/data.json', // 服務器端返回的 JSON 數據的 URL method: 'get', // 請求方式,可以是 get 或 post animate: true, // 是否啟用動畫效果 checkbox: true, // 是否啟用復選框 dnd: true, // 是否啟用拖放功能 onClick: function(node){} // 點擊節點觸發的事件 });
除了以上屬性外,EasyUI 樹控件還提供了很多其它的配置選項,可以根據實際需求進行配置。
以上就是關于 EasyUI 樹動態 JSON 數據的介紹,希望對你有所幫助。