Select2异步ajax方式加载数据

项目中用到了select2.js插件的ajax方式加载数据，在编辑数据的时候需要回显，找了很多文章，都不能正常回显，谷歌之后在官方的github上找到些蛛丝马迹，终于做了出来。

1.引js和css
2.初始化
下面是我在项目中的初始化方式。第三个函数echoSelect2就是回显数据用的。

function initSelect2(dom,url,multiple){var subject = $(dom);//元素var Select2 = subject.select2({ajax: {url: url,dataType: 'json',data: function (params) {return {name: params.term, // 搜索参数};},processResults: function (data, params) {for (var i = 0; i < data.length; i++) {data[i].id = data[i].id;data[i].text = data[i].name;}return {results: data};},cache: true},placeholder: "请输入名称搜索",allowClear: true,    //选中之后，可手动点击删除escapeMarkup: function (markup) { return markup; }, // 让template的html显示效果，否则输出代码minimumInputLength: 2,    //搜索框至少要输入的长度，此处设置后需输入才显示结果language: "zh-CN",         //中文multiple:multiple, //是否多选width: 'resolve',closeOnSelect:false,templateResult: formatSubject, // 自定义下拉选项的样式模板templateSelection: formatSubjectSelection     // 自定义选中选项的样式模板});return Select2;
}function formatSubject(item) {if (item.loading) return item;var markup = '<div> <p class="text-primary">学科名称：' + item.name|| item.text + '</p>';//markup += '这里可以添加其他选项...';markup += ' </div>';return markup;
}function formatSubjectSelection(item) {return item.name || item.text;
}
//回显数据
function echoSelect2(dom,value){$.each(value,function(index,value){$(dom).append(new Option(value.name, value.id, false, true));});$(dom).trigger("change");
}

3.使用方式
var select2 = initSelect2("#school","/school/searchSchoolByName",true);
4. 回显方式
获取初始化数据定义成类似的数组形式：var data = [{id:1001,name:“哈哈哈”}];
调用方法echoSelect2("#school",data); 就OK了。

Select2异步ajax方式加载数据相关推荐

使用jQuery和YQL，以Ajax方式加载外部内容
我们来看看怎样使用jQuery,以Ajax方式加载外部(其他域上)的内容.这里的所有代码都可以从GitHub下载,也可以在这个演示页面中获取,因而不用复制粘贴了. OK,Ajax通过jQuery是很容 ...
layui信息加载流的方式加载数据
SSM项目中使用layui信息加载流的方式加载数据这里首先jsp页面来一个div容器,这里数数据显示的地方 //css样式: <style type="text/css"& ...
python爬虫之Ajax动态加载数据抓取--豆瓣电影/腾讯招聘
动态加载数据抓取-Ajax 特点 1.右键 -> 查看网页源码中没有具体数据 2.滚动鼠标滑轮或其他动作时加载抓取 1.F12打开控制台,页面动作抓取网络数据包 2.抓取json文件URL地址 ...
ext ajax同步加载数据,ext 的loadmask 与ajax的同步请求水火不容
因为ajax 的同步请求会有一段请求时间.有的短.有的长,对于短的咱们仍是能接受的,不过长的话就必须处理一下了,ajax 就好比处于ext 4.2.0的框架下,须要一个遮掩的样式,框架是有自带的,lo ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...
jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
微信小程序ajax请求分页加载数据
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
echarts html ajax,ECharts+Ajax动态加载数据实例（.NET）
什么是ECharts ECharts 是一个数据可视化工具,提供了系列常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折 ...
ajax 同步加载数据
var data = $.ajax({url:"same.php",type:'GET',async:false,cache:false}).responseText; 主要是 a ...
php ajax 加载列表,Ajax点击不断加载数据列表（图文教程）
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...

Select2异步ajax方式加载数据

Select2异步ajax方式加载数据相关推荐

最新文章

热门文章