1.select2 加载数组数据
<script type="text/javascript">
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
</script>
<select class="js-example-data-array"></select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
2.select2异步加载远程数据
select2的异步加载数据使用的jquery的ajax进行加载
html
<select class="form-control select2" style="width: 100%;" id="exmaple2" onchange="changeselect()" name="example2">
<option value=""></option>
</select>
js
$("#example2").select2({
theme: "bootstrap",
language: "zh-CN",
placeholder: "",
placeholderOption: "first",
allowClear: true,
ajax: {
url: "/getProducts",
dataType: 'json',
delay: 250,
type:"post",
data: function(params) {
var query = {
q: params.term,
pageSize:config.select2PageSize,
page: params.page
}
return query;
},
processResults: function(data, params) {
params.page = params.page || 1;
var results = [];
$.each(data.items,function(i,v){
var o ={};
o.id=v.oid;
o.oid=v.oid;
o.productName=v.productName;
o.comment=v.comment;
results.push(o);
});
return {
results: results,
pagination: {
more: (params.page * config.select2PageSize) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
maximumInputLength:20,
templateResult: function(repo){
repo.id =repo.oid;
if(repo.comment!="")
{
repo.text =repo.productName+"("+repo.comment+")";
}
else
{
repo.text =repo.productName
}
if(repo.id==undefined)
{
return;
}
var markup='<div class="clearfix" id='+repo.id+'>' +
'<div class="col-sm-20">' + repo.text + '</div>' +
'</div>';
return markup;
},
templateSelection: function(repo){
repo.selected = true;
repo.id = repo.oid;
repo.productName = repo.text;
if(repo.id == null || repo.id == ""){
repo.text = '';
repo.productName = repo.text;
}
return repo.productName;
}
});
参数项说明:
theme:select2采用的样式
language:select2使用的语言,可以实现select2的国际化
placeholder:select2默认的提示信息
placeholderOption:
allowClear:是否可以清楚选择项,true表示可以,false表示不可用
ajax
url:代表请求的后端服务器地址
datatype:返回的数据类型,一般采用json
data:表示传递给后端的参数。可以支持多个参数传递
var select2PageSize=10;
eg: data: function(params) {
var query = {
q: params.term,
pageSize:select2PageSize,
page: params.page
}
return query;
}
pagesize:每页显示数据的大少。
page:当前是第几页。
processResults:服务端返回的结果。
processResults: function(data, params) {
params.page = params.page || 1;
var results = [];
$.each(data.items,function(i,v){
var o ={};
o.id=v.oid;
o.oid=v.oid;
o.name=v.name;
o.comment=v.comment;
results.push(o);
});
return {
results: results,
pagination: {
more: (params.page * select2PageSize) < data.total_count
}
};
服务端返回数据的格式:{
items:{[
{'zhangsan1','1'}, {'zhangsan2','2'}, {'zhangsan3','3'},
]}
total_count:15
}
select2需要的数据格式中必须包含id属性,否则出来的select2组件会遇到不能选择下拉值的问题,所以需要重新分装返回的结果信息。
pagination:是否采用分页加载处理。
escapeMarkup:特殊的格式化处理。
multiple:multiple 实现多选
minimumInputLength:最少输入的字符数的长度
maximumInputLength:最大输入字符数的长度
templateResult:格式化服务端返回的结果,可以支持图文结合的方式。
templateSelection:选择下拉值的格式化处理函数。
相关推荐
在写一个功能的时候需要根据司机查询车辆,后台数据动态追加到下拉框,因为车辆较多,所以需要用搜索,刚开始用了一种,但是跟打印功能冲突,后来找到了select2,这里有三个文件,一个js,一个css,还有一个用法说明,...
多线程异步加载大批量数据到Datagridview中,没次加载1000条数据。 引用DLL,调用方法: string sql = "select top {0} * from {2} where FItemID not in (select top {1} FItemID from {2})"; string tbName = ...
table部分代码 用户名 渠道名 游戏名 结果 耗时 创建时间 异步加载数据并实现定制化 下面是简单例子, 其中 table-main 的初始化元素为table的id。 $('#select-game').sel
SelectMadu替代了select菜单,支持搜索,多项选择,异步数据加载等功能。 首先,请在签出文档和示例。 特征 搜索选择选项。 带标签的多选界面。 对于AJAX或任何异步操作,异步数据加载可作为一种重现承诺的功能。 ...
动态加载树(tree)和动态加载表格(table),很好的结合了数据库。。可以轻松的完成你所需要的功能。
三级联动Ajax菜单(包含省市数据) ; charset=utf-8" /> var xmlHttp; var requestType=""; function createXMLHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP...
主要介绍了解决element ui select下拉框不回显数据问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
通过下拉框异步刷新echart数据,原文地址http://blog.csdn.net/kebi007/article/details/52887570
数据量过大(几千、几万条),无法一次性全部加载。 2.现有插件各不相同,无法满足功能需求。 3.美观性,可控性不足。 三、如何使用。 1.html和js <select id=unit></select> [removed]...
layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 <link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css > [removed][removed] 二、html页面代码 ...
加载数据的具体代码,供大家参考,具体内容如下 1.xssj.php [removed][removed] <title>无标题文档</title> </head> <body> 显示数据 <select id="sel"> </select> <...
Ajax-bootstrap-select-ajax.zip,bootstrap select对数据源的ajax支持,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...
今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
要实现联动效果注意两点: ...第二异步加载的内容,需要重新渲染后才可以 正常使用。 html结构: <form class=layui-form batchinput-form action= id=box-form> 所在省份: <select name=pro
github 说明 此插件是基于elementUI开发的下拉树组件 ...作为组件的数据传入,如果开启懒加载,需要将异步获取的数据组装成树型数据传入 array 是 -- -- clearable 是否可清空选项 boolean 否 true false ac
今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 ...第一、加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显。
反动女巫ReacTwitch是一个响应式React单页应用程序,它利用下拉库动态搜索并通过异步加载数据。 该项目是通过引导的。演示版堆工具描述一个用于构建用户界面JavaScript库React的声明式路由 最流行的为React重建的...
a.2 将sql server数据类型映射到sqltype及sqldbtype a.3 将ole db dbtype映射到.net数据类型 a.4 odbc类型映射 a.5 parameter.dbtype 附录b 表达式的语法 b.1 用户自定义值 b.2 运算符 b.3 字符串运算符...
20.4.2 使用entitybase类执行标准数据访问操作762 20.4.3 用entitybase类执行验证764 20.5 小结768 第21章 包含wcf数据服务的数据访问769 21.1 wcf数据服务概述769 21.2 使用包含service reference的数据服务770 ...