jQuery EasyUI是一組基於jQuery的UI外掛集合體,而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI介面。開發者不需要編寫複雜的javascript,也不需要對css樣式有深入的瞭解,開發者需要了解的只有一些簡單的html標籤。
本經驗是 【jQuery EasyUI從入門到精通】系列教程的第27部分,在第26部分的基礎上繼續講述 jQuery EasyUI Web Demos之Tree(樹)。
工具/原料
膝上型電腦或桌上型電腦
網際網路
jQuery EasyUI
Tree(樹)
方法/步驟
Tree Lines(樹線),This sample shows how to show tree lines(這個例子展示如何顯示樹線).
Tree Lines
This sample shows how to show tree lines.
Tree Lines(樹線)執行效果如下圖所示。
Tree Node Icons(樹節點的圖示),This sample illustrates how to add icons to tree node(這個示例演示瞭如何將圖示新增到樹節點).
Tree Node Icons
This sample illustrates how to add icons to tree node.
Tree Node Icons(樹節點的圖示),執行效果如下圖所示:
Tree Actions(樹的操作),Click the buttons below to perform actions(單擊下面的按鈕來執行操作).
Tree Actions
Click the buttons below to perform actions.
function collapseAll(){
$('#tt').tree('collapseAll');
}
function expandAll(){
$('#tt').tree('expandAll');
}
function expandTo(){
var node = $('#tt').tree('find',113);
$('#tt').tree('expandTo', node.target).tree('select', node.target);
}
function getSelected(){
var node = $('#tt').tree('getSelected');
if (node){
var s = node.text;
if (node.attributes){
s += ","+node.attributes.p1+","+node.attributes.p2;
}
alert(s);
}
}
Tree Actions(樹的操作),執行效果如下圖所示。
注意事項
jQuery EasyUI外掛依賴於JQuery,需要在easyui.min.js之前引入JQuery庫