Tree( 树) 组件[2]

本节课重点了解 EasyUI 中 Tree(树)组件的使用方法， 这个组件依赖于 Draggable(拖
动)和 Droppable(放置)组件。
一． 异步加载
如果想从数据库里获取导航内容， 那么就必须实现一张父类子类的无限极分类表。 主要
有 id(编号)、text(名称)、state(状态)、tid(类别)。
//异步加载 tree.php
$('#box').tree({
url : 'tree.php',
lines : true,
});

PS：在这里点击目录时，不需要通过触发事件来完成异步加载数据。因为它内部已经
实现了这个事件。

 

//部分 PHP 代码
$id = 0;
if (isset($_POST['id'])) {
$id = $_POST['id'];
}
$query = mysql_query("SELECT id,text,state FROM think_nav WHERE
tid='$id'") or die('SQL 错误！');
$json = '';
while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
$json .= json_encode($row).',';
}
$json = substr($json, 0, -1);
echo '['.$json.']';

默认情况下，我们将目录进行了隐藏。如果想一下子全部展开，可以使用
onLoadSuccess(node, data)事件和 expanAll 方法。
//同时展开所有
$('#box').tree({
url : 'tree.php',
lines : true,
onLoadSuccess : function (node, data) {
if (data) {
$(data).each(function (index, value) {
if (this.state == 'closed') {
$('#box').tree('expandAll');
}
});
}
}
});