【笔记】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的开发者 ...
随机推荐
- JS驗證兩位小數
function SizeCheck(Textdiv) { var fg = true; str = $("#" + T ...
- JavaScript Function(函数表达式)
创建函数 创建函数的方式有两种:1.函数声明,2.函数表达式 函数声明的语法为 functionName(); //不会报错,函数声明提升function functionName(arg0,arg1 ...
- 【转载】C++ function、bind和lambda表达式
本篇随笔为转载,原贴地址:C++ function.bind和lambda表达式. 本文是C++0x系列的第四篇,主要是内容是C++0x中新增的lambda表达式, function对象和bind机制 ...
- ntc 热敏电阻
来自维基百科 http://zh.wikipedia.org/zh/%E7%83%AD%E6%95%8F%E7%94%B5%E9%98%BB 热敏电阻的电阻值是根据温度由公式计算而来的,知道这一点就 ...
- CRC
#define POLY 0x1021 /** * Calculating CRC-16 in 'C' * @para addr, start of data * @para num, length ...
- Java设计模式——装饰者模式
JAVA 设计模式 装饰者模式 用途 装饰者模式 (Decorator) 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator 模式相比生成子类更为灵活. 装饰者模式是一种结构式模式 ...
- computer repair services in Hangzhou
We provide support for all kinds of Windows based Desktops and Laptops all over Hangzhou,I will be i ...
- 如何在十分钟内插入1亿条记录到Oracle数据库?
这里提供一种方法,使用 APPEND 提示,使得十分钟内插入上亿数据成为可能. -- Create table create table TMP_TEST_CHAS_LEE ( f01 VARCHAR ...
- codeforces 732/D 二分
给出考试时间和考试需要准备的时间,问最早考完所有科目的时间 二分答案 NlogN 二分抄神犇的写法 感觉挺舒服的嘻嘻嘻 #include<bits/stdc++.h> using name ...
- 关于git-Git 分支管理和冲突解决
创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支,名叫newname. gi ...