Question

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

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

var gridOptions = { rowHeight: 64 };

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

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

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

我可以通过闭包来声明格式化内联，然后通过闭包来提取信息，但这并不像在默认格式化程序的类似操作符号中表现出来的独立格式化程序那样可重用。但这可能是我现在要做的事情，直到有更好的选择出现。

任何人都可以给我任何提示或建议吗？

编辑：

这是我想要的，但是在一个不可重复使用的mannor中。它不是大量的代码，但只需要编写一次就可以了。

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：

利用互联网的力量，我找到了一个很好的小技巧，可以让图像自动调整，如果它们比可用空间更大。

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

How do I auto-resize an image to fit a div container

这给了我们一些适用于大多数情况并可重复使用的东西：

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

如何在slickgrid格式化程序中获取行高？

0 个答案: