SpreadJS V13.0發佈,聚焦表單設計與數據交互,讓您的工作效率突飛猛進!

純前端表格控件SpreadJS,是一款成功應用於華爲、招商銀行、天弘基金、蘇寧易購等國內外知名企業的前端開發工具,其帶來的價值不僅體現在幫助開發人員在其Web應用程序中快速構建 Web Excel 、數據填報、在線文檔、圖表公式聯動和類 Excel UI 設計等功能模塊,更幫助企業大幅降低數據處理成本,提升企業信息化水平和項目交付能力。

伴隨着SpreadJS V13.0 的發佈,其表單設計與數據交互能力再度增強,產品易用性和數據處理效率大幅提升。

此前的每一次升級,都能給予用戶無限驚喜,這一次,SpreadJS 又將帶來哪些全新功能和產品易用性提升呢?小編整理出了11個,用好這些功能,一定可以讓您的工作效率突飛猛進!

在列舉純前端表格控件 SpreadJS V13.0 的新特性之前,請下載最新安裝程序,以便同步體驗!>>純前端表格控件 SpreadJS V13.0 下載地址

一、追求極致的單元格特性

單元格狀態:Cell States

在 SpreadJS V13.0 中,單元格包含以下五種狀態,分別是:Normal(正常狀態)、Hover(浮動狀態)、Invalid(保護狀態)、ReadOnly(只讀狀態)和 Edit(編輯狀態)。用戶不僅可以更爲精確地獲取單元格項目和當前狀態,還可以通過數據綁定、判斷單元格狀態等,快速定位、查找、編輯、鎖定、篩選單元格的值。

單元格狀態:Cell States

單元格狀態:Cell States

新單元格類型:選擇框、單選列表、下拉列表、按鈕等

在 SpreadJS V13.0 中,新增了13種全新的單元格類型,如選擇框、單選列表、下拉列表、按鈕等:

新單元格類型:Checkbox & RadioBox List

新單元格類型: Cell Dropdown

新單元格按鈕: Cell button

二、表格 API 增強:表格樣式按需修改、高度開放自定製

用戶使用 SpreadJS 創建表單和管理數據,將獲得前所未有的操縱體驗。通過調用 SpreadJS 提供的 API 接口,用戶可以在運行時和設計時兩種狀態下,完成以下操作:

  • 添加行/添加列
  • 刪除行/刪除列
  • 在表格中獲取插入行、刪除行、髒數據
  • 將 Excel 錶轉換爲數據範圍

三、表格 UI 交互增強:全方位分析表格數據,順利完成前後端交互

表格數據交互,作爲用戶界面設計中不容忽視的重要組成部分,其目的是通過構造結構化數據,讓用戶更易讀取、更易比較。

SpreadJS 作爲一款純前端電子表格控件,充分考慮到了這一應用場景,並全面增強了表格數據交互分析能力,其功能具體體現在:

  • 自動擴展 Auto Expand:input / copy-cut & paste / dragfill / dragdrop
  • 調整大小手柄 Resize Handler
  • 滾動時表頭顯示 Show Header when Scroll
  • 更方便的表格選擇 Selection
  • 更智能的表格導航 Navigation
  • 滾動時在列標題上顯示錶標題

四、表格數據綁定增強:支持更多列屬性字段

SpreadJS V13.0 的表格數據綁定將支持更多列屬性字段,這樣做的好處是:用戶在進行表格數據綁定時,更獲得比此前更豐富的屬性支持,如格式化、單元格類型、值(值轉換函數)等。

SpreadJS 工作簿數據綁定支持以下屬性:

  • 名稱
  • 格式化
  • 單元格類型
  • 值(值轉換函數)
  • 寬度
  • 可見
  • 可調整大小
  • 分頁符
  • 顯示名稱

SpreadJS 表格數據綁定支持以下屬性:

  • 名稱
  • dataField
  • 格式化
  • 單元格類型
  • 值(值轉換函數)

五、圖表增強:支持更多圖表圖例屬性、錯誤提示欄、自定義邊框、對數軸、趨勢線等

SpreadJS V13.0 的圖表功能得到大幅提升,不但支持更多的圖表圖例屬性,如自定義位置、字體顏色、大小等,還新增了多種圖表功能,如錯誤提示欄、自定義邊框、對數軸、趨勢線、懸停動畫、符號等。

圖表圖例屬性:支持字體顏色、大小和更多字體

在 SpreadJS V13.0 中,通過更改字體顏色、大小和字體的能力,開發人員能夠自行匹配圖表圖例與應用程序的整體外觀樣式,而無需額外調整,這樣做的好處是:可以爲儀表板中的所有組件,創建統一的外觀樣式。如下是爲圖例添加顏色、fontFamily、fontSize 設置:

SpreadJS圖表增強

新圖表屬性:錯誤提示欄、自定義邊框、對數軸和趨勢線

SpreadJS V13.0 中,新增的圖表屬性有:

  • 錯誤提示欄:您可以更改圖表中顯示的錯誤類型、樣式和數量,從而一目瞭然的觀測出圖表數據的誤差範圍與標準偏差。
  • 自定義邊框:在圖表周圍添加邊框,將圖表與應用程序的其餘部分區分開。

SpreadJS新圖表屬性:自定義邊框

  • 對數軸:在比較差異巨大的數據時,可以以更加易讀的方式顯示圖表數據。

SpreadJS新圖表屬性:對數軸

  • 趨勢線:使用趨勢線可以更輕鬆地根據數據(例如銷售變化趨勢)預測未來價值。如下是 SpreadJS 的線性趨勢線示例:

六、支持動態數組:大幅簡化計算公式,提高公式運算效率

Excel 2019 推出了動態數組函數,用於簡化複雜計算公式:使用動態數組,返回值將自動“輸出”到相鄰單元格中(未使用的)。用戶只需編寫一個簡單的公式,而不是編寫複雜的數組公式就可解決多單元格問題。

在 SpreadJS V13.0 中,也將支持動態數組功能。

SpreadJS支持動態數組

七、支持公式追蹤:可快速查看公式中引用的單元格數據

在使用公式時,有時需要了解公式中引用了哪些單元格的數據,這就涉及到公式追蹤的操作。在 SpreadJS V13.0 中,用戶可以利用公式追蹤 API,快速且方便的構建數據關係拓撲圖,以便進行審查、數據鑽取、可視化顯示等。

SpreadJS支持公式追蹤

八、新增事件:ColumnChangingEvent & RowChangingEvent

當用戶對工作表執行 Delete/Insert/Hide/Unhide 等操作時,如果希望在執行操作之前觸發一個事件,該事件可以用來確認對象的數據,並控制該操作是否繼續執行。此時,新增的這兩個事件就可以派上用場。

九、行爲增強:Advanced Resize

在 SpreadJS V13.0 中,Advanced Resize 添加了一種調整大小的方法 onlyNextTo 。它與一般調整大小的方式不同,使用 onlyNextTo 調整大小隻會改變當前列/行和下一個可見列/行的大小。

SpreadJS行爲增強

十、自動合併:自動合併相鄰單元格的相同文本

SpreadJS 支持自動合併。例如,原始數據如下:

SpreadJS自動合併

在行方向自動合併後:

SpreadJS自動合併

在列方向自動合併後:

SpreadJS自動合併

十一、範圍模板:將工作表的範圍指定爲模板,並使用該模板繪製相似區域

SpreadJS 爲客戶提供了一個範圍單元格類型。這種新的單元格類型允許用戶將工作表的範圍指定爲模板,然後使用該範圍來繪製具有單元格值的多個相似區域。

這樣做的好處是:

  • 客戶可以通過更改模板來更改批處理片段顯示模式。
  • 客戶可以輕鬆顯示具有相同結構的一組數據。
  • 客戶可以在任何地方創建模板工作表,然後創建 JSON / fromJSON,並設置工作表範圍以便輕鬆複用。

以上就是SpreadJS V13.0 的主要新特性內容,如需瞭解更多,歡迎前往SpreadJS產品官網下載體驗。

關於 SpreadJS純前端表格控件

SpreadJS 是一款基於 HTML5 的純 JavaScript 電子表格和網格功能控件,以“高速低耗、純前端、零依賴”爲產品特色,可嵌入任何操作系統,同時滿足 .NET、Java、響應式 Web 應用及移動跨平臺的表格數據處理和類 Excel 的表格應用開發,爲終端用戶帶來親切的 Excel 體驗。SpreadJS 在數據展示、前端導入導出、圖表面板、數據綁定等場景無需大量代碼開發和測試,可極大節省企業研發成本並降低交付風險。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章