【笔记】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的开发者 ...
随机推荐
- CentOS6.5 Openssl版本升级
CentOS6.5 Openssl 升级: 第一步:在openssl官网(https://www.openssl.org/)下载最新版 Ps:个人使用的是openssl-1.0.1u.tar.gz版 ...
- Linux下的段错误(Segmentation fault)
Linux开发中常见段错误问题原因分析 1 使用非法的内存地址(指针),包括使用未经初始化及已经释放的指针.不存在的地址.受系统保护的地址,只读的地址等,这一类也是最常见和最好解决的段错误问题,使用G ...
- mysql主从复制的一篇文章(转载)
管理mysql主从有2年多了,管理过200多组mysql主从,几乎涉及到各个版本的主从,本博文属于总结性的,有一部分是摘自网络,大部分是根据自己管理的心得和经验所写,整理了一下,分享给各位同行,希 ...
- gulp-htmlmin压缩html
通过一条命令用Npm安装gulp-htmlmin: npm install gulp-htmlmin --save-dev 安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门 ...
- Binary Tree Maximum Path Sum
Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...
- swift使用swifthttp
1.https://github.com/daltoniam/SwiftHTTP下载 2.将项目中的Source文件夹中的所有.swift拖到项目中 3.不用import 4.直接用HTTP.GET或 ...
- ORACLE rowid切分大表
通过如下sql获取rowid切分范围 ) || dbms_rowid.rowid_create(, DOI, lo_fno, lo_block, ) ) || ) || dbms_rowid.rowi ...
- tomcat各种问题汇总
1. 让Tomcat支持中文路径名和中文文件名 因为内置get协议中的URL编码都是ISO-8859-1,所以需要我们强制编码,在tomcat/conf/Server.xml中添加URIEncodin ...
- java1.7集合源码阅读: Vector
Vector是List接口的另一实现,有非常长的历史了,从jdk1.0开始就有Vector了,先于ArrayList出现,与ArrayList的最大区别是:Vector 是线程安全的,简单浏览一下Ve ...
- LeetCode OJ 331. Verify Preorder Serialization of a Binary Tree
One way to serialize a binary tree is to use pre-order traversal. When we encounter a non-null node, ...