SOURCE

document.querySelector('#table-demo-foldCode').GM({
    gridManagerName: 'demo-foldCode',
    ajaxData: 'https://www.lovejavascript.com/blogManager/getBlogList',
    disableLine:true,
    autoOrderConfig: {
        fixed: 'left'  
    },
    checkboxConfig: {
        fixed: 'left'  
    },
    fullColumn: {
        useFold: true,
        fixed: 'left', // 折叠事件列固定方向
        bottomTemplate: function(row, index){
            const createDate = new Date(row.createDate).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            const lastDate = new Date(row.lastDate).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            return  '<div class="table-form">'
            + '<div class="tf-photo"><img src="https://www.lovejavascript.com/'+ row.photo +'"/></div>'
            + '<div class="tf-text">'
            + '<div class="tf-el"><label>作者:</label>'+ row.username +'</div>'    
            + '<div class="tf-el"><label>github:</label>https://github.com/baukh789</div>'
            + '</div>'
            + '<div class="tf-text">'
            + '<div class="tf-el"><label>阅读量:</label>'+ row.readNumber +'</div>'
            + '<div class="tf-el"><label>点赞量:</label>'+ row.praiseNumber +'</div>'
            + '<div class="tf-el"><label>评论量:</label>'+ row.commentSum +'</div>'
            + '</div>'
            + '<div class="tf-text">'
            + '<div class="tf-el"><label>创建时间:</label>'+ createDate +'</div>'
            + '<div class="tf-el"><label>修改时间:</label>'+ lastDate +'</div>'
            + '</div>'
            + '</div>';
        }
    },
    ajaxType: 'POST',
    query: {pluginId: 1},
    supportAjaxPage: true,
    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();
            }
        }
    ]
})

<div style="min-width:800px">
    <table id='table-demo-foldCode'></table>
</div>

.table-form{
    display: flex;
    padding: 14px 100px;
}
.tf-photo{
    width: 60px;
    height: 60px;
}
.tf-photo img{
    width: 60px;
    border: 1px solid #eee;
    border-radius: 50%;
}
.tf-text{
    width: 240px;
    padding-left: 10px
}
.tf-el{
    line-height: 30px;
}
.tf-el label{
    display: inline-block;
    width: 50px;
    color: #666;
    margin-right: 10px;
    text-align: right;
    font-weight: 600;
}