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

      

  • 相关阅读:
    svn command line tag
    MDbg.exe(.NET Framework 命令行调试程序)
    Microsoft Web Deployment Tool
    sql server CI
    VS 2010 One Click Deployment Issue “Application Validation did not succeed. Unable to continue”
    mshtml
    大厂程序员站错队被架空,只拿着五折工资!苟活和离职,如何选择?
    揭秘!Windows 为什么会蓝屏?微软程序员竟说是这个原因...
    喂!千万别忘了这个C语言知识!(~0 == -1 问题)
    Linux 比 Windows 更好,谁反对?我有13个赞成理由
  • 原文地址:https://www.cnblogs.com/ngy0217/p/11812887.html
Copyright © 2020-2023  润新知