easyui tree

一.创建tree

 

    可使用两种方式来创建tree

      1.html直接创建

        

Js代码

1. <ul id="menuTree" class="easyui-tree" animate="true">   
2.           <li>   
3.     <span>所有菜单</span>   
4.     <ul>   
5.          <li state="closed">   
6.                <span>Sub Folder 1</span>   
7.                <ul>   
8.         <li><span><a href="#">预约登记</a></span></li>   
9.         <li>   
10.                                     <span>预约周期</span>   
11.         </li></ul>   
12.                     </li>   
13.                </ul>   
14.          <li>   
15. </ul>  

<ul id="menuTree" class="easyui-tree" animate="true">
          <li>
	<span>所有菜单</span>
	<ul>
	     <li state="closed">
	           <span>Sub Folder 1</span>
	           <ul>
		<li><span><a href="#">预约登记</a></span></li>
		<li>
                                    <span>预约周期</span>
		</li></ul>
                    </li>
               </ul>
         <li>
</ul>

 2.使用异步数据创建tree

Js代码

1. jQuery("#menuTree").tree({   
2.      url:"menu.jsp"  
3.      onclick:function(node)   
4.      {   
5.      }   
6. });  

jQuery("#menuTree").tree({
     url:"menu.jsp"
     onclick:function(node)
     {
     }
});

 

  menu.jsp返回的数据格式如:

Js代码

1. [   
2.    {"text":"所有菜单","children":[{"id":"01","text":"预约管理","state":"closed","children":[{"id":"00","text":"预约登记","attributes":{"moduleId":"01","roleId":"01"}}],"checked":true},{"id":"02","text":"销售管理","state":"closed","children":[{"id":"05","text":"课程类型","attributes":{"moduleId":"02","roleId":"01"},"checked":true}],"checked":true},{"id":"03","text":"进销存管理","state":"closed","children":[{"id":"12","text":"基础参数","attributes":{"moduleId":"03","roleId":"01"},"checked":true}],"checked":true},{"id":"04","text":"人事管理","state":"closed","children":[{"id":"21","text":"员工管理","attributes":{"moduleId":"04","roleId":"01"},"checked":true}],"checked":true},{"id":"05","text":"综合管理","state":"closed","children":[{"id":"23","text":"单位管理","attributes":{"moduleId":"05","roleId":"01"},"checked":true}],"checked":true},{"id":"06","text":"报表管理","state":"closed","children":[{"id":"29","text":"盘点表","attributes":{"moduleId":"06","roleId":"01"},"checked":true}],"checked":true},{"id":"07","text":"高级管理区","state":"closed","children":[{"id":"30","text":"进销存部分","attributes":{"moduleId":"07","roleId":"01"}}]}]}]