layui+spring實現增刪改查

在網上看了很多例子，感覺寫得太日隆了，還是自己寫一篇吧，希望能幫助大家!

如何想要代碼的可以聯繫我

開發中會也是很多問題，不懂的也希望大家多交流

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

我這裏使用的是springMVC+spring+mybatis+maven+eclipse

項目效果

1.先看一下項目架構

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">&#xe615;</i>查詢</button>
          <button type="button" class="layui-btn" style="vertical-align:top;"  data-type="reload"><i class="layui-icon">&#xe666;</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>

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 //是否顯示分頁
      });

});

 

 

 

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);
          }
   
     });

/**
 * 打開添加頁面
 */
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";//返回到添加頁面
    }

添加頁面

ajax操作中的處理

修改和刪除同理

最後說一下查詢，重置的方法

/**
 * 搜索
 */
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
      }
    });
}