【笔记】select2的使用
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Content/select2-master/dist/js/select2.js"></script>
<link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />
function loadAssetNameOrVersion(displayText) {
displayText = displayText || "请选择";
$("#asset_nameOrVersion").select2({
placeholder: displayText,//默认显示
minimumInputLength: 0,//输入多少长度的值的时候执行后台请求查询
//选中事件(选中后显示的值)
formatSelection: function (object) {
return object.assetName + "/" + object.productName;
},
//显示的值(加载的在下拉框的值)
formatResult: function (object) {
return object.assetName + "/" + object.productName;
},
id: function (data) {//选中后取的值
return data.productId;
},
ajax: {
url: "/api/services/app/asset/GetOfficeProductsByKey",
dataType: "json",
params: {
contentType: 'application/json'//此处可修改contentType类型(这个地方坑了我好久,不知道还要加params包起来)
},
type: "post",//请求类型
data: function (term, page) {//传给后台的参数,可自行构造
return JSON.stringify({
prefix: term,
limit: 4,
page: page,
});
},
results: function (data, page, query) { //请求成功,接收返回值
var more = (page * 4) < data.result.totalCount;
return { results: data.result.items, more: more };
},
}
});
}
可下拉搜索,下拉分页,还是比较强大的!
【笔记】select2的使用的更多相关文章
- select2插件使用小记2 - 多选联动 - 笔记
这是select2插件使用的第二篇,可参考第一篇 select2插件使用小记.上一篇主要是关于基本的使用,这篇主要是关于多选,及联动的.侧重点不同. 效果图如下: 遵从W3C标准:结构.样式.行为.以 ...
- select2插件+ajax笔记
目录 手册 思路 1. 如果是自己写的ajax这样就可以了. html里 控制器里 2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支 ...
- jquery Select2 学习笔记之中文提示 - CSDN博客
首先学习这个东西呢,还是看官网比较全面 select2官网例子 要select2中文显示:必须要引入中文包,且一定要放在select2.js之后 [javascript] view plain cop ...
- Java开发笔记(六十三)双冒号标记的方法引用
前面介绍了如何自己定义函数式接口,本文接续函数式接口的实现原理,阐述它在数组处理中的实际应用.数组工具Arrays提供了sort方法用于数组元素排序,可是并未提供更丰富的数组加工操作,比如从某个字符串 ...
- jQuery整理笔记七----几个经典表单应用
1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...
- amazeui学习笔记一(开始使用5)--藏品collections
amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...
- Laravel Vuejs 实战:开发知乎 (10)使用 Select2 优化话题选择
1.添加选择Topic 使用Select2,如何安装Select2 ,具体使用实例 Select2 and Laravel: Ajax Autocomplete 及 Loading data remo ...
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- IIS7中配置FastCGI运行PHP
环境说明: 操作系统:使用windows 2008 server 64位系统,IIS7.5PHP版本:官方下载PHP 5.4.16 VC9 x86 Non Thread SafeZIP版本.PHP路径 ...
- ajax实现文件下载
前台: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- 使用SftpDrive+SourceInsight阅读开源代码
在虚拟机环境下使用Linux编写和阅读代码,我之前一直是通过Xshell利用ssh登录至虚拟机从而在命令行下使用vim来进行的.目前有阅读开源代码的需要,虽然vim+ctags+cscope可以完成这 ...
- VirtualBox 内的 Ubuntu Server 虚拟机网络配置
环境: 宿主机:Windows 7,单网卡: 虚拟机:ubuntu-14.04.1-server-amd64: 宿主机上网是连接的路由器,IP 地址是通过 DHCP 服务自动获取的: 基本情况: Ub ...
- SSH基本框架搭建后的简化
对于SSh框架的简化,我们可以从下面几个方面来剖析: 1.实体类entity:在这里我们需要将数据库和实体类进行关联,在简化之前,我们需要在entity包里面加入一份.xml配置文件 例如原码---- ...
- git 一般的使用操作
1.先在github上建立自己的repository,取名为yourRepo 2.创建本地库 ssh -T git@github.com # 在初始化版本库之前,先要确认认证的公钥是否正确 git i ...
- ASP.NET 创建网站地图
很多个人站长会使用工具来生成自己网站的站点地图,这样做的缺点在于网站的 sitemap 不能及时的得到更新.当我们发表了一篇新文章时,应该对网站的地图进行更新,并通知搜索引擎网站地图已经发生了改变! ...
- ps命令介绍
ps是收集进程信息的重要工具.它提供的信息包括:拥有进程的用户.进程的起始时间.进程所对应的命令行路径.进程ID(PID).进程所属的终端(TTY).进程使用的内存.进程占用的CPU等.例如: $ p ...
- coreseek实战(一):windows下coreseek的安装与测试
coreseek实战(一):windows下coreseek的安装与测试 网上关于 coreseek 在 windows 下安装与使用的教程有很多,官方也有详细的教程,这里我也只是按着官方提供的教程详 ...
- DIV布局-高度不同DIV,自动换行并对齐
最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...