springBoot+layui+jquery+layui弹窗 下拉框

layui 的增删改查 。。。 废话不多说上代码

由于时间原因  暂时只实现了查询的后台完整代码

其他的会之后贴出来  其实与查询相似  有需要的可以等我贴出  也可以照着查询仿写

先展现效果

前台代码

前台代码

body>

    <div class="demoTable" style="margin-top: 50px">
        <div class="layui-inline">
            <form class="layui-form">
                <div class="layui-form-item"
                    style="margin-bottom: 0px; margin-top: 3px">
                    <select name="demoReload" lay-filter="demoReload" id="demoReload">
                        <option value="">请选择类型</option>
                    </select>
                </div>

                <div class="layui-form-item  layui-form-pane " pane
                    style=" 735px;margin-top:3px"">
                    <label class="layui-form-label"> 请选择范围</label>
                    <div class="layui-input-block" style=" 700px;">
                        <input type="text" id="startTime" class="layui-input"
                            placeholder="开始时间" style=" 300px; display:inline;" /> <input
                            type="text" id="endTime" class="layui-input" placeholder="结束时间"
                            style="margin-left:20px;  300px; display:inline;" />
                    </div>
                </div>


            </form>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn" data-type="click">添加</button>
    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

    <div class="layui-row" id="test" style="display: none;">
        <div class="layui-col-md10" style="margin-top:30px">
            <form class="layui-form" id="endit" lay-filter="example">
                <div class="layui-form-item" id="recordno">
                    <label class="layui-form-label">记录编号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="recordno" id="recordno"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">变动金额：</label>
                    <div class="layui-input-block">
                        <input type="text" name="recordmoney" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型：</label>
                    <div class="layui-input-block">
                        <select name="ecordremar" lay-filter="ecordremar" id="ecordremar">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline" style="335px">
                    <label class="layui-form-label">日期选择</label>
                    <div class="layui-input-block">
                        <input name="recordtime" id="date1" autocomplete="off"
                            class="layui-input" type="text">
                    </div>
                </div>
            </form>
        </div>
    </div>




    <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">添加</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script type="text/javascript"
        src="views/js/layui-v2.3.0/layui/layui.js" charset="utf-8"></script>
    <script>
 
 var form='';//定义全局变量
 layui.use(['form','laydate'],function(){
            form  = layui.form,
            laydate = layui.layuidate;
            form.render();//更新渲染表单
        });
       
 
layui.use('table', function(){
  var table = layui.table;
  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
    ,url: '/AAATest/index'
    ,cols: [[
       {field:'recordno', title: '记录编号', 200,fixed: true}
      ,{field:'recordtime', title: '记录时间', 260}
      ,{field:'recordmoney', title: '变动金额', 300}
      ,{field:'ecordremar', title: '类型', 300}
      ,{fixed: 'right', 300, align:'center', toolbar: '#barDemo'}
 
    ]],
    /*数据回调*/
    done : function(res, curr, count){
            $.each(res.type,function(index,item){
                  $('#demoReload').append(new Option(item.tradeName,item.tradeld));// 下拉菜单里添加元素
                  $('#ecordremar').append(new Option(item.tradeName,item.tradeld));// 下拉菜单里添加元素
              });
          
            form.render();//下拉菜单渲染 把内容加载进去
            
            
        }
    ,id: 'testReload'
    ,page: true
    ,height:300
    ,limit:5
  });
 
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
          /**
          *参数传递
          */
            id: demoReload.val(),//类型参数
            statime:$('#startTime').val(),//开始时间
            endTime:$('#endTime').val()//结束时间
          }
        }
      });
    }
    
  };
 
  table.on('tool(user)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
     
             //表单初始赋值
            $("input").val("");
            $("#recordno").attr("style","display:none;");//隐藏div
            form.render();
            layer.open({
            title:"添加"
            ,type:1
            ,moveOut:true
             ,content:$("#test")
            ,offset:['2%','40%']
            ,area:['400px','450px']
            ,btn:['提交','取消'],
            yes:function(index,layero){
                    //发送请求
                }
            
            })
    
    
    
      /* layer.msg('ID：'+ data.id + ' 的查看操作'); */
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        //这里发送请求
        });
    } else if(obj.event === 'edit'){
        layer.open({
            title:"修改"
            ,type:1
            ,moveOut:true
             ,content:$("#test")
            ,offset:['2%','40%']
            ,area:['400px','450px']
            ,btn:['提交','取消'],
            yes:function(index,layero){
                    //发送请求
                }
            
            })
        
                        //表单初始赋值
            form.val('example',data);
            $("#recordno").attr("style","display:block;");//隐藏div
            $("#recordno").attr('readonly','readonly');
            //渲染表单
            //时间范围
            layui.use('laydate',function(){
                var laydate = layui.laydate;
                    laydate.render({
                    elem:'#date1',
                    type:'datetime'
                });
            });  
                 form.render();
    }
  });
          
   
 
  $('.demoTable .layui-btn').on('click', function(){
      
    var type = $(this).data('type');
    if(type=='click'){
                        //表单初始赋值
            $("input").val("");
            form.render();
            layer.open({
            title:"添加"
            ,type:1
            ,moveOut:true
             ,content:$("#test")
            ,offset:['2%','40%']
            ,area:['400px','450px']
            ,btn:['提交','取消'],
            yes:function(index,layero){
                    //发送请求
                }
            
            })
    
    }
    active[type] ? active[type].call(this) : '';
     $('#demoReload').empty();
    $('#demoReload').append(new Option("请选择",''));
     form.render("select");//下拉菜单渲染 把内容加载进去
  });
});

layui.use('laydate', function(){
  var laydate = layui.laydate;
 
  //常规用法
  laydate.render({
    elem: '#startTime',
    type:'datetime'
  });
 
     //常规用法
  laydate.render({
    elem: '#endTime',
    type:'datetime'
  });
 
  });


</script>

</html>

-------------------------------后台java 代码---声明后台使用SSM框架 springBoot----------------------------------

工程结构

1.分页实体类

package com.csn.vo;


import java.util.Map;

import org.apache.ibatis.type.Alias;

import lombok.ToString;

/***
 * 开启分页
 * @author 23997
 * @date 2018-7-3 下午8:34:50
 *
 */
@Alias("PageInfo")
@ToString
public class PageInfo {
    private int  limit=10;//默认每页显示条数据
    private int page=1;//默认从第一页显示
    private int currentIndex;
    private Map<String,Object> key ;//类型编号
    public PageInfo() {
    }
    public int getLimit() {
        return limit;
    }
    public void setLimit(int limit) {
        this.limit = limit;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getCurrentIndex() {
        return (page-1)*limit;
    }
    public void setCurrentIndex(int currentIndex) {
        this.currentIndex = currentIndex;
    }
    public Map<String, Object> getKey() {
        return key;
    }
    public void setKey(Map<String, Object> key) {
        this.key = key;
    }
}

2。返回结果实体类

package com.csn.vo;
import lombok.Data;
import lombok.ToString;
import org.apache.ibatis.type.Alias;
@Alias("ResultModel")
@Data
@ToString
public class ResultModel {
    private int resultState=1;//默认返回状态为正确
    private String message;//返回提示语
    private Object obj;////返回结果
}

3,mapper 层接口

package com.csn.mapper;
import java.util.List;
import java.util.Map;
import com.csn.vo.PageInfo;

/***
 *易支付crud
 * @author 23997
 * @date 2018-7-3 下午8:27:49
 *
 */
public interface IYfbankMapper {
    
    /***
     * 查询数据展示首页
     * @return
     */
    List<Map> index(PageInfo page);
    /***
     * 获取类型
     * @return
     */
    List<Map> getTradeType();
    /***
     * 获取总数
     * @param page
     * @return
     */
    Map getCount(PageInfo page);
    
    

}

4.mybaties.xml sql实现

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.csn.mapper.IYfbankMapper">
    <sql id="s">
        <where>
        <if test="key!=null">
            <if test="key.id!=null">
                and t.tradeld =#{key.id}
            </if>
        </if>
        </where>
    </sql>
    <select id="index" resultType="map">
         select t.recordno,t.recordtime,t.recordmoney
        ,t.ecordremar,t.tradeld,ty.tradeName
        from tradeRecord t
        left join tradeType ty
        on t.tradeld=ty.tradeld
        <include refid="s"/>
        order by t.recordno desc  limit #{currentIndex},#{limit};
    </select>
    
    <select id="getCount" resultType="map">
        select count(t.recordno) count from tradeRecord t
        <include refid="s"/>
    </select>
    <select id="getTradeType" resultType="map">
        select tradeld,tradeName from tradeType
    </select>

</mapper>

5.封装了BaseService通用的返回类

package com.csn.service;

import com.csn.vo.ResultModel;

public class BaseService {
    public ResultModel returnSuccess(String message){
        ResultModel rm = new ResultModel();
        rm.setMessage(message);
        return rm;
    }
    public ResultModel returnSuccess(Object obj){
        ResultModel rm = new ResultModel();
        rm.setObj(obj);
        return rm;
    }
    
    public ResultModel returnSuccess(String message,Object obj){
        ResultModel rm = new ResultModel();
        rm.setMessage(message);
        rm.setObj(obj);
        return rm;
    }
    
    public ResultModel returnError(String message){
        ResultModel rm = new ResultModel();
        rm.setMessage(message);
        rm.setResultState(1);
        return rm;
    }
}

6.service服务层接口

package com.csn.service;
import java.util.Map;
import com.csn.vo.PageInfo;

/***
 * 服务层
 * @author 23997
 * @date 2018-7-3 下午9:00:58
 *
 */
public interface IYfbankService {
    /***
     * 主页显示
     * @return
     */
    Map index(PageInfo page);
    
}

7.service服务层实现类

package com.csn.service.impl;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.csn.mapper.IYfbankMapper;
import com.csn.service.BaseService;
import com.csn.service.IYfbankService;
import com.csn.vo.PageInfo;
@Service
public class YfbankMapperImpl extends BaseService implements IYfbankService {
    Map mp = new HashMap<>();
    @Autowired
    private IYfbankMapper bankMapper;
    @Override
    public Map index(PageInfo page) {
        List<Map> index = bankMapper.index(page);
        if(index.isEmpty()){
            //当数据为空时提示用户数据库为空
            mp.put("data",returnSuccess("对不起，数据为空"));

        }    //否则将数据返回

//mp装入的是layui默认的返回数据格式

            mp.put("data",index);
            mp.put("msg",1);
            mp.put("count",bankMapper.getCount(page));
            mp.put("code",0);
            mp.put("type",bankMapper.getTradeType());//这个例外是自己封装的数据类型
        /*    System.out.println(bankMapper.getTradeType());*/
        return mp;
    }

}
8.controller控制层代码
package com.csn.controller;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.csn.service.IYfbankService;
import com.csn.vo.PageInfo;
/***
 * YfbankMapper控制层
 * @author 23997
 * @date 2018-7-3 下午9:25:50
 *
 */
@RestController
public class YfbankMapperController {
    @Autowired
    private IYfbankService YfbankService;
    //将数据展示在首页
    @RequestMapping("index")
    public Map index(PageInfo page){
        try {
        return YfbankService.index(page);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
}
9.启动类

package com.csn;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.csn.mapper")
public class App {
        public static void main(String[] args) {
            SpringApplication.run(App.class, args);
        }
}