select下拉框数据 SSM+LayUi

前言说明

使用SSM集成框架，还有LayUi前端框架。要完成的功能：
从数据库中查询出下拉框要显示的值、
添加保存数据时，将下拉框中值保存展示在页面中、
修改数据时，下拉框的值也能正常回显数据，并且能够正常修改保存成功

1、演示需要用到的数据表格

• 自己的页面展示数据库表
  
  
• 数据字典类型和数据字典明细数据库表

• 联合起来：三张表的关系
  

2、三张数据库表的domain实体类

• 数据库字典类型
  
• 数据库字典明细
  
• 自己页面要展示的数据实体类
  

一、显示下拉框的下拉值，能展示在前台页面，修改时也能回显数据

只需要数据字典的明细

1、在mapper的映射文件中写相应的SQL查询语句

根据上面的数据字典的两种表可以看出，外键1就是我要的客户来源明细。所以我在这里直接根据外键1来查明细值

2、在相应的mapper.java的接口中写一个查询的方法。

方法名就是根据sql的id，要对应上。会从数据库中查询数据

3、 相应的service层的接口中写一个方法

4、相应的service层的实现类去实现接口中的方法

5、相应的controller层方法

6、相应的自己类的mapper映射文件。

重点：由于在自己的实体domin有外键，所以要做多表联合查询。直接关联数据字典明细类、对象customersource就对应上自己的数据库表的字段。详情看上面的domain类的截图就明白

7、相应的前台的jsp和js部分

之前的博客也有讲，使用LayUi需要引用的相应的css和js文件

8、效果展示。

二、下拉框修改回显值

//修改按钮
"update":function () {
     //根据table的id。下面准备判断是否选中行数
     var checkStatus = table.checkStatus('potencustomerlist')
     //拿到选中行数据，可能有多行
     var rows=checkStatus.data;
     // console.debug(rows);
     //如果没有长度（选中行是数组形式），就是没有选中数据，给出提示
     if(rows.length<1){//或者if(!rows.length)效果都一样
         layer.alert('请先选中数据', {
             icon: 0,
             skin: 'layer-ext-moon', //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
             //2秒后自动关闭弹出层
             time: 2000,
             title:'提示'
         });
         return;
     }else if(rows.length>1){
         layer.alert('只能选中一行数据操作', {
             icon: 0,
             skin: 'layer-ext-moon', //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
             //2秒后自动关闭弹出层
             time: 2000,
             title:'提示'
         });
         return;
     }
     //数据回显。包括下拉框的回显
     var row = rows[0];
     //拿到下拉框的回显值
      if(row.customersource){
         row["customersource.id"] = row.customersource.id;
     }
     //form表单的lay-filter属性。用于回显数据
     from.val("pcForm", row);
     //重新渲染
     from.render();
     //打开弹出框
     layer.open({
         type: 1,
         titel:'编辑操作',
         //弹出框的id
         content: $('#potencustomerDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
         success: function(layero, index){
             var shades = $(".layui-layer-shade");
             if(shades.length>1){
                 $(shades[1]).remove();
             }
         }

     });
 },

• 主要部分的图形解释：下拉框的回显