• 从后台数据库查询的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);
            }
        });
    

      

  • 相关阅读:
    HashMap,Hash优化与高效散列
    Dubbo Overview
    模板引擎 引自 《PHP核心技术与最佳实践》
    使用 phpStorm 开发
    使用 Zend_Studio 开发
    Symfony 2.0 认识Request, Response, Session, Cookie
    Symfony 建立一个Bundle
    Symfony 从路由认识它
    信鸽推送.net 服务端代码
    c#输出json,其中包含子json (可以含 无限级 子json)的方法思路
  • 原文地址:https://www.cnblogs.com/ngy0217/p/11812887.html
Copyright © 2020-2023  润新知