原創(chuàng)|使用教程|編輯:龔雪|2021-03-15 11:03:32.537|閱讀 173 次
概述:Kendo UI是帶有jQuery、Angular、React和Vue庫(kù)的JavaScript UI組件的最終集合,本文將為大家介紹Kendo UI for jQuery如何更改PivotGrid字段名稱。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI for jQuery R3 2020 SP2試用版下載
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小部件的字段名稱所呈現(xiàn)的內(nèi)容。
下面的示例演示如何更改PivotGrid中[Date].[Calendar]和[Product].[Category] 字段顯示的文本。
<div id="example"> <div id="configurator"></div> <div id="pivotgrid"></div> <script> $(document).ready(function () { var pivotgrid = $("#pivotgrid").kendoPivotGrid({ filterable: true, columnWidth: 200, height: 580, dataBound: function() { var fields = this.columnFields.add(this.rowFields).add(this.measureFields); fields.find(".k-button") .each(function(_, item) { item = $(item); var text = item.data("name").split(".").slice(-1) + ""; item.contents().eq(0).replaceWith(text); }); }, dataSource: { type: "xmla", columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ], rows: [{ name: "[Geography].[City]" }], measures: ["[Measures].[Internet Sales Amount]"], transport: { connection: { catalog: "Adventure Works DW 2008R2", cube: "Adventure Works" }, read: "http://demos.telerik.com/olap/msmdpump.dll" }, schema: { type: "xmla" }, error: function (e) { alert("error: " + kendo.stringify(e.errors[0])); } } }).data("kendoPivotGrid"); }); </script> <style> #pivotgrid { display: inline-block; vertical-align: top; width: 70%; } </style> </div>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都網(wǎng)