bootstrap select2插件用ajax来获取和显示数据
来源:互联网 发布:安兔兔验机网络不好 编辑:程序博客网 时间:2024/06/05 00:47
用select2插件,实现以下这个选择框:
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>
$("#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 = 1for item in paramList:childList = []for i in item['paramValue'].split(','):childList.append({'id': index,'text': i,'param': item['paramName']}) #生成children字段列表index += 1data.append({'text': item['paramName'],'children': childList})return JsonResponse({'result':data})这里注意,index不能从0开始,不然生成的id有一个为0,会导致这个选项无法选取,因为在select2中id=0有特殊意义
阅读全文
0 0
- bootstrap select2插件用ajax来获取和显示数据
- Bootstrap 分页插件 ajax获取数据显示
- Select2-Ajax获取数据
- Select2在使用ajax获取远程数据时显示默认数据
- 使用vue Ajax获取数据列表并用BootStrap显示
- bootstrap模态框和select2合用时input无法获取焦点
- Jquery select2 AJAX获取json数据后无法选中
- select2简单使用(含ajax获取是数据)
- ajax获取json数据使用jquery分页插件显示
- bootstrap模态框modal和select2合用时input无法获取焦点
- select2不显示中文、ajax加载数据后不能选中的标签选项
- bootstrap-table插件实现ajax服务端分页显示
- AJAX请求数据到select2中
- Twitter bootstrap模糊查询插件 ajax获取内容
- html select插件select2,bootstrap-select自定义option搜索过滤
- bootstrap table ajax获取后台数据后js做判断
- bootstrap table通过ajax获取后台数据展示在table
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- 设计模式之——原型设计模式
- 20:计算2的幂
- 配置mysql5.5主从复制数据库集群
- Spring+SpringMVC+Hibernate三大框架整合的SSH
- 老友记-第一季-第一集
- bootstrap select2插件用ajax来获取和显示数据
- word中插入上标快捷键
- PAT乙级1046. 划拳(15)
- 数学建模(6)——蚁群算法
- 啊啊啊啊啊啊啊啊啊啊啊啊
- CyclicBarrier
- 黑马day14 监听器之javaBean对象的活化和钝化
- Java高级篇(三九)------BIO、NIO、AIO(NIO2)区别
- Mac开发必备工具(一)—— Homebrew