1.易用户界面使用标签来创建树形菜单。可以从标签创建树。easyui Tree菜单(树)也可以在ul元素中定义。无序列表的Ul元素提供了一个基本的树形结构。每个li元素将产生一个树节点，子ul元素将产生一个父树节点。

创建树菜单(树)

ul class=' easy ui-tree ' Li SPan Folder/SPan ul Li SPan sub Folder 1/SPan ul lispanFile 11/SPan/Li lispanFile 12/SPan/Li lispanFile 13/SPan/Li/ul/Li lispanFile 2/SPan/Li lispanFile 3/SPan/Li/ul/Li lispanFile 21/SPan/Li/ul II。EasyUI创建异步树菜单为了创建异步树，每个树节点必须有一个‘id’属性，该属性将被提交回服务器以检索子节点数据。

创建树菜单(树)

ul id=' TT ' class=' easui-tree ' URL=' tree 2 _ getdata . PHP '/ul服务器端代码。

$id=isset($_POST['id'])？int val($ _ POST[' id ']): 0；包括“conn . PHP”；$ result=array()；$rs=mysql_query('从parentId=$id '的节点中选择*)；while($ row=MySQL _ fetch _ array($ RS)){ $ node=array()；$ node[' id ']=$ row[' id ']；$ node[' text ']=$ row[' name ']；$ node[' state ']=has _ child($ row[' id '])？关闭' : '打开；array_push($result，$ node)；} echo JSON _ encode($ result)；函数具有_child($id){ $rs=mysql_query('从parentId=$id '的节点中选择count(*))；$ row=MySQL _ fetch _ array($ RS)；是否返回$row[0] 0？真：假；}三。易用户树菜单添加节点本节向您展示如何将节点附加到树菜单。我们将创建一个包含水果和蔬菜节点的食物树，然后在现有的水果节点上添加一些其他水果。

创建食物树首先，我们用以下代码创建一个食物树：

div style=' width:200pxheight:auto' border:1px实心# ccc'Ul id=' TT ' class=' easui-Tree ' URL=' Tree _ data . JSON '/ul/div请注意，树组件是在ul标签中定义的，树节点数据是从URL 'tree_data.json '加载的。获取父节点。

然后我们通过点击节点来选择水果节点，我们会添加一些其他的水果数据。执行getSelected方法获取处理节点：varnode=$ ('# TT ')。树(' get selected ')；getSelected方法的结果是一个带有id、文本和目标属性的javascript对象。属性是一个引用所选节点的DOM对象，它的追加方法将用于附加子节点。其他节点

var node=$('#tt ')。树(' GetSelected ')；if(node){ var nodes=[{ ' id ' :13，' text': '树莓' }，{ 'id':14，' text': '哈密瓜' }]；$('#tt ')。tree('append '，{ parent:node.target，data : nodes })；}当您添加一些水果时，您会看到：

如您所见，使用easyui的Tree插件来附加节点并不困难。4.易用户创建一个带有复选框的树形菜单。easyui的树插件允许您创建复选框树。如果单击节点的复选框，则被单击节点的信息将被上下继承。例如，单击“番茄”节点的复选框，您将看到现在只选择了“蔬菜”节点的一部分。

创建复选框树。

ul id=' TT ' class=' EasyUI-Tree ' URL=' data/Tree _ data . JSON ' checkbox=' true '/ul v . EasyUI Tree菜单拖放控件在应用程序中使用树插件时，拖放功能需要用户更改节点位置。要启用拖放操作，您只需要将Tree插件的“dnd”属性设置为true。

创建树菜单(树)

$('#tt ')。tree({ dnd: true，URL : ' tree _ data . JSON ' })；当在树节点上发生放置操作时，将触发“onDrop”事件。您应该执行一些或更多操作，例如将节点状态保存到远程服务器，等等。

onDrop:函数(目标节点，源，点){ var targetId=$(目标).树(“getNode”，targetNode).id；$.ajax({ url: ' . '，type: 'post '，dataType: 'json '，data: { id: source.id，targetId: targetId，point : point } })；}六、易居树形菜单加载父/子节点通常表示一个树节点的方式就是在每一个节点存储一个父母身份。这个也被称为邻接列表模型。直接加载这些数据到树形菜单（树)是不允许的。但是我们可以在加载树形菜单之前，把它转换为标准标准的树形菜单（树)数据格式。树（树)插件提供一个' loadFilter '选项函数，它可以实现这个功能。它提供一个机会来改变任何一个进入数据。本教程向您展示如何使用' loadFilter '函数加载父/子节点到树形菜单（树).

父/子节点数据

[{'id':1，' parendId':0，' name':'Foods'}，{'id':2，' parentId':1，' name ' 3: '水果}，{'id':3，' parentId':1，' name ' 3: '蔬菜}，{ ' id ' :4，' parentId ' 3:2，' name ' 333:使用' loadFilter '创建树形菜单（树)$('#tt ').树({ URL : '数据/树6 _数据。' JSON '，loadFilter:函数（行){返回转换(行);}});转换的实现

函数转换(行){ 0函数存在(行，ParentID){ for(var I=0；irows . LengiI){ if(第[I]行).id==parentId)返回真}返回false } var nodes=[]；//获取(var I=0；irows . lengthi){ var row=row[I]；if(！存在(排，排。ParentID)){ nodes。push({ id : row。id，文本：行。name })；} } var ToDo=[]；for(var I=0；索引节点长度；I){ ToDo。推送(节点[I])；} while(ToDo。长度){ var node=ToDo。shift()；//父节点//获取(var I=0；irows . lengthi){ var row=row[I]；if(row。ParentID==节点。id){ var child={ id : row。id，文本：行。名称}；if(节点。children){ node。孩子们。push(子级)；} else { node。children=[child]；} toDo.push(子级);} } }返回节点；}以上就是关于易居创建树形菜单的基本操作方法，希望大家可以学以致用，真正的掌握其中的技巧。