Генерируйте продолжительность, используя системную дату и другую дату из файла json на tabulator.info
Я использую http://tabulator.info/ для отображения таблицы из файла JSON.
JSON включает значения employee_id, entry_time, exit_time & duration.
Есть случаи, когда exit_time доступно (сотрудник ушел), и другие случаи, когда сотрудник еще не ушел, поэтому exit_time равно нулю.
Как можно сгенерировать столбец stay_duration, который представляет собой продолжительность между exit_time & entry_time, если exit действительно существует, в противном случае, если exit_time равен нулю, то stay_duration будет разницей между текущей системной датой и entry_time, показывающей длительность тиканья (с точностью до секунды) в чч: мм: сс формат?
employee_log.json:
[{"exit_time":null,"entry_time":"2018-Jul-11 17:21:52","employee_ID":"9589"},{"exit_time":"2018-Jul-11 17:03:17","entry_time":"2018-Jul-11 16:56:01","employee_ID":"2457"}]
index.html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="css/tabulator_semantic-ui.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div class="col-lg-12 hidden-xs">
<hr>
<div id="tabulator-example"></div>
<hr>
</div>
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
<body onload="startTime()">
<div id="datenow" title="datenow" style="width: 100%; text-align: center; height: 19px; position:fixed;bottom:0;"/>
<div id=tabulator-field class="tabulator-cell" role="gridcell" tabulator-field="datenow" title="datenow" style="width: 240px; text-align: center; height: 63px;">
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
</main>
<!-- jQuery -->
<script src="js/code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/code.jquery.com/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/maxcdn.bootstrapcdn.com/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/cdnjs.cloudflare.com/ajax/moment.js"></script>
<script src="js/cdn.rawgit.com/run_prettify14b7.js?style=desert"></script>
<script src="js/cdn.rawgit.com/lang-css.js"></script>
<script src="js/sparkline.js"></script>
<script src="js/tabulator/tabulator.min.js"></script>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
dd = checkTime(dd);
mm = checkTime(mm);
yyyy = checkTime(yyyy);
document.getElementById('datenow').innerHTML =
yyyy+'-'+mm+'-'+dd+' '+h+':'+m+':'+s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
var tabledata=[];
$.getJSON('./employee_log.json', function(response) {
//response is already a parsed JSON
$("#tabulator-example").tabulator("setData", response);
});
var genderEditor = function(cell, onRendered, success, cancel){
return editor;
};
$("#tabulator-example").tabulator({
layout:"fitColumns",
tooltips:true,
addRowPos:"top",
history:true,
pagination:"local",
paginationSize:20,
movableColumns:true,
resizableRows:true,
initialSort:[{column:"exit_time", dir:"desc"},],
data:tabledata,
columns:[
{title:"Employee ID", field:"employee_ID", width:240, headerFilter:"input"},
{title:"Entry Time", field:"entry_time", width:240, sorter:"datetime",sorterParams:{format:"YYYY-MMM-DD hh:mm:ss"}, align:"center",headerFilter:"input"},
{title:"Exit Time", field:"exit_time", width:240, sorter:"datetime",sorterParams:{format:"YYYY-MMM-DD hh:mm:ss"}, align:"center",headerFilter:"input"},
{title:"Stay Duration", field:"stay_duration", width:240, sorter:"string", align:"center",headerFilter:"input"},
],
});
$(window).resize(function(){
$("#tabulator-example").tabulator("redraw");
});
</script>
</body>
<footer></footer>
</html>
1 ответ
Если вы используете библиотеку момента, вы можете использовать для этого специальный форматер:
{title:"Duration", field:"duration", formatter:function(cell, formatterParams){
//cell - the cell component
//formatterParams - parameters set for the column
var data = cell.getData;
var start = moment(data.entry_time);
return moment.duration(start.diff()).humanize(); //return the difference;
},
}