后台直接从数据库,通过jdbcTemplate查询数据,得到List数据集,里面是Map

List<Map<String, Object>> list =  jdbcTemplate.queryForList(sql);

返回到前台的数据是这样的字符串

"[{name=zs,code=s1},{name=ls,code=s2},{name=ss,code=s3}]"

前台用JSON.parse(data)解析不了这种格式

combobox需要的是对象数组

解决办法:在后台List处理下,

用fastjson

JSON.toJSON(list)处理

然后传递到前台,就是这种格式:

"[{"name":"zs","code":"s1"},{"name":"ls","code":"s2"},{"name":"ss","code":"s3"}]"

这个时候前台,可以用JSON.parse(data)解析

data = JSON.parse(data)

处理数据,如果text为空,选中后,框内会显示空白,以防空白

for(var i=0;i<data.length;i++){
  var obj = new Object();
  obj.id = data[i].code;
  obj.text= data[i].name===''?data[i].code:data[i].name;
  alldata.push(obj);
}

  

//多选combobox

$('#column').combobox({
data: data,
valueField: 'id',
textField: 'text',
panelHeight: 'auto',
height:32,
multiple: true,
editable: false,
formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
var opts = $(this).combobox('options');
var id= row[opts.valueField];
var name= row[opts.textField];
if(name!=null&&name!=''){
return '<input type="checkbox" class="combobox-checkbox">' + name+"("+code+")";
}else{
return '<input type="checkbox" class="combobox-checkbox">' + code;
}
},
onLoadSuccess: function () { // 下拉框数据加载成功调用
debugger;
var cols = '${showColumns}';
if(cols!==''){
$('#column').combobox('setValues',cols.split(","));
}
//$('#column').combobox('select',cols); var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');//获取选中的值的values
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onSelect: function (row) { //选中一个选项时调用
debugger;
var opts = $(this).combobox('options');
//获取选中的值的values
$("#column").val($(this).combobox('getValues')); //设置选中值所对应的复选框为选中状态
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', true);
},
onUnselect: function (row) {//不选中一个选项时调用
var opts = $(this).combobox('options');
//获取选中的值的values
$("#column").val($(this).combobox('getValues')); var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
}
});

  

从后台数据库查询的List数据怎么在前台combobox显示的更多相关文章

  1. laravel数据库查询返回的数据形式

    版本:laravel5.4+ 问题描述:laravel数据库查询返回的数据不是单纯的数组形式,而是数组与类似stdClass Object这种对象的结合体,即使在查询构造器中调用了toArray(), ...

  2. 转 zabbix 优化方法 以及 后台数据库查询方法 两则

    ############sample 1 https://blog.51cto.com/sfzhang88/1558254 如何从Zabbix数据库中获取监控数据 sfzhang关注6人评论40627 ...

  3. 在vue中的form表单中下拉框中的数据来自数据库查询到的数据

    文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...

  4. SQL数据库查询一列数据返回一行

    SQL:数据库合并列数据:遇到一个更新的问题 想要把查询到的数据某一列拼接成字符串形式返回用的是SQL数据库中的STUFF函数比如 查询到的表(u_College)如下Id Name Age Clas ...

  5. Spring Security从后台数据库查询实现登陆控制

    Spring Security框架是一个控制登陆的框架,通过配置文件获取后台的用户名及密码,进行比较进行登陆判断 使用步骤 1.导入依赖 <!-- 身份验证 --> <depende ...

  6. MySql数据库-查询、插入数据时转义函数的使用

    最近在看一部php的基础视频教程,在做案例的时,当通过用户名查询用户信息的时候,先使用了转义函数对客户提交的内容进行过滤之后再交给sql语句进行后续的操作.虽然能看到转义函数本身的作用,但是仍然有一些 ...

  7. sql server数据库查询取出重复数据记录

    问题:博主在2011年6月,广东技术师范大学大四的时候,从学校计算机科学学院网站看到招聘信息并到广东中原地产IT部面试,很清楚记得当时的面试题目:怎么从数据库里面查询重复记录. 解决方案:在sql s ...

  8. Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】

     Excel相关知识点 (1)名称管理器--Name Manager [CoderBaby]首先需要创建多个名称(包含key及value),作为下拉列表的数据源,后续通过名称引用.可通过菜单:&quo ...

  9. extjs 按条件查询出的数据在grid上不显示

    在对extjs的按条件查询时.发现仅仅要输入查询条件时,grid上查询的结果就不显示,可是假设不输入条件默认查询全部的 时候就能显示数据.输入条件时后台查出来的数据时时正确的返回到json格式的数据也 ...

随机推荐

  1. 机器学习笔记——k-近邻算法(一)简单代码

    一 import numpy as np ##初始化数据 T = [[3, 104, -1], [2, 100, -1], [1, 81, -1], [101, 10, 1], [99, 5, 1], ...

  2. 《精通并发与Netty》学习笔记(10 - 详解NIO (一) Channel、Buffer )

    一.Java NIO 概述 Java NIO 由以下几个核心部分组成:ChannelsBuffersSelectors虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Bu ...

  3. (长期更新)【机器学习实践】Pycharm编辑器的使用注意事项

    1. 写Python代码,根据PEP8风格,默认一行的长度不超过 80 个字符. 但是pycharm 默认是第 120 个字符处,故进行修改:  File→Settings→Editor→Code S ...

  4. Awvs–网络漏洞扫描工具

    Awvs漏洞扫描自动化 在WEB安全方面,安全侧使用Acunetix_Web_Vulnerability_Scanner_11.xWEB漏洞扫描工具定期手工对m站和www站进行全站漏洞扫描. 为了防止 ...

  5. ffmpeg学习笔记-初识ffmpeg

    ffmpeg用来对音视频进行处理,那么在使用ffmpeg前就需要ffmpeg有一个大概的了解,这里使用雷神的ppt素材进行整理,以便于复习 音视频基础知识 视频播放器的原理 播放视频的流程大致如下: ...

  6. Java Netty和Android之WebSocket,Springboot和Vue项目网址

    在Netty上使用Websocket和网页上写个简单的websocket https://www.cnblogs.com/amibandoufu/p/11442881.html Android上使用w ...

  7. mysql的密码规则问题

    今天在设置mysql某用户的密码时,出现了此报错:   ERROR 1819 (HY000) Your password does not satisfy the current policy req ...

  8. (二)mybatis框架原理(图解)

    目录 mybatis 框架原理图(粗略版) mybatis 框架原理图(粗略版)

  9. opencv实现人脸识别(二) 人脸图像采集模块

    这一步我们开始搭建第一个模块,用来检测到图像中的人脸位置,并将它拍下来保存在指定路径 流程图: 代码实现: import cv2 def pic(cam): # 调用笔记本内置摄像头,所以参数为0,如 ...

  10. python — mysql基础知识

    目录 1 . 数据库的介绍 2. mysql 1 . 数据库的介绍 1.为什么要用数据库? 很多功能如果只是通过操作文件来改变数据是非常繁琐的,程序员需要做很多事情 对于多台机器或者多个进程操作用一份 ...