后台直接从数据库,通过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); } });