bootstrap select2插件用ajax来获取和显示数据的实例


Posted in Javascript onAugust 09, 2018

用select2插件,实现以下这个选择框:

bootstrap select2插件用ajax来获取和显示数据的实例

1、html代码

<div class="form-group" style='display:none;' id='preParamGroup'>
	<label for="inputEmail3" class="col-sm-2 control-label">预定义参数</label>
	<div class="col-sm-8">
		<select class="js-states form-control" id="preParamDefine" multiple="multiple" style="width: 100%"></select>
	</div>
</div>

2、js代码

$("#preParamDefine").select2({
	 //data: data,
	placeholder:'请选择',//默认文字提示
	tags: true,//允许手动添加
  	allowClear: true,//允许清空			 
	ajax: {
		url: '/jgwork/param_select',
		type:'GET',
		dataType: 'json',
		data: function(){ return {'projectId':$('#projectSel').val()}},
		processResults: function (data) {
			 return {
				  results: data.result
				 };
		 }
		}
			 
})

用ajax从服务端获取数据,在processResult里来返回数据

3、服务端代码

服务端返回的数据格式如下:

data = [
{ 'text': 'enhancement' ,
 'children':[
 { 'id': 1, 'text': 'bug','parent':'enhancement' }, 
 { 'id': 2, 'text': 'duplicate' ,'parent':'enhancement'},
 { 'id': 3, 'text': 'invalid' ,'parent':'enhancement'},
 { 'id': 4, 'text': 'wontfix' ,'parent':'enhancement'}
  ]
}
]

代码:

proId = request.GET.get('projectId','')
paramList = [param.show_table() for param in paramDefine.objects.filter(proid = proId)]
data = []
index = 1
for item in paramList:
	childList = []
	for i in item['paramValue'].split(','):
		childList.append({
				'id': index,
				'text': i,
				'param': item['paramName']
			}) #生成children字段列表
		index += 1
	data.append({
			'text': item['paramName'],
			'children': childList
		})
return JsonResponse({'result':data})

这里注意,index不能从0开始,不然生成的id有一个为0,会导致这个选项无法选取,因为在select2中id=0有特殊意义

以上这篇bootstrap select2插件用ajax来获取和显示数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
js实现分割上传大文件
Mar 09 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
微信小程序url传参写变量的方法
Aug 09 #Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 #Javascript
koa上传excel文件并解析的实现方法
Aug 09 #Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 #Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
You might like
PHP 数组实例说明
2008/08/18 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php常用数组函数实例小结
2016/12/29 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
一段实时更新的时间代码
2006/07/07 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript函数详解
2014/11/17 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JS设置CSS样式的方式汇总
2017/01/21 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
公司市场专员岗位职责
2014/06/29 职场文书
纪委立案决定书
2015/06/24 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python