百分之百原创设计的前端用户界面组件之选择框组件，实现单选，多选，树形多层级选择，重复有序选择，不重复选择，父节点是否能选等交互的组件。
组件生命周期调用$("#XXX").select()创建UI界面,返回Select对象调用select.setDataSource()传入JSON数据，对组件进行重新渲染，清除已选择区域已选中词条，绑定选项触发事件鼠标单击已选择区域，展开下拉面板，显示备选项树形UI界面。在下拉面板中的搜索栏输入筛选条件，触发过滤事件，只展示符合条件的备选项。单击备选项进行备选项选中，并在已选择区域渲染显示已选中词条。单击右侧树形展开按钮，显示当前节点下级备选项列表。单击页面中非当前组件的空白区，隐藏下拉面板。单击已选择区域右侧的刷新按钮，调用数据源函数，执行第2步过程。特性Select组件为Skeleton4j项目定制的前端组件，支持各种特殊功能。
级联支持级联情况下，数据源由静态数据源，模式为本地模式，以JSON对象或者JSON字符串通过setDataSource(json)设置。
数据源支持组件可运行在本地模式和远程模式下，本地模式用用于静态数据源的设置，远程模式用于搜索方式的交互数据模式。UI界面中的搜索框支持本地数据过滤和远程数据搜索功能，根据模式的不同展示不同，本地模式展示为过滤图标；远程模式展示为搜索图标。
表单支持组件可工作在传统的表单模式,以下代码构建一个表单，拥有两个选择框组件。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表单提交</title><linkhref="../select.css"rel="stylesheet"/></head><body><formaction="test.do"><!--表单包裹层--><divstyle="width:360px;margin:10px;"><divclass="select-ui"id="xxx"></div></div><!--表单包裹层--><divstyle="width:360px;margin:10px;"><divclass="select-ui"id="yyy"></div></div><inputtype="submit"/></form></body><script>vardata={"nodes":[{"text":"重庆市","value":"023","selected":false,"nodes":null},{"text":"北京市","value":"010","selected":false,"nodes":null}]};varselect1=$("#xxx").select().setDateSource(data);varselect2=$("#yyy").select({multiple:true}).setDateSource(data);</script></html>GET模式下提交数据链接为
xxx=023&yyy=023&yyy=010组件UI界面组件参数参数名数据类型描述widthstring100px或25%multipleboolean是否多选，默认单选duplicateboolean是否可以对同一选项重复选择selectParentboolean是否可以选择非叶子节点的父节点作为选项placeholderstring占位提示信息allowClearboolean是否显示刷新按钮closeOnSelectboolean是否选中后关闭选择框，默认truedisabledboolean是否失效readonlyboolean是否只读组件API方法描述 select用于创建一个Select组件，可选传入回调函数 setDataSource以JSON形式设置数据源，用于第一次初始化时 getDataSource获取当前展示选项对应的数据源JSON setSelectedValue设置获取选中的选项对应的代码值，展示结果为设置的代码值数组 getSelectedValue获取选中的选项对应的代码值 getSelectedText获取选中的选项对应的文本数组 getOptions获取所有选项的代码值和文本数组 draw重新绘制组件UI界面 cleanOptions清空所有选项，同时清空数据源值
评论