檢視
同一張表可使用多種視圖,切換時不會複製記錄。以下使用既有 table;請先建立日期與分組欄位,並替換示例 ID。
同一張表,多種檢視
修改 Sheets 課程的狀態,再切換檢視。每個檢視都使用同一組記錄。
範例學習計畫 · 2026 年 9 月
| 課程 | 狀態 | 日期 |
|---|---|---|
| Sheets | 未開始 | |
| Docs | 進行中 | |
| Slides | 已完成 | |
| Bases | 進行中 |
共用記錄: 4 · Sheets: 未開始
建立檢視
TypeScript
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView( 'By status', univerAPI.Enum.BaseViewType.Kanban, { view: { config: { groupFieldId: 'status' }, }, },)在 UI 中啟用檢視
TypeScript
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())設定檢視規則
TypeScript
kanban.setGroup([ { fieldId: 'status', direction: univerAPI.Enum.BaseSortDirection.ASC },])kanban.setFilter({ conjunction: univerAPI.Enum.BaseFilterConjunction.AND, conditions: [ { fieldId: 'archived', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: false }, ],})使用檢視層級的欄位設定,即可調整欄位是否顯示、寬度和卡片呈現方式,而不必變更底層的資料表結構。
日曆日期
日曆需要起始日期,甘特圖還需要結束日期,並支援工作日、進度與依賴。Gallery 使用 card 設定標題與顯示欄位。Pivot 彙總與圖表需要儀表盤外掛。
TypeScript
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})排序與欄位顯示
篩選、排序、分組與顯示設定屬於目前視圖,不會刪除底層記錄或欄位。
TypeScript
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)條件著色
將分數大於 80 的記錄標色:
TypeScript
const score = table.addField('Score', univerAPI.Enum.BaseFieldType.Number)grid.setConditionalColorRules([{ id: 'high-score', target: univerAPI.Enum.BaseConditionalColorTarget.ROW, fieldId: score.getId(), operator: univerAPI.Enum.BaseConditionalColorOperator.GREATER_THAN, operand: 80, color: '#dcfce7',}])規則依陣列順序決定優先級,傳入 [] 可清除。支援儲存格、整列及整欄;整欄著色不使用條件。
你覺得這篇文檔如何?