easyui tree的簡單使用

Tree 數據轉換

所有節點都包含以下屬性:

• id:節點id,這個很重要到加載遠程服務器數據 which is important to load remote data
• 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#"
    }]
}]

 

異步加載樹

tree 支持內置的異步加載模式,用戶創建一個空的tree,然后定義一個遠程服務器站點返回json數據用於填充tree來異步滿足異步加載需求.例如:

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

tree的加載是通過URL  'get_data.php'站點.子節點的加載依賴於父節點的狀態.當展開一個關閉節點,如果節點沒有子節點加載,將發送節點id值作為http參數,參數命名為'id'到遠程服務器,通過以上URL定義.檢索子節點數據
看看這個從服務器返回的數據

 

 

[{
    "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都是closed狀態的,可以直接顯示它們的子節點,當展開節點2時,發送值2到遠程服務器檢索子節點
這個教程創建異步的樹click me!!!,展示如何寫服務器端代碼根據需求返回tree數據.

一、方法 

 

Name	Type	Description	Default
url	string	一個從遠程服務器檢索數據的URL.	null
method	string	檢索數據的http方法類型.	post
animate	boolean	定義當展開/折疊節點的時候是否顯示效果.	false
checkbox	boolean	定義是否顯示checkbox在所有節點之前.	false
cascadeCheck	boolean	定義是否級聯選擇.	true
onlyLeafCheck	boolean	定義是否僅僅只是在葉子節點顯示checkbox.	false
lines	boolean	定義是否顯示樹線.	false
dnd	boolean	定義是否啟用drag and drop.	false
data	array	這個節點數據將被加載. $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] });	null
loader	function(param,success,error)	定義如何從遠程服務器加載數據.返回false將終止這個動作.這個函數提供以下參數: param: 這個參數對象將傳送給遠程服務器. success(data): 當檢索數據成功之后的回調函數. error(): 當檢索數據出現異常的時候調用的回調函數.	json loader
loadFilter	function(data,parent)	返回顯示過濾后的數據. 返回的數據是標准的tree格式.這個函數提供以下參數: data:裝載的是原始數據. parent: DOM 對象, 指定父節點.

 

二、事件

許多回調函數提供'node'參數, 都包含以下屬性:

• id: 綁定到節點的標識值.
• text:顯示文本.
• iconCls: 顯示icon的css樣式.
• checked: 節點是否選中.
• state: 節點狀態, 'open' 或者 'closed'.
• attributes: 綁定到節點的自定義屬性.
• target: 目標 DOM 對象.

Name	Parameters	Description
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參數和ajax jQuery 的'error'一樣 .
onBeforeExpand	node	節點展開之前觸發,返回false取消展開動作.
onExpand	node	當節點展開之后觸發.
onBeforeCollapse	node	節點折疊之前觸發,返回false將取消折疊動作.
onCollapse	node	當節點折疊之后觸發.
onCheck	node, checked	當用戶點擊checkbox的時候觸發.
onBeforeSelect	node	節點被選中之前觸發,返回false取消選擇動作.
onSelect	node	當節點選中之后觸發.
onContextMenu	e, node	當在節點上右鍵點擊的時候觸發,代碼示例: // 右鍵點擊節點然后顯示上下文菜單 $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // 選擇節點 $('#tt').tree('select', node.target); // 顯示上下文菜單 $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); //上下文菜單定義如下: <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>
onDrop	target, source, point	當節點被放置的時候觸發. target: DOM 對象,這個節點是被放置的目標. source: 源節點. point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEdit	node	在編輯節點之前觸發.
onAfterEdit	node	編輯節點之后觸發.
onCancelEdit	node	取消編輯動作時候觸發.

三、方法

Name	Parameter	Description
options	none	返回tree 的options.
loadData	data	加載tree數據.
getNode	target	得到特定的節點對象.
getData	target	得到特定節點數據, 包含其子節點.
reload	target	重新加載tree數據.
getRoot	none	得到根節點, 返回節點對象
getRoots	none	得到根節點, 返回節點數組.
getParent	target	得到父節點,target參數指明節點DOM對象.
getChildren	target	得到子節點,target 參數指明節點DOM對象.
getChecked	none	得到所有選中節點.
getSelected	none	得到選擇節點和返回它,如果沒有選擇節點將返回null.
isLeaf	target	解決特定的節點是否是葉子節點, target 參數指明節點DOM對象.
find	id	查找特定的節點和返回節點對象,代碼示例: // 查找一個節點然后返回它 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對象,當節點的狀態是closed的時候 和沒有子節點,節點id值(參數命名為'id')將發送給服務器請求子節點數據.
collapseAll	target	折疊所有節點.
expandAll	target	展開所有節點.
expandTo	target	展開從根節點到指定的節點 .
append	param	附加一些子節點到父節點中. param參數有兩個屬性: parent: DOM 對象,被添加到的父節點,如果沒有分配,附加到根節點. data: array, the nodes data. Code example: // 添加一些節點到選擇的節點 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	切換expanded/collapsed 節點的狀態,target 參數指明節點DOM對象.
insert	param	插入一個節點到特定節點的之前或之后.'param'參數包含以下屬性: before: DOM 對象,節點插入到之前. after: DOM 對象, 節點插入到之后. data: object, 節點數據. 以下代碼展示,如何插入新節點到選擇節點之前: 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,等等. 示例代碼: // 更新選擇的節點文本 var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }
enableDnd	none	啟用 drag 和 drop 功能.
disableDnd	none	禁用 drag 和drop 功能.
beginEdit	target	開始編輯一個節點.
endEdit	target	結束編輯一個節點.
cancelEdit	target	取消編輯一個節點.

 

原址: http://www.cnblogs.com/easypass/archive/2012/12/27/2835219.html