【笔记】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的开发者 ...
随机推荐
- 基于WDF的PCI/PCIe接口卡Windows驱动程序(3)- 驱动程序代码(头文件)
原文出处:http://www.cnblogs.com/jacklu/p/4679304.html 在WDF的PCIe驱动程序中,共有四个.h文件(Public.h Driver.h Device ...
- tdd 和 make file,以及cygwin
等我把这本书看完,好好总结一下. 还要把以前的博客文字整理一下
- Web开发新时代
Web1.0===主流技术:HTML+CSS Web2.0===主流技术:Ajax(Javascript/DOM/异步数据请求) Web3.0===主流技术:HTML5+CSS3 HTML5亮点:Ca ...
- C#十种语法糖
语法糖 指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用.通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会.需要声明的是"语法糖" ...
- jQuery.bind() 函数详解
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 执行bind()时,事件处理函数会绑定到每个匹配元素上.因此你使用bind( ...
- 初识ASP.NET CORE:二、优劣
Which one is right for me? ASP.NET is a mature web platform that provides all the services that you ...
- MySql表名的大小写问题
MySQL在Linux下数据库名.表名.列名.别名大小写规则是这样的: 1.数据库名与表名是严格区分大小写的: 2.表的别名是严格区分大小写的: 3.列名与列的别名在所有的情况下均是忽略大小写的: 4 ...
- windows 10环境下 使用 msys2 + vs code 配置 c++ 的编译环境
不太多描述 msys2 与 vs code ,既然你需要安装 一种语言的编译环境了 ,你肯定对这两个不陌生: 1. 先安装msys2; (下载多少位的msys2就安装多少位的 mingw,本人安装 ...
- 小甲鱼python视频第八讲(课后习题)
1.for循环的使用,注意下面代码的区别 for i in range(0,10,2): print("i love you") for i in range(0,10): pri ...
- select与poll函数介绍
select与poll函数介绍 在所有依从POSIX的平台上,select函数使我们可以执行I/O多路转接.传向select的参数告诉内核: 1)我们所关心的描述符 2)对于每个描述符我们所关心的状态 ...