ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道我找到了:

ag-grid 表格中添加图片-LMLPHP

看了说明发现很详细不过也很啰嗦,可以在https://www.ag-grid.com/javascript-grid-cell-rendering-components/#grid-vs-component-refresh看具体的说明,别急,我直接告诉你简单的方法:

首先可以利用 cellRenderer 来实现,比如在照片这一列中展示的是一组图片(最多展示四张):

ag-grid 表格中添加图片-LMLPHP

代码为:

cellRenderer: function(params) {
let array = params.value;
var resultElement = document.createElement("span");
var Length = array.length;
Length>?Length=:Length;
for (var i = ; i < Length; i++) {
var imageElement = document.createElement("img");
imageElement.src = array[i].url;
imageElement.style.width = +'px';
imageElement.style.height = +'px';
imageElement.style.marginLeft = +'px';
resultElement.appendChild(imageElement);
}
return resultElement;
},

数据格式为:

 finishDate:[
{
url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471521n.jpg'
},{
url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'
},{
url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'
},{
url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'
},{
url:'http://www.xinhuanet.com/photo/2018-07/18/1123141280_15318734471611n.jpg'
}
],

需要注意的是这里的params.value才指的是finishDate数组。

效果图为:

ag-grid 表格中添加图片-LMLPHP

注:图片链接来自网络

05-11 15:25
查看更多