选择框组件 UI-Select

Apache-2.0
跨平台
2019-09-25
Rnkrsoft
UI-Select 正在参加 2019 年度最受欢迎开源中国软件评选,请投票支持!
UI-Select 在 2019 年度最受欢迎开源中国软件评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票赢奖品
已投票

UI-Select

百分之百原创设计的前端用户界面组件之选择框组件,实现单选,多选,树形多层级选择,重复有序选择,不重复选择,父节点是否能选等交互的组件。

组件生命周期

  1. 调用$("#XXX").select()创建UI界面,返回 Select 对象
  2. 调用select.setDataSource()传入JSON数据,对组件进行重新渲染,清除已选择区域已选中词条,绑定选项触发事件
  3. 鼠标单击已选择区域,展开下拉面板,显示备选项树形UI界面。
  4. 在下拉面板中的搜索栏输入筛选条件,触发过滤事件,只展示符合条件的备选项。
  5. 单击备选项进行备选项选中,并在已选择区域渲染显示已选中词条。单击右侧树形展开按钮,显示当前节点下级备选项列表。
  6. 单击页面中非当前组件的空白区,隐藏下拉面板。
  7. 单击已选择区域右侧的刷新按钮,调用数据源函数,执行第2步过程。

特性

Select组件为Skeleton4j项目定制的前端组件,支持各种特殊功能。

级联支持

级联情况下,数据源由静态数据源,模式为本地模式,以JSON对象或者JSON字符串通过setDataSource(json)设置。

数据源支持

组件可运行在本地模式和远程模式下,本地模式用用于静态数据源的设置,远程模式用于搜索方式的交互数据模式。 UI界面中的搜索框支持本地数据过滤和远程数据搜索功能,根据模式的不同展示不同,本地模式展示为过滤图标;远程模式展示为搜索图标。

表单支持

组件可工作在传统的表单模式,以下代码构建一个表单,拥有两个选择框组件。

<!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模式下提交数据链接为

xxx=023&yyy=023&yyy=010

组件UI界面

组件参数

参数名 数据类型 描述
width string 100px或25%
multiple boolean 是否多选,默认单选
duplicate boolean 是否可以对同一选项重复选择
selectParent boolean 是否可以选择非叶子节点的父节点作为选项
placeholder string 占位提示信息
allowClear boolean 是否显示刷新按钮
closeOnSelect boolean 是否选中后关闭选择框,默认true
disabled boolean 是否失效
readonly boolean 是否只读

组件API

方法 描述  
select 用于创建一个Select组件,可选传入回调函数  
setDataSource 以JSON形式设置数据源,用于第一次初始化时  
getDataSource 获取当前展示选项对应的数据源JSON  
setSelectedValue 设置获取选中的选项对应的代码值,展示结果为设置的代码值数组  
getSelectedValue 获取选中的选项对应的代码值  
getSelectedText 获取选中的选项对应的文本数组  
getOptions 获取所有选项的代码值和文本数组  
draw 重新绘制组件UI界面  
cleanOptions 清空所有选项,同时清空数据源值
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

数据库学习一---------数据库查询索引和记录数,监控数据库性能

--性能监控 select b.username, c.* from (select executions,ELAPSED_TIME/1000 ELAPSED_TIME, case when nvl(executions, 0) > 0 then ELAPSED_TIME / 1000000 / executions else 0 end as...

2016/10/21 10:03
29
0
oracle中sql语句的优化

一、执行顺序及优化细则 1.表名顺序优化 (1) 基础表放下面,当两表进行关联时数据量少的表的表名放右边 表或视图: Student_info (30000条数据) Description_info (30条数据) select * from d...

2016/08/25 23:44
79
0
element UI的使用

1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.引入element UI的css 和 插件 import ElementUI from 'element-ui'; import...

11/14 12:45
5
0
select2 控件在jquery-ui dialog下无法搜索问题解决

select2 控件在jquery-ui dialog下无法搜索问题解决

2016/05/28 12:59
900
0
yii\jui\AutoComplete

搞了这么久的原生AutoComplete,最后才发现'yii\jui\AutoComplete <?= $form->field($model, 'smid')->widget('yii\jui\AutoComplete',[ 'options'=>['class'=>'form-control'], 'clientOpti...

2015/02/23 20:29
44
0
Bootstrap-Select 动态加载数据的小记

关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap-select没有select2那么强大的api,但是胜在漂亮啊,配合自己...

2016/12/04 01:54
634
1
jquery ui tabs 讲解

JQuery UI - tabs 收藏 ·概述 标签页插件通常用于将内容分解成多个部分,可交换查看,节省空间。有点类似于手风琴插件。 官方示例地址:http://jqueryui.com/demos/tabs/ ·丰富的事件支持:...

2012/11/20 10:50
5.6K
0
jquery遍历table

关于Jquery;相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件;权当总结下: 遍历Table <table id="thistab"> <tr> <td class="t_l_bg">3</td> <td><span class="t_trash"><...

2015/04/22 18:16
56
0
Html5添加基于列表的选择美化插件教程

一、使用方法 <link href="src/ui-choose.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="src/ui-choose.js"></script> 二、Html结构 <ul class="ui-choo...

2016/01/11 12:53
38
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部