|
今天我们所讲的就是jquery-easy-ui，这是一个功能比较丰富的插件，提供了许多通用布局、显示组件。如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效等。此插件的目标就是Easy to build the ui of your web site by it! 我们通常有一些数据需要用户进行选择，比如部门或类别之类的，一般情况下我们提供了一个select元素即可。如下: 
这样当然可以，但如果这些数据具有层次结构特征，比如类别之间的关系，组织机构之间的关系，我们更希望能在选择时清楚我们选择的数据在层次结构上的信息。这时我们首先肯定是树状组件，但如果能在下拉选择框中嵌入树状组件，用来代替相应的选项，这是一个很好的结果。 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>
很简单，组件的数据来源于一个depart.json文件，当然也可以来源于服务器，你可以用服务器组件(jsp,servlet之类)的返回一个相关的文件。我们来看一个其结构信息： [{ "id" : 1, "text" : "健坤集团", "children" : [{ "id" : 2, "text" : "清华IT", "children" : [] }, { "id" : 3, "text" : "北大bird", "children" : [] }, { "id" : 4, "text" : "后勤部", "children" : [] }, { "id" : 5, "text" : "科技公司", "children" : [{ "id" : 6, "text" : "软件实训部", "children" : [] }] }] }] 所有，我们只要把数据从数据库或其它数据来源中取出来，递归生成对应格式的文件即可。 以下是简单的示例: package org.entites;
import java.util.ArrayList; import java.util.List;
public class NodeBean {
static List<NodeBean> list = new ArrayList<NodeBean>();
static{ //模拟从数据源中取出记录封装于java对象中 NodeBean node = new NodeBean(1,"健坤集团",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,"软件实训部",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格式的数据{id:1,text:'',children:[]} * @param args */ static void iterGet(List<NodeBean> list,int pid,StringBuffer buffer){
for(NodeBean node : list){ //查找所有父节点为pid的所有对象，然后拼接为json格式的数据 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--; }
}
}
/** * 测试 * @param args */ public static void main(String[] args) {
System.out.println(getJsonData());
}
private int id;//节点编号 private String text;//节点名 private int pid;//父节点编号 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; }
} 很简单吧！其中的一些细节，比如节点的图标显示，你可以生成对应字符串根据数据形态去确即可。感谢开源,谢谢指教，如需进一步交流，请留言!!!
|
|
|
