
平臺(tái) 論壇博客文庫

› 論壇 › 程序設(shè)計(jì) › Web開發(fā) › 帶搜索功能的下拉樹的實(shí)現(xiàn)

帶搜索功能的下拉樹的實(shí)現(xiàn) [復(fù)制鏈接]

三里屯搖滾

家境小康

論壇徽章:: 0

電梯直達(dá)

1樓 [收藏(0)] [報(bào)告]

發(fā)表于 2011-10-31 17:39 |只看該作者 |倒序?yàn)g覽

帶搜索功能的下拉樹的實(shí)現(xiàn)

要做個(gè)下拉框帶樹結(jié)構(gòu)的控件。

找了幾個(gè)組件拼湊了個(gè)出來了。

Js代碼

1.<?xml version="1.0" encoding="utf-8"?>
2.<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. xmlns:mx="library://ns.adobe.com/flex/mx"
5. creationComplete="init()"
6. width="400" height="300"
7. showStatusBar="false">
8. <fx:Script>
9. <![CDATA[
10. import flashx.textLayout.operations.CutOperation;
11. import flashx.textLayout.operations.DeleteTextOperation;
12. import flashx.textLayout.operations.FlowOperation;
13.
14. import mx.collections.ArrayCollection;
15. import mx.collections.ArrayList;
16. import mx.collections.IList;
17. import mx.collections.XMLListCollection;
18. import mx.events.ListEvent;
19. import mx.utils.StringUtil;
20.
21. import spark.events.TextOperationEvent;
22.
23. [Bindable]
24. private var xm:XML =
25. <root>
26. <league label="全公司" data="1234" isdep="true">
27. <division label="開發(fā)" data="2234" isdep="true">
28. <team label="應(yīng)用" data="2234" isdep="true"/>
29. <team label="系統(tǒng)" data="1" isdep="true"/>
30. <team label="測試" data="234" isdep="true">
31. <team label="研發(fā)嗎" data="34" isdep="false"/>
32. <team label="研發(fā)里面" data="56" isdep="false"/>
33. <team label="研發(fā)里" data="153" isdep="false"/>
34. </team>
35. <team label="支撐" data="214" isdep="true"/>
36. </division>
37. <division label="銷售">
38. <team label="浙江" data="89" isdep="true"/>
39. <team label="cfdw" data="76" isdep="true"/>
40. <team label="江蘇" data="1255" isdep="true"/>
41. <team label="上海" data="164" isdep="true">
42. <team label="上海1" data="34" isdep="false"/>
43. <team label="上海12" data="56" isdep="false"/>
44. <team label="上海2" data="153" isdep="false"/>
45. </team>
46. <team label="Kansas" data="17834" isdep="false"/>
47. </division>
48. <division label="財(cái)務(wù)" data="1y4" isdep="true">
49. <team label="tobg" data="1gf4" isdep="false"/>
50. <team label="tyue" data="5" isdep="false"/>
51. <team label="Toronto" data="134" isdep="false"/>
52. <team label="tyar" data="4" isdep="false"/>
53. <team label="Tampa Bay" data="ui" isdep="false"/>
54. </division>
55. <division label="產(chǎn)品" data="734" isdep="true"/>
56. <division label="cds" data="120" isdep="false"/>
57. </league>
58. </root>
59. ;
60.
61.
62. [Bindable]
63. public var selectedNode:XML;
64.
65. [Bindable]
66. private var a:XMLList = new XMLList();
67.
68. [Bindable]
69. private var b:XMLListCollection = new XMLListCollection();
70.
71. [Bindable]
72. private var c:ArrayCollection = new ArrayCollection();
73.
74. [Bindable]
75. private var bp:ArrayCollection = new ArrayCollection();
76.
77. private function init():void
78. {
79. a = xm.league;
80. b = new XMLListCollection(a);
81. c = new ArrayCollection(b.toArray());
82.
83. this.addEventListener(MouseEvent.MOUSE_DOWN, focusOut);
84. }
85.
86. private function focusOut(event:MouseEvent):void
87. {
88. if(event.currentTarget.id != 'treelist' && event.currentTarget.id != 'relist')
89. {
90. result.displayPopUp = false;
91. frmPUA.displayPopUp = false;
92. }
93. }
94.
95. protected function openBtn_clickHandler(event:MouseEvent):void
96. {
97.// if(result.displayPopUp || frmPUA.displayPopUp)
98.// {
99.// result.displayPopUp = false;
100.// frmPUA.displayPopUp = false;
101.// }else
102.// {
103. frmPUA.displayPopUp = true;
104.// }
105. }
106.
107. protected function textin_changeHandler(event:TextOperationEvent):void
108. {
109. var operation:FlowOperation = event.operation;
110.
111. if (operation is DeleteTextOperation || operation is CutOperation)
112. {
113. result.displayPopUp = false;
114. }
115. else
116. {
117. if (result.displayPopUp = false)
118. {
119. result.displayPopUp = true;
120. return;
121. }
122.
123. var keyWord:String = StringUtil.trim(textin.text);
124. if(keyWord!='')
125. {
126. searchKeyWord(keyWord);
127. }
128. else
129. {
130. result.displayPopUp =false;
131. }
132. }
133. }
134.
135. private function searchKeyWord(keyWord:String):void
136. {
137. bp.removeAll();
138. bp = filterData(c,keyWord);
139.// var typedLength:int = textin.text.length;
140.// var ob:XML = new XML();
141. if(bp.length > 0)
142. {
143.// 搜索時(shí)可以讓輸入框內(nèi)文字變化，見spark的combobox組件源碼
144.// ob = bp[0] as XML;
145.// var itemString:String = ob.@label;
146.// textin.selectAll();
147.// textin.insertText(itemString);
148.// textin.selectRange(typedLength, itemString.length);
149.
150. frmPUA.displayPopUp = false;
151. result.displayPopUp = true;
152.
153. textin.addEventListener(KeyboardEvent.KEY_UP, changeFocous);
154. }
155. else
156. {
157. frmPUA.displayPopUp = false;
158. result.displayPopUp = false;
159. if(selectedNode)
160. {
161. textin.text = selectedNode.@label;
162. }
163. else
164. {
165. textin.text = '';
166. }
167. }
168. }
169.
170. private function changeFocous(event:KeyboardEvent):void
171. {
172. if(event.keyCode == 40 || event.keyCode == 13)
173. {
174. relist.setFocus();
175. relist.selectedIndex = 0;
176. }
177. }
178.
179. private function filterData(ac:ArrayCollection, keyword:String):ArrayCollection
180. {
181. var xm:XML = ac[0] as XML;
182. find(xm, keyword);
183. return bp;
184. }
185.
186. // 遞歸遍歷xml
187. private function find( node:XML, keyword:String ):void
188. {
189. for each ( var element:XML in node.elements( ) )
190. {
191. var str:String = element.@label;
192.
193. //區(qū)分大小寫時(shí) str.indexOf(keyword)
194. //不區(qū)分大小寫 str.search(new RegExp(keyword,"gi")
195. if(str.search(new RegExp(keyword,"gi")) != -1 )
196. {
197.// 可以根據(jù)在xml標(biāo)簽里定義哪些可以被搜索
198.// if(element.@isdep == 'false')
199.// {
200. var item:Object = element as Object;
201.
202. if(str == keyword)//出現(xiàn)完全匹配但不在隊(duì)列前端的將其加到列表最前端
203. {
204. bp.addItemAt(item,0);
205. }else
206. {
207. bp.addItem(item);
208. }
209.// }
210. }
211.
212. find( element,keyword );
213. }
214. }
215.
216. private function listchange(e:ListEvent):void
217. {
218. selectedNode = Tree(e.target).selectedItem as XML;
219. textin.text = selectedNode.@label;
220. frmPUA.displayPopUp = false;
221. }
222.
223.
224. protected function relist_clickHandler(event:MouseEvent):void
225. {
226. selectedNode = relist.selectedItem as XML;
227. textin.text = selectedNode.@label;
228. result.displayPopUp = false;
229. }
230.
231. protected function relist_keyUpHandler(event:KeyboardEvent):void
232. {
233. if(event.keyCode == 13)
234. {
235. selectedNode = relist.selectedItem as XML;
236. textin.text = selectedNode.@label;
237. result.displayPopUp = false;
238. }
239. }
240.
241. ]]>
242. </fx:Script>
243.
244. <fx:Declarations>
245. <mx:Tree id="tree1" dataProvider="{c}" width="150" labelField="@label"
246. selectedIndex="0" />
247. </fx:Declarations>
248.
249.
250. <s:Panel x="10" y="10" width="90%" height="90%" title="My ComBoTree Selector Example">
251.
252. <s:Group id="vg" x="10" y="10">
253.
254. <s:TextInput x="0" y="0" width="130" height="20" id="textin" change="textin_changeHandler(event)"/>
255. <s:Button x="130" y="0" id="openBtn" width="20" height="20" label="O"
256. click="openBtn_clickHandler(event)"/>
257.
258. <s:PopUpAnchor id="frmPUA" x="0" y="20" popUpWidthMatchesAnchorWidth="true"
259. popUpPosition="topLeft" width="150" height="200">
260.
261. <mx:Tree id="treelist" dataProvider="{c}" maxHeight="200" labelField="@label"
262. selectedIndex="0" change="listchange(event)"/>
263. </s:PopUpAnchor>
264. <s:PopUpAnchor id="result" x="0" y="20" popUpWidthMatchesAnchorWidth="true"
265. popUpPosition="topLeft" width="150" height="200">
266.
267. <s:List id="relist" dataProvider="{bp}" height="100%" width="100%" maxHeight="200"
268. labelField="@label" selectedIndex="-1" keyUp="relist_keyUpHandler(event)"
269. click="relist_clickHandler(event)"/>
270. </s:PopUpAnchor>
271. </s:Group>
272.
273.
274.
275.
276.
277. </s:Panel>
278.
279.</s:WindowedApplication>

復(fù)制代碼

Air, flex, Air, flex

文庫|博客

楊亮-移動(dòng)廣告投放-潛在用戶探尋_部分1.pdf
C# 合并拆分Word.docx
C# 添加PDF圖層.docx
凌感科技馬賡宇——虛擬現(xiàn)實(shí)與人機(jī)交互技術(shù).pdf
C# 添加、刪除 Excel 文本框.docx
使用正則表達(dá)式與lex實(shí)現(xiàn)詞法分析器
C語言的MIPS匯編實(shí)現(xiàn)（四）SWITCH
Requested init /linuxrc failed (error -2).
比較 csv 文件中數(shù)據(jù)差異
LMD ElPack v2019.7新版亮點(diǎn)：Transparent mode全新升級(jí)|附下載

返回列表

Chinaunix › 論壇 › 程序設(shè)計(jì) › Web開發(fā) › 帶搜索功能的下拉樹的實(shí)現(xiàn)

亚洲av成人无遮挡网站在线观看,少妇性bbb搡bbb爽爽爽,亚洲av日韩精品久久久久久,兔费看少妇性l交大片免费,无码少妇一区二区三区

帶搜索功能的下拉樹的實(shí)現(xiàn) [復(fù)制鏈接]