行の高さを設定する方法についてここに質問があることは知っています。私はそれらを読んで、彼らが提案することをしましたが、解決したい問題を実際に解決するものはありません. ユーザーは、グリッド上で一度により多くのデータを表示したいと考えています。そこで、行の高さを 15px 程度に変更してみました。
jqGrid は、23px 未満の行の高さを無視します。次のコードは、渡された高さの値が 23 以上の場合に機能します。
self.grid.setRowData(row[self.keyColumn], false, { height: cssRowHeight });
それよりも低い場合、html を調べると、行の高さが 21 ピクセルで、上下に 1 ピクセルの境界線があることがわかります。
私の質問は、jqGrid の行の高さを 23px 未満の値に設定するにはどうすればよいですか?
ありがとう、ジェローム
いい質問です！他のユーザーにとっては面白いと思います。
表示されるデモを見てください
次のCSSを使用しました。
.ui-jqgrid tr.jqgrow td { height: 15px; }
正確な結果は、使用する他のフォーメッターによって異なります。たとえば、列formatter: 'checkbox'が表示されている同じグリッド (ここを参照) は、特に IE ではそれほどコンパクトではありません。
元のグリッドよりコンパクトです (デモを参照してください)。
たとえば、コンボボックスを持つ行のサイズを小さくする必要がある場合は、次のような追加の CSS を使用する必要があります
.ui-jqgrid tr.jqgrow td { height: 15px; padding-top: 0px;}
.ui-jqgrid tr.jqgrow td input { padding: 0px; height: 11px; width: 11px; }
ここを参照してください。
次の css スタイルを jQGrid ファイルに inetrnal スタイルとして style タグの間に追加します。
<style>
.ui-jqgrid tr.jqgrow td{height:40px;}
</style>
グリッドの高さ、幅、フォント サイズ、およびフォント ファミリをカスタマイズするには、次のリンクを使用します。