layui————一个页面展示两个页签
2024-06-01 11:42:23
html页面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="../../../build/css/base.css" media="all">
</head>
<body>
<div class="layui-tab layui-tab-card" lay-filter="rebateList"><ul class="layui-tab-title"><li class="layui-this" lay-id="1">已结算</li><li lay-id="2">待结算</li></ul><!--已结算--><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-form layui-form-pane search-form"><div class="layui-form-item layui-row form-two-item" > <div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >用户名</label><div class="layui-input-block"><input type="text" name="search[userName]" id="userName" autocomplete="off" placeholder="输入用户名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >姓名</label><div class="layui-input-block"><input type="text" name="search[customerName]" id="customerName" autocomplete="off" placeholder="输入姓名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >手机</label><div class="layui-input-block"><input type="text" name="search[telephone]" id="telephone" autocomplete="off" placeholder="输入手机号" class="layui-input" ></div></div><div class="layui-col-xs12 layui-col-sm12 layui-col-md12"><div style = "text-align:center;" id="search"><button class="layui-btn" data-type="reload">搜索</button><button class="layui-btn" onclick="javascript:location.replace(location.href);">重置</button></div></div></div></div><div style="margin:0;padding:0; width:auto;height:1px;background-color:#EAEAEA;overflow:hidden;"></div><div style = "text-align:left;margin-top: 10px;margin-left: 15px;"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary" id="dispose" data-kercode="190304" style="display: none"><i class="layui-icon"></i>结算</button><button class="layui-btn layui-btn-primary" id="export" data-kercode="19030104" style="display: none"><i class="layui-icon"></i>导出</button></div></div><table id="distributorRebateTable" lay-filter="distributorRebateTable"></table></div><!--未结算--><div class="layui-tab-item"><div class="layui-form layui-form-pane search-form"><div class="layui-form-item layui-row form-two-item" ><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >用户名</label><div class="layui-input-block"><input type="text" name="search[userName]" id="_userName" autocomplete="off" placeholder="输入用户名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >姓名</label><div class="layui-input-block"><input type="text" name="search[customerName]" id="_customerName" autocomplete="off" placeholder="输入姓名" class="layui-input" ></div></div><div class="layui-inline layui-col-xs10 layui-col-sm4 layui-col-md4" ><label class="layui-form-label" >手机</label><div class="layui-input-block"><input type="text" name="search[telephone]" id="_telephone" autocomplete="off" placeholder="输入手机号" class="layui-input" ></div></div><div class="layui-col-xs12 layui-col-sm12 layui-col-md12"><div style = "text-align:center;" id="searchNo"><button class="layui-btn" data-type="reload">搜索</button><button class="layui-btn" onclick="javascript:location.replace(location.href);">重置</button></div></div></div></div><div style="margin:0;padding:0; width:auto;height:1px;background-color:#EAEAEA;overflow:hidden;"></div><div style = "text-align:left;margin-top: 10px;margin-left: 15px;"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary" id="disposeNo" lay-event="disposeNo" data-kercode="190304" style="display: none"><i class="layui-icon"></i>结算</button><button class="layui-btn layui-btn-primary" id="exportNo" lay-event="exportNo" data-kercode="19030104" style="display: none"><i class="layui-icon"></i>导出</button></div></div><table id="distributorRebateNoTable" lay-filter="distributorRebateNoTable"></table></div></div>
</div>
<script type="text/html" id="distributorToolNo"><a class="info" data-kercode="19030103" lay-event="info" style="display: none"><i class="layui-icon icon-btn" title="详情"></i></a>
</script>
<script type="text/html" id="distributorTool"><a class="info" data-kercode="19030103" lay-event="info" style="display: none"><i class="layui-icon icon-btn" title="详情"></i></a>
</script>
<script type="text/html" id="distributorUserName"><a class="layui-table-link orderNumber" lay-event="distributorInfo" title="点击查看分销员基本信息">{{ d.userName }}</a>
</script>
<script src="../../../plugins/layui/layui.js"></script>
<script src="../../base.js"></script>
<script src="js/distributorRebateList.js"></script>
</body>
</html>
页签体现在该处
js代码
var valueTableActive;
layui.use(['table', 'laydate', 'layer', 'laytpl', 'common', 'element'], function () {var $ = layui.$;var table = layui.table;var laydate = layui.laydate;var laytpl = layui.laytpl;var form = layui.form;var common = layui.common;var element = layui.element;//初始化已结算的distributorRebateTables();var active = {reload: function () {var customerName = $('#customerName');//var customerCode = $('#customerCode');var telephone = $('#telephone');var userName = $('#userName');table.reload('searchReload', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#search .layui-btn').on('click', function () {var type = $(this).data('type');active[type] ? active[type].call(this) : '';});// 已结算function distributorRebateTables(){table.render({elem: '#distributorRebateTable',skin: 'row', // 行边框风格even: true, // 开启隔行背景cellMinWidth: 80,size: 'lg', // 小尺寸的表格url: url_order + 'api/distributorRebate/queryDistributorList?rebateStatus=Y',// 数据接口limit: 10,limits: [10, 20, 30, 50, 100, 200, 300, 500, 1000],//分页数据page: true, // 开启分页cols: [[ // 表头{type: 'checkbox',fixed: 'left', width:50},{type:'numbers' , title: '序号'},{field: 'supplierName', title: '发货经销商名称', width:200}// ,{field: 'distributorId', title: '分销员ID', width:300},{field: 'userName', title: '分销员用户名', width:150,toolbar: '#distributorUserName'},{field: 'customerName', title: '姓名', width:100}// ,{field: 'wechatAccount', title: '微信号', width:100},{field: 'telephone', title: '手机号', width:150},{field: 'disposedRebateTotal', title: '已结算总额', width:100}//,{field: 'noDisposedRebateTotal', title: '未结算总额', width:100},{field: 'bankAccount', title: '银行账号', width:100},{fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#distributorTool'}]],id: 'searchReload',done: function (res, curr, count) {powerButton('export', 'info');valueTableActive = {reload: function () {table.reload('searchReload');}};}});}// 未结算function distributorRebateNoTables(){table.render({elem: '#distributorRebateNoTable',skin: 'row', // 行边框风格even: true, // 开启隔行背景cellMinWidth: 80,size: 'lg', // 小尺寸的表格url: url_order + 'api/distributorRebate/queryDistributorList?rebateStatus=N',// 数据接口limit: 10,limits: [10, 20, 30, 50, 100, 200, 300, 500, 1000],//分页数据page: true, // 开启分页cols: [[ // 表头{type: 'checkbox',fixed: 'left', width:50},{type:'numbers' , title: '序号'},{field: 'supplierName', title: '发货经销商名称', width:200}// ,{field: 'distributorId', title: '分销员ID', width:300},{field: 'userName', title: '分销员用户名', width:150,toolbar: '#distributorUserName'},{field: 'customerName', title: '姓名', width:100}// ,{field: 'wechatAccount', title: '微信号', width:100},{field: 'telephone', title: '手机号', width:150},{field: 'noDisposedRebateTotal', title: '待结算总额', width:100},{field: 'bankAccount', title: '银行账号', width:100},{fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#distributorToolNo'}]],id: 'searchReloadNo',done: function (res, curr, count) {powerButton('disposeNo,exportNo', 'info');valueTableActive = {reload: function () {table.reload('searchReloadNo');}};}});}//初始页面定位到第一个页签element.tabChange('rebateList', '1');//监听Tab切换，以改变地址hash值element.on('tab(rebateList)', function(data){//console.log(data.index);if(data.index=="0"){//已结算返利distributorRebateTables();var $ = layui.$,active = {reload: function () {var customerName = $('#customerName');//var customerCode = $('#customerCode');var telephone = $('#telephone');var userName = $('#userName');table.reload('searchReload', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#search .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});}else if(data.index=="1"){//未结算返利distributorRebateNoTables();var $ = layui.$,active = {reload: function () {var customerName = $('#_customerName');//var customerCode = $('#customerCode');var telephone = $('#_telephone');var userName = $('#_userName');table.reload('searchReloadNo', {where: {customerName: customerName.val(),//customerCode: customerCode.val(),userName: userName.val(),telephone: telephone.val(),}});}};$('#searchNo .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});}});valueTableActive = {reload: function(){table.reload(distributorRebateTables());table.reload(distributorRebateNoTables());}};// 监听工具条——未结算table.on('tool(distributorRebateNoTable)', function (obj) {var data = obj.data;if (obj.event === 'info') {var index = layer.open({type: 2,title: ['<strong>待结算返利记录</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content: '../rebate/orderRebateNo.html?id=' + data.distributorId,end: function () {}});// 放大弹出层layer.full(index);}else if (obj.event === 'distributorInfo') {var index = layer.open({type: 2,title: ['<strong>分销员基本详情</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content:'../distributor/distributorInfo.html?id=' + data.id,end: function () {}});// 放大弹出层layer.full(index);}});// 监听工具条——已结算table.on('tool(distributorRebateTable)', function (obj) {var data = obj.data;if (obj.event === 'info') {var index = layer.open({type: 2,title: ['<strong>已结算返利记录</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content: '../rebate/orderRebate.html?id=' + data.distributorId,end: function () {}});// 放大弹出层layer.full(index);}else if (obj.event === 'distributorInfo') {var index = layer.open({type: 2,title: ['<strong>分销员基本详情</strong>', 'font-size: 20px;'], //shadeClose: false,shade: [0.3, '#000'],maxmin: true,area: ['700px', '400px'],content:'../distributor/distributorInfo.html?id=' + data.id,end: function () {}});// 放大弹出层layer.full(index);}});$('#export').on('click', function () {var checkStatus = table.checkStatus('searchReload');if (checkStatus.data.length === 0) {layer.msg('请最少选择一条数据');return;}var ids = [];for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);}common.ajaxDownloader({url: url_order + "api/distributorRebate/exportRebateInf?token=" + getToken()+"&rebateStatus=Y",data: {ids: ids.join(",")}});});$('#exportNo').on('click', function () {var checkStatus = table.checkStatus('searchReloadNo');if (checkStatus.data.length === 0) {layer.msg('请最少选择一条数据');return;}var ids = [];for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);}common.ajaxDownloader({url: url_order + "api/distributorRebate/exportRebateNoInf?token=" + getToken()+"&rebateStatus=N",data: {ids: ids.join(",")}});});$('#disposeNo').on('click', function () {var checkStatus = table.checkStatus('searchReloadNo');if (checkStatus.data.length === 0) {layer.msg("请至少选择一条数据", {icon: 5});return;}var ids = [];var changeTotals = [];var distributorIds = [];var rebateStatus = 'Y';//结算状态for (var i = 0; i < checkStatus.data.length; i++) {ids.push(checkStatus.data[i].id);changeTotals.push(checkStatus.data[i].noDisposedRebateTotal);distributorIds.push(checkStatus.data[i].distributorId);}var index = layer.confirm('确定要对此返利记录进行结算吗？', {btn: ['确定', '取消'],yes: function(index, layero){postDataByServiceURL(url_order, 'api/distributorRebate/editDistributorRebate', {ids: ids,rebateStatus:rebateStatus,changeTotals:changeTotals,distributorIds:distributorIds}, function (ads) {if(ads.code === 0){//刷新待结算页面element.tabChange('rebateList', '2');//active['reload'].call(this);layer.close(index);} else {layer.msg(ads.msg, {icon: 5});}});}});});
})
layui————一个页面展示两个页签相关推荐
- Vue-element tab选项卡二级页面返回缓存选中页签
需求 我的项目里,有个页面是两个选项卡,两个页签里稍有不同,用的组件,然后各个选项卡都有二级详情页,需求就是从二级详情页返回的时候,要返回上次选中的选项卡页签. 思路 在elementUI中,有一个默 ...
- java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
- 一个有价值的 Sharepoint WebPart 页签部件
一个有价值的 Sharepoint WebPart 页签部件: 能够像页签一样使用:使合适的 WebPart 部件 显示出来,隐蔽 其它 WebPart 部件. EasyTabParts.zip 转载 ...
- Android 一个页面上下两个ListView的页面显示
Android 一个页面上下两个ListView,当上面的ListView过长时,下面的List基本没有了滑动空间,查阅网上资料,解决办法基本是采用ScrollView做页面滑动,notifyData ...
- vue一个页面用两个以上页面 时时刷新
vue一个页面用两个以上页面刷新 <template><el-tabs v-model="activeName" style="padding-left ...
- 一个页面同时使用两个video标签自动播放在各个移动端浏览器存在的问题
双video标签(一个为背景,一个屏幕居中展示)在各大浏览器中存在的问题: 移动端 一.安卓端: 1.华为自带浏览器:两个视频可以同时自动播放,但自动播放时默认都是静音播放. 2.百度浏览器:上方视频 ...
- javascript笔记——点击按钮（或超链接）如何跳转到另外一个页面并执行目标页面的js函数...
页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...
- 一个页面添加两个swiper轮播
结构如下,每个'main-content'里都有一个'swiper-container'.(对于swiper插件自带的class名,我们在引用swiper的时候不要修改,如果要对样式做修改或者添加新的 ...
- open一个页面并关闭父页（小技巧）
几年前作的东西,突然忘了,想起来记一下 // String UrlStr = "Default.aspx"; // StringBuil ...
最新文章
- 以贴吧和头条为例，为什么产品都有极速版和标准版
- [MATLAB调试笔记]phase space plot
- python getattr_来一点Python面向对象第一级进阶的东西
- 虚拟主机不支持mysql_虚拟主机能用mysql么
- ggplot2箱式图两两比较_第十九章_使用ggplot2进行高级绘图
- java ee文件下载_JavaEE实现文件下载
- 江诗丹顿geneve系列_南京江诗丹顿维修保养多少钱石英手表清洗
- 关于MySQL buffer pool的预读机制
- PyTorch 1.0 中文文档：torch.sparse
- [bzoj 2017] [Usaco2009 Nov]硬币游戏
- JavaWeb——新闻管理系统(Jsp+Servlet)
- 敏感词库php数组,PHP 实现敏感词 / 停止词 过滤（附敏感词库）,敏感类词语大全...
- netware 6.5的故障解决
- stm32h7 串口idle_【STM32H7教程】第30章 STM32H7的USART应用之八个串口FIFO实现
- DDR的VTT电源应用及其优化
- 2020FME博客大赛——基于FME利用高德路径规划AP实现公共服务设施可达性分析——以厦门山海健康步道为例
- 【一级讲解】韩信点兵——中国剩余定理
- c++做题记录1 01:全面的MyString 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kB 描述 程序填空，输出指定结果
- 关于win10输入法问题（打不出中文）解决方法
- iOS 视频直播（一）