layu tab切换table
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相关推荐
- elementUI tab 切换 table表头消失
问题:利用elementUI tab 组件切换中,其中一个table表头消失 解决:开始以为 是table滚轮高度设置的不对,后来发现修改table高度后,第二个tab中表头依旧消失,最后查看样式,发 ...
- 解决:element切换tab时table的抖动问题
抖动可能原因: element有做自动检测适应. 页面出现重绘. v-for的key属性渲染不对. 百度提供的解决方案有: v-show改成v-if.由于本需求的所有tab下的表格均需要显示,所以不能 ...
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- 解决 elementUI 切换table后 el_table 固定列下方多了一条线
问题: element-ui 在tab选项卡的页面点击tab切换后,表格中若存在某一列使用了fixed属性固定,会在固定列的底部出现一行横条,如下图所示: 解决方法: 1.修改全局css 2.只修改局 ...
- 自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新
这是一篇记录型的技术杂文,记录了这段时间做的一些小模块样式,正文之前先记录一下html上下标的写法,转载自 https://blog.csdn.net/bingle14/article/details ...
- react 实现tab切换 三角形筛选样式
react 实现tab切换 三角形筛选样式 接下来上效果 这次使用的是react的class 类组件 import React, { Component } from 'react' import { ...
- VUE:使用element-ui的el-table时,自定义单元格内容,并tab快速切换指定编辑的单元格,而不是把所有能tab切换的都切换一遍
简介 操作 element-ui 的 el-table 时,想要快速tab切换光标到指定的列的输入框中,而不是把一行有聚焦的都tab切换选中一遍(如有el-button时,按tab切换也会切换到它上面 ...
- js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口
JavaScript跳转到指定页面并且到指定的tab切换窗口 案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的 ...
- js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
最新文章
- Electron Cash发布功能机BCH钱包,低端市场利好来袭
- 从头编写 asp.net core 2.0 web api 基础框架 (2)
- 电机控制系统php,电机控制系统的未来发展变化趋势
- linux连接svn上代码,代码管理平台介绍、安装svn、客户端上使用svn(linux)、客户端上使用svn(windows)...
- 除阿里、网易和字节外,杭州居然还有这么多互联网公司!
- ISA 2000与ISA 2004的区别
- 前端神器-网站图片抓取精灵V1.0正式发布
- 计算机操作系统出现死锁的原因
- 北航计算机专硕考研大纲,2017年北京航空航天大学609数学专业基础硕士研究生考试大纲...
- php 防挂马,织梦dedecms安全设置防挂马教程
- OSR推出在线SSL/TLS安全测试工具
- 银河麒麟桌面V10SP1安装nosqlbooster 可视化工具
- java的动物打一生肖,吉祥的动物是什么生肖 指哪个生肖 打一生肖
- 新建Excel无法打开解决办法
- Bentley 软件公司 Acceleration Fund 宣布成立 Bentley 下属公司 Virtuosity
- 液晶面板里面有些什么配件_液晶显示器参数和部件详细介绍
- 校准plc模拟量输入模块有什么方法
- 苹果市场占有率_苹果耳机销售速度超手机,占据TWS耳机半壁江山
- RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具
- Matplotlib-几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等,附有代码
热门文章
- Hoststool使用教程
- 11、借助POI实现Java生成并打印excel报表(2)
- 全球及中国牙科蜡分离剂行业研究及十四五规划分析报告
- DSP硬件设计学习之一: 硬件设计调研
- hdu 4597 2013吉林通化邀请赛 Play Game 记忆化搜索
- JWT黑名单和白名单
- VMware Tools 的dmg格式Download
- linux下使用苹果dmg格式文件 目前状态
- JAVA计算机毕业设计学术会议论文稿件管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
- excel用python数据分析_(转载)像Excel一样使用python进行数据分析