select2插件的使用
<select id="prd_tech_for_load" class="selectable" style="width:180px;">
</select>
不需要分页时,直接在select内添加option列表
如果要分页的话
$(function () {
$("#prd_tech_for_load").select2();
var sel_tech = $("#prd_tech_for_load").select2({
placeholder: abp.localization.values['ICT'].SelTechReq,
ajax: {
url: '../PDE/GetProductList',
dataType: 'json',
delay: 250,
data: function (params) {
return {
queryText: params.term // search term
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.result.data,
pagination: {
more: 1 < data.totalPages
}
};
},
cache: true
},
//disabled: true,
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 0,
templateResult: function (item) { // 显示查询结果
var display = '';
if (item.technology != null) display += item.technology;
//if (item.customerName != null) display += '(' + item.customerName + ')';
return display;
},
templateSelection: function (item) { // 显示选中的对象
var display = '';
if (item.technology != null) display += item.technology;
if (item.customerName != null) display += '(' + item.customerName + ')';
return display || item.text;
}
});
sel_tech.on("select2:select", function (e) {
defaultVue.ProductID = e.params.data.productId;
});
});
这里要注意的一个问题是,后台返回的数据列表必须含有id这个字段,不然会出现问题,一直不能选中数据。
这个不知道的人,被坑死了!
select2插件的使用的更多相关文章
- select2插件
引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min. ...
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...
- Metronic_下拉列表Select2插件的使用
这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https:// ...
- jQuery的下拉选select2插件用法
1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...
- select2插件用法
1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...
- Select2插件的隐藏、设置宽度
<select id="selPrinvice" class="Select2 select2-hidden-accessible" style=&quo ...
- 01:jQuery的下拉选select2插件用法
1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...
- select2插件使用小记2 - 多选联动 - 笔记
这是select2插件使用的第二篇,可参考第一篇 select2插件使用小记.上一篇主要是关于基本的使用,这篇主要是关于多选,及联动的.侧重点不同. 效果图如下: 遵从W3C标准:结构.样式.行为.以 ...
- 在select2插件中append下拉选,点击没反应的解决
今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...
- select2 插件
官网:http://select2.github.io/ Select2是基于jQuery的一个插件,没有引用jQuery,是没有效果的 1.在实现给select2添加placeholder效果的 ...
随机推荐
- Issues I encountered when building Windows Store apps on a new laptop
I took over my beloved wives samsung ativ book 9 recently as her first job granted her a brandnew su ...
- Android ListView item项 显示动画
(1)使用LayoutAnimation 所谓的布局动画,其实就是为ViewGroup添加显示动画效果,主要用过LayoutAnimationController来控制实现.LayoutAnimati ...
- Java 生产者模式 消费者模式
// The standard idiom for calling the wait synchronized(sharedObject) { while(condition){ sharedObje ...
- sql:找出工资第二高的人名
CREATE TABLE EmpSalaryInfo ( Id ), Name ), Salary int ) ) ) ) ) 方法1 (子查询): name from test where sala ...
- Hibernate4Maven
How to create a Maven project with Hibernate libs? This blog will be a demo to describe this issue. ...
- App如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸?
来自//www.cocoachina.com/ 初代 iPhone 2007 年,初代 iPhone 发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到 ...
- Sping Environment为Null的原因和解决方法
参考:https://github.com/spring-projects/spring-boot/issues/4711 这个issue提出不到20天给我搜出来了,还是相信google的强大 问题: ...
- Solr5.0配置中文分词包
Solr中默认的中文分词是用Lucene的一元分词包. 现在说明在Solr5.0中配置Lucene的SmartCN中文分词包. 1,进入Solr的安装目录,我这里是:/root/nutch/solr- ...
- sencha做个简单的登录界面
很多人都在群里问要一个好看的登录界面,我表示很无奈,哪有好看的,每个人的要求不一样,要好看的只有自己做. 下面是我自己整理的一个通用版的登录界面,稍做修改,很容易能变成你想要的界面, 不说废话,直接上 ...
- 【周年版】Cnblogs for Android
前言 扒衣见君节刚过去但是炎热夏天还在继续: 自14年8月推出博客园Android客户端以来,断断续续发了十几个后续版本,期间出现过各种问题,由于接口等诸多因素,每个模块的功能都可能随着时间和博客园主 ...