UI-Select

百分之百原創(chuàng)設(shè)計(jì)的前端用戶界面組件之選擇框組件，實(shí)現(xiàn)單選，多選，樹(shù)形多層級(jí)選擇，重復(fù)有序選擇，不重復(fù)選擇，父節(jié)點(diǎn)是否能選等交互的組件。

組件生命周期

調(diào)用$("#XXX").select()創(chuàng)建UI界面,返回 Select 對(duì)象
調(diào)用select.setDataSource()傳入JSON數(shù)據(jù)，對(duì)組件進(jìn)行重新渲染，清除已選擇區(qū)域已選中詞條，綁定選項(xiàng)觸發(fā)事件
鼠標(biāo)單擊已選擇區(qū)域，展開(kāi)下拉面板，顯示備選項(xiàng)樹(shù)形UI界面。
在下拉面板中的搜索欄輸入篩選條件，觸發(fā)過(guò)濾事件，只展示符合條件的備選項(xiàng)。
單擊備選項(xiàng)進(jìn)行備選項(xiàng)選中，并在已選擇區(qū)域渲染顯示已選中詞條。單擊右側(cè)樹(shù)形展開(kāi)按鈕，顯示當(dāng)前節(jié)點(diǎn)下級(jí)備選項(xiàng)列表。
單擊頁(yè)面中非當(dāng)前組件的空白區(qū)，隱藏下拉面板。
單擊已選擇區(qū)域右側(cè)的刷新按鈕，調(diào)用數(shù)據(jù)源函數(shù)，執(zhí)行第2步過(guò)程。

特性

Select組件為Skeleton4j項(xiàng)目定制的前端組件，支持各種特殊功能。

級(jí)聯(lián)支持

級(jí)聯(lián)情況下，數(shù)據(jù)源由靜態(tài)數(shù)據(jù)源，模式為本地模式，以JSON對(duì)象或者JSON字符串通過(guò)setDataSource(json)設(shè)置。

數(shù)據(jù)源支持

組件可運(yùn)行在本地模式和遠(yuǎn)程模式下，本地模式用用于靜態(tài)數(shù)據(jù)源的設(shè)置，遠(yuǎn)程模式用于搜索方式的交互數(shù)據(jù)模式。 UI界面中的搜索框支持本地?cái)?shù)據(jù)過(guò)濾和遠(yuǎn)程數(shù)據(jù)搜索功能，根據(jù)模式的不同展示不同，本地模式展示為過(guò)濾圖標(biāo)；遠(yuǎn)程模式展示為搜索圖標(biāo)。

表單支持

組件可工作在傳統(tǒng)的表單模式,以下代碼構(gòu)建一個(gè)表單，擁有兩個(gè)選擇框組件。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表單提交</title>
		<link href="../select.css" rel="stylesheet" />
	</head>

	<body>
		<form action="test.do">
			<!--表單包裹層-->
			<div style="width: 360px; margin: 10px;">
				<div class="select-ui" id="xxx"></div>
			</div>
			<!--表單包裹層-->
			<div style="width: 360px; margin: 10px;">
				<div class="select-ui" id="yyy"></div>
			</div>
			<input type="submit"/>
		</form>
	</body>
	<script>
		var data = {
			"nodes": [{
					"text": "重慶市",
					"value": "023",
					"selected": false,
					"nodes": null
				}, 
				{
					"text": "北京市",
					"value": "010",
					"selected": false,
					"nodes": null
				}]
		};
		var select1 = $("#xxx").select()
								.setDateSource(data);
								
		var select2 = $("#yyy").select({multiple:true})
								.setDateSource(data);
	</script>
</html>

GET模式下提交數(shù)據(jù)鏈接為

xxx=023&yyy=023&yyy=010

組件UI界面

組件參數(shù)

參數(shù)名	數(shù)據(jù)類型	描述
width	string	100px或25%
multiple	boolean	是否多選，默認(rèn)單選
duplicate	boolean	是否可以對(duì)同一選項(xiàng)重復(fù)選擇
selectParent	boolean	是否可以選擇非葉子節(jié)點(diǎn)的父節(jié)點(diǎn)作為選項(xiàng)
placeholder	string	占位提示信息
allowClear	boolean	是否顯示刷新按鈕
closeOnSelect	boolean	是否選中后關(guān)閉選擇框，默認(rèn)true
disabled	boolean	是否失效
readonly	boolean	是否只讀

組件API

方法	描述
select	用于創(chuàng)建一個(gè)Select組件，可選傳入回調(diào)函數(shù)
setDataSource	以JSON形式設(shè)置數(shù)據(jù)源，用于第一次初始化時(shí)
getDataSource	獲取當(dāng)前展示選項(xiàng)對(duì)應(yīng)的數(shù)據(jù)源JSON
setSelectedValue	設(shè)置獲取選中的選項(xiàng)對(duì)應(yīng)的代碼值，展示結(jié)果為設(shè)置的代碼值數(shù)組
getSelectedValue	獲取選中的選項(xiàng)對(duì)應(yīng)的代碼值
getSelectedText	獲取選中的選項(xiàng)對(duì)應(yīng)的文本數(shù)組
getOptions	獲取所有選項(xiàng)的代碼值和文本數(shù)組
draw	重新繪制組件UI界面
cleanOptions	清空所有選項(xiàng)，同時(shí)清空數(shù)據(jù)源值

UI-Select選擇框組件