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

所以可能最简单的方法是对该方法进行monkeypatch。我不知道子类化是否有帮助。

于 2012-09-20T22:06:45.517 回答
2

如果你只是想要一些快速的东西，并且不需要猴子补丁 Activeadmin，你不能把 div 贴在你的桌子上吗？喜欢前任

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 当然这不是一个好的解决方案，因为我在标签 \ 类 \ ids 上进行中继，并且 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 回答