EasyUI中datagrid（数据表格）根据单元格内的数据日期与系统当前的日期作对比，然后改变另一个单元格的样式并计算出相差的天数

最新推荐文章于 2019-12-27 13:56:10 发布

最美是初见

最新推荐文章于 2019-12-27 13:56:10 发布

阅读量696

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EasyUI

本文链接：https://blog.youkuaiyun.com/weixin_43236850/article/details/99244369

EasyUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在EasyUI的datagrid组件中，通过对比单元格内的项目截止日期与系统当前日期，动态调整项目进度单元格的样式及显示剩余或超期天数，实现直观的项目进度监控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EasyUI中datagrid（数据表格）根据单元格内的数据日期与系统当前的日期作对比，然后改变另一个单元格的样式并计算出相差的天数

效果展示

根据数据表格中的截止日期与系统时间作对比，相比较作差，系统时间大于截止日期的，在项目进度一栏中添加一个红色的小方块，并显示超过项目期限xx天；系统时间小于截止日期并不超过7天的，在项目进度一栏中添加一个黄色的小方块，并显示距离项目期限还剩下xx天；系统时间小于截止日期并超过7天的，在项目进度一栏中添加一个绿色的小方块，并显示距离项目期限还剩下xx天。
在这里插入图片描述

具体实现代码

{
	field: 'schedule',
	title: '项目进度(%)',
	width: '220px',
	align: 'center',
	formatter: function(value, rowData, index) {
		function myDate() {//获取系统时间
			var now = new Date();
			var currentdate = now.getTime();
			return currentdate;
		}
		function dateDiff(firstDate, secondDate) {
			var firstDate = new Date(rowData.planEndTime);
			var secondDate = new Date(myDate());
			//取两个时间的毫秒差
			var diff = firstDate.getTime() - secondDate.getTime();
			var result = parseInt(diff / (1000 * 60 * 60 * 24));
			return result;
		}
		if (dateDiff() < 0) {
			return (
					'<div style="width:10px;height:10px;background-color:red;">' +
					'</div>' +
					'<span>' +
					'超过项目期限' +
					Math.abs(dateDiff()) +
				    '天' +
					'</span>'
					);
					} else if (dateDiff() <= 7 && dateDiff() >= 0) {
			return (
					'<div style="width:10px;height:10px;background-color:yellow;">' +
					'</div>' +
					'<span>' +
					'距离项目期限还剩下' +
					Math.abs(dateDiff() + 1) +
					'天' +
					'</span>'
				    );
				} else if (dateDiff() > 7) {
			return (
				   '<div style="width:10px;height:10px;background-color:green;">' +
				   '</div>' +
				   '<span>' +
				   '距离项目期限还剩下' +
					Math.abs(dateDiff() + 1) +
				   '天' +
				   '</span>'
				);
			}
		}
 }