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: '缩略图',
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: '标题',
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',
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: '创建时间',
template: function(createDate, rowObject){
return new Date(createDate).toLocaleDateString();
}
},
{
key: 'lastDate',
width: '130px',
text: '最后修改时间',
merge: 'text',
sorting: '',
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>