select2 插件加载后端数据
//html
<select class="form-group form-control" name="roomId" id="roomList" data-op="eq" data-type="L" title="请选择租赁空间">
<option value="">全部</option>
</select>
function selectRoomId(select) {
$(select).select2({
ajax: {
url: webroot + "/spaceRoom/listRoom?buildingId=&floor=",
dataType: 'json',
delay: 250,
data: function(params) {
var query = {
code: params.term
}
return query;
},
processResults: function(data, params) {
//请求接口返回数据
params.page = params.page || 1;
return {
results: data.result
};
},
cache: true
},
//options
language: "zh-CN",
placeholder: '请输入房间号',
allowClear: true,
width: '300px',
//键盘选择事件
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
}
// 数据列表
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = "<div></div>";
markup += "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";
return markup;
}
//选择填入内容和返回字段
function formatRepoSelection(repo) {
return repo.text || repo.roomPath || repo.id;
}
//调用
var roomIds = $('#roomList');
selectRoomId(roomIds);
//这里是post请求,传参为json(上面是get请求)
function selectRoomId(select) {
$(select).select2({
ajax: {
url: webroot + '/spaceRoom/listRoom',
dataType: 'json',
delay: 250,
type:'POST',
contentType: "application/json",
data: function(params) {
var paramss = {
code: params.term
};
return JSON.stringify(paramss);
},
processResults: function(data, params) {
//请求接口返回数据
params.page = params.page || 1;
return {
results: data.result
};
},
cache: true
},
//options
language: "zh-CN",
placeholder: '请输入房间号',
allowClear: true,
width: '300px',
//键盘选择事件
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
}
// 数据列表
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = "<div></div>";
markup += "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";
return markup;
}
//选择填入内容和返回字段
function formatRepoSelection(repo) {
return repo.text || repo.roomPath || repo.id;
}
select2 插件加载后端数据的更多相关文章
- go语言使用go-sciter创建桌面应用(八) 窗口显示时,自动加载后端数据。
有些时候我们需要在窗口创建并显示时,加载一些后端的配置,这就需要用到view提供的几个事件. https://sciter.com/docs/content/sciter/View.htm state ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- iOS --- UIWebView的加载本地数据的三种方式
UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIM ...
- ios网络学习------4 UIWebView的加载本地数据的三种方式
ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...
- 配置vuejs加载模拟数据
[个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...
- osg gdal加载tif数据文件
osg加载.tif地形数据文件 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include <iostream> ...
- scrapy项目5:爬取ajax形式加载的数据,并用ImagePipeline保存图片
1.目标分析: 我们想要获取的数据为如下图: 1).每本书的名称 2).每本书的价格 3).每本书的简介 2.网页分析: 网站url:http://e.dangdang.com/list-WY1-dd ...
随机推荐
- 吴恩达机器学习笔记23-神经网络:表述--非线性假设(Non-linear Hypotheses)
我们之前学的,无论是线性回归还是逻辑回归都有这样一个缺点,即:当特征太多时,计算的负荷会非常大.下面是一个例子: 当我们使用
- python爬取猫眼电影top100
最近想研究下python爬虫,于是就找了些练习项目试试手,熟悉一下,猫眼电影可能就是那种最简单的了. 1 看下猫眼电影的top100页面 分了10页,url为:https://maoyan.com/b ...
- Impl模式实现之注意内联
最近学习muduo源码时,对于内联函数有了更深刻的认知. 内联(inline)在代码执行方面具有优势,但是有时使用不当,或者稍微不注意,就会造成编译错误. 以下将通过Impl实现说明一二: 头文件: ...
- 异步请求中jetty处理ServletRequestListener的坑
标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了. 之前遇到了一个b ...
- [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...
- [java]创建一个默认TreeMap() key为什么不能为null
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 先看一下 TreeMap 的 put(K key, V value) public TreeMap() ...
- vSphere 软件组件
vSphere 包括以下软件组件: ESXi 一种虚拟化平台,您可使用此平台将虚拟机创建为一组配置和磁盘文件,它们可共同执行物理机的所有功能. 通过 ESXi,可以运行虚拟机,安装操作系统,运行应用程 ...
- leetcode — anagrams
import java.util.*; /** * * Source : https://oj.leetcode.com/problems/anagrams/ * * Created by lverp ...
- nginx proxy_pass 代理域名
一.描述 1.nginx配置转发的时候使用的是域名,即使用dns服务方便配置和负载.但是nginx默认会进行缓存,当域名对应的服务出问题的时候就会报错,只有默认的缓存时间到了才会再次进行解析,ngin ...
- PHP中的加强型接口Traits
接口是对多重继承的一种变相实现, Traits可以被视为一种加强型的接口. 先来看如下代码 trait Hello { private $name = 'chenqionghe'; public ...