var table_box;
var table_box1;
$(function(){
table_box=$("#demo").clone();
table_box1=$("#demo1").clone()
showdemo(1);
});

function showdemo(num){
layui.use('table', function(){
var table = layui.table;

if(num==1){//第一个实例
table.render({
elem: '#demo'
,height: 'auto'
,method:'post'
,url: 'contract_pay_plan/getListTable' //数据接口
,page:true
,cols: [[ //表头
{field: 'contract_code', title: '合同编码', width:100, fixed: 'left'}
,{field: 'pay_plan_name', title: '付款计划名称', width:200}
,{field: 'pay_plan_date', title: '付款计划日期', width:160, templet:'<div>{{ Format(d.pay_plan_date,"yyyy-MM-dd hh:mm")}}</div>'}
,{field: 'pay_method', title: '结算方式', width:100}
,{field: 'pay_type', title: '付款类型', width: 100}
,{field: 'pay_amount', title: '付款金额', width: 140}
,{field: 'status', title: '状态', width: 100, templet:'<div>{{ status(d.status)}}</div>'}
,{field: 'pay_remark', title: '备注', width: 100}
,{field: 'pay_plan_paid_money', title: '付款计划已付金额', width: 200}
]]
})
} else{
//第二个实例
table.render({
elem: '#demo1'
,height: 'auto'
,method:'post'
,url: 'contract_pay_record/getListTable' //数据接口
,page:true
,cols: [[ //表头
{field: 'pay_name', title: '付款记录名称', width:200, fixed: 'left'}
,{field: 'pay_plan_name', title: '付款计划名称', width:200}
,{field: 'contract_code', title: '合同编码', width:160, templet:'<div>{{ Format(d.pay_plan_date,"yyyy-MM-dd hh:mm")}}</div>'}
,{field: 'pay_money', title: '付款金额', width:100}
,{field: 'pay_method', title: '结算方式', width: 100}
,{field: 'xm', title: '创建人', width: 140}
,{field: 'pay_date', title: '付款日期', width: 200,templet:'<div>{{ Format(d.pay_date,"yyyy-MM-dd hh:mm")}}</div>'}
]]
})}

});
}

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
var form = layui.form
,element = layui.element; //元素操作
element.on('tab(de)', function(data){

if(data.index==0){
$("#content").empty();
$("#content").html(table_box);
showdemo(1);
}
if(data.index==1){
$("#content").empty();
$("#content").html(table_box1);
showdemo(2);
}
});
});
function Format(datetime,fmt) {
if(datetime==null){
return '';
}
if (parseInt(datetime)==datetime) {
if (datetime.length==10) {
datetime=parseInt(datetime)*1000;
} else if(datetime.length==13) {
datetime=parseInt(datetime);
}
}
datetime=new Date(datetime);
var o = {
"M+" : datetime.getMonth()+1, //月份
"d+" : datetime.getDate(), //日
"h+" : datetime.getHours(), //小时
"m+" : datetime.getMinutes(), //分
"s+" : datetime.getSeconds(), //秒
"q+" : Math.floor((datetime.getMonth()+3)/3), //季度
"S" : datetime.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}

function status(obj){
if(obj==1)return "未付款";
else return"已付款";
}

转载于:https://www.cnblogs.com/java-llp/p/11132612.html

layu tab切换table相关推荐

  1. elementUI tab 切换 table表头消失

    问题:利用elementUI tab 组件切换中,其中一个table表头消失 解决:开始以为 是table滚轮高度设置的不对,后来发现修改table高度后,第二个tab中表头依旧消失,最后查看样式,发 ...

  2. 解决:element切换tab时table的抖动问题

    抖动可能原因: element有做自动检测适应. 页面出现重绘. v-for的key属性渲染不对. 百度提供的解决方案有: v-show改成v-if.由于本需求的所有tab下的表格均需要显示,所以不能 ...

  3. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  4. 解决 elementUI 切换table后 el_table 固定列下方多了一条线

    问题: element-ui 在tab选项卡的页面点击tab切换后,表格中若存在某一列使用了fixed属性固定,会在固定列的底部出现一行横条,如下图所示: 解决方法: 1.修改全局css 2.只修改局 ...

  5. 自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新

    这是一篇记录型的技术杂文,记录了这段时间做的一些小模块样式,正文之前先记录一下html上下标的写法,转载自 https://blog.csdn.net/bingle14/article/details ...

  6. react 实现tab切换 三角形筛选样式

    react 实现tab切换 三角形筛选样式 接下来上效果 这次使用的是react的class 类组件 import React, { Component } from 'react' import { ...

  7. VUE:使用element-ui的el-table时,自定义单元格内容,并tab快速切换指定编辑的单元格,而不是把所有能tab切换的都切换一遍

    简介 操作 element-ui 的 el-table 时,想要快速tab切换光标到指定的列的输入框中,而不是把一行有聚焦的都tab切换选中一遍(如有el-button时,按tab切换也会切换到它上面 ...

  8. js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口

    JavaScript跳转到指定页面并且到指定的tab切换窗口 案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的 ...

  9. js+css实例超漂亮tab切换选项卡代码

    效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

最新文章

  1. Electron Cash发布功能机BCH钱包,低端市场利好来袭
  2. 从头编写 asp.net core 2.0 web api 基础框架 (2)
  3. 电机控制系统php,电机控制系统的未来发展变化趋势
  4. linux连接svn上代码,代码管理平台介绍、安装svn、客户端上使用svn(linux)、客户端上使用svn(windows)...
  5. 除阿里、网易和字节外,杭州居然还有这么多互联网公司!
  6. ISA 2000与ISA 2004的区别
  7. 前端神器-网站图片抓取精灵V1.0正式发布
  8. 计算机操作系统出现死锁的原因
  9. 北航计算机专硕考研大纲,2017年北京航空航天大学609数学专业基础硕士研究生考试大纲...
  10. php 防挂马,织梦dedecms安全设置防挂马教程
  11. OSR推出在线SSL/TLS安全测试工具
  12. 银河麒麟桌面V10SP1安装nosqlbooster 可视化工具
  13. java的动物打一生肖,吉祥的动物是什么生肖 指哪个生肖 打一生肖
  14. 新建Excel无法打开解决办法
  15. Bentley 软件公司 Acceleration Fund 宣布成立 Bentley 下属公司 Virtuosity
  16. 液晶面板里面有些什么配件_液晶显示器参数和部件详细介绍
  17. 校准plc模拟量输入模块有什么方法
  18. 苹果市场占有率_苹果耳机销售速度超手机,占据TWS耳机半壁江山
  19. RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具
  20. Matplotlib-几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等,附有代码

热门文章

  1. Hoststool使用教程
  2. 11、借助POI实现Java生成并打印excel报表(2)
  3. 全球及中国牙科蜡分离剂行业研究及十四五规划分析报告
  4. DSP硬件设计学习之一: 硬件设计调研
  5. hdu 4597 2013吉林通化邀请赛 Play Game 记忆化搜索
  6. JWT黑名单和白名单
  7. VMware Tools 的dmg格式Download
  8. linux下使用苹果dmg格式文件 目前状态
  9. JAVA计算机毕业设计学术会议论文稿件管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
  10. excel用python数据分析_(转载)像Excel一样使用python进行数据分析