Цилиндрический стол с двумя рядами в Clojurescript/Reagent

Question

У меня возникли проблемы с тем, чтобы мое тело стола правильно выстраивалось, используя clojurescript/reagent. Я на самом деле не уверен, что это мне не понимая, что делать в HTML или что ...

В настоящее время я показываю тело таблицы с помощью цикла

(defn table-body [list-of-maps] 
[:tbody 
    (for [one-map list-of-maps] 
    [:tbody 
     [:tr 
     [:td (:key1 one-map)] 
     [:td (:key2 one-map)] 
     [:td (:key3 one-map)] 
     [:td (:key4 one-map)] 
     [:td (:key5 one-map)] 
     [:td (:key6 one-map)] 
     [:td (:key7 one-map)]] 
     [:tr 
     [:td (:key8 one-map)]]])]) 

Проблема заключается в том, что мне нужно сгруппировать как вне, так и внутри, для использования какого-либо элемента html, правильно? Если я использую [: tbody] на обоих, это испортит выравнивание с секцией [: thead]. Если я использую элемент, отличный от tbody, тогда он создает все другие проблемы. Все выглядит отлично, если я удаляю [: tbody] в цикле for и в последнем [: tr].

Редактировать: Я в настоящее время сильно сузил проблему. Мое приложение ajax получает и разделяет данные, связанные с таблицей. При повторном рендеринге форматирование таблицы становится испорченным.

Редактировать 2: Я нашел проблему.

(defn test-body [list-of-maps] 
[:tbody 
    (for [one-map @list-of-maps] 
    [:tbody 
     [:tr 
     [:td (:key1 one-map)] 
     [:td (:key2 one-map)] 
     [:td (:key3 one-map)] 
     [:td (:key4 one-map)] 
     [:td (:key5 one-map)] 
     [:td (:key6 one-map)] 
     [:td (:key7 one-map)]] 
     [:tr 
     [:td (:key8 one-map)]]])]) 

(defn test-head [] 
    [:thead 
    [:th "key1"] 
    [:th "key2"] 
    [:th "key3"] 
    [:th "key4"] 
    [:th "key5"] 
    [:th "key6"] 
    [:th "key7"]]) 

(defn test55 [] 
    (let [list-of-maps (reagent/atom [])] 
    (js/setTimeout (fn [] (reset! list-of-maps '({:key1 "a1" :key2 "a2" :key3 "a3" :key4 "a4" :key5 "a5" :key6 "a6" :key7 "a7" :key8 "a8"} {:key1 "b1" :key2 "b2" :key3 "b3" :key4 "b4" :key5 "b5" :key6 "b6" :key7 "b7" :key8 "b8"}))) 3000) 
    [:table 
    [test-head] 
    [test-body list-of-maps]])) 

Когда список карт повторно отображает выравнивание разрывов таблицы.

Answer 1

Получается, что эту проблему можно решить, думая о вещах просто как векторы. Какой вектор вы хотите, чтобы конечный результат выглядел?

[:tbody 
    [:tr 
     [:td "a1"] [:td "a2"] [:td "a3"] [:td "a4"] [:td "a5"] [:td "a6"] [:td "a7"]] 
    [:tr 
     [:td "a8"]] 
    [:tr 
     [:td "b1"] [:td "b2"] [:td "b3"] [:td "b4"] [:td "b5"] [:td "b6"] [:td "b7"]] 
    [:tr 
     [:td "b8"]]] 

Таким образом, при этом мы намерены создать функцию тела.

(defn test-body [list-of-maps] 
    (into [] (concat [:tbody] (apply concat (for [one-map @list-of-maps] 
              [ 
              [:tr 
               [:td (:key1 one-map)] 
               [:td (:key2 one-map)] 
               [:td (:key3 one-map)] 
               [:td (:key4 one-map)] 
               [:td (:key5 one-map)] 
               [:td (:key6 one-map)] 
               [:td (:key7 one-map)]] 
              [:tr 
               [:td (:key8 one-map)]]]))))) 

Это мое решение. Может быть, лучше.

Answer 2

Я думаю, ваша проблема в неравном количестве ячеек в строках. HTML TD элемент имеет COLSPAN атрибут. Попробуйте установить в последней строке число ячеек в приведенных выше строках.

(defn test-body 
    [list-of-maps] 
    [:tbody 
    (for [one-map @list-of-maps] 
     [:tbody 
     [:tr 
     [:td (:key1 one-map)] 
     [:td (:key2 one-map)] 
     [:td (:key3 one-map)] 
     [:td (:key4 one-map)] 
     [:td (:key5 one-map)] 
     [:td (:key6 one-map)] 
     [:td (:key7 one-map)]] 
     [:tr 
     [:td {:colspan 7} (:key8 one-map)]]])])