select2 插件加载后端数据
2018-06-24 01:30:59来源:未知 阅读 ()
//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; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
- jQuery插件开发全解析 2020-03-25
- JS判断浏览器是否安装flash插件的简单方法 2020-03-12
- JS动态加载脚本的方法 2020-02-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash