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