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樹就是這么簡單,希望能幫助你完成開發任務。