今天我們所講的就是jquery-easy-ui,這是一個(gè)功能比較豐富的插件,,提供了許多通用布局,、顯示組件。如表單驗(yàn)證,、tab導(dǎo)航,、拖放效果、表格排序,、DataGrid,,樹形菜單、圖像特效等,。此插件的目標(biāo)就是Easy to build the ui of your web site by it! 我們通常有一些數(shù)據(jù)需要用戶進(jìn)行選擇,,比如部門或類別之類的,一般情況下我們提供了一個(gè)select元素即可,。如下:
這樣當(dāng)然可以,,但如果這些數(shù)據(jù)具有層次結(jié)構(gòu)特征,比如類別之間的關(guān)系,,組織機(jī)構(gòu)之間的關(guān)系,,我們更希望能在選擇時(shí)清楚我們選擇的數(shù)據(jù)在層次結(jié)構(gòu)上的信息。這時(shí)我們首先肯定是樹狀組件,,但如果能在下拉選擇框中嵌入樹狀組件,,用來(lái)代替相應(yīng)的選項(xiàng),,這是一個(gè)很好的結(jié)果。 Jquery-easy-ui提供了這樣的組件,,稱為comboxtree 效果如下:
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> function reload(){ $('#cc').combotree('reload'); } function setValue(){ $('#cc').combotree('setValue',{ id:2, text:'' }); } function getValue(){ var val = $('#cc').combotree('getValue'); alert(val); } </script> </head> <body> <h1>ComboTree</h1> <div style="margin-bottom:10px;"> <a href="#" onclick="reload()">reload</a> <a href="#" onclick="setValue()">setValue</a> <a href="#" onclick="getValue()">getValue</a> </div> <span>Select:</span> <select id="cc" class="easyui-combotree" url="depart.json" style="width:200px;">
</select>
很簡(jiǎn)單,,組件的數(shù)據(jù)來(lái)源于一個(gè)depart.json文件,當(dāng)然也可以來(lái)源于服務(wù)器,,你可以用服務(wù)器組件(jsp,servlet之類)的返回一個(gè)相關(guān)的文件,。我們來(lái)看一個(gè)其結(jié)構(gòu)信息: [{ "id" : 1, "text" : "健坤集團(tuán)", "children" : [{ "id" : 2, "text" : "清華IT", "children" : [] }, { "id" : 3, "text" : "北大bird", "children" : [] }, { "id" : 4, "text" : "后勤部", "children" : [] }, { "id" : 5, "text" : "科技公司", "children" : [{ "id" : 6, "text" : "軟件實(shí)訓(xùn)部", "children" : [] }] }] }] 所有,我們只要把數(shù)據(jù)從數(shù)據(jù)庫(kù)或其它數(shù)據(jù)來(lái)源中取出來(lái),,遞歸生成對(duì)應(yīng)格式的文件即可,。 以下是簡(jiǎn)單的示例: package org.entites;
import java.util.ArrayList; import java.util.List;
public class NodeBean {
static List<NodeBean> list = new ArrayList<NodeBean>();
static{ //模擬從數(shù)據(jù)源中取出記錄封裝于java對(duì)象中 NodeBean node = new NodeBean(1,"健坤集團(tuán)",0); NodeBean node2 = new NodeBean(2,"清華IT",1); NodeBean node3 = new NodeBean(3,"北大bird",1); NodeBean node4 = new NodeBean(4,"后勤部",1); NodeBean node5 = new NodeBean(5,"科技公司",1); NodeBean node6 = new NodeBean(6,"軟件實(shí)訓(xùn)部",5); list.add(node); list.add(node2); list.add(node3); list.add(node4); list.add(node5); list.add(node6);
} /** * [ * { * id:1, * text:'健坤', * children:[ * {....} * ] * } * ] * @return */ static String getJsonData(){
StringBuffer buffer = new StringBuffer(); buffer.append("["); iterGet(list, 0, buffer); buffer.append("]"); //將,\n]替換成\n] String tmp = buffer.toString(); tmp = tmp.replaceAll(",\n]", "\n]"); return tmp; } static int count=0; /** * 遞歸生成json格式的數(shù)據(jù){id:1,text:'',children:[]} * @param args */ static void iterGet(List<NodeBean> list,int pid,StringBuffer buffer){
for(NodeBean node : list){ //查找所有父節(jié)點(diǎn)為pid的所有對(duì)象,,然后拼接為json格式的數(shù)據(jù) if(node.getPid()==pid) { count++; // for(int i=0;i<count;i++){ // buffer.append("\t"); // } buffer.append("{\"id\":"+node.getId()+",\"text\":\""+node.getText()+"\",\"children\":["); //遞歸 iterGet(list, node.getId(), buffer); buffer.append("]},\n"); count--; }
}
}
/** * 測(cè)試 * @param args */ public static void main(String[] args) {
System.out.println(getJsonData());
}
private int id;//節(jié)點(diǎn)編號(hào) private String text;//節(jié)點(diǎn)名 private int pid;//父節(jié)點(diǎn)編號(hào) public int getId() { return id; } public void setId(int id) { this.id = id; } public NodeBean() { super(); } public NodeBean(int id, String text, int pid) { super(); this.id = id; this.text = text; this.pid = pid; } public String getText() { return text; } public void setText(String text) { this.text = text; } public int getPid() { return pid; } public void setPid(int pid) { this.pid = pid; }
} 很簡(jiǎn)單吧,!其中的一些細(xì)節(jié),比如節(jié)點(diǎn)的圖標(biāo)顯示,,你可以生成對(duì)應(yīng)字符串根據(jù)數(shù)據(jù)形態(tài)去確即可,。感謝開源,謝謝指教,如需進(jìn)一步交流,,請(qǐng)留言!!!
|
|