URLをimgタグとして表示するslickgridのフォーマッタを作成しています。
複雑さとパフォーマンスの問題が関係しているため、slickgrid は動的な行の高さをサポートしていませんが、オプションを介してグローバルな行の高さを設定できます。
var gridOptions = { rowHeight: 64 };
画像を適切な方法でフィットさせるには、img タグを行の高さと同じか、それよりもわずかに小さく設定します。
フォーマッタに渡される columnDef パラメータも dataContext パラメータも親グリッドへの参照を持っていないように見えるため、グリッド オプションで設定された行の高さを取得する方法がわかりません。
slickgrid スクリプトをハックして必要なものを通過させる必要がないようにしたいのですが、これにより大きな PITA が更新されます。
フォーマッターをインラインで宣言し、クロージャーを介して情報を取得することもできますが、これは、デフォルトのフォーマッターと同様の方法で実装されたスタンドアロンのフォーマッターほど再利用可能ではありません。しかし、これはおそらく、より良いオプションが提示されるまで、私がやっていることです.
誰でもヒントや提案を教えてもらえますか?
編集：
これは私が望むことをしますが、再利用できない方法で行います。大量のコードではありませんが、1 回だけ記述すればよいことは確かです。
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：
インターネットの力を利用して、画像が利用可能なスペースよりも大きい場合に画像を自動サイズ調整するためのちょっとしたトリックを見つけました。
これは、小さな画像を指定されたスペースに伸ばすには機能しませんが、私はそれでうまくいきます!
そして、これにより、ほとんどの場合に機能し、再利用可能なものが得られます。
function ImageFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='" + value + "' style='max-width:100%;max-height:100%' />";
}