7

モデルが :updated = true の場合、インデックス ページに赤で行を表示したい。activeadminを使用してそれを行うにはどうすればよいですか?

どうも

4

4 に答える 4

17

Active Admin 1.0.0pre1 では、その行のレコードのプロパティに基づいて行クラスを指定できます。更新されたレコードを含む行にクラスを割り当てるには、更新チェック関数があると仮定して、次のように記述できますwas_updated?。

アプリ/管理者/my_model.rb

ActiveAdmin.register MyModel do

    ...

    index(:row_class => -> record { 'my-class' if record.was_updated? }) do

      # whatever columns you want:
      # selectable_column
      # id_column
      # column :attribute
      # actions
    end

    ...

end

この新しいオプションは、テーブルとしてインデックスを作成するためのソース コードでコメントされています。

ただし、Active Admin の SCSS は、テーブル行 (またはむしろテーブル データ) の色を指示する際に多くの特異性を使用するため、スタイルシートに書き込むだけでカスタム色で上書きすることはできません.my-class { background-color: red; }。ただし、次のことが機能することがわかりました。

アプリ/アセット/スタイルシート/active_admin.css.scss

...

tr.odd, tr.even {
    &.my-class {
        td.col {
            background-color: red;
        }
    }
}
于 2015-06-27T19:19:55.110 に答える
3

Active Admin のテーブル レンダリングは、次のようにハードコア化さActiveAdmin::Views::TableForれています。

  def build_table_body
    @tbody = tbody do
      # Build enough rows for our collection
      @collection.each{|_| tr(:class => cycle('odd', 'even'), :id => dom_id(_)) }
    end
  end

したがって、おそらく最も簡単な方法は、そのメソッドにモンキーパッチを適用することです。サブクラス化が役立つかどうかはわかりません。

于 2012-09-20T22:06:45.517 に答える
2

迅速なものが必要で、Activeadmin にモンキーパッチを適用する必要がない場合は、テーブル内に div を貼り付けることはできませんか? f exのように

table_for invoice.ccpayment do
  column 'Payments and payments attempts on this invoice: ' do |p|
    if p.paymentcomplete > 0
      div :class => 'green' do
        'Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    else
      div :class => 'red' do
        'FAILED Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    end
  end
end

これらのクラスは「activeadmin.css.scss」で簡単に定義できます

于 2013-09-22T15:39:44.907 に答える
0

私もそれをやりたかったのですが、私が見つけた最も簡単な方法は JavaScript を使用することでした もちろん、これは良い解決策ではありません。タグ\クラス\ID を中継していて、次のバージョンで ActiveAdmin のレンダリングが完全に変更される可能性があるからです...いくつかのテストケースを追加します。それで十分かもしれません

たとえば、評価列ごとに各行に色を付けたいと思いました

だから私はこのコードをファイルに入れました：A.js（もちろんapp\assets\javascriptsの下）

// A.js

$(document).ready(function() {

    $('td.rating').each(function(i,obj) {
        var rating = parseInt(obj.innerHTML);
        if (!isNaN(rating))
        {
            var rowcolor = ""
            if (rating<5)
            {
                rowcolor = "#FF0000"; //red
            }
            else
            {
                var red = Math.round(255-(rating-5)*51);
                var green = 255; 
                rowcolor = "#"+decimalToHex(red,2)+decimalToHex(green)+"00";
            }
            obj.parentElement.className = "";               
            obj.parentElement.setAttribute('style', '');
            obj.parentElement.style.background = rowcolor;
        }
    });

});

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;

    while (hex.length < padding) {
        hex = "0" + hex;
    }

    return hex;
};

そして私のActiveAdminモデルで

ActiveAdmin.register Bla do

  index do
    selectable_column
    column :rating
    <my other columns>
    default_actions
    script :src => javascript_path('A.js'), :type => "text/javascript"
  end
end

したがって、インデックスがレンダリングされた後、私の JS 関数は、評価列の値に応じてすべての行に色を付けます (0..4 の場合は赤 - 5..10 の場合は黄色..緑)。

ActiveAdmin 行の色分けの例

これが役立つことを願っています

于 2013-07-01T15:50:06.650 に答える