5

clojurescript/agent を使用してテーブル本体を適切に並べるのに問題があります。これが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 要素を使用して for の外側と for の内側の両方をグループ化する必要があることですよね? [: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]]))

マップのリストが再レンダリングされると、テーブルの配置が崩れます。

4

2 に答える 2

0

あなたの問題は、行内のセルの数が等しくないことだと思います。HTMLTD要素には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)]]])])
于 2015-05-18T12:11:11.277 に答える