layui如何实现增删改查

最近这段时间，对layui的接触比较多，下面以供应商的增删改查为例记录下这段时间的学习成果，这次的增删改查体现了前后分离的思想 html->js->php->数据库->php->js->html 遇到的困难： 父窗体向子窗体传值[★★★☆☆] 子窗体向父窗体传值[★★★☆☆] layui表格数据的异步请求[★★★★★]

一、效果图奉上

- 查询：

layui查询演示

- 新增：

layui新增演示

- 修改：

layui修改演示

- 删除与批量删除：

1.删除

layui删除演示

2.批量删除

layui批量删除演示

二、实现流程奉上

先亮html代码

首先定义定义一个表格

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

定义表格头的工具（查询、新增、批量删除）

 <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>

定义每行操作操作栏（编辑，删除）

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