欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹(shù)形菜單

 更新時(shí)間：2022年05月06日 10:26:57   投稿：lijiao  
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，EasyUI創(chuàng)建樹(shù)形菜單，內(nèi)容很豐富，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、EasyUI使用標(biāo)記創(chuàng)建樹(shù)形菜單

一個(gè)樹(shù)形菜單（Tree）可以從標(biāo)記創(chuàng)建。easyui 樹(shù)形菜單（Tree）也可以定義在 <ul> 元素中。無(wú)序列表的 <ul> 元素提供一個(gè)基礎(chǔ)的樹(shù)（Tree）結(jié)構(gòu)。每一個(gè) <li> 元素將產(chǎn)生一個(gè)樹(shù)節(jié)點(diǎn)，子 <ul> 元素將產(chǎn)生一個(gè)父樹(shù)節(jié)點(diǎn)。

創(chuàng)建樹(shù)形菜單（Tree）

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

二、EasyUI創(chuàng)建異步樹(shù)形菜單

為了創(chuàng)建異步的樹(shù)形菜單（Tree），每一個(gè)樹(shù)節(jié)點(diǎn)必須要有一個(gè) 'id' 屬性，這個(gè)將提交回服務(wù)器去檢索子節(jié)點(diǎn)數(shù)據(jù)。

創(chuàng)建樹(shù)形菜單（Tree）

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

服務(wù)器端代碼

$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樹(shù)形菜單添加節(jié)點(diǎn)

本節(jié)向您展示如何附加節(jié)點(diǎn)到樹(shù)形菜單（Tree）。我們將創(chuàng)建一個(gè)包含水果和蔬菜節(jié)點(diǎn)的食品樹(shù)，然后添加一些其他水果到已存在的水果節(jié)點(diǎn)。

創(chuàng)建食品樹(shù)
首先，我們創(chuàng)建食品樹(shù)，代碼如下所示：

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

請(qǐng)注意，樹(shù)（Tree)組件是定義在 <ul> 標(biāo)記中，樹(shù)節(jié)點(diǎn)數(shù)據(jù)從 URL "tree_data.json" 加載。

得到父節(jié)點(diǎn)

然后我們通過(guò)點(diǎn)擊節(jié)點(diǎn)選擇水果節(jié)點(diǎn)，我們將添加一些其他的水果數(shù)據(jù)。執(zhí)行 getSelected 方法得到處理節(jié)點(diǎn)：

var node = $('#tt').tree('getSelected');

getSelected 方法的返回結(jié)果是一個(gè) javascript 對(duì)象，它有一個(gè) id、text、target 屬性。target 屬性是一個(gè) DOM 對(duì)象，引用選中節(jié)點(diǎn)，它的 append 方法將用于附加子節(jié)點(diǎn)。

附加節(jié)點(diǎn)

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

當(dāng)添加一些水果，您將看見(jiàn)：

正如您所看到的，使用 easyui 的樹(shù)（Tree）插件去附加節(jié)點(diǎn)不是那么的難。

四、EasyUI創(chuàng)建帶復(fù)選框的樹(shù)形菜單

easyui 的樹(shù)（Tree）插件允許您創(chuàng)建一個(gè)復(fù)選框樹(shù)。如果您點(diǎn)擊一個(gè)節(jié)點(diǎn)的復(fù)選框，這個(gè)點(diǎn)擊的節(jié)點(diǎn)信息將向上和向下繼承。例如：點(diǎn)擊 'tomato' 節(jié)點(diǎn)的復(fù)選框，您將會(huì)看見(jiàn) 'Vegetables' 節(jié)點(diǎn)現(xiàn)在僅僅選中部分。

創(chuàng)建復(fù)選框樹(shù)

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

五、EasyUI樹(shù)形菜單拖放控制

當(dāng)在一個(gè)應(yīng)用中使用樹(shù)（Tree）插件，拖拽（drag）和放置（drop）功能要求允許用戶改變節(jié)點(diǎn)位置。啟用拖拽（drag）和放置（drop）操作，所有您需要做的就是把樹(shù)（Tree）插件的 'dnd' 屬性設(shè)置為 true。

創(chuàng)建樹(shù)形菜單（Tree）

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

當(dāng)在一個(gè)樹(shù)節(jié)點(diǎn)上發(fā)生放置操作，'onDrop' 事件將被觸發(fā)，您應(yīng)該做一些或更多的操作，例如保存節(jié)點(diǎn)狀態(tài)到遠(yuǎn)程服務(wù)器端，等等。

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樹(shù)形菜單加載父/子節(jié)點(diǎn)

通常表示一個(gè)樹(shù)節(jié)點(diǎn)的方式就是在每一個(gè)節(jié)點(diǎn)存儲(chǔ)一個(gè) parentid。 這個(gè)也被稱為鄰接列表模型。 直接加載這些數(shù)據(jù)到樹(shù)形菜單（Tree）是不允許的。 但是我們可以在加載樹(shù)形菜單之前，把它轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)準(zhǔn)的樹(shù)形菜單（Tree）數(shù)據(jù)格式。 樹(shù)（Tree）插件提供一個(gè) 'loadFilter' 選項(xiàng)函數(shù)，它可以實(shí)現(xiàn)這個(gè)功能。 它提供一個(gè)機(jī)會(huì)來(lái)改變?nèi)魏我粋€(gè)進(jìn)入數(shù)據(jù)。 本教程向您展示如何使用 'loadFilter' 函數(shù)加載父/子節(jié)點(diǎn)到樹(shù)形菜單（Tree）。

父/子節(jié)點(diǎn)數(shù)據(jù)

[
{"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' 創(chuàng)建樹(shù)形菜單（Tree）
$('#tt').tree({
 url: 'data/tree6_data.json',
 loadFilter: function(rows){
 return convert(rows);
 }
});

轉(zhuǎn)換的實(shí)現(xiàn)

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

以上就是關(guān)于EasyUI創(chuàng)建樹(shù)形菜單的基本操作方法，希望大家可以學(xué)以致用，真正的掌握其中的技巧。

相關(guān)文章

最新評(píng)論