Facebook加入
LINE加入
2021/12/25
Wijmo是一款使用TypeScript編寫的新一代JavaScript/HTML5控制項集。它秉承觸控優先的設計理念，在全球率先支持AngularJS，並提供性能卓越、零依賴的FlexGrid和圖表等多個控制項。
Wijmo FlexGrid是絕佳的Angular2表格控制項。
FlexGrid僅包含所需的關鍵功能，並通過擴展模塊提供其他功能。類似Excel的基本功能如排序、分組和編輯是內置的，而其他擴展功能是可選的。
這個快速、熟悉、靈活的表格控制項，包括了所有Angular 2的優點：
聲明式標記
單元格模板
數據綁定
TypeScript源代碼和示例
本文就來介紹如何在Angular2下使用FlexGrid控制項。
使用Angular2創建FlexGrid工程
1.創建新工程
首先創建一個HTML Application with TypeScript新工程，如下圖所示：
2.刪除文件
選擇工程中的app.css, app.ts和index.html文件，並刪除。
如圖所示：
3.更改工程配置
選擇工程-屬性。在配置對話框里，將TypeScriptBuild->Module system更改為CommonJS
如圖：
4.更新
首先選擇工程的UploadProject
接著選擇工程的編輯工程，如下圖（4-2）：
然後在文件中粘貼：
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
點擊右側工程的Reload Project（如圖4-2）中所示的列表。
最後在彈出的對話框中點擊Yes按鈕。
5.添加Json文件
在工程里添加新的Json文件，如圖：
並且把內容複製到新建的Json文件中。
6.在工程中添加必要文件夾
在工程中添加scripts/src/styles文件夾，並添加default.html文件。
如圖：
打開工程所在文件夾，在script文件夾下添加2個文件夾，分別為：vendor和definitions
definitions文件夾下需要添加wijmo.d.ts和wijmo.grid.d.ts文件（文件可以在安裝包路徑中找到：\C1Wijmo-Eval_5.20163.234\Dist\controls）
同樣的，把wijmo.grid.min.js和wijmo.min.js添加到vendor文件夾下：
再從安裝包中（\C1Wijmo-Eval_5.20163.234\Dist\interop\angular2）文件夾下複製wijmo.angular2.min.js文件到vendor文件夾下：
在node_modules文件夾創建wijmo文件夾，並把所有的angular2所需要的文件複製過去。
最後將基本的styles文件(wijmo.css)複製到之前創建的styles文件夾中。
7.包含文件
返回到工程中，將上一步驟添加的文件通過Include In Project都包含到工程中。
8.編輯頁面
打開default.html文件，開始編輯頁面和添加控制項。
首先在<head></head>中添加引用。
繼續添加必要的wijmo引用：
在使用js之前，需要添加如下的代碼：
最後我們需要添加必要的wijmo css文件：
9.添加app文件
在工程的src文件夾中添加新的TypeScript文件（起名app.ts)
再添加一個HTML頁面叫做app.html.
然後再styles文件夾下添加app.cs.
添加后結果如圖：
接著在app.ts文件中引入angular2文件。
如果是要使用flexgrid，那麼也需要引入flexgrid文件。
還需要指定數據和基本話設置，如圖：
在上圖中我們添加了一個Data Service叫做DataSvc，因此最後在src文件夾中添加一個名叫DataSvc的TypeScript文件。
我們就可以在這個DataSvc文件中添加數據，如圖。
10.添加flexgrid控制項
最後配置View，添加flexgrid控制項，如圖：
defult.html頁面的代碼：
最後的flexgrid展示在頁面如圖：
免費試用
請通過以下方式聯繫葡萄城，獲取Wijmo的免費試用版：
微信：GrapeCityDT
官網：wijmo.gcpowertools.com.cn
熱門推薦
留言回覆
