EasyUi常用组件（二）Tree

Tree     树

一个树形菜单（Tree）可以从标记创建。easyui 树形菜单（Tree）也可以定义在 <ul> 元素中。无序列表的 <ul> 元素提供一个基础的树（Tree）结构。每一个 <li> 元素将产生一个树节点，子 <ul> 元素将产生一个父树节点。

<ul class="easyui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li><span>File 11</span></li>
                        <li><span>File 12</span></li>
                        <li><span>File 13</span></li>
                    </ul>
                </li>
                <li><span>File 2</span></li>
                <li><span>File 3</span></li>
            </ul>
        </li>
        <li><span>File21</span></li>
    </ul>

为了创建异步的树形菜单（Tree），每一个树节点必须要有一个 'id' 属性，这个将提交回服务器去检索子节点数据。

异步加载 Tree

tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如: 

1.<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

<p>tree的加载是通过<span style="font-family:Arial;">URL</span>  'get_data.php'<span style="font-family:宋体;">站点</span><span style="font-family:Arial;">.</span><span style="color:rgb(255, 0, 0);">子节点的加载依赖于父节点的状态</span>.<span style="font-family:宋体;">当展开一个关闭节点</span><span style="font-family:Arial;">,</span><span style="font-family:宋体;">如果节点没有子节点加载</span><span style="font-family:Arial;">,</span><span style="font-family:宋体;">将发送节点</span><span style="font-family:Arial;">id</span><span style="font-family:宋体;">值作为</span><span style="font-family:Arial;">http</span><span style="font-family:宋体;">参数</span><span style="font-family:Arial;">,</span><span style="font-family:宋体;">参数命名为</span><span style="font-family:Arial;">'id'</span><span style="font-family:宋体;">到远程服务器</span><span style="font-family:Arial;">,</span><span style="font-family:宋体;">通过以上</span><span style="font-family:Arial;">URL</span><span style="font-family:宋体;">定义</span><span style="font-family:Arial;">.</span><span style="font-family:宋体;">检索子节点数据</span>
看看这个从服务器返回的数据<span style="font-family:Arial;">:</span></p><pre name="code" class="html"><ul id="tt" class="easyui-tree"
               url="tree2_getdata.php">
	</ul>

服务器端代码

$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
           include 'conn.php';
          $result = array();
	$rs = mysql_query("select * from nodes where parentId=$id");
	while($row = mysql_fetch_array($rs)){
		$node = array();
		$node['id'] = $row['id'];
		$node['text'] = $row['name'];
		$node['state'] = has_child($row['id']) ? 'closed' : 'open';
		array_push($result,$node);
	}
          echo json_encode($result);
          function has_child($id){
		$rs = mysql_query("select count(*) from nodes where parentId=$id");
         $row = mysql_fetch_array($rs);
		return $row[0] > 0 ? true : false;
	}