很多時候都會用到下拉框,有時候為了顯示更好的效果,會用到樹型下拉框,實際就是下拉框中帶了一個樹型的控制元件,所以它自然繼承自tree和combobox.

一: 前臺:

1. 首先從前臺來講, 先把html元素寫好

<select id="cc" value="01" style="width:200px;" ></select>
<a href="#" id="btn" class="easyui-linkbutton" onclick="getValue()">getValue</a>

這裡用js載入方式:

$('#cc').combotree({
    url:'tree_data.json',
});
 

這裡的url是跟html統一資料夾下的一個json格式檔案.是一個模擬的json資料.大致結構如下:

<p>[{</p><p>	id: 1,</p><p>	text: 'Languages',</p><p>	children: [{</p><p>		id: 11,</p><p>		text: 'Java'</p><p>	},{</p><p>		id: 12,</p><p>		text: 'C++'</p><p>	}]</p><p>}] </p>
 

一個簡單基礎的下拉樹就形成了:

在下拉樹旁邊寫了一個按鈕, 這個按鈕有一個普通的onclick事件,就是獲取下拉樹的選擇的值.程式碼如下:

function getValue(){
	var value = $('#cc').combotree('getValue');
	alert(value);
}

還有下拉樹實現多選: 實際就是加了個multiple屬性,程式碼如下

$('#ccm').combotree({
	url:'tree_data.json',
	multiple: true,
	//cascadeCheck: false
	//onlyLeafCheck: true
});

如果要獲取它選擇的值只需要把前面呢個

var value = $('#ccm').combotree('getValues'); //會返回id值的陣列,逗號連線

這種方式getValues預設是級聯的,也就是選擇子節點,他的父節點也可能get上,所以有一個屬性cascadeCheck.

cascadeCheck是定義是否層疊選中狀態,也就是前面的小方框會不會自動級聯,如圖變成false就是不級聯,但是這樣很怪.

onlyLeafCheck是定義是否只在末級節點之前顯示覆選框,也就是隻有子節點才會有複選框,也就是隻能選擇葉子節點,沒什麼級聯了.

二:資料

假如下拉樹是要選擇班級下的學生資訊, 那麼隨便造個數據.

三:後臺

既然前臺的url接收是一個json格式的東西.可以看到這裡面有三個關鍵屬性, id, text, children.三者缺一不可.

那資料中的兩個表在程式中的persistence層對應著兩個實體. Entity Class和Entity Student.

除此之外,還需要一個Model.

public class ComboTreeModel {
	private String id;
	private String text;
	private List<ComboTreeModel> children;
	
//setter and getter
}

而最後傳給url的,應該是json格式的:

下面就是通過業務關聯, 將兩個實體組合,查出需要資料,放到Model模型.

@RequestMapping(value="/getSelectData")
@ResponseBody
public List<ComboTreeModel> getTreeData(HttpServletRequest request, HttpServletResponse response,ComboTreeModel treeModel){
	List classList = this.studentService.queryClassList();
	//[{eventid:"c001",classname:'奧賽班',eventid:"c002",classname:'直播班',eventid:"c003",classname:'火箭班'}]
	List<ComboTreeModel> list = new ArrayList<ComboTreeModel>();
	for(int i=0; i<classList.size(); i++){
		ComboTreeModel model = new ComboTreeModel();
		Map classMap = (Map) classList.get(i);
		//{eventid:"c001",classname:'奧賽班'}
		String classId = (String) classMap.get("eventid");
		String className = (String)classMap.get("classname");
		model.setId(classId); 
		model.setText(className);
		List studentList = this.studentService.queryByClassId(classId);
		
		if(studentList.size() > 0){
			List<ComboTreeModel> childrenList = new ArrayList<ComboTreeModel>();
			for(int j = 0;j<studentList.size();j++){
				ComboTreeModel model2 = new ComboTreeModel();
				Map studentMap = (Map)studentList.get(j);
				String studentEventId = (String) studentMap.get("eventid");
				String studentName = (String) studentMap.get("studentname");
				model2.setId(studentEventId);
				model2.setText(studentName);
				childrenList.add(model2);
			}
			model.setChildren(childrenList);
		}
		list.add(model); 
	}
	return list;
}