layui的增刪改查案例

最近這段時間，對layui的接觸比較多，下面以供應商的增刪改查爲例記錄下這段時間的學習成果，這次的增刪改查體現了前後分離的思想
html->js->php->數據庫->php->js->html
遇到的困難：
父窗體向子窗體傳值[★★★☆☆]
子窗體向父窗體傳值[★★★☆☆]
layui表格數據的異步請求[★★★★★]

一、效果圖奉上

- 查詢：

- 新增：

- 修改：

- 刪除與批量刪除：

1.刪除

2.批量刪除

二、實現流程奉上

先亮html代碼

1. 首先定義定義一個表格

<table class="layui-table" id="supplier" lay-filter="supplier"></table>

2. 定義表格頭的工具（查詢、新增、批量刪除）

<div class="layui-inline">
   <input type="text" value="" placeholder="請輸入供應商名稱" class="layui-input search_input" id="sm_no">
    </div>
    <div class="layui-inline">   
      <button class="layui-btn layui-btn-sm" id="serch_btn" onclick="serch_btn()">查詢</button>
      <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
      <button class="layui-btn layui-btn-sm" lay-event="del">批量刪除</button>
    </div>

3. 定義每行操作操作欄（編輯，刪除）

<script type="text/html" id="bars">
      <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>

實現方法

1. 查詢：

Tab_name：需要查詢的數據庫表名
sm_no：獲取搜索框的值
Titles：查詢數據庫的條件語句
然後通過post把表名、查詢語句傳給php，查詢後返回數據data1
通過table.reload把查詢到的數據重載回數據表格

function serch_btn() {
 layui.use(['element','table','laydate','form'],function(){
  var table=layui.table;
  var Tab_name = "S_SM";
  var sm_no = $("#sm_no").val();
  var Titles = " where sm_people like '" + sm_no + "%' order by SUBSTRING(sm_id,4,11) ";
  // alert("1");
  $.post("../../php/Tab_query.php", {
    'Tab_Name': Tab_name,
    'Cont': Titles
   },
   function(data1) {
    // alert(data1);
    console.log(data1);
    table.reload('tableall', {      
      // "code":0,
      // "msg":"",
      // "count":data1.length,
      "data":data1
    });
   },
   "json");
 })
} 

2. 新增

先打開一個彈窗，加載新增頁面（./addsupplier.html）

//===================新增供應商==============================
  table.on('toolbar(supplier)', function(obj) {
   var checkStatus = table.checkStatus(obj.config.id);
   var data = checkStatus.data;
   switch (obj.event) {
   case 'add':
    layer.open({
     type : 2,
     title : "供應商添加",
     area : [ '30%', '60%' ],
     content : './addsupplier.html',
    });
    break;
   };   
  });

然後通過serializeArray()獲得輸入的值並通過post把表名，新增數據傳給php
Tab_name：要新增數據的數據庫表名
values：需要新增的數據

難點：新增完後需要關閉彈窗，也就是需要子窗體操控父窗體關閉纔行
查了好多資料才發現用parent可以操縱父窗體
即：parent.layer.close(index)

var form = layui.form;
      layer = layui.layer; 
      //監聽提交
      form.on('submit(enadd)', function(data) {          
       var values=$(data.form).serializeArray();
       var Tab_name="S_SM";
       var ii=values.length;
	$.post('../../php/Form_save.php',{'atr':values,'Tab_name':Tab_name,'len':ii},
         function(data){       
          $('#msg').html(data);
         },"json");        
        var index = parent.layer.getFrameIndex(window.name);//獲取窗口索引
        parent.layer.close(index);//關閉彈出層
        parent.layui.layer.msg("添加成功");
        parent.serch_btn();//重新加載頁面表格 
      })

3. 修改

首先打開彈窗，並把需要修改行的值賦值給彈窗頁面

//===================修改供應商===================
  table.on('tool(supplier)', function(obj) {
   if (obj.event === 'edit') {
    layer.open({
     type : 2,
     title : "修改供應商信息",
     area : [ '30%', '60%' ],
     content : './displaysupplier.html',
     success : function(layero, index) {
      var body = layer.getChildFrame('body', index);
      body.find('#sm_id').val(data.sm_id);
      body.find('#sm_people').val(data.sm_people);
      body.find('#sm_phone').val(data.sm_phone);
      body.find('#sm_company').val(data.sm_company);      
      
     }
    });
   }
  });

然後修改彈窗頁面的值，並通過post把數據庫表名，要修改的值傳到php
修改成功後關閉彈窗，並重新加載表格

var form = layui.form;
      layer = layui.layer;        
      //監聽提交
      form.on('submit(display)', function(data) {          
       var values=$(data.form).serializeArray();
       var Tab_name="S_SM";
       var ii=values.length;
  	 $.post('../../php/Form_save.php'，
	{'atr':values,'Tab_name':Tab_name,'len':ii},
         function(data){
          alert("1");
          $('#msg').html(data);
         },"json");    
        var index = parent.layer.getFrameIndex(window.name);//獲取窗口索引
        parent.layer.close(index);//關閉彈出層
        parent.layui.layer.msg("修改成功");
        parent.serch_btn();//重新加載頁面表格
  
      })

4. 刪除和批量刪除

刪除
co_no:需要刪除行的sm_id值
Tab_Name：需要操作的數據表名
Cont：數據庫語句
把表名，數據庫語句傳到php，由php執行刪除操作

//===================刪除供應商======================
  table.on('tool(supplier)', function(obj) {
   var data = obj.data;
   console.log(data.sm_id)
   if (obj.event === 'del') {
    layer.confirm('確定刪除此供應商?', function(index) {
     obj.del();
     layer.close(index);
     var co_no = data.sm_id;
     var Tab_Name = "S_SM";
     var Cont = " Where sm_id = '" + co_no + "'";     
     $.post('../../php/Tab_delete.php',{'Tab_Name':Tab_Name,'Cont':Cont}); 
     layer.msg("刪除成功");
     serch_btn();
    });
   }
  });

批量刪除
checkStatus.data：獲取表格中複選框選中的數據（通過複選框選中多條數據）
Tab_Name：需要操作的數據表名
Cont：數據庫語句
再通過for循環把每條數據的sm_id，然後再通過post把表名，數據庫語句傳到php中，由php執行刪除操作

//===================批量刪除=================================
  table.on('toolbar(supplier)', function(obj) {
   var checkStatus = table.checkStatus(obj.config.id);
   var data = checkStatus.data;
   switch (obj.event) {
   case 'del':
   console.log(checkStatus);
    if(data.length!=0){
     layer.confirm('確定刪除選中的信息？',{icon:3, title:'提示信息'},function(index){
       //刪除數據
       for(var j=0;j<data.length;j++){
        var id = data[j].sm_id;
        console.log(id);
        var Tab_Name = "S_SM";
        var Cont = " Where sm_id = '" + id + "'";              
        $.post('../../php/Tab_delete.php',{'Tab_Name':Tab_Name,'Cont':Cont});
        }
       layer.close(index);
       layer.msg("刪除成功");
       serch_btn();
     })
    }else{
     layer.msg("請選擇需要刪除的供應商");
    }
   break;
   };   
  });