layui 列表模板

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>哈咕哩商品列表</title><link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" /><link rel="stylesheet" href="../../../static/css/common.css" media="all" /><style>.optionsBox {padding-top: 10px;}/*.layui-table-cell{*//*height:auto!important;*//*white-space: normal;*//*}*/</style>
</head>
<div class="listContainer layui-form"><div class="searchBox"><div class="layui-input-inline">关键字：<div class="layui-input-inline"><input type="text" class="layui-input" id="keyword" autocomplete="off"></div></div><div class="layui-input-inline searchBtnBox"><button id="selectButton" class="layui-btn layui-btn-sm">搜索</button></div></div><div class="toolBox"><button class="layui-btn layui-btn-sm" id="massLaunch">批量上架</button><button class="layui-btn layui-btn-sm" id="BatchShelves">批量下架</button><button class="layui-btn layui-btn-sm" id="batchDel">批量删除</button><button id="addBtn" permission="sys:item:addoredit" onclick="add()" class="layui-btn layui-btn-sm">新增</button></div><table class="layui-hide" id="lay_table" lay-filter="categories"></table><!-- 操作按钮 --><div style="display: none" id="barTool"><a permission="sys:item:addoredit" class="layui-btn layui-btn-xs" lay-event="edit">详细/修改</a><a permission="sys:item:del" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a><!-- 审核 -->{{# if(d.checkStatus == 1){ }}<a permission="" class="layui-btn layui-btn-xs" lay-event="notice">审核</a> {{# }else{ }}<a permission="" class="layui-btn layui-btn-xs layui-btn-disabled">审核</a> {{# } }}<!-- 设为推荐商品 -->{{# if(d.isRecommend == "0"){ }}<a class="layui-btn layui-btn-xs" lay-event="sjoin" style="background-color: rgb(134,0,179);">设为推荐商品</a> {{# }else{ }}<a class="layui-btn layui-btn-xs" lay-event="sjoin" style="background-color: rgb(133,110,103);">取消推荐商品</a> {{# } }}<!-- 设为详情推荐商品 -->{{# if(d.recommendgoods == "0"){ }}<a class="layui-btn layui-btn-xs" lay-event="xjoin" style="background-color: rgb(134,0,179);">设为详情推荐商品</a> {{# }else{ }}<a class="layui-btn layui-btn-xs" lay-event="xjoin" style="background-color: rgb(133,110,103);">取消详情推荐商品</a> {{# } }}</div><!-- 商品类别转义 --><script id="statusInfo" type="text/html">{{# if(d.bannerType == 1 ){ }}<span>{{'二手市场'}}</span> {{# }else if(d.bannerType==2){ }}<span>{{'普通商城'}}</span> {{# }else if(d.bannerType==3){ }}<span>{{'平台币商城'}}</span> {{# }else if(d.bannerType==4){ }}<span>{{'本地工厂'}}</span> {{# }else if(d.bannerType==5){ }}<span>{{'定金预约'}}</span> {{# }else if(d.bannerType==6){ }}<span>{{'私人定制'}}</span> {{# } }}</script><!-- 审核状态转义 --><script id="AuditStatus" type="text/html">{{# if(d.checkStatus == 1 ){ }}<div>{{'待审核'}}</div> {{# }else if(d.checkStatus==2){ }}<span>{{'审核通过'}}</span> {{# }else if(d.checkStatus==3){ }}<span>{{'审核不通过'}}</span> {{# } }}</script><div class="layui-table-page"><!-- 分页工具 --><div id="paged" class="page"></div></div>
</div><body><script type="text/javascript" src="../../../static/js/libs/jquery-2.1.1.min.js"></script><script type="text/javascript" src="../../../static/layui/layui.js"></script><script type="text/javascript" src="../../../static/js/util.js"></script><script type="text/javascript" src="../../../static/js/common.js"></script><script type="text/javascript" src="../../../static/js/my/permission.js"></script><script>$(document).ready(function() {getData();$("#selectButton").click(function() {pageStart = 1;getData();});});var objdata;var pageStart = 1; //开始页数var pageTotal = 50; //每页显示数据条数var dataTotal = 0; //当前搜索条件下的所有数据总条数// 视频列表接口 function getData() {$.ajax({url: http + "/adminVideo/list",type: "POST",data: {pageStart: pageStart,pageTotal: pageTotal,keyWords: $('#keyword').val(),},success: function(res) {console.log(res);if (res.status == 'success') {dataTotal = res.result.pageCount;createTable(res.result.data);} else {successService(res);}}})}//表格函数function createTable(data) {layui.use(['table', 'laypage'], function() {var table = layui.table,laypage = layui.laypage;//表格渲染var colsArr = [{type: 'checkbox',fixed: 'left'}, {type: 'numbers',fixed: 'left',width: '50',title: '编号',align: 'center'}, {field: 'bannerType',width: '140',title: '商品类别',align: 'center',toolbar: '#statusInfo', //转义}, {field: 'itemCategoryName',width: '140',title: '商品类目',align: 'center',}, {field: 'userName',width: '120',title: '商家名称',align: 'center'}, {field: 'titleMain',width: '160',title: '商品主标题',align: 'center'}, {field: 'titleChild',width: '160',title: '商品子标题',align: 'center'}, {field: 'keywords',width: '160',title: '商品标题关键字',align: 'center'}, {field: 'readVolumn',width: '160',title: '浏览量',align: 'center'}, {field: 'fakeSalesVolume',width: '160',title: '虚拟月销量',align: 'center'}, {field: 'salesVolume',width: '160',title: '真实月销量',align: 'center'}, {field: 'securityCount',width: '160',title: '安全库存',align: 'center'}, {field: 'shelvesStatus',width: '160',title: '上架状态',align: 'center',templet: '<div>{{ d.shelvesStatus ==0? "下架":"上架"}}</div>', //转义}, {field: 'isRecommend',width: '160',title: '是否为推荐商品',align: 'center',templet: '<div>{{ d.isRecommend ==0? "否":"是"}}</div>', //转义}, {field: 'recommendgoods',width: '160',title: '是否为详情推荐商品',align: 'center',templet: '<div>{{ d.recommendgoods ==0? "否":"是"}}</div>', //转义}, {field: 'showOriginalprice',width: '160',title: '原价',align: 'center',}, {field: 'showDiscountprice',width: '160',title: '优惠价',align: 'center',}, {field: 'showSuggestedprice',width: '160',title: '建议零售价',align: 'center',}, {field: 'transferType',width: '160',title: '货运方式',align: 'center'}, {field: 'transferPrice',width: '160',title: '运费',align: 'center'}, {field: 'checkStatus',width: '100',title: '审核状态',align: 'center',toolbar: '#AuditStatus' //转义}, {fixed: 'right',title: '操作',width: '360',align: "left",toolbar: '#barTool'} //这里的toolbar值是模板元素的选择器]table.render({elem: '#lay_table',size: 'sm',height: 'full-' + ($(".searchBox").height() + $(".toolBox").height() + 65),cols: [colsArr],data: data //数据来源,limit: pageTotal,done: function() {hoverOpenImg();initLayuiTable($("#lay_table"), data, colsArr);}});table.on('sort(categories)', function(obj) { //排序后回调initLayuiTable($("#lay_table"), data, colsArr);});//调用分页laypage.render({elem: 'paged',count: dataTotal //这个是后台返回的数据的总条数,limit: pageTotal //每页显示的数据的条数,layui会根据count，limit进行分页的计算,,limits: [20, 50, 100, 200, 500],curr: pageStart,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],jump: function(obj, first) {pageTotal = obj.limit;pageStart = obj.curr; //当前第几页, pageStart就是多少if (!first) { //一定要加此判断，否则初始时会无限刷新getData(); //一定要把翻页的ajax请求放到这里，不然会请求两次。}}});//工具条操作按钮事件table.on('tool(categories)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据objdata = data;let ditemId = data.id;var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）switch (obj.event) {case 'edit':layer.open({type: 2,title: '编辑',area: ['95%', '95%'],content: ['./goodsEdit.html?status=1'],maxmin: true,moveOut: true,success: function(layero, index) {console.log(layero, index);console.log('layero, index');}})break;// 调用审核接口函数    case 'notice'://弹出审核的层layer.confirm('通过审核吗？', {btn: ['通过', '不通过'] //可以无限个按钮,}, function(index, layero) {//通过按钮的回调review(2, ditemId);layer.close(index);}, function(index) {//不通过按钮的回调review(3, ditemId);});break;//调用推荐商品的接口 传数据给 后台修改case 'sjoin':console.log('data');console.log(data);recommend(ditemId, 1);break;case 'xjoin':recommend(ditemId, 2);break;}});});}//修改推荐商品接口function recommend(itemId, recommendType) {$.ajax({url: http + '/adminItem/adminRecommendItem',data: {itemId: itemId,recommendType: recommendType},success: function(res) {getData();console.log('商品推荐')console.log(res)}})}// 审核接口function review(checkStatus, itemId) {$.ajax({url: http + '/adminItem/adminCheckItem',data: {checkStatus: checkStatus, //审核状态 2=审核通过 3=审核不通过itemId: itemId, //商品id},success: function(res) {console.log('res');console.log(res);// successService(res, null, null);if (res.status == 'success') {getData();} else {// successService(res, null, null);}}})// break;}//新增function add() {layer.open({type: 2,title: "添加商品",area: ['90%', '90%'],moveOut: true,content: ['goodsEdit.html?status=0'] //添加或更新开关0=添加1=更新,moveOut: true,});}</script>
</body></html>

layui 列表模板相关推荐

Layui列表分页功能前后台实现（傻瓜式教程）
Layui列表分页功能前后台实现 layui一直备受国内web开发者的喜欢.使用简单,样式也较为好看.本次说一下layui分页的实例,首先先引入layui,那是肯定的. 效果图: 引入一个maven依 ...
SharePonit 2010 更改另存为列表模板的语言类型
从朋友处得来一个列表模板:AccessApplicationSharePoint.stp 将其通过:网站操作----网站设置----列表模板,上传进去.然后去创建列表,发现找不到此模板. 根据多年老司 ...
stm32f10x_it.c 定义的程序列表模板（stm32f103x_it.c中放的是中断的空函数）
1.stm32f103x_it.c中放的是中断的空函数 2.STM32是如何进入中断程序的: 首先,程序是放在0x80000000-0x8001ffff FLASH所在的代码段内:SRAM从地 ...
html文字列表,文字列表模板
文字列表模板 1.如何编辑列表模板文字列表模板存放在模板包archive文件夹中,命名以list_text为前缀在模板包中找到list_text.html 模板,复制另存为一个新模板,命名为lis ...
layui 列表上面的switch开关切换
layui 列表上面的switch开关切换 HTML html <input type="checkbox" name="state" value = { ...
图片列表模板 html代码,图片列表模板
图片列表模板 1.如何编辑图片列表模板图片列表模板存放在模板包archive文件夹中,命名以list_pic为前缀在模板包中找到list_pic.html 模板,复制另存为一个新模板,命名为lis ...
帝国cms：评论列表模板中调用热门文章或是推荐文章的js方法
后台管理评论模板里有评论的列表模板,想在评论列表模板中调用热门文章或是推荐文章,现在考虑到标签和js. 长知识:动态模板无法使用标签,所以标签在这里就pass了,专心搞js----> 1.后台= ...
商品列表页面 html,商品列表模板
商品列表模板 1.如何编辑商品列表模板商品列表模板存放在模板包archive文件夹中,命名以list_product为前缀在模板包中找到list_product.html 模板,复制另存为一个新模 ...
列表找房（十）02-渲染列表模板
渲染列表模板列表样式调整 // find/index.scss .header 去掉绝对定位 /* position: absolute; */// Filter/index.module.css ...
小程序小程序列表模板
小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图 ! 中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深数据是死的弄成活的写for就可 ...

layui 列表 模板

layui 列表 模板相关推荐

最新文章

热门文章

layui 列表模板

layui 列表模板相关推荐