layui前端开发-记录一次弹窗嵌套表格功能的开发

1.碎碎念：

前端是真的难写哇，写的巨烂，毕竟平时很少写前端，很容易忘记。每次写都要抱着官方文档看，特此记录一下layui的使用。

大概就是打开一个弹窗实现一些button然后再渲染一个表格上去。

2.code：

<script type="text/html" id="noticeTablePanelTpl">
  <div class="layer-box layui-form">
    <div class="layui-btn-container">
      <div class="layui-btn layui-btn-sm layui-btn-danger h-mb0" onclick="App.delNoticeTableData()">删除</div>
    </div>
    <table id="noticeTable" lay-filter="noticeTable"></table>
  </div>
</script>
<!-- 缩略图模板 -->
<script type="text/html" id="masterImgTpl">
  <div class="center">
    <img class="table-img"  src="{{d.masterImg || '/platform/_ui/static/images/pic.png'}}">
  </div>
</script>
<script>
  var App = {};
  //存储表格的数据
  App.noticeTableData = [];

  //弹窗渲染
  App.showNoticeTablePanel = () => {
    if (App.noticeTableData.length == 0) {
      layui.layer.msg("请添加数据");
    } else {
      var maxH = $(document).height() > 800 ? ($(document).height()*0.8)+'px' : '600px'
      var maxW = $(document).width() > 1000 ? ($(document).width()*0.8)+'px' : '800px'
      var tableHeight = $(document).height() > 800 ? $(document).height() - 370 : 430 ;
      layui.layer.open({
        type: 1,
        title :'上新商品',
        area:[maxW,maxH],
        content :$("#noticeTablePanelTpl").html(),
        btn:['商品推送','关闭'],
        success:function(){
          App.showNoticeTable()
        },
        yes:function(index){
          var data = layui.table.checkStatus('noticeTable').data;
          if(data.length<=0){
            layui.layer.msg("请选择商品");
            return false
          }
          //上新推送事件
          。。。。。
          //删除推送成功的数据
          App.delNoticeTableDataEvent(data);
        }
      })

    }
  }
  //表格渲染，用了模板功能
  App.showNoticeTable = () => {
    var tableHeight = $(document).height() > 800 ? $(document).height() - 435 : 430 ;
    layui.table.render({
      elem: '#noticeTable'
      ,id:'noticeTable'
      ,height:tableHeight
      ,data:App.noticeTableData
      ,page: {theme: '#132836',limit:20,layout: ['prev', 'page', 'next','skip','count']}
      ,cols:  [[
        {checkbox: true}
        ,{field: 'pId', title: 'ID', width: 80,hide:true,align:'center'}
        ,{field: 'masterImg', title: '商品图',templet: '#masterImgTpl',height:80,align:'center'}
        ,{field: 'title', title: '商品名称',align:'center'}
        ,{field: 'productCode', title: '商品货号',align:'center'},
      ]]
    });
  }
    App.delNoticeTableData = () => {
    var data = layui.table.checkStatus('noticeTable').data;
    if(data.length == 0){
      layui.layer.msg("项目未选择");
      return false;
    }
    layui.layer.msg("确定删除？",{
      time: 20000, //20s后自动关闭
      btn: ['删除','取消'],
      yes:function(index){
        App.delNoticeTableDataEvent(data);
        layui.layer.msg('删除成功');
      }
    })
  }
  App.delNoticeTableDataEvent = (data) => {
    var param = [];
    $.each(data,function(index,item){
      param.push({
        id:item.pId,
      })
    });
    //删除逻辑
    for(var i = 0 ; i<App.noticeTableData.length;i++){
      $.each(param,function(index,item){
        if(item.id == App.noticeTableData[i].pId){
          App.noticeTableData.splice(i, 1)
        }
      });
    }
    App.showNoticeTable();
  }


</script>