原創(chuàng)|使用教程|編輯:龔雪|2021-06-02 10:28:39.077|閱讀 320 次
概述:本文演示如何使用Kendo UI PivotGrid API向小部件的列軸添加新維度。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI for jQuery R2 2021試用版下載
Kendo UI是帶有jQuery、Angular、React和Vue庫(kù)的JavaScript UI組件的最終集合,無(wú)論選擇哪種JavaScript框架,都可以快速構(gòu)建高性能響應(yīng)式Web應(yīng)用程序。通過(guò)可自定義的UI組件,Kendo UI可以創(chuàng)建數(shù)據(jù)豐富的桌面、平板和移動(dòng)Web應(yīng)用程序。通過(guò)響應(yīng)式的布局、強(qiáng)大的數(shù)據(jù)綁定、跨瀏覽器兼容性和即時(shí)使用的主題,Kendo UI將開(kāi)發(fā)時(shí)間加快了50%。
下面的示例演示如何使用Kendo UI PivotGrid API向小部件的列軸添加新維度。
<div id="example"> <button id="add">Add "ProductName"</button> <div id="pivotgrid"></div> <script> $(document).ready(function () { var pivotgrid = $("#pivotgrid").kendoPivotGrid({ columnWidth: 120, height: 570, dataSource: { data: products, schema: { model: { fields: { ProductName: { type: "string" }, UnitPrice: { type: "number" }, UnitsInStock: { type: "number" }, Discontinued: { type: "boolean" }, CategoryName: { field: "Category.CategoryName" } } }, cube: { dimensions: { ProductName: { caption: "All Products" }, CategoryName: { caption: "All Categories" }, Discontinued: { caption: "Discontinued" } }, measures: { "Sum": { field: "UnitPrice", format: "{0:c}", aggregate: "sum" } } } }, columns: [{ name: "CategoryName", expand: true }], rows: [{ name: "Discontinued", expand: true }], measures: ["Sum"] } }).data("kendoPivotGrid"); $("#add").click(function() { var ds = pivotgrid.dataSource; var columns = ds.columns(); columns.push("ProductName"); ds.columns(columns); }); }); </script> </div>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都網(wǎng)