11

slickgrid テーブルの特定の行の背景色を変更し、他をそのままにする方法はありますか??? 私は使っています

for ( var i = 0; i < grid.length; i++) {
    rowIndex[i] = {
        price : "editable-col",
        qty : "editable-col",
        ccy : "buy-row",
        side : "buy-col",
        symbol : "buy-row",
        enable : "buy-row"
    };
}
grid.setCellCssStyles("", rowIndex);

ここで、「editable-col」、「buy-row」、および「buy-col」は、背景/前景などの色設定プロパティを含む CSS クラスです。特定の行の背景色を変更したいときはいつでも、変更する必要がありますグリッド全体の色に（グリッドの長さをループすることにより）、または特定の行のクラスを設定した場合など

rowIndex[5] = {
    price : "editable-col",
    qty : "editable-col",
    ccy : "buy-row",
    side : "buy-col",
    symbol : "buy-row",
    enable : "buy-row"
};
grid.setCellCssStyles("", rowIndex);

目的の行の css クラスを設定しますが、他の行のすべての css プロパティをクリアします。これを回避するには、他の行の css クラスもリセットする必要があります。これは、パフォーマンスと時間の点で良くないと思います。行。他の行に触れずにこれを行うより良い方法があるかどうか知りたいだけです。?? どんな助けでも大歓迎です。

4

2 に答える 2

18

を使用していると仮定すると、メソッドSlick.Data.DataViewを変更して、含まれている行要素にクラスを動的に追加できます。次に、行内の値に基づいて行のスタイルを変更するようにグリッドを設定するだけです。インスタンスが呼び出されたと仮定します：getItemMetadataSlick.Data.DataViewdataView

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(old_metadata) {
  return function(row) {
    var item = this.getItem(row);
    var meta = old_metadata(row) || {};

    if (item) {
      // Make sure the "cssClasses" property exists
      meta.cssClasses = meta.cssClasses || '';

      if (item.canBuy) {                    // If the row object has a truthy "canBuy" property
        meta.cssClasses += ' buy-row';      // add a class of "buy-row" to the row element.
      } // Note the leading ^ space.

      if (item.qty < 1) {                   // If the quantity (qty) for this item less than 1
        meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
      }

   /* Here is just a random example that will add an HTML class to the row element
      that is the value of your row's "rowClass" property. Be careful with this as
      you may run into issues if the "rowClass" property isn't a string or isn't a
      valid class name. */
      if (item.rowClass) {
        var myClass = ' '+item.rowClass;
        meta.cssClasses += myClass;
      }
    }

    return meta;
  }
}

これにより、「buy-row」クラスを行に動的に追加できます。関数を変更して、異なるクラスに複数の条件を持たせることができます。ただし、すべての行の CSS クラスは、行オブジェクトのプロパティに基づいて条件付きになることに注意してください。ここret.cssClassesが鍵です。行 HTML: に出力される文字列です<div class="[ret.cssClasses]">。

行のクラスを変更するには、次のようにします。

var row = dataView.getItem(5);

row.canBuy = true;
dataView.updateItem(row.id, row);
// The row element should now have a class of "buy-row" on it.

row.canBuy = false;
row.qty = 0;
dataView.updateItem(row.id, row);
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone.

row.qty = 10;
row.rowClass = 'blue';
dataView.updateItem(row.id, row);
// It should now have a class of "blue" and the "out-of-stock" class should be gone.
于 2013-11-14T18:11:44.750 に答える
0

はい、1 つの方法は単純に jQuery を使用することです。

var rowNumber = 3;
$($('.grid-canvas').children()[rowNumber]).css('background-color','red');

アップデート

永続的な強調表示を行うには、getItemMetadata 関数を実装する必要があります。次のように実行できます。

html

<div style="width:600px;">
    <div id="myGrid" style="width:100%;height:500px;"></div>
</div>

CSS

.highlight{
    background-color: #ff0000 !important;
}

JavaScript

var grid;
var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];

var data = [];
for (var i = 0; i < 500; i++) {
    data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
    };
}
data.getItemMetadata = function (row) {

    if (this[row].title == 'Task 5'){
        return {
            cssClasses: 'highlight'

        };

    }
    return null;

}
grid = new Slick.Grid("#myGrid", data, columns, { enableColumnReorder: false });
于 2013-11-14T16:17:33.700 に答える