KendoUI是带有jQuery、Angular、React和Vue库的JavaScriptUI组件的最终集合，无论选择哪种JavaScript框架，都可以快速构建高性能响应式Web应用程序。

通过可自定义的UI组件，KendoUI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题，KendoUI将开发时间加快了50%。

本文中的示例演示了如何在成员扩展上更改KendoUIPivotGrid的配置。

这样，小部件始终从扩展成员开始向下钻取扩展。

script//CUSTOMWIDGETTHATHANDLESTHESLICING!varkendo=window.kendo;varWidget=kendo.ui.Widget;varLIST_HTML=‘divclass=”k-fieldselectork-list-containerk-reset”ulclass=”k-pivot-configurator-settingsk-listk-resetk-pivot-setting”//div’;

varPivotSlicer=Widget.extend({init:function(element,options){Widget.fn.init.call(this,element,options);

this.dataSource=this.options.dataSource;

if(!this.dataSource){thrownewError(“PivotDataSourceinstanceisrequired”);}

this.itemTemplate=kendo.template(this.options.itemTemplate);

this._setSettings();

this._lists();

this.refresh();},

options:{name:“PivotSlicer”,itemTemplate:‘liclass=”#:className#”data-idx=”#:idx#”#:name#/li’,mergeChildren:false},

_setSettings:function(){varcolumns=this.dataSource.columns().slice();varrows=this.dataSource.rows().slice();

this.columns=isExpanded(columns)?[{name:getName(columns),settings:columns}]:[];this.rows=isExpanded(rows)?[{name:getName(rows),settings:rows}]:[];},

setDataSource:function(source){this.dataSource=source;this._setSettings();this.refresh();},

push:function(axis,path){varsettings=this.dataSource[axis]();varlength=path.length–1;

if(this.options.mergeChildrenlength0){returnfalse;}

for(varidx=0;idx=length;idx++){settings[idx]={expand:idx===length,name:[path[idx]]};}

this[axis].push({name:JSON.stringify(path),settings:settings});

this.update(axis,settings);

returntrue;},

pop:function(axis,idx){varaxisState=this[axis][idx];

this[axis]=this[axis].slice(0,idx+1);

if(axisState){this.update(axis,axisState.settings);}},

update:function(axis,settings){this.dataSource[axis](settings);this.refresh();},

refresh:function(){this.columnsList.html(this._buildHtml(this.columns));this.rowsList.html(this._buildHtml(this.rows));},

_lists:function(){this.element.append(“h4Columns:/h4”);this.columnsList=$(LIST_HTML).appendTo(this.element).children(“ul”);

this.element.append(“h4Rows:/h4”);this.rowsList=$(LIST_HTML).appendTo(this.element).children(“ul”);

this.columnsList.on(“click”,“li:not(.k-state-selected)”,(function(e){varidx=$(e.currentTarget).data(“idx”);

this.pop(“columns”,idx);}).bind(this));

this.rowsList.on(“click”,“li:not(.k-state-selected)”,(function(e){varidx=$(e.currentTarget).data(“idx”);

this.pop(“rows”,idx);}).bind(this));

this.columnsList.add(this.rowsList).on(“mouseentermouseleave”,“li”,this._toggleHover);},

_toggleHover:function(e){$(e.currentTarget).toggleClass(“k-state-hover”,e.type===“mouseenter”);},

_buildHtml:function(list){varhtml=“”;varlength=list.length;

for(varidx=0;idxlength;idx++){varclassName=“k-itemk-header”+(idx===(length–1)?”k-state-selected”:“”);

html+=this.itemTemplate({idx:idx,name:list[idx].name,className:className});}

returnhtml;}});

functionisExpanded(settings){for(varidx=0;idxsettings.length;idx++){if(settings[idx].expand){returntrue;}}returnfalse;}

functiongetName(settings){varname=[];for(varidx=0;idxsettings.length;idx++){if(settings[idx].expand){name.push(settings[idx].name);}}

returnJSON.stringify(name);}

kendo.ui.plugin(PivotSlicer);

/scriptdivid=”slicer”/divdivid=”pivotgrid”/div

script$(function(){varcolumns=[{name:“[Date].[Calendar]”,expand:true},{name:“[Reseller].[ResellerType]”}];varrows=[{name:“[ShipDate].[Calendar]”}];

varoptions={type:“xmla”,rows:rows.slice(),columns:columns.slice(),measures:{axis:“columns”,values:[“[Measures].[ResellerFreightCost]”,“[Measures].[InternetSalesAmount]”]},transport:{connection:{catalog:“AdventureWorksDWR2”,cube:“AdventureWorks”},read:“//demos.telerik.