【发布时间】:2016-10-03 00:47:27
【问题描述】:
我正在尝试在 Elm 中设计一个功能,该功能可以解析来自 Json 的数据,然后将其呈现在可排序的表中。
当然,我使用解码器将 Json 数据存储在记录列表中;然后在视图中,我将记录列表转换为字典列表,因为我想遍历网格中的数据。我还使用 str 列表,columns,为网格中的列赋予标题,以确保数据在网格中出现的顺序是可定制的。
resourceDecoder : Decoder Resource
resourceDecoder =
decode Resource
|> required "year" int
|> required "total_amount" string
|> required "seq_type" string
|> required "sent" bool
|> required "parents_id" int
|> required "month" int
|> required "location_id" int
|> required "child" childDecoder
|> required "id" int
childDecoder : Decoder Child
childDecoder =
decode Child
|> required "firstname" string
|> required "lastname" string
responseDecoder : Decoder (List Resource)
responseDecoder =
Json.Decode.list resourceDecoder
recordToDict : Resource -> ResourceDict
recordToDict record =
Dict.fromList
[ ( "Year", toString record.year )
, ( "Total Amount", record.total_amount )
, ( "Sequence Type", record.seq_type )
, ( "Sent", toString record.sent )
, ( "Parents", toString record.parents_id )
, ( "Month", toString record.month )
, ( "Location", toString record.location_id )
, ( "Firstname", record.child.firstname )
, ( "Lastname", record.child.lastname )
, ( "id", toString record.id )
]
columnsData : List String
columnsData =
[ "Firstname"
, "Lastname"
, "Year"
, "Total Amount"
, "Sequence Type"
, "Sent"
, "Parents"
, "Month"
, "Location"
]
这是问题所在:据我所知,不可能按键的值对字典列表进行排序,因此我必须对值的整个记录进行排序(例如,如果我想按儿童使用:
List.sortBy (\r -> r.child.lastname) grid.resources
但是,列标题是字符串,并不总是与记录键相同(例如,对于字段 r.child.lastname,列标题是“姓氏”。)无论如何,我的理解是记录键必须显式调用,因此无法将列名与记录键匹配。
我希望能够单击表格列并按该字段对其进行排序;例如:
我希望我写的很清楚。感谢您的帮助!
【问题讨论】:
-
如果你能提供输入和所需的输出,那就太酷了
-
对不起,我不确定您在这种情况下输入和输出的确切含义,但我已经包含了一张图片。
-
您是否考虑过使用github.com/evancz/elm-sortable-table,据我所知,它提供了您想要的功能?
-
您似乎无法真正添加样式或表单等。我希望能够使其非常可定制。
-
是否可以将 Mdl 包与 sortable-table 一起使用?
标签: elm