从后台数据库查询的List数据怎么在前台combobox显示

 

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