5

我正在为 slickgrid 制作一个格式化程序，它将一个 url 显示为一个 img 标签。

由于涉及的复杂性和性能问题，slickgrid 不支持动态行高，但它允许通过选项设置全局行高。

var gridOptions = { rowHeight: 64 };

为了使图像以合理的方式适合，我想将 img 标签设置为与行高相同或略小于行高。

传递给格式化程序的 columnDef 和 dataContext 参数似乎都没有对父网格的引用，因此我不确定如何获取在网格选项上设置的行高。

我想避免不得不破解 slickgrid 脚本来通过我需要的东西，因为这会更新一个大的 PITA！

我可以声明格式化程序内联我猜并通过闭包拉入信息，但这不像以与默认格式化程序类似的方式实现的独立格式化程序那样可重用。但这可能是我现在要做的，直到出现更好的选择。

谁能给我任何提示或建议？

编辑：

这可以满足我的要求，但采用不可重复使用的方式。这不是大量的代码，但只需要编写一次仍然会很好。

var gridOptions = { rowHeight: 64 };
var gridImageFormatter = function ImageFormatter(row, cell, value, columnDef, dataContext) {
    return "<img src='" + value + "' style='width:auto;height=" + gridOptions.rowHeight + "' />";
};
var gridColumns = [
    {id: "Id", name: "Id", field: "id", width: 250 },
    {id: "Name", name: "Name", field: "name", width: 100 },
    {id: "Image", name: "Image", field: "image", width: 64, formatter: gridImageFormatter },
    {id: "Url", name: "Url", field: "url", width: 250 }
];

编辑2：

利用互联网的力量，我发现了一个很好的小技巧，如果图像大于可用空间，则可以使图像自动调整大小。

这不能使较小的图像延伸到给定的空间，但我可以忍受！

如何自动调整图像大小以适合 div 容器

这为我们提供了适用于大多数情况且可重用的东西：

function ImageFormatter(row, cell, value, columnDef, dataContext) {
    return "<img src='" + value + "' style='max-width:100%;max-height:100%' />";
}
4

0 回答 0