Kendo UI for jQuery R2 2021試用版下載
Kendo UI是帶有jQuery、Angular、React和Vue庫的JavaScript UI組件的最終集合,無論選擇哪種JavaScript框架,都可以快速構建高性能響應式Web應用程序。通過可自定義的UI組件,Kendo UI可以創建數據豐富的桌面、平板和移動Web應用程序。通過響應式的佈局、強大的數據綁定、跨瀏覽器兼容性和即時使用的主題,Kendo UI將開發時間加快了50%。
以下示例演示如何動態更改 Kendo UI PivotGrid 小部件的數據源。
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script> <div id="example"> <button id="change">Change DS</button> <div id="pivotgrid"></div> <script> $(document).ready(function () { $("#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 }, { name: "ProductName" } ], rows: [{ name: "Discontinued", expand: true }], measures: ["Sum"] } }); $("#change").click(function() { var newDS = new kendo.data.PivotDataSource({ 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: "Discontinued", expand: true }], rows: [{ name: "CategoryName", expand: true }, { name: "ProductName" } ], measures: ["Sum"] }); $("#pivotgrid").data("kendoPivotGrid").setDataSource(newDS); }); }); </script> </div>