整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
格，又稱為表，既是一種可視化交流的模式，又是一種組織整理數據的手段。通過將“表格”嵌入企業(yè)信息化系統(tǒng)，可幫助業(yè)務人員更快、更準確地處理數據，大幅提高運營管理效率。
企業(yè)信息化系統(tǒng)大致可以分為以下三類：
通過將“表格”模塊嵌入上述信息化系統(tǒng)，可滿足對 Excel文檔的操作和系統(tǒng)兼容性要求，實現高并發(fā)的數據處理和填報，以及靈活多變的報表格式設計。葡萄城的 SpreadJS 純前端表格控件，便可有效應對這些需求。
SpreadJS 是一款基于 HTML5 的純前端表格控件，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、明源云、遠光軟件等知名企業(yè)青睞，被中國軟件行業(yè)協(xié)會認定為“中國優(yōu)秀軟件產品”。
為了詳細闡述企業(yè)表格技術的具體應用實踐，本期葡萄城公開課，我們邀請到了上海佳軟的技術負責人——劉立兼先生，從實際項目出發(fā)，演示如何改造SpreadJS表格編輯器以滿足業(yè)務個性化定制需要。
在線表格編輯器是 SpreadJS 的擴展插件，可直接在 Angular、 React、 Vue 等前端框架中調用，內置開放的 API 和類 Excel 的 UI 設計元素（如工具面板），可實現高效的模板設計、在線編輯和數據綁定，為最終用戶帶來高度類似 Excel 的使用體驗。在線表格編輯器不包含在任何控件或套包內，需要在獲得 SpreadJS 的授權后購買使用。
更細膩的功能顆粒度
做過sdk的都知道顆粒度的問題，使用SpreadJS 表格編輯器，可以享受兩種顆粒度的api：編輯器提供的應用層面的api和SpreadJS提供的實現層面的api。當需要二次開發(fā)的時候，這兩種api交替使用可以大大簡化開發(fā)的過程。
有效降低開發(fā)成本
SpreadJS 的在線表格編輯器直接提供了實現Excel功能的源碼、可視化操作界面和API接口，可幫助開發(fā)人員減輕代碼量，降低開發(fā)成本。
最好的技術用例
SpreadJS官網的API文檔更傾向于講解SpreadJS的函數使用，而表格編輯器源碼則提供了從上往下分解的代碼用例，其完全按照Excel功能進行分類，對于實現類Excel電子表格的系統(tǒng)開發(fā)來說，這是最好的用例了。
最佳的價值輸出
對于開發(fā)者來說，直接拿到SpreadJS的源碼往往不知道能做到什么樣子，但是拿到了在線表格編輯器的源碼，用戶就可以了一目了然地看到SpreadJS強大的類 Excel 數據處理和計算能力，從而更加認可SpreadJS的價值。
1. 靈活的應用方式
SpreadJS 在線表格編輯器采用了組件化的設計架構，以 Dom 作為容器，其目標場景定位于可嵌入各類前端頁面，并通過擴展插件的形式與 SpreadJS 進行交互。
2. 更易嵌入、移植
SpreadJS 在線表格編輯器不依賴于任何外部類庫，有自己的命名空間，以閉包方式，避免 CSS 樣式沖突，并可直接在 Angular、Vue、React 等前端 JS 框架中調用。
3. 體積更小，秒級加載
SpreadJS 在線表格編輯器的體積很小，不到 4 MB，且加載速度很快，首次加載僅需 1 ~ 2 秒（以上數據均為測試數據，僅供參考）。
4. 定制更容易，交互更豐富
SpreadJS 在線表格編輯器采用了聲明式語法，代替了 HTML 源代碼，二次封裝更容易，定制方式更靈活。
1. 頂部工具欄樣式和事件綁定
如下圖所示, 在編輯器 index/index.html 這個文件的container里面添加自定義的樣式：
并對添加的按鈕進行事件的綁定, 這個綁定是在initSpread.js的initEvent方法中進行的，編輯器初始化后會調用此方法。
2. 工具欄面板
如果要新增功能圖標，則需要在ribbon/ribbon.html里面添加一欄，并定義相應的點擊事件。
3. 命令改造：anyscLicenser 事件
調用SpreadJS的功能有兩種方法，一種是通過SpreadJS提供的方法，還有一種則是通過命令，表格編輯器對于SpreadJS功能的調用，大部分采取了命令的方式，如果你想對現有的編輯器功能進行改造，那么你需要改造對SpreadJS方法的調用，也需要改造對命令的使用。
改造對SpreadJS方法的調用是沒什么問題的，只需要根據官方的文檔和用例按需改就行了，但是改造對命令的使用則需要通過監(jiān)聽事件來實現。如下圖，我們需要在SpreadJS的命令管理器中，把anyscLicenser 事件和自定義的處理方法進行關聯(lián)，使得SpreadJS一旦監(jiān)聽到anyscLicenser 事件，就自動執(zhí)行對應處理方法。在處理方法中，我們可以去增加另外的處理，從而實現對命令的改造。
這個事件監(jiān)聽可以添加到自定義的文件里面，但是要保證表格編輯器完全加載好了。
4. 定制打印功能：
根據工具欄改造的方法新增入口圖標，將打印頁面通過事件與圖標進行綁定，點擊彈出，設置頁面上的設置綁定js對象的屬性。當點擊打印時，圖上代碼通過js對象的屬性對SpreadJS的PrintInfo對象進行設置，然后調用SpreadJS的print方法進行實際打印。
打印頁面
頁邊距
工作表
5. 增加閱讀模式：
前端：初始化的時候執(zhí)行一下 rewriteBase()，綁定ActiveSheetChanged事件, 將實時的selections賦值給GlobalInfo.selections，并重新repaint。
后端：添加開關配置, 用于持久化閱讀模式的開關。
6. 格式刷功能：
SpreadJS 的 Copyto是一個很方便的方法，可以在同一個工作表中復制一個范圍的樣式、值、公式、注釋等，要想使用這個功能，只需定義一個全局變量isFormatPainting=false，當點擊格式刷按鈕的時候isFormatPainting設置為true，并監(jiān)聽GC.Spread.Sheets.Events.SelectionChanged事件，在事件內部回調中判斷isFormatPainting的值為true的時候就將當前選中的區(qū)域做一下格式刷邏輯即可。
7. 高級搜索功能
使用葡萄城的另一款服務端表格組件GCExcel的后端搜索實現快速搜索功能，通過設計后端查找的頁面，在SpreadJS編輯器本身的查找的框上面添加：
以上就是個性化改造SpreadJS在線表格編輯器的主要內容，對于有高效的模板設計、在線編輯和數據綁定需求，以及想要開發(fā)類似 Excel 功能和使用體驗系統(tǒng)的同學可以前往 SpreadJS 在線表格編輯器官網試用體驗。
tml源碼：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訪問數據庫</title>
<style>
#name{width: 180px;
}#msg{width: 180px;height: 180px;font-size: 20px;
}#save{width: 80px;line-height: 30px;background-color: cornflowerblue;border: 0px;
}</style>
</head>
<body>
<h1>使用數據庫實現留言簿</h1>
<label for="name">姓名：</label>
<input id="name" type="text" placeholder="請輸入姓名："/><br/>
<label for="msg">留言：</label>
<textarea id="msg" placeholder="請輸入留言信息" ></textarea>
<br/>
<button id="save" >保存</button>
<hr />
<table border="1" id="datatable" cellspacing="0" cellpadding="0"></table>
<p id="msgs"></p>
<script type="text/javascript" src="js/db.js"></script>
</body>
</html>db.js源碼：window.onload=init;
var datatable=null;
//創(chuàng)建數據庫,獲取數據庫訪問對象。var db=openDatabase('mydb','','mydatabase',102400);
//初始化function init() {
datatable=document.querySelector("#datatable");
同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發(fā)需要大量時間，今天介紹一款優(yōu)雅的 CSS 框架。
Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發(fā)者構建自己的 UI 系統(tǒng)，也可以直接用于快速的小型項目中。
Pico-css 官網
截止發(fā)文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。
引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：
Pico-css cdn 引入
當然也可以通過 npm 安裝：
Pico-css npm 安裝
然后就可以編寫 html 代碼了。
想要做一個輸入框和提交表單，往往需要這樣的代碼：
常規(guī)實現 form 表單代碼
而使用 Pico.css，只需要：
Pico-css 實現表單
Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：
Pico-css 實現進度條
Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。
切換主題
官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。
登錄界面
通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規(guī)避了常規(guī)的只使用 class 來區(qū)分的“命名地獄”，是一種非常好的網頁編程思路。
Pico-css 源碼
面向對純粹 HTML 有極致追求的開發(fā)者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。
在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。
css 樣式的寫法很自由，目前前端開發(fā)存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規(guī)范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。
Pico.css 的出現給這樣的開發(fā)現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。
Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費下載使用。
關注我，持續(xù)分享高質量的免費開源、免費商用的資源。
↓↓點擊查看本次分享的網址。
Pico.css - 簡單優(yōu)雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
