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;}