文章出處

Wijmo UI控件支持Angular 2

 

從Angular的1.x時代開始,Wijmo就已經支持Angular了。最近,我們正在和Angular團隊合作來支持Angular 2。有趣的是,對Angualr 2 的支持甚至更容易。我們的源代碼用TypeScript編寫,我們可以很容易地擴展我們的控件類,來輕松地創建Angular 2組件。

 

 

Wijmo為每一個UI控件都提供了Angular 2 組件。所有Angular 2組件都提供了完全聲明性標記。我們已經對有需要的屬性提供了雙向綁定的支持,我們還對定制綁定和一些組件提供了附加功能,比如對FlexGrid中的單元格模板,可以允許你用標簽指明單元格的內容。

 



Wijmo的Angular 2組件被封裝為模塊并且可以在Angular 2應用中作為NPM包被使用。我們遵循Angular 2團隊設置的模式,在Angular2中使用Wijmo組件會感到非常熟悉。

 

HTML 5 OLAP模塊

當你有很多數據時,使用普通的項目列表就很難分析數據。數據透視表可以匯總數據并且允許你用不同的方式來幫助你分析數據。使用Excel的數據透視表來做分析就很容易。你選中原始數據,單擊“插入數據透視表”,選擇一個目標,可以看到一個面板,這里你可以用不同的方法拖放字段來匯總數據并且立即看到結果。這是Excel最強大和受歡迎的功能之一。

 

Wijmo中的OLAP可以讓你的HTML 5應用具有類似的功能。在網頁中增加一個PivotPanel控件,通過設置數據源屬性來給它原始數據,并且連接到PivotGrid控件或者PivotChart控件來查看結果。

 

  • PivotPanel

 

Wijmo的PivotPanel跟Excel中的“數據透視表字段列表”非常相似,為最終用戶提供了一個熟悉的,快速的體驗。

 

1. PivotPanel展示了一個列表,包含數據庫中所有字段,允許最終用戶很容易的創建數據分析視圖。

 

2. 用戶可以把字段拖放到面板的四個不同的區域:過濾、列、行、值。

 

3. PivotPanel的智能數據類型識別節省了用戶大量的時間。如果選中一個字符類型,它會自動把這個字段放到行區域,但是如果選中數字類型,它會自動把這個字段放到值區域。

 

4. 你可以在Values 區域多次使用同一個字段來展示總數聚合和合計聚合。

 

5. PivotPanel也借助Wijmo全球化模塊支持數據過濾和格式化。

 

 


在PivotPanel中增加字段

 

  • PivotGrid

PivotGrid允許最終用戶創建數據分析視圖。簡化了大數據集的顯示和導航,PivotGrid會綁定到了PivotPanel。PivotGrid支持展開、折疊行并且可以展示聚合數據包括分組行的小計。PivotGrid擴展了FlexGrid并且提供了非常靈活的顯示和簡易的單元格格式化。

 


在PivotGrid中顯示分組和小計

 

  •  PivotChart

PivotChart是FlexChart的一個擴展用來優化聚合數據的展示。當它綁定到PivotPanel,它可以按照用戶選擇的字段可視化地進行分組。


PivotChart

 

Wijmo PDF

Wijmo的PDF模塊基于PDFKit庫開發,用來生成PDF文檔。它被用作將FlexGrid 和FlexChart輸出為PDF。Wijmo的PDF模塊也支持在單個文檔中繪制FlexGrid、FlexChart,同時混有任意PDF基本元素比如文本、圖形和圖片。

 

 

支持Material Design

 

Material Design Lite(MDL)是谷歌為web開發者實現的Material Design規范。它時尚、漂亮是Bootstrap CSS替代者。我們已經創建了大約300個全新的Wijmo主題支持所有的MDL標準顏色組合。我們創建了一個示例來展示如何使用Wijmo控件滿足Material Design。

 

FlexSheet 示例

這次發布中加入了一些復雜的FlexSheet示例。FlexSheetExplorer 樣例展示了很多FlexSheet的最佳特征,在一個程序中你可以體驗到很多的功能。這個示例的源代碼也可以用來展示這些功能的實現。


FlexSheet瀏覽器

 

馬上登陸Wijmo官網,下載體驗最新版吧!


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()