easyui 進階之tree的常見操作

前言

easyui是一種基於jQuery的用戶界面插件集合，它為創建現代化，互動，JavaScript應用程序，提供必要的功能，完美支持HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。

easyui中文網：http://www.jeasyui.net/

easyui官網：http://www.jeasyui.com/documentation/#

今天我們來學習tree

 

正文

一、 加載樹

1.靜態界面加載樹

在html直接加載數據，直接寫死的頁面

    <div class="easyui-panel" style="padding:5px">
        <ul class="easyui-tree">
            <li>
                <span>My Documents</span>
                <ul>
                    <li data-options="state:'closed'">
                        <span>Photos</span>
                        <ul>
                            <li>
                                <span>Friend</span>
                            </li>
                            <li>
                                <span>Wife</span>
                            </li>
                            <li>
                                <span>Company</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Program Files</span>
                        <ul>
                            <li>Intel</li>
                            <li>Java</li>
                            <li>Microsoft Office</li>
                            <li>Games</li>
                        </ul>
                    </li>
                    <li>index.html</li>
                    <li>about.html</li>
                    <li>welcome.html</li>
                </ul>
            </li>
        </ul>
    </div>

效果圖：

 

2.加載可編輯的樹

<div class="easyui-panel" style="padding:5px">
        <ul id="tt" class="easyui-tree" data-options="                 url: 'tree_data1.json', method: 'get', animate: true, onClick: function(node){ $(this).tree('beginEdit',node.target); } "></ul>
    </div>

可使用 javascript 加載數據。

$('#tt').tree({ data：[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{ "text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":true },{ "id": 8, "text":"Sub Bookds", "state":"closed" }] }] },{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }] }] });

3.加載在節點上顯示額外信息的樹

<div class="easyui-panel" style="padding:5px">
        <ul class="easyui-tree" data-options="                     url:'tree_data1.json', method:'get', animate:true, formatter:function(node){ var s = node.text; if (node.children){ s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>'; } return s; } ">
        </ul>
    </div>

如圖

4.用js加載樹

引用

<ul id="tree"></ul>

js代碼

$('#tree').tree({ data:[{

		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}], 
　　　　　　　　　　onSelect: function(node){ 
　　　　　　　　　　　　console.log('選中的樹的節點信息'); 
　　　　　　　　　　　　console.log(node); 
　　　　　　　　　　 } });

5.加載異步樹

創建樹形菜單（Tree）

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

二，樹的屬性、方法

官網api

http://www.jeasyui.com/documentation/#

三、常見樹操作

1.重新加載樹

$("#tree").tree({data:you_data});

$("#tree").tree("loadData",you_data);

 

2.定義顯示節點文本

$('#tt').tree({ formatter:function(node){ return node.text; } });

3.點擊事件觸發

$('#tt').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked
 } });

4.為樹添加右鍵菜單

 // 為菜單樹增加右鍵菜單
    $('#tree').tree({ onContextMenu: function(e, node){ e.preventDefault(); // select the node
            $('#tree').tree('select', node.target); // display context menu
            $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } });

樹節點

<ul id="tree"></ul>

右鍵菜單內容

<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="add_save.add();" data-options="iconCls:'icon-add'">新增子菜單</div>
    <div onclick="menuEdit();" data-options="iconCls:'icon-edit'">編輯菜單</div>
    <div onclick="add_save.remove();" data-options="iconCls:'icon-remove'">刪除</div>
</div>

5.獲取選中的節點

 var menu = $('#Tree').tree('getSelected');

var nodes = $('#tree').tree('getChecked');

狀態可用值有：'checked'、'unchecked'、'indeterminate'。如果狀態未分配，則返回 'checked' 節點。

6.追加子節點

數據最好動態加載

var selected = $('#tree').tree('getSelected'); $('#tt').tree('append', { parent: selected.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] });

7.在指點節點前或后添加一個節

 

before：DOM 對象，前邊插入的節點。
after：DOM 對象，后邊插入的節點。
data：對象，節點數據。

//在節點之前添加一個節點
var node = $('#tree').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); }

8.更新指定節點的參數

// update the selected node text
var node = $('#tree').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }

9.啟動拖拽

示例：

//onBeforeDrop:在節點被放置之前觸發，返回 false 則禁止放置。
onBeforeDrop:function(target,source){
            var targetNode = $(this).tree('getNode',target); console.log("目標節點ID："+targetNode.id); },

//啟動拖拽屬性
$("#MenuTree").tree({
    dnd:true});

 10.樹的迭代

在開發過程中，很多時候后台的數據不是我們樹加載想要的數據，我們可以通過迭代來編輯數據，

示例：

原數據（后面統一用you_data表示）

[{ "id": 1, "state": "closed", "children": [{ "id": 11,  },{ "id": 12,  }] },{ "id": 2, "state": "closed" }]

我們可以發現數據中沒有taxt屬性，也就沒有要顯示的文本。。tree是看不到的，我們通過迭代操作加載出數據

 //樹
$('#Tree').tree({ data: you_data, onSelect: function(node){ console.log('選中的樹的節點信息'); console.log(node);
　　　　　　　　　 } });

//迭代循環
var oldData = [];
if(res){
    oldData=you_data;
    for(var i in oldData){　　
　　　　　　//迭代方法調用
        readTree(oldData[i],oldData);
    }
}

//為菜單樹添加text
function readTree(node,data){
    var children = node.children;
    if(node.name){
        node.text=node.id;
    }
    if(children&&children.length==0)delete node.children;
    if (children && children.length) {
        node.state = "closed";
        for (var i = 0; i < children.length; i++) {
            readTree(children[i],data);
        }
    }else{
        return data;
    }
};

$("#MenuTree").tree({data:res.data});

操作完以后我們的數據為

[{ "id": 1, "text": "1", "state": "closed", "children": [{ "id": 11, "text": "11" },{ "id": 12, "text": "12" }] },{ "id": 2, "text": "2", "state": "closed" }]

 

相關文章

easyui 進階之表單校驗、自定義校驗

歡迎大家關注公眾號，不定時干貨，只做有價值的輸出

作者：Dawnzhang 
出處：https://www.cnblogs.com/clwydjgs/p/10043216.html