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 ...
随机推荐
- 第二节:Web前端-ASP.NET之C#基础
第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...
- LabVIEW(四):数据存储和文件IO
1.使用NI数据采集板卡来进行数据保存和文件I/O操作.2.在一个典型的测试测量系统当中,包括:信号调理.信号采集.信号分析.信号显示.数据存储.数据存储:将采集到的数据储存到磁盘上,以备日后离线分析 ...
- 认识jsp
jsp头部指令 <%@page import="com.offcn.utils.PageUtils"%> <%@ taglib uri="http:/ ...
- ubuntu默认的Python版本号修改
ubuntu默认的Python是2.7版本的,键入Python3 就可以使用Python3.X版本.下面修改默认的Python版本, 1.删除/usr/bin 下的Python链接 sudo rm / ...
- PHP之ThinkPHP框架(验证码、文件上传、图片处理)
验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示: <form ...
- asp.net core mvc发布后显示异常错误信息的方法
在发布的项目文件夹中找到web.config文件,修改: <aspNetCore processPath="dotnet" arguments=".\Cloud.B ...
- MySQL单表多字段模糊查询
今天工作时遇到一个功能问题:就是输入关键字搜索的字段不只一个字段,比如 我输入: 超天才 ,需要检索出 包含这个关键字的 name . company.job等多个字段.在网上查询了一会就找到了答案. ...
- Redis(4)---主从复制
Redis主从复制 一.环境搭建 既然是主从复制,那肯定需要多个redis服务器,下面我先创建3个服务器,™的端口号分别是:6379.6380.6381. 1.复制默认配置文件redis ...
- 【EF6学习笔记】(四)弹性连接及命令拦截调试
本章原文地址:Connection Resiliency and Command Interception 原文有些地方讲的比较细,个人根据实际理解做些缩减,或者加入一些个人理解: 第1部分 弹性连接 ...
- 【EF6学习笔记】(十)处理并发
本篇原文链接:Handling Concurrency Concurrency Conflicts 并发冲突 发生并发冲突很简单,一个用户点开一条数据进行编辑,另外一个用户同时也点开这条数据进行编辑, ...