一、HTML
<table class="layui-hide layui-table" id="spu-data"></table>
二、JS
说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等
<!-- 拼接图片 --> <script type="text/html" id="pimg"> <img class="img" onmouseover="divIn(event)" onmouseout="divOut(event)" onmousemove="divIn(event)" src="__PUBLIC__/{{d.pimgurl}}t_{{d.pimgname}}" alt=""> </script> <!-- 查看详情按钮 --> <script type="text/html" id="spu_detail"> <button class="layui-btn layui-btn-xs layui-btn-primary spu_detail" artnum="{{d.artnum}}" value="{{d.basic_id}}" onclick="spuDetail(event)">查看详情</button> </script> <script type="text/html" id="hotcake_color"> {{# if (d.hotcake === '超级爆款') { }} <span style="display: block;background-color: #CCFFCC;">{{ d.hotcake }}</span> {{# } else if(d.hotcake === '大爆款') { }} <span style="display: block;background-color: #99CCCC;">{{ d.hotcake }}</span> {{# } else if(d.hotcake === '小爆款') { }} <span style="display: block;background-color: #FFCCCC;">{{ d.hotcake }}</span> {{# } else if(d.hotcake === '热销款') { }} <span style="display: block;background-color: #FFFFCC;">{{ d.hotcake }}</span> {{# } else { }} <span style="display: block;background-color: #CCFFFF;">{{ d.hotcake }}</span> {{# } }} </script>
<script type="text/javascript"> layui.use(['form','laydate','layer','table','laytpl'],function(){ var laydate = layui.laydate; var layer = layui.layer; var table = layui.table; var laytpl = layui.laytpl; //---SPU数据--------------------------------------------- var spu_table = table.render({ elem: '#spu-data', //html中table窗口的id height: 800, url: '__URL__/spu_data', //后台接口 toolbar: true, loading: true, text: { none: '空空如也' }, title: 'spu数据', size: 'sm', page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], limit: 20, limits: [20,30,50,100,200,5000] }, cols: [[ {field:'n', title: 'i', width: 55}, {field:'', title: '图', width: 31, templet: '#pimg'}, // templet 引用laytpl中的自定义模板 {field:'', title: '查看详情', width: 120, templet: '#spu_detail'}, // 引用laytpl中的自定义模板 {field:'artnum', title: '货号', sort: true}, {field:'gcolor', title: '颜色组', sort: true}, {field:'cate', title: '品类', sort: true}, {field:'price', title: '业绩', sort: true}, {field:'sales', title: '销量', sort: true}, {field:'hotcake', title: '热销程度', templet: '#hotcake_color', sort: true}, {field:'sumcost', title: '商品成本', sort: true} ]] }); // 搜索重载数据 $('#spudata_search').click(function(){ // 获取日期的值 var date = $('#spusearch_date').val(); if (!date) { layer.msg('请选择日期区间搜索', { time: 2000 }); return false; } var perfor_val = $('#perfor_val').val();; var hot_type = $('#hot_type').val(); var artnum = $('#artnum').val(); var cate_id = $('#cate_id').val(); // 只选其一条件 if (perfor_val && hot_type) { layer.msg('业绩区间和爆款类型只选其一', { time: 2000 }); return false; } // 数据重载 spu_table.reload({ // 发送条件 where: { artnum: artnum, perfor_val: perfor_val, hot_type: hot_type, cate_id: cate_id, date: date, act: 'reload' }, page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], curr: 1 } }); }) }) </script>
内容版权声明:除非注明,否则皆为本站原创文章。