在 rails ActiveAdmin 中编辑矩阵?
Matrix Edit in rails ActiveAdmin?
我在 Rails 中使用 ActiveAdmin。
我的用例类似于货币兑换:假设我有 10 种货币,一种货币可以兑换成另一种货币。为了支持编辑,我需要创建一个矩阵,行是CurrencyA,列是CurrencyB,值是从CurrencyA到CurrencyB的转换,像这样:
| | SGD | USD | HKD | CNY |
|-----|-----|-----|-----|-----|
| SGD | | | | |
| USD | | | | |
| HKD | | | | |
| CNY | | | | |
相应地,在我的数据库中,我有一个名为 currency_conversions
的 table,它有:
from_currency | to_currency | conversion_rate
(我的实际用例不是货币转换,但这个例子更能展示我的用例)
但是,我找不到 activeadmin 有这样的功能。有什么建议吗?
经过一番调查,我想通了
这是它的样子(数据是假的):
这是我所做的:
- 定义自定义控制器:http://activeadmin.info/docs/8-custom-actions.html,处理 get & post 请求
- 在视图中,准备table,它是一个表单
- 在
app/assets/stylesheets/active_admin.css.scss
中定义对应的CSS
此外,由于我今天获得了赞成票,让我在这里分享我的视图代码(它是 .html.slim
格式);我多次重复使用它:
/ Required params:
/ - headers -- the headers array. each item would be passed to the header_blk
/ - left_headers -- the array for the headers on the left side
/ - rows -- contents for the table
/ - col_blk -- a block to get the content needed for each column, where what passed in is the:
/ column, row_id, col_id
/ Optional params:
/ - banner_top_right -- the banner text you want to put at the top-right of the splitter
/ - banner_bottom_left -- the banner text you want to put at the bottom-left of the splitter
- banner_top_right ||= ""
- banner_bottom_left ||= ""
table.admin-matrix
thead
tr
td.diagonal-splitter
svg(width='100%' height='100%')
line(x1='0' y1='0' x2='100%' y2='100%' style='stroke:rgb(0,0,0);stroke-width=2')
.triangle-top-right = banner_top_right
.triangle-bottom-left = banner_bottom_left
- headers.each do |header|
td.header
= header
tbody
- rows.each_with_index do |row, rid|
tr
td.header = left_headers[rid]
- row.each_with_index do |col, cid|
td
- col_blk[col, rid, cid]
我在 Rails 中使用 ActiveAdmin。
我的用例类似于货币兑换:假设我有 10 种货币,一种货币可以兑换成另一种货币。为了支持编辑,我需要创建一个矩阵,行是CurrencyA,列是CurrencyB,值是从CurrencyA到CurrencyB的转换,像这样:
| | SGD | USD | HKD | CNY |
|-----|-----|-----|-----|-----|
| SGD | | | | |
| USD | | | | |
| HKD | | | | |
| CNY | | | | |
相应地,在我的数据库中,我有一个名为 currency_conversions
的 table,它有:
from_currency | to_currency | conversion_rate
(我的实际用例不是货币转换,但这个例子更能展示我的用例)
但是,我找不到 activeadmin 有这样的功能。有什么建议吗?
经过一番调查,我想通了
这是它的样子(数据是假的):
这是我所做的:
- 定义自定义控制器:http://activeadmin.info/docs/8-custom-actions.html,处理 get & post 请求
- 在视图中,准备table,它是一个表单
- 在
app/assets/stylesheets/active_admin.css.scss
中定义对应的CSS
此外,由于我今天获得了赞成票,让我在这里分享我的视图代码(它是 .html.slim
格式);我多次重复使用它:
/ Required params:
/ - headers -- the headers array. each item would be passed to the header_blk
/ - left_headers -- the array for the headers on the left side
/ - rows -- contents for the table
/ - col_blk -- a block to get the content needed for each column, where what passed in is the:
/ column, row_id, col_id
/ Optional params:
/ - banner_top_right -- the banner text you want to put at the top-right of the splitter
/ - banner_bottom_left -- the banner text you want to put at the bottom-left of the splitter
- banner_top_right ||= ""
- banner_bottom_left ||= ""
table.admin-matrix
thead
tr
td.diagonal-splitter
svg(width='100%' height='100%')
line(x1='0' y1='0' x2='100%' y2='100%' style='stroke:rgb(0,0,0);stroke-width=2')
.triangle-top-right = banner_top_right
.triangle-bottom-left = banner_bottom_left
- headers.each do |header|
td.header
= header
tbody
- rows.each_with_index do |row, rid|
tr
td.header = left_headers[rid]
- row.each_with_index do |col, cid|
td
- col_blk[col, rid, cid]