easyui是一個(gè)基于jQuery的開源框架，它提供了非常豐富的UI組件，能夠快速搭建漂亮并且功能豐富的網(wǎng)頁應(yīng)用。其中，easyui json treegrid組件是easyui中非常重要的一個(gè)組件，它可以根據(jù)JSON數(shù)據(jù)渲染出一棵tree grid，并且支持動(dòng)態(tài)加載和節(jié)點(diǎn)的展開和折疊。

下面我們來看一下easyui json treegrid的使用方法：

<table id="tt">
</table>
<script>
$('#tt').treegrid({
url: 'get_data.php', // 獲取數(shù)據(jù)的URL
idField: 'id', // id字段
treeField: 'name', // tree字段
columns: [[
{field:'name',title:'Name',width:200},
{field:'size',title:'Size',width:100},
{field:'date',title:'Date',width:150}
]]
});
</script>

上面的代碼中，我們首先創(chuàng)建了一個(gè)空的table，并且用treegrid插件將其轉(zhuǎn)換成了一個(gè)tree grid。其中，url屬性指定了獲取數(shù)據(jù)的URL，idField屬性指定了每個(gè)節(jié)點(diǎn)的唯一標(biāo)識(shí)符，treeField屬性指定了樹形結(jié)構(gòu)的字段，columns屬性指定了表格列的信息和寬度。

而如果我們需要?jiǎng)討B(tài)加載子節(jié)點(diǎn)，可以使用下面的代碼：

$('#tt').treegrid({
url: 'get_data.php',
idField: 'id',
treeField: 'name',
columns: [[
{field:'name',title:'Name',width:200},
{field:'size',title:'Size',width:100},
{field:'date',title:'Date',width:150}
]],
onBeforeExpand: function(row){
if (!row.children){
$.ajax({
url: 'get_children.php?id=' + row.id,
dataType: 'json',
success: function(data){
$('#tt').treegrid('append',{
parent: row.id,
data: data
});
row.children = data;
}
});
}
}
});

在上面的代碼中，我們指定了onBeforeExpand事件，當(dāng)節(jié)點(diǎn)展開的時(shí)候，會(huì)觸發(fā)這個(gè)事件，然后通過ajax請(qǐng)求獲取子節(jié)點(diǎn)的數(shù)據(jù)，并利用treegrid('append')方法將數(shù)據(jù)添加到tree grid中，并將data賦值給row.children。

在使用easyui json treegrid的過程中，還可以通過一些其他的屬性和方法來實(shí)現(xiàn)更加豐富的功能。大家可以查看easyui的官方文檔來了解這些內(nèi)容。