本文中的示例演示如何在按钮单击事件上重新加载 Kendo UI PivotGrid 小部件的配置选项。 为了设置选项,演示使用PivotDataSource API。
Kendo UI是带有jQuery、Angular、React和Vue库的JavaScript UI组件的最终集合,无论选择哪种JavaScript框架,都可以快速构建高性能响应式Web应用程序。通过可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50%。
Kendo UI for jQuery R2 2021试用版下载
<div id="example"> <button id="reload">Reload PivotDataSource configuration</button> <div id="pivotgrid"></div> <div class="responsive-message"></div> <script> $(document).ready(function () { var options = { columns: [{"name":["[Date].[Calendar]"],"expand":true},{"name":["[Product].[Category]"]}], rows: [{"name":["[Geography].[City]"]}], measures: [{"name":"[Measures].[Reseller Freight Cost]"}], filter: { "logic":"and", "filters":[{ "field":"[Date].[Calendar]", "operator":"in", "value":"[Date].[Calendar].[Calendar Year].&[2006],[Date].[Calendar].[Calendar Year].&[2008]" }] } }; var dataSourceConfig = { type: "xmla", transport: { connection: { catalog: "Adventure Works DW 2008R2", cube: "Adventure Works" }, read: "https://demos.telerik.com/olap/msmdpump.dll" }, schema: { type: "xmla" }, error: function (e) { alert("error: " + kendo.stringify(e.errors[0])); } }; var pivotgrid = $("#pivotgrid").kendoPivotGrid({ filterable: true, sortable: true, columnWidth: 200, height: 580, dataSource: dataSourceConfig }).data("kendoPivotGrid"); $("#reload").click(function() { var newOptions = $.extend({}, dataSourceConfig, options); var newSource = new kendo.data.PivotDataSource(newOptions); pivotgrid.setDataSource(newSource); }); }); </script> </div>