当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 20:36:22

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>