LigerUI Tree是一個用于繪制樹形結構的前端組件庫。除了對樹的基本操作之外，它還提供了自定義節點渲染和事件監聽的功能。這使得我們可以在樹形結構中顯示更復雜的數據，并通過交互式操作實現更多的功能。

而MySQL，則是一種常用的關系型數據庫。它提供了一種有效地管理結構化數據的方法，并以其高可擴展性和可靠性而聞名。與LigerUI Tree一起使用，我們可以輕松地將MySQL數據庫中的數據存儲為樹形結構，并在前端展示出來。

//建立MySQL連接
var connection = mysql.createConnection({
host     : 'localhost',
user     : 'root',
password : 'password',
database : 'test'
});
//查詢樹形結構的數據
connection.query('SELECT * FROM treeTable WHERE parentId = ?', currentId, function(err, rows, fields) {
if (err) throw err;
//將數據轉化為LigerUI Tree需要的格式
var treeData = [];
for(var i = 0; i< rows.length; i++) {
var node = {};
node.id = rows[i].id;
node.text = rows[i].text;
node.parentId = rows[i].parentId;
treeData.push(node);
}
//渲染LigerUI Tree
$("#tree").ligerTree({
data: treeData
});
});

如上所示，我們可以使用LigerUI Tree提供的data屬性將MySQL中的數據渲染為前端樹形結構。在上面的代碼中，我們使用了node-mysql庫來建立MySQL連接，并使用connection.query方法查詢樹形結構數據。

我們首先將LigerUI Tree所需要的數據格式轉化為MySQL查詢結果中的格式，然后通過$("#tree").ligerTree方法將數據渲染為前端樹形結構。在這個例子中，我們將數據庫中parentId為當前節點id的數據作為子節點進行渲染。