layui+spring实现增删改查-蒲公英云

在网上看了很多例子，感觉写得太日隆了，还是自己写一篇吧，希望能帮助大家!

如何想要代码的可以联系我

开发中会也是很多问题，不懂的也希望大家多交流

dome地址：https://download.csdn.net/download/hexu_blog/11998946

我这里使用的是springMVC+spring+mybatis+maven+eclipse

项目效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 3

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 4

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 5

1.先看一下项目架构

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 6

2.开始上代码,列表页面代码，红色部分是关键

 <div class="x-body">
     <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so bangdingBtn" >
           <label class="layui-form-label">权限名称:</label>
           <input type="text" name="rightname" id="sel_rightname"  placeholder="请输入权限名称" class="layui-input">
          <button type="button" class="layui-btn" style="vertical-align:top;"  data-type="search"><i class="layui-icon"></i>查询</button>
          <button type="button" class="layui-btn" style="vertical-align:top;"  data-type="reload"><i class="layui-icon"></i>重置</button>
        </form>
      </div>
      <xblock class="bangdingBtn">
        <button class="layui-btn" data-type="add" ><i class="layui-icon"></i>添加</button>
      </xblock>
     <table id="rightTable" lay-filter="rightlist" ></table>
    <script type="text/html" id="barManager">
      <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>
 </div>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 7

3.js文件，显示列表

layui.use(['table','layer','form'], function(){
    var table =layui.table;
    var layer=layui.layer;
    var form = layui.form;
      //第一个实例
     table.render({
        elem: '#rightTable'
        ,id:'rightinfo'
       // ,height: 312
        ,url: 'rightList' //数据接口
        ,page: true //开启分页
        ,limit: 10 //每页默认显示的数量
        ,limits:[5,10,20,30]
        ,cols: [[ //表头
           {field: 'rightid', title: 'rightid',  sort: true, fixed: 'left'}
          ,{field: 'rightname', title: '权限名称'}
          ,{field: 'icon', title: '图标',  sort: true}
          ,{field: 'sort', title: '序号'} 
          ,{field: 'isenabled', title: '状态',templet:function(d){
              if(d.isenabled=='0')
                  return "禁用";
              else
                  return "启用";
          }}
          ,{fixed: 'right', title:'操作',width: 165, align:'center', toolbar: '#barManager'}
        ]]
      ,page: true //是否显示分页
      });
});

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 8

4.添加开始

//上方菜单操作栏(查询、以及增加按钮 )

var $ = layui.$, active = {
       search: function () {//查询
            search(table);
        },reload:function(){//重置
            reload(table);
        }, add: function () { //添加
            addRight(table);
        }
     }
     //添加按钮绑定事件
     $('.bangdingBtn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
      });
     /*表格 行内操作(编辑  以及  删除 按钮操作)  */
      table.on('tool(rightlist)', function(obj){
          var data = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          if(layEvent === 'del'){ //删除
              delRightById(table,data);
          } else if(layEvent === 'edit'){ //编辑
              editRight(table,data);
          }
     });

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 9

/**
 * 打开添加页面
 */
function addRight(table){
    layer.open({
          title:"添加权限",
          type: 2,//0：信息框，默认1：页面层2：iframe层3：加载层4：tips层
          content: 'openAddRight', //这里是请求后台的地址
           area:['400px','250px']//设置高度宽度:宽度，高度
          ,btn: ['确定', '取消']
          ,success:function(layero,index){
           }
          ,yes: function(index, layero){
              var body = layer.getChildFrame('body', index);
              var rightname=  body.find('#rightname').val();
              var icon= body.find('#icon').val();
              if(rightname==null||rightname==''){
                  body.find('#rightname').focus();
                  layer.msg('权限名称不能为空', {icon: 0});
                  return false;
              }
              if(icon==null||icon==''){
                  body.find('#icon').focus();
                  layer.msg('图标不能为空', {icon: 0});
                  return false;
              }
          }
        });
}
后台
//打开添加权限页面
    @RequestMapping("/admin/openAddRight")
    public String openAddRight(){
        return "flatadmin/addRight";//返回到添加页面
    }

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 10

添加页面

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 11

ajax操作中的处理

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 12

修改和删除同理

最后说一下查询，重置的方法

/**
 * 搜索
 */
function search(table){
    //这里以搜索为例
    table.reload('rightinfo',{
      where: { //设定异步数据接口的额外参数，任意设
          rightname : $('#sel_rightname').val(),
      }
      ,page: {
        curr: 1 //重新从第 1 页开始
        //,limit:10
      }
    });
}
/**
 * 重置
 */
function reload(table){
    $('#sel_rightname').val("");
    var rightname=$('#sel_rightname').val();
    //这里以搜索为例
    table.reload('rightinfo',{
      where: { //设定异步数据接口的额外参数，任意设
          rightname :rightname ,
      }
      ,page: {
        curr: 1 //重新从第 1 页开始
        //,limit:10
      }
    });
}