[紀錄] 使用NinjaTables來製作表單,並且使用星星來做排序

情境:

客戶希望可以製作一個表格,裡面放置著店家名稱、電話、地址、星級

然後星級希望可以透過大小台排序,星級越高就排在越前面

當時的想法有兩項

1.星星使用fontawesome來製作,後面再做一個數字欄位,來對應前方的星星數量

2.星星使用圖片來製作,例如5顆星星的圖片檔名使用 5.png,4顆星星使用4.png…以此類推

排序的規則會按照檔案名稱大小來做排列。

表格-未處理

實際修改:

首先要把”篩選星級”的cloumn改隱藏起來,這邊可以使用CSS

然後再新增一個filter來”篩選星級”這個欄位

事實上是filter數字,但是因為欄位連動所以視覺上很像是針對星星去做篩選

表格-已處理

 

實際的篩選效果

 

這篇只是記錄星級篩選的思考邏輯過程,詳細的NinjaTables功能介紹就不在這邊細說了

另外filter需要使用pro版才有,如果沒有購買pro版的人可以往第二種思路去做看看,理論上可以做到一樣的效果。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *