Ag-grid clojurescript 可排序键不起作用
Ag-grid clojurescript sortable key doesn't work
我正在尝试使用 ag-grid 创建一个网格并激活可排序和过滤器,但它不适用于本地主机。在列定义中,我使用
''':可排序的真'''
''': 过滤器为真''''
但是没有任何反应。有谁知道出了什么问题?
(ns reagent-ag-grid-ex.core
(:require
[reagent.core :as r]
[cljsjs.ag-grid-react]
[reagent-ag-grid-ex.state :as state]))
;; -------------------------
;; Views
(def ag-adapter (r/adapt-react-class (.-AgGridReact js/agGridReact) ))
;;(defn get-cols [entry]
;; (into [] (map #(hash-map :headerName (-> % key name) :field (-> % key name)) entry)))
;;columnDefs: [ {headerName: "Make", field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Price", field: "price"} ]
;;rowData: [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000}]
(def deafult-col-w 200)
(defn width-helper [lst]
(+ (* deafult-col-w (count lst)) 2))
(defn home-page []
[:div [:h2 "Ekspono tag-model"]
[:p "My portfolio / Top Index " [:a {:style {:background-color "#C0C0C0" :float "right" :color "black"}
:href "https://www.google.com" :target "_blank"} "Show problems"]]
[:div {:className "ag-theme-balham" :style {:height 200 :width (width-helper state/cols) :color "purple"}}
[ag-adapter {"columnDefs" state/cols
"rowData" state/rows
"defaultColDef" {:sortable true
:width deafult-col-w}}]]
[:div [:a {:href "https://www.tabyenskilda.se/fredrik-cumlin/" :target "_blank"}
"@copyright Fredrik Cumlin"]]])
;; -------------------------
;; Initialize app
(defn mount-root []
(r/render [home-page] (.getElementById js/document "app")))
(defn init! []
(mount-root))
升级到最新的 ag-grid-react cljsjs 发行版 (21.0.1-1) - 例如使用 lein project.clj 将 dep 切换为 [cljsjs/ag-grid-react "21.0.1-1"]
。应该在这个版本上工作。
另请注意,无需使用字符串指定 prop 键,您可以使用关键字 - 这更符合习惯。
我正在尝试使用 ag-grid 创建一个网格并激活可排序和过滤器,但它不适用于本地主机。在列定义中,我使用 ''':可排序的真''' ''': 过滤器为真''''
但是没有任何反应。有谁知道出了什么问题?
(ns reagent-ag-grid-ex.core
(:require
[reagent.core :as r]
[cljsjs.ag-grid-react]
[reagent-ag-grid-ex.state :as state]))
;; -------------------------
;; Views
(def ag-adapter (r/adapt-react-class (.-AgGridReact js/agGridReact) ))
;;(defn get-cols [entry]
;; (into [] (map #(hash-map :headerName (-> % key name) :field (-> % key name)) entry)))
;;columnDefs: [ {headerName: "Make", field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Price", field: "price"} ]
;;rowData: [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000}]
(def deafult-col-w 200)
(defn width-helper [lst]
(+ (* deafult-col-w (count lst)) 2))
(defn home-page []
[:div [:h2 "Ekspono tag-model"]
[:p "My portfolio / Top Index " [:a {:style {:background-color "#C0C0C0" :float "right" :color "black"}
:href "https://www.google.com" :target "_blank"} "Show problems"]]
[:div {:className "ag-theme-balham" :style {:height 200 :width (width-helper state/cols) :color "purple"}}
[ag-adapter {"columnDefs" state/cols
"rowData" state/rows
"defaultColDef" {:sortable true
:width deafult-col-w}}]]
[:div [:a {:href "https://www.tabyenskilda.se/fredrik-cumlin/" :target "_blank"}
"@copyright Fredrik Cumlin"]]])
;; -------------------------
;; Initialize app
(defn mount-root []
(r/render [home-page] (.getElementById js/document "app")))
(defn init! []
(mount-root))
升级到最新的 ag-grid-react cljsjs 发行版 (21.0.1-1) - 例如使用 lein project.clj 将 dep 切换为 [cljsjs/ag-grid-react "21.0.1-1"]
。应该在这个版本上工作。
另请注意,无需使用字符串指定 prop 键,您可以使用关键字 - 这更符合习惯。