在Web開(kāi)發(fā)中，數(shù)據(jù)展示是非常重要的一個(gè)環(huán)節(jié)。使用datatable插件可以有效地展示數(shù)據(jù)，但有時(shí)候我們需要將數(shù)據(jù)以樹(shù)形結(jié)構(gòu)展示，這時(shí)我們可以使用datatable生成json樹(shù)。

生成json樹(shù)的過(guò)程非常簡(jiǎn)單，只需要使用一些datatable的API即可。

// 初始化datatable
var table = $('#example').DataTable({
ajax: 'data.json'
});
// 獲取所有數(shù)據(jù)并轉(zhuǎn)換成數(shù)組
var data = table.rows({ search: 'applied' }).data().toArray();
// 遞歸生成樹(shù)形結(jié)構(gòu)
function generateTree( data, pid ){
var result = [], temp;
for( var i in data ){
if( data[i].pid == pid ){
temp = data[i];
temp.children = generateTree( data, temp.id );
result.push( temp );
}
}
return result;
}
// 生成樹(shù)形結(jié)構(gòu)
var tree = generateTree( data, 0 );
// 轉(zhuǎn)換成JSON格式
var json = JSON.stringify( tree );

如上所示，我們將datatable中所有數(shù)據(jù)轉(zhuǎn)換成數(shù)組，并使用遞歸函數(shù)將數(shù)據(jù)轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)。最后，我們將樹(shù)形結(jié)構(gòu)轉(zhuǎn)換成JSON格式。

使用這種方法生成的json樹(shù)可以方便地用于前端展示頁(yè)面的樹(shù)形結(jié)構(gòu)。