Clojurescript / 试剂中的两行循环表体答案

【问题标题】：Looping Table Body With Two Rows in Clojurescript / ReagentClojurescript / 试剂中的两行循环表体
【发布时间】：2015-05-17 12:35:22
【问题描述】：

我无法使用 clojurescript / 试剂让我的表格主体正确排列。我实际上不确定这是我不理解在 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)]]])])

问题是我需要在 for 外部和 for 内部使用一些 html 元素进行分组，对吗？如果我在两者上都使用 [:tbody] ，它会弄乱与 [:thead] 部分的对齐。如果我使用 tbody 以外的元素，那么它会产生各种其他问题。如果我删除 for 循环中的 [:tbody] 和最后一个 [:tr]，一切看起来都很好。

编辑：我目前已经缩小了很多范围。我的应用程序 ajax 获取和取消引用与表相关的数据。在此重新渲染时，表格的格式会变得混乱。

Edit2：我发现了问题。

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

当地图列表重新呈现表格中断的对齐方式时。

【问题讨论】：

标签： html clojurescript reagent

【解决方案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"]]]

因此，以 this 作为我们的目标，我们着手让 body 函数创建 this。

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

这是我的解决方案。可能会有更好的。

【讨论】：

【解决方案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)]]])])

【讨论】：