SOURCE

console 命令行工具 X clear

                    
>
console
const editRow = (dom) => {
    window.GridManager.updateRowData('demo-customizeCode', 'id', {id: window.parseInt(dom.getAttribute('data-id')), lastDate: new Date().getTime()});
};
document.querySelector('#table-demo-customizeCode').GM({
    gridManagerName: 'demo-customizeCode',
    ajaxData: 'https://www.lovejavascript.com/blogManager/getBlogList',
    ajaxType: 'POST',
    query: {pluginId: 1},
    supportAjaxPage: true,
    supportAdjust: false,
    supportDrag: false,
    columnData: [
        {
            key: 'pic',
            remind: 'the pic',
            width: '110px',
            align: 'center',
            text: '缩略图',
            // 使用函数返回 dom node
            template: function(pic, rowObject) {
                var picNode = document.createElement('a');
                picNode.setAttribute('href', 'https://www.lovejavascript.com/#!zone/blog/content.html?id='+rowObject.id);
                picNode.setAttribute('title', rowObject.title);
                picNode.setAttribute('target', '_blank');
                picNode.title = '点击阅读['+rowObject.title+']';
                picNode.style.display = 'block';
                picNode.style.height = '68.5px';

                var imgNode = document.createElement('img');
                imgNode.style.width = '100px';
                imgNode.style.padding = '5px';
                imgNode.style.margin = '0 auto';
                imgNode.alt = rowObject.title;
                imgNode.src = 'https://www.lovejavascript.com/'+pic;

                picNode.appendChild(imgNode);
                return picNode;
            }
        },{
            key: 'title',
            remind: 'the title',
            align: 'left',
            text: '标题',
            // 使用函数返回 dom node
            template: function(title, rowObject) {
                var titleNode = document.createElement('a');
                titleNode.setAttribute('href', 'https://www.lovejavascript.com/#!zone/blog/content.html?id='+rowObject.id);
                titleNode.setAttribute('title', title);
                titleNode.setAttribute('target', '_blank');
                titleNode.innerText = title;
                titleNode.title = '点击阅读['+rowObject.title+']';
                titleNode.classList.add('plugin-action');
                return titleNode;
            }
        },{
            key: 'type',
            remind: 'the type',
            text: '博文分类',
            width: '130px',
            align: 'center',
            // 使用函数返回 htmlString
            template: function(type, rowObject){
                // 博文类型
                const TYPE_MAP = {
                    '1': 'HTML/CSS',
                    '2': 'nodeJS',
                    '3': 'javaScript',
                    '4': '前端鸡汤',
                    '5': 'PM Coffee',
                    '6': '前端框架',
                    '7': '前端相关'
                };
                return TYPE_MAP[type];
            }
        },
        {
            key: 'createDate',
            width: '130px',
            text: '创建时间',
            // 使用函数返回 htmlString
            template: function(createDate, rowObject){
                return new Date(createDate).toLocaleDateString();
            }
        },
        {
            key: 'lastDate',
            width: '130px',
            text: '最后修改时间',
            merge: 'text',
            sorting: '',
            // 使用函数返回 htmlString
            template: function (lastDate, row) {
                return new Date(lastDate).toLocaleDateString();
            }
        },
         {
            key: 'action',
            remind: 'the action',
            align: 'center',
            width: '100px',
            disableCustomize: true,
            fixed: 'right',
            text: '<span style="color: red;">操作</span>',
            template: (action, row) => {
                return `<span class="plugin-action" data-id="${row.id}" onclick="editRow(this)">修改</span>`;
            }
        }
    ]
});
<div style="min-width:800px">
    <table id='table-demo-customizeCode'></table>
</div>

本项目引用的自定义外部资源