jQuery EasyUI 數據網格與樹插件 - Tree 樹

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.tree.defaults 重寫默認的 defaults。

樹（tree）在網頁中以樹形結構顯示分層數據。它向用戶提供展開、折疊、拖拽、編輯和非同步加載功能。

依賴

  • draggable
  • droppable

用法

樹（tree）定義在 <ul> 元素中。該標記可定義葉節點和子節點。節點將是 ul 列表內的 <li> 元素。下麵演示了將被用於製作嵌套在 ul 元素內的樹節點的元素。

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></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>

樹（Tree）也可以在一個空的 <ul> 元素中定義，可使用 javascript 加載數據。

<ul id="tt"></ul>

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

使用 loadFilter 來處理來自 ASP.NET web 服務的 json 數據。

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

樹的數據格式（Tree Data Format）

每個節點可以包括下列屬性：

  • id：節點的 id，它對於加載遠程數據很重要。
  • text：要顯示的節點文本。
  • state：節點狀態，'open' 或 'closed'，默認是 'open'。當設置為 'closed' 時，該節點有子節點，並且將從遠程站點加載它們。
  • checked：指示節點是否被選中。
  • attributes：給一個節點添加的自定義屬性。
  • children：定義了一些子節點的節點數組。

實例：

[{
    "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#"
    }]
}]

非同步樹

樹支持內置的非同步加載模式，因此用戶可以創建一個空的樹，然後指定一個動態返回 JSON 數據的伺服器端，用於根據需求非同步填充樹。下麵是一個實例：

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

樹是通過 URL 'get_data.php' 加載的。子節點依賴於父節點狀態被加載。當展開一個關閉的節點時，如果該節點沒有子節點加載，它將通過上面定義的 URL 向伺服器發送節點的 id 值作為名為 'id' 的 http 請求參數，以便檢索子節點。

請看從伺服器返回的數據：

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

節點 1 和節點 2 是關閉的，當展開節點 1 時，將直接展示它的子節點。當展開節點 2 時，將向伺服器發送 value(2) 以便檢索子節點。

本教程中的 創建非同步樹 演示了如何編寫伺服器代碼來根據需求返回樹的數據。

屬性

名稱 類型 描述 默認值
url string 獲取遠程數據的 URL 。 null
method string 檢索數據的 http 方法（method）。 post
animate boolean 定義當節點展開折疊時是否顯示動畫效果。 false
checkbox boolean 定義是否在每個節點前邊顯示複選框。 false
cascadeCheck boolean 定義是否級聯檢查。 true
onlyLeafCheck boolean 定義是否只在葉節點前顯示複選框。 false
lines boolean 定義是否顯示樹線條。 false
dnd boolean 定義是否啟用拖放。 false
data array 要加載的節點數據。 
$('#tt').tree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});
null
formatter function(node) 定義如何呈現節點文本。
代碼實例： 
$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});
loader function(param,success,error) 定義如何從遠程伺服器加載數據。返回 false 則取消該動作。該函數有下列參數：
param：要傳遞到遠程伺服器的參數對象。
success(data)：當檢索數據成功時調用的回調函數。
error()：當檢索數據失敗時調用的回調函數。
 json loader
loadFilter function(data,parent) 返回要顯示的過濾數據。返回數據時以標準樹格式返回的。該函數有下列參數：
data：要加載的原始數據。
parent：DOM 對象，表示父節點。

事件

很多事件的回調函數需要 'node' 參數，它包括下列屬性：

  • id：綁定到節點的標識值。
  • text：要顯示的文本。
  • iconCls：用來顯示圖示的 css class。
  • checked：節點是否被選中。
  • state：節點狀態，'open' 或 'closed'。
  • attributes：綁定到節點的自定義屬性。
  • target：目標的 DOM 對象。
名稱 參數 描述
onClick node 當用戶點擊一個節點時觸發。代碼實例： 
$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});
onDblClick node 當用戶雙擊一個節點時觸發。
onBeforeLoad node, param 當加載數據的請求發出前觸發，返回 false 則取消加載動作。
onLoadSuccess node, data 當數據加載成功時觸發。
onLoadError arguments 當數據加載失敗時觸發，arguments 參數與 jQuery.ajax 的 'error' 函數一樣。
onBeforeExpand node 節點展開前觸發，返回 false 則取消展開動作。
onExpand node 當節點展開時觸發。
onBeforeCollapse node 節點折疊前觸發，返回 false 則取消折疊動作。
onCollapse node 當節點折疊時觸發。
onBeforeCheck node, checked 當用戶點擊複選框前觸發，返回 false 則取消該選中動作。該事件自版本 1.3.1 起可用。
onCheck node, checked 當用戶點擊複選框時觸發。
onBeforeSelect node 節點被選中前觸發，返回 false 則取消選擇動作。
onSelect node 當節點被選中時觸發。
onContextMenu e, node 當右鍵點擊節點時觸發。代碼實例： 
// right click node and then display the context menu
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // select the node
        $('#tt').tree('select', node.target);
        // display context menu
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
onBeforeDrag node 當節點的拖拽開始時觸發，返回 false 則禁止拖拽。該事件自版本 1.3.2 起可用。
onStartDrag node 當開始拖拽節點時觸發。該事件自版本 1.3.2 起可用。
onStopDrag node 當停止拖拽節點時觸發。該事件自版本 1.3.2 起可用。
onDragEnter target, source 當節點被拖拽進入某個允許放置的目標節點時觸發，返回 false 則禁止放置。
target：被放置的目標節點元素。
source：被拖拽的源節點。
該事件自版本 1.3.2 起可用。
onDragOver target, source 當節點被拖拽到允許放置的目標節點上時觸發，返回 false 則禁止放置。
target：被放置的目標節點元素。
source：被拖拽的源節點。
該事件自版本 1.3.2 起可用。
onDragLeave target, source 當節點被拖拽離開允許放置的目標節點時觸發。
target：被放置的目標節點元素。
source：被拖拽的源節點。
該事件自版本 1.3.2 起可用。
onBeforeDrop target,source,point 節點被放置之前觸發，返回 false 則禁止放置。
target：DOM 對象，放置的目標節點。
source：源節點。
point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
該事件自版本 1.3.2 起可用。
onDrop target,source,point 當節點被放置時觸發。 target：DOM 對象，放置的目標節點。
source：源節點。
point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
onBeforeEdit node 編輯節點前觸發。
onAfterEdit node 編輯節點後觸發。
onCancelEdit node 當取消編輯動作時觸發。

方法

名稱 參數 描述
options none 返回樹的選項（options）。
loadData data 加載樹的數據。
getNode target 獲取指定的節點對象。
getData target 獲取指定的節點數據，包括它的子節點。
reload target 重新加載樹的數據。
getRoot none 獲取根節點，返回節點對象。
getRoots none 獲取根節點，返回節點數組。
getParent target 獲取父節點，target 參數表示節點的 DOM 對象。
getChildren target 獲取子節點， target 參數表示節點的 DOM 對象。
getChecked state 獲取選中的節點。狀態可用值有：'checked'、'unchecked'、'indeterminate'。如果狀態未分配，則返回 'checked' 節點。
代碼實例： 
var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');    // get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');    // get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);    // get checked and indeterminate nodes
getSelected none 獲取選中的節點並返回它，如果沒有選中節點，則返回 null。
isLeaf target 把指定的節點定義成葉節點，target 參數表示節點的 DOM 對象。
find id 找到指定的節點並返回該節點對象。代碼實例： 
// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
select target 選中一個節點，target 參數表示節點的 DOM 對象。
check target 把指定節點設置為勾選。
uncheck target 把指定節點設置為未勾選。
collapse target 折疊一個節點，target 參數表示節點的 DOM 對象。
expand target 展開一個節點，target 參數表示節點的 DOM 對象。當節點關閉且沒有子節點時，節點的 id 值（名為 'id' 參數）將被發送至伺服器以請求子節點數據。
collapseAll target 折疊所有的節點。
expandAll target 展開所有的節點。
expandTo target 從根部展開一個指定的節點。
scrollTo target 滾動到指定節點。該方法自版本 1.3.4 起可用。
append param 追加一些子節點到一個父節點，param 參數有兩個屬性：
parent：DOM 對象，要追加到的父節點，如果沒有分配，則追加為根節點。
data：數組，節點的數據。

代碼實例： 
// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});
toggle target 切換節點的展開/折疊狀態，target 參數表示節點的 DOM 對象。
insert param 在指定節點的前邊或後邊插入一個節點，param 參數包括下列屬性：
before：DOM 對象，前邊插入的節點。
after：DOM 對象，後邊插入的節點。
data：對象，節點數據。

下麵的代碼演示了如何在選中節點之前插入一個新的節點： 
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}
remove target 移除一個節點和它的子節點，target 參數表示節點的 DOM 對象。
pop target 彈出一個節點和它的子節點，該方法和 remove 一樣，但是返回了移除的節點數據。
update param 更新指定的節點，'param' 參數有下列屬性：
target（DOM 對象，要被更新的節點）、id、text、iconCls、checked，等等。

代碼實例： 
// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}
enableDnd none 啟用拖放功能。
disableDnd none 禁用拖放功能。
beginEdit target 開始編輯節點。
endEdit target 結束編輯節點。
cancelEdit target 取消編輯節點。
jQuery EasyUI 插件 jQuery EasyUI 插件