//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 插件加载后端数据的更多相关文章

  1. go语言使用go-sciter创建桌面应用(八) 窗口显示时,自动加载后端数据。

    有些时候我们需要在窗口创建并显示时,加载一些后端的配置,这就需要用到view提供的几个事件. https://sciter.com/docs/content/sciter/View.htm state ...

  2. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  3. ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  4. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  5. iOS --- UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档  html/htm  pdf   docx  txt等格式的文件.  safari浏览器就是通过UIWebView做的. 服务器将MIM ...

  6. ios网络学习------4 UIWebView的加载本地数据的三种方式

    ios网络学习------4 UIWebView的加载本地数据的三种方式 分类: IOS2014-06-27 12:56 959人阅读 评论(0) 收藏 举报 UIWebView是IOS内置的浏览器, ...

  7. 配置vuejs加载模拟数据

    [个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...

  8. osg gdal加载tif数据文件

    osg加载.tif地形数据文件 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include <iostream> ...

  9. scrapy项目5:爬取ajax形式加载的数据,并用ImagePipeline保存图片

    1.目标分析: 我们想要获取的数据为如下图: 1).每本书的名称 2).每本书的价格 3).每本书的简介 2.网页分析: 网站url:http://e.dangdang.com/list-WY1-dd ...

随机推荐

  1. ADB驱动

    Windows 7 64位下使用ADB驱动 什么是ADB? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试An ...

  2. Git使用详细教程(4):git rm使用详解

    我们使用git rm 文件名来进行删除文件的操作. git rm index.php这个命令把工作区的index.php删除并暂存了. 如何撤回已暂存的删除命令? 上图中已经给出了提示,使用git r ...

  3. HTML5与CSS3权威指南笔记案例1

    第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...

  4. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  5. C语言中assert()断言函数的概念及用法

    断言函数的格式如下所示: void assert (int expression);如果参数expression等于零,一个错误消息将会写入到设备的标准错误集并且会调用abort函数,就会结束程序的执 ...

  6. PHP接口的思考

    其中就有一个SPL(标准PHP库)的尝试,SPL中实现一些接口,其中最主要的就是Iterator迭代器接口,通过实现这个接口,就能使对象能够用于foreach结构,从而在使用形式上比较统一.比如SPL ...

  7. Ubuntu apt-get和pip国内源更换

    Ubuntu apt-get和pip源更换 更新数据源为国内,是为了加速安装包的增加速度. 更换apt-get数据源 输入:sudo -s切换为root超级管理员: 执行命令:vim /etc/apt ...

  8. Mycat - 实现数据库的读写分离与高可用

    前言 开心一刻 上语文课,不小心睡着了,坐在边上的同桌突然叫醒了我,并小声说道:“读课文第三段”.我立马起身大声读了起来.正在黑板写字的老师吓了一跳,老师郁闷的看着我,问道:“同学有什么问题吗?”,我 ...

  9. MySQL中间件之ProxySQL(7):详述ProxySQL的路由规则

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.关于ProxySQL路由的简述 当ProxySQL收到前端app发 ...

  10. MySQL系列详解四:MySQL事务-技术流ken

    MySQL 事务 MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数 ...