LayUI 数据表格学习 实现新增一列显示等待时间 和进行删除操作时回显数据

1、templete的简单使用

cols列中的字段：完成一个等待时间长短不同，那么显示的颜色不一致的效果；
运用的知识点：layui中的模板知识，常规的正则表达式应用，时间格式的处理和获取
三元表达式的应用；
,{field: 'submitTime', title: '提交时间', width:164}
                ,{field: '', title: '等待时间', width:164, align:'center', style:'background-color:#f2f2f2',templet: d => {
                        if(d['submitTime'] != null && /^(0|1)$/.test(d.status)){
                            let submitTime = new Date().getTime() - new Date(d['submitTime'].replace(/-/g, '/')).getTime()
                                , h = 0
                                , m = 0
                                , s = 0;
                            // 获得小时
                            h = parseInt(submitTime / ( 1000 * 60 * 60));
                            submitTime = submitTime % ( 1000 * 60 * 60);
                            // 获得分钟
                            m = parseInt(submitTime / (1000 * 60))
                            submitTime = submitTime % ( 1000 * 60);
                            // 获得秒
                            s = parseInt(submitTime / 1000);
                            // 数据组装
                            let str = '';
                            str += h > 0 ? (h + '时 ') : '';
                            str += m > 0 ? (m + '分 ') : '';
                            str += s > 0 ? (s + '秒 ') : '';
                            // 颜色
                            return`

${str}

`;
                        }else{
                            return ' ';
                        }

 }}

页面效果：

2、删除时数据回显

//实现删除记录操作

删除时回显数据到弹出框当中：
运用到的知识：laytpl语法
类比el表达式和jstl表达式的语法，跟写脚本一样
可以拿table.render渲染的时候参数
追加一个友好性的确认提示，在这个确认提示当中，你还可以拿到
数据表格中所显示的数据，有时候可以简单的显示让用户有一个
大致删了什么东西

        $('#delBtn').on('click', function () {
            let tableData = 'pwdLogTable';
            let checkStatus = table.checkStatus(tableData);
            if (checkStatus.data.length > 0) {
                let seqs = [];
                $.each(checkStatus.data, function (i, item) {
                    if (item.seq) {
                        seqs.push(item.seq);
                    }
                })
                layer.confirm(`
           

将要删除${seqs.length}个操作记录，删除后不可恢复，是否执行？

           

---

           

               ${
                        laytpl(`
                        {{# layui.each(d, function(i, item){ }}
                           
• {{= item.userId }}

                           
• {{= item.userName }}

                             
• {{= item.createDatetime }}

                        {{# }) }}
                    `).render(checkStatus.data)
                        }
           

            `
                    , {skin: 'layui-layer-green'}
                    , (index, layero) => {
                        layer.close(index);
                        APP.ajax({
                            url: APP.systemPrefix('/doc/check_request/pwdLog/delete_by_seq'),
                            type: 'post',
                            dataType: 'json',
                            data: {seqs: seqs, 'loginKey': sessionStorage.getItem('account_login_key')},
                            success: function (result) {
                                layer.msg(result.msg);
                                if (result.code == 0) {
                                    let page = tablePage.currentPage;
                                    if (!(!table.checkStatus('pwdLogTable').isAll || tablePage.hasNext || !tablePage.hasPrevious)) {
                                        page -= 1;
                                    }
                                    ;
                                    table.reload('pwdLogTable', {page: {curr: page}});
                                }
                            }
                        })
                    }
                );