Corpo del piano di appoggio con due file in Clojurescript/Reagent

Question

Non riesco a ottenere il corretto allineamento del corpo del tavolo utilizzando clojurescript/reagent. Io non sono in realtà sicuro se questo è me non capire cosa fare in html o cosa ...

Attualmente mi visualizzare il corpo della tabella utilizzando un ciclo

(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)]]])]) 

Il problema è che ho bisogno di gruppo sia al di fuori del per e all'interno del per l'utilizzo di qualche elemento html, giusto? Se uso [: tbody] su entrambi, rovinerà l'allineamento con la sezione [: thead]. Se utilizzo un elemento diverso da tbody, crea tutti i tipi di altri problemi. Tutto sembra a posto se rimuovo [: tbody] nel ciclo for e l'ultimo [: tr].

Modifica: al momento ho ristretto il problema molto. La mia app ajax ottiene e deref i dati coinvolti con la tabella. Su questo re-rendering la formattazione del tavolo viene incasinata.

Edit2: Ho trovato il problema.

(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]])) 

Quando l'elenco di mappe esegue nuovamente il rendering dell'allineamento delle interruzioni di tabella.

Answer 1

Si scopre che questo problema può essere risolto pensando alle cose semplicemente come vettori. Quale vettore vuoi che assomigli al risultato finale?

[: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"]]] 

Quindi, con questo come obiettivo, abbiamo deciso di creare la funzione corpo.

(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)]]]))))) 

Questa è la mia soluzione. Potrebbe esserci uno migliore.

Answer 2

Immagino che il tuo problema sia un numero disuguale di celle nelle file. L'elemento HTML TD ha l'attributo COLSPAN. Prova a impostare nell'ultima riga, il numero di celle nelle righe sopra.

(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)]]])])