zoukankan      html  css  js  c++  java
  • 从后台数据库查询的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);
            }
        });
    

      

  • 相关阅读:
    改变GMF应用程序画布的布局
    Eclipse 3.2下载最多的国家和地区
    让输出的Plugin文件名里包含当前时间
    把SWT包装成Plugin需要修改的地方
    在程序里隐藏但利用Resource Navigator
    GMF应用程序设置背景图片
    给GMF应用程序添加自定义Action
    Graphical Modeling Framework简介
    GMF常见问题
    EReference的containment和container属性
  • 原文地址:https://www.cnblogs.com/ngy0217/p/11812887.html
Copyright © 2011-2022 走看看