某工程師的開發日常

這次來介紹一個很棒的Table第三方套件 Handsontable ，其功能相當豐富像是編輯、排序、查詢、欄位驗證、匯出Excel等需求通通難不倒Handsontable，甚至可以直接將Excel的表格內容直接貼到Handsontable或者是將Handsontable的表格內容直接貼Excel，並且不會造成跑版和亂碼的問題。此外，前端三大主流框架(React、Angular、Vue)它都支援。 接下來，我們來簡單示範一下如何在Angular使用Handsontable。 1. 首先安裝Handsontable套件。 npm install @handsontable/angular handsontable 2. 在angular.json內匯入相關css。 "styles": [ "node_modules/handsontable/dist/handsontable.full.css", "src/styles.css" ] 3. 匯入Handsontable Module import { HotTableModule } from '@handsontable/angular'; @NgModule({ declarations: [ AppComponent ], imports: [ HotTableModule, ... ] }) export class AppModule { } 4. 使用hot-table元件且並設定settings，其常用屬性如下: colHeaders : 設定欄位的表頭名稱 data : 設定資料 dataSchema : 設定資料結構 columns : 可用於設定欄位的型別(text、autocomplete、dropdown、checkbox、password、date)、呈現方式(renderer)以及資料驗證(validator) ※客製化的呈現方式與資料驗證需要撰寫renderer callback 與validator callback 5. 如果需要對hot-table進行存取或是D...

一般來說，表單內有欄位是可以選取多個選項時，我們會採用CheckBox或Multiselect Dropdown，但當選項過多時為了節省版面空間，我們通常會使用Multiselect Dropdown 以下拉勾選的方式來呈現。 目前在Angular幾個知名的元件像是Angular Material和PrimeNG都有Multiselect Dropdown元件可以用，但筆者使用的是Ngx-Bootstrap...很不幸地...它並沒有Multiselect Dropdown元件，所以可能要多花心力自己刻元件或是上網找找看其他符合Bootstrap Style的Multiselect Dropdown元件來用了。當然Ngx-Bootstrap也可以與Angular Material或PrimeNG的元件混用，但在視覺呈現上會顯得突兀並且有些奇怪。 最後很幸運地，筆者在npm找到了一個Multiselect Dropdown元件名為 ng-multiselect-dropdown ，它的Style類似Bootstrap且功能完備(如Filter、Limit Selection等功能)，更重要的是它支持Template Driven Form和Reactive Form，其用法如下所示 : 1. 匯入 NgMultiSelectDropDownModule import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; @NgModule({ imports: [ NgMultiSelectDropDownModule.forRoot(), ] }) export class AppModule { } 2. 在Reactive Form使用ng-multiselect-dropdown元件並設定settings，其常用屬性如下: singleSelection: 設定單選或多選 idField: 設定欄位的Id textField: 設定欄位的Text selectAllText: 設定選取所有項目時，所顯示的文字 unSelectAllText: 設定未選取項目時，所顯示的文字 limitSe...