>

实现动态加载树节点,EasyUI创建树形菜单

- 编辑:正版管家婆马报彩图 -

实现动态加载树节点,EasyUI创建树形菜单

一、EasyUI使用标记成立树形菜单
多少个树形菜单(Tree)可以从标志创立。easyui 树形菜单(Tree)也得以定义在 <ul> 成分中。冬日列表的 <ul> 元素提供三个基础的树(Tree)结构。每四个 <li> 成分将生出贰个树节点,子 <ul> 元素将时有产生二个父树节点。

引入阅读:

图片 1

简要介绍EasyUI datagrid editor combogrid寻找框的落到实处

创设树形菜单(Tree)

EasyUi中的Combogrid 完毕分页和动态搜索远程数据

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

easyui 1.2.4事例中并不曾交给动态加载树节点的例证,只能自身钻探。

二、EasyUI创造异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必供给有多个 'id' 属性,这么些将送交回服务器去检索子节点数据。

从源码中可知能够看出combotree 是三回九转 combo 和 tree多少个控件,所以在拓宽其下属子节点时,把combotree内置的tree的options选项的url重新设置成三个动态取选取值的url,代码如下:

图片 2

$('#cc').combotree({
url:"treejson.aspx?act=allregion&parentid=0", 
onBeforeExpand:function(node){
$('#cc').combotree("tree").tree("options").url= "treejson.aspx?act=allregion&parentid=" + node.id;
}
}); 

成立树形菜单(Tree)

如上内容是小编给我们介绍的EasyUi combotree 达成动态加载树节点的相关知识,希望对大家持有帮忙!

 <ul id="tt" class="easyui-tree"
 url="tree2_getdata.php">
 </ul>

你可能感兴趣的小说:

  • 浅谈EasyUi ComBotree树修改 父节点选取的标题
  • 自在学习jQuery插件EasyUI EasyUI创立树形菜单
  • Jquery easyui 完结动态树
  • jquery中EasyUI达成异步树
  • jquery中EasyUI完成同步树
  • EasyUI Tree+Asp.net完成权力树或目录树导航的总结实例
  • jQuery EasyUI API 中文文书档案 - TreeGrid 树表格使用介绍
  • EasyUI创设职员树的实例代码

劳动器端代码

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

三、EasyUI树形菜单加多节点 本节向您出示什么附加节点到树形菜单(Tree)。大家将创设一个暗含蔬菜和水果节点的食物树,然后加多一些别样水果到已存在的水果节点。

图片 3

开创食物树
首先,大家创造食物树,代码如下所示:

 <div style="width:200px;height:auto;border:1px solid #ccc;">
 <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
 </div>

请小心,树(Tree)组件是概念在 <ul> 标识中,树节点数据从 U冠道L "tree_data.json" 加载。
收获父节点

下一场大家透过点击节点采纳水果节点,大家将增进一些其余的果品数据。试行getSelected 方法获得管理节点:
 var node = $('#tt').tree('getSelected');
getSelected 方法的归来结果是二个 javascript 对象,它有七个id、text、target 属性。target 属性是一个 DOM 对象,援用选中节点,它的 append 方法将用以附加子节点。
叠合节点

var node = $('#tt').tree('getSelected');
 if (node){
 var nodes = [{
 "id":13,
 "text":"Raspberry"
 },{
 "id":14,
 "text":"Cantaloupe"
 }];
 $('#tt').tree('append', {
 parent:node.target,
 data:nodes
 });
 }

当增添一些水果,您将看见:

图片 4

正如你所看到的,使用 easyui 的树(Tree)插件去附加节点不是那么的难。
四、EasyUI创建带复选框的树形菜单 easyui 的树(Tree)插件允许你创立一个复选框树。假如你点击二个节点的复选框,这些点击的节点消息将发展和向下继续。比如:点击 'tomato' 节点的复选框,您将会看见 'Vegetables' 节点现在独自行选购中部分。

图片 5

创制复选框树

<ul id="tt" class="easyui-tree"
 url="data/tree_data.json"
 checkbox="true">
</ul>

五、EasyUI树形菜单拖放调控 当在二个选择中运用树(Tree)插件,拖拽(drag)和停放(drop)作用供给允许客户退换节点地点。启用拖拽(drag)和停放(drop)操作,全数你必要做的正是把树(Tree)插件的 'dnd' 属性设置为 true。

图片 6

创建树形菜单(Tree)

$('#tt').tree({
 dnd: true,
 url: 'tree_data.json'
});

当在二个树节点上发生放置操作,'onDrop' 事件将被触发,您应该做一些或更加多的操作,比方保存节点状态到长途服务器端,等等。

onDrop: function(targetNode, source, point){
 var targetId = $(target).tree('getNode', targetNode).id;
 $.ajax({
 url: '...',
 type: 'post',
 dataType: 'json',
 data: {
 id: source.id,
 targetId: targetId,
 point: point
 }
 });
}

六、EasyUI树形菜单加载父/子节点 一般来讲表示多个树节点的艺术正是在每贰个节点存款和储蓄一个 parentid。 那一个也被称之为邻接列表模型。 直接加载那几个数据到树形菜单(Tree)是不允许的。 然则我们得以在加载树形菜单在此之前,把它调换为标准标准的树形菜单(Tree)数据格式。 树(Tree)插件提供二个 'loadFilter' 选项函数,它可以达成这么些成效。 它提供一个时机来退换任何一个步向数据。 本教程向您展现什么使用 'loadFilter' 函数加载父/子节点到树形菜单(Tree)。

图片 7

父/子节点数据

[
{"id":1,"parendId":0,"name":"Foods"},
{"id":2,"parentId":1,"name":"Fruits"},
{"id":3,"parentId":1,"name":"Vegetables"},
{"id":4,"parentId":2,"name":"apple"},
{"id":5,"parentId":2,"name":"orange"},
{"id":6,"parentId":3,"name":"tomato"},
{"id":7,"parentId":3,"name":"carrot"},
{"id":8,"parentId":3,"name":"cabbage"},
{"id":9,"parentId":3,"name":"potato"},
{"id":10,"parentId":3,"name":"lettuce"}
]
使用 'loadFilter' 创建树形菜单(Tree)
$('#tt').tree({
 url: 'data/tree6_data.json',
 loadFilter: function(rows){
 return convert(rows);
 }
});

更动的兑现

function convert(rows){
 function exists(rows, parentId){
 for(var i=0; i<rows.length; i++){
 if (rows[i].id == parentId) return true;
 }
 return false;
 }

 var nodes = [];
 // get the top level nodes
 for(var i=0; i<rows.length; i++){
 var row = rows[i];
 if (!exists(rows, row.parentId)){
 nodes.push({
 id:row.id,
 text:row.name
 });
 }
 }

 var toDo = [];
 for(var i=0; i<nodes.length; i++){
 toDo.push(nodes[i]);
 }
 while(toDo.length){
 var node = toDo.shift(); // the parent node
 // get the children nodes
 for(var i=0; i<rows.length; i++){
 var row = rows[i];
 if (row.parentId == node.id){
 var child = {id:row.id,text:row.name};
 if (node.children){
  node.children.push(child);
 } else {
  node.children = [child];
 }
 toDo.push(child);
 }
 }
 }
 return nodes;
}

如上就是关于EasyUI创设树形菜单的基本操作方法,希望大家能够学有所用,真正的垄断个中的才干。

你恐怕感兴趣的篇章:

  • 浅谈EasyUi ComBotree树修改 父节点选取的主题素材
  • EasyUi combotree 完成动态加载树节点
  • Jquery easyui 完结动态树
  • jquery中EasyUI完毕异步树
  • jquery中EasyUI完毕共同树
  • EasyUI Tree+Asp.net完成权力树或目录树导航的简单实例
  • jQuery EasyUI API 汉语文书档案 - TreeGrid 树表格使用介绍
  • EasyUI创造人士树的实例代码

本文由网络计算发布,转载请注明来源:实现动态加载树节点,EasyUI创建树形菜单