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="width: 735px;margin-top:3px"">
                     <label class="layui-form-label"> 请选择范围</label>
                     <div class="layui-input-block" style="width: 700px;">
                         <input type="text" id="startTime" class="layui-input"
                             placeholder="开始时间" style="width: 300px; display:inline;" /> <input
                             type="text" id="endTime" class="layui-input" placeholder="结束时间"
                             style="margin-left:20px; width: 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="width: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: '记录编号', width:200,fixed: true}
       ,{field:'recordtime', title: '记录时间', width:260}
       ,{field:'recordmoney', title: '变动金额', width:300}
       ,{field:'ecordremar', title: '类型', width:300}
       ,{fixed: 'right', width: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);
         }
 }