easyui是一個基于jQuery的UI框架,其中的tree組件可以方便地展示樹形結(jié)構(gòu)。在使用中,我們可以通過JSON數(shù)據(jù)來構(gòu)建easyui tree。
$(function(){ $('#tree').tree({ data: [{ "id":1, "text":"節(jié)點1", "children":[{ "id":11, "text":"節(jié)點11" },{ "id":12, "text":"節(jié)點12" }] },{ "id":2, "text":"節(jié)點2" }] }); });
在JSON數(shù)據(jù)中,我們可以設(shè)定屬性來說明節(jié)點的ID、文本內(nèi)容、子節(jié)點等信息。通過指定data屬性,我們可以將JSON數(shù)據(jù)傳入tree組件來構(gòu)建樹形結(jié)構(gòu)。
如果我們需要從后臺動態(tài)獲取JSON數(shù)據(jù),可以使用jQuery的AJAX方法來請求數(shù)據(jù),然后調(diào)用tree組件的load方法來加載數(shù)據(jù)。
$(function(){ $.ajax({ url: 'data.json', method: 'GET', success: function(data){ $('#tree').tree('loadData', data); } }); });
上述代碼中,我們通過GET方法請求data.json文件中的數(shù)據(jù),然后使用loadData方法加載數(shù)據(jù)到tree組件中。
通過這些簡單的代碼,我們可以快速地構(gòu)建出一個易用的easyui tree組件,并且通過JSON數(shù)據(jù)實現(xiàn)節(jié)點的動態(tài)加載與修改。