0

我正在使用tabulator.info显示 json 文件中的表格。

json 包括employee_id、entry_time、exit_time 和duration。

在某些情况下，exit_time 可用（员工确实退出了），而在其他情况下，员工尚未离开，因此 exit_time 为空。

如果exit确实存在，如何生成列stay_duration，它是exit_time和entry_time之间的持续时间，否则如果exit_time为null，那么stay_duration将是当前系统日期和entry_time之间的差异，以hh显示滴答持续时间（按秒计）： mm:ss 格式？

员工日志.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"}]

索引.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>
4

1 回答 1

0

如果您使用时刻日期库，您可以为此使用自定义格式化程序：

{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;
    },
}
于 2018-09-24T20:28:45.130 回答