樹型導航菜單一般項目中經常會用到，之前寫過一個，現在抽空改了一下。
下面是使用文檔
類名：Tree
方法：
|
名稱 |
返回值 |
描述 |
|
Tree(datasource:array) |
Void |
構造函數， 以數據填充 |
|
Render(placeholder: string) |
Void |
渲染樹 |
|
reRender() |
Void |
重新渲染 |
|
getDataSource() |
Array |
獲得樹的數據 |
|
setEditable(value:boolean) |
Void |
設置是否可編輯 |
|
setDragable(value:boolean) |
Void |
設置是否可拖動 |
事件：
|
名稱 |
參數 |
描述 |
|
onAddNode |
eventArg:object，successCallback:function |
增加一個節點時觸發 |
|
onEditNode |
eventArg:object，successCallback:function |
編輯一個節點時觸發 |
|
onRemoveNode |
eventArg:object，successCallback:function |
移除一個節點時觸發 |
|
onNodeClick |
eventArg:object |
點擊節點時觸發 |
|
onDrag |
eventArg:array |
拖動時觸發 |
以下是代碼示例：
JScript code
var dataSource = [{"name":"女裝","pid":"-1","id":"21", sort: 1}, {"name":"連衣裙","pid":"21","id":"2213", sort: 2, isOpen: true}, {"name":"雪紡裙","pid":"2213","id":"2237", sort: 3}, {"name":"T恤","pid":"21","id":"2238", sort: 4}, {"name":"蕾絲衫/雪紡衫","pid":"2238","id":"2239", sort: 5}, {"name":"休閒褲","pid":"2240","id":"2240", sort: 6}, {"name":"半身裙","pid":"2238","id":"2241", sort: 7}, {"name":"牛仔褲","pid":"2241","id":"2242", sort: 8}, {"name":"短外套","pid":"21","id":"2243", sort: 9}, {"name":"小背心/小吊帶","pid":"2243","id":"2244", sort: 10}, {"name":"打底褲","pid":"21","id":"2245", sort: 11}, {"name":"襯衫","pid":"21","id":"2246", sort: 12}, {"name":"男裝","pid":"0","id":"2249", sort: 13}, {"name":"T恤","pid":"2249","id":"2250", sort: 14}, {"name":"襯衫","pid":"2249","id":"2251", sort: 15}, {"name":"休閒褲","pid":"2249","id":"2252", sort: 16}, {"name":"牛仔褲","pid":"2249","id":"2253", sort: 17}, {"name":"polo衫","pid":"2249","id":"2254", sort: 18}, {"name":"馬甲/背心","pid":"2249","id":"2255", sort: 19}, {"name":"短褲","pid":"2249","id":"2256", sort: 20}, {"name":"短裙","pid":"2213","id":"2300", sort: 21}, {"name":"老年服","pid":"0","id":"2301", sort: 22}, {"name":"短袖","pid":"2301","id":"2302", sort: 23}]; var tree = new Tree( dataSource ); //設置爲可編輯 tree.setEditable( true ); //設置爲可拖動 tree.setDragable( true ); //添加結點事件處理程序 tree.addListener( 'onAddNode', function( eventType, eventArg, successCallback ) { console.log( eventArg ); var ajaxOption = new Object; ajaxOption.url = ''; ajaxOption.type = 'GET'; ajaxOption.data = { id: eventArg.id, newName: eventArg.newName }; ajaxOption.success = function( response ) { successCallback( {"name": eventArg.newName,"pid":eventArg.id ,"id": new Date().getTime(), sort: 0} ) } $.ajax( ajaxOption ); } ); //編輯結點事件處理程序 tree.addListener( 'onEditNode', function( eventType, eventArg, successCallback ) { console.log( eventArg ); var ajaxOption = new Object; ajaxOption.url = ''; ajaxOption.type = 'GET'; ajaxOption.data = { id: eventArg.id, newName: eventArg.newName }; ajaxOption.success = function( response ) { successCallback(); } $.ajax( ajaxOption ); } ); //移除結點事件處理程序 tree.addListener( 'onRemoveNode', function( eventType, eventArg, successCallback ) { console.log( eventArg ); var ajaxOption = new Object; ajaxOption.url = ''; ajaxOption.type = 'POST'; ajaxOption.data = { id: eventArg.id }; ajaxOption.success = function( response ) { successCallback(); } $.ajax( ajaxOption ); } ); //點擊結點事件處理程序 tree.addListener( 'onNodeClick', function( eventType, eventArg ) { alert( '點擊了id爲' + eventArg.id + '節點' ); } ); //拖動節點事件處理程序 tree.addListener( 'onDrag', function( eventType, eventArg ) { alert( '當前數據爲：' + JSON.stringify( eventArg ) ); } ); tree.render( 'placeholder' );