SlickGrid のセル (行 5、列 3 など) に「myClass」クラスを追加する方法を知っている人はいますか?
10 に答える
一部の行に特定の CSS クラスを追加するには、http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed で最近追加された「 rowClasses」オプションを使用し ます。
特定のセルに CSS クラスを追加することはできません。特定の列のすべてのセルにのみ追加できます。列定義で「cssClass」プロパティを使用してください。
おそらく、これら2つの組み合わせを使用できます。もう 1 つの方法は、カスタム フォーマッタを使用してセル内に内部 DIV を配置し、そこにクラスを設定することです。フォーマッタ内の行/セルにアクセスできるため、レンダリング方法を決定できます。
..
$('.slick-cell').addClass('myClass'); // adds "myClass" to all cells...
..
$('.slick-row[row=1] .slick-cell[cell=1]').addClass('myClass'); // adds "myClass" to 2nd column of the 2nd row...
注:行と列はゼロベースのインデックスです...
はい、行番号と列番号を使用して特定のセルにクラスを追加できます
$(getCellNode(RowNumber, ColumnNumber)).addClass("ClassName");
例:
$(getCellNode(5, 3)).addClass("invalid");
ティンの答えですが、現在はrowCssClassesと呼ばれています(そして、何らかの理由ですべての通常の行に加えて、「未定義」で数回呼び出されます;私は
if(row == undefined){ return '' }
それを乗り越えるためだけに。
私が見つけた最善の方法は、「asyncPostRender」プロパティを列フォーマッタに追加することです。これにより、セルがレンダリングされた後に非同期的に呼び出される関数を指定できます。その関数では、セル ノードと行データにアクセスできます。これは、セルの列全体ではなく、個々のセルに対して機能します。
var columns = [
{
id:'customer',
name:'Customer',
asyncPostRender: myObject.styleCustCell
}
];
myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
$(cellNode).addClass('myCustomerCssClass');
};
次のようなことを試してください:
$(function(){
$('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});
前述のように、cssClass プロパティを使用して、CSS クラスを列のすべてのセル (ヘッダーを除く) に追加できます。cssClass は文字列プロパティですが、洗練されたグリッド コードを少し変更して、代わりに関数/文字列のように動作させ、個々のセルに条件付きクラスを追加できます。これが例です(SlickGrid v2.1)
// appendCellHtml関数を変更して置き換えます
var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
(m.cssClass ? " " + m.cssClass : "");
と
var cssClass = $.isFunction(m.cssClass) ? m.cssClass(row, cell, null /* or value */, m, d) : m.cssClass;
var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
(cssClass ? " " + cssClass : "");
次に cssClass をフォーマッタとまったく同じように使用します。