製品版のみの機能
ピボット グリッド - TypeScript
このサンプルでは、右側の igPivotGrid で TypeScript を使用する方法を紹介します。クラス ベースの方法を使用した場合のを使用してデータを割り当てる方法も紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style>
#dataSelector, #pivotGrid {
float: left;
}
</style>
</head>
<body>
<div class="sampleContent">
<div id="dataSelector"></div>
<div id="pivotGrid"></div>
</div>
<script src="/TypeScriptSamples/pivot-grid/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class SelectorProduct2 {
ProductCategory: string;
SellerName: string;
Country: string;
City: string;
Date: string;
UnitPrice: number;
UnitsSold: number;
constructor(public category, public sellerName, public country, public city,
public date, public unitPrice, public unitsSold) {
this.ProductCategory = category;
this.SellerName = sellerName;
this.Country = country;
this.City = city;
this.Date = date;
this.UnitPrice = unitPrice;
this.UnitsSold = unitsSold;
}
}
var dataGrid: SelectorProduct2[] = [];
dataGrid.push(new SelectorProduct2("衣類", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282));
dataGrid.push(new SelectorProduct2("衣類", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296));
dataGrid.push(new SelectorProduct2("自転車", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68));
dataGrid.push(new SelectorProduct2("アクセサリー", "David Haley", "UK", "London", "04/07/2012", 85.58, 293));
dataGrid.push(new SelectorProduct2("部品", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240));
dataGrid.push(new SelectorProduct2("衣類", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456));
dataGrid.push(new SelectorProduct2("部品", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492));
var dataSource = new $.ig.OlapFlatDataSource({
dataSource: dataGrid,
metadata: {
cube: {
name: "Sales",
caption: "セールス",
measuresDimension: {
caption: "メジャー",
measures: [
{
caption: "販売単位数", name: "UnitsSold",
aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')
},
{
caption: "単価", name: "UnitPrice",
aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2)
}]
},
dimensions: [
{
caption: "日付", name: "Date", hierarchies: [
$.ig.OlapUtilities.prototype.getDateHierarchy(
"Date", // the source property name
["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional)
"Dates", // The name for the hierarchy (optional)
"日付", // The caption for the hierarchy (optional)
["年", "四半期", "月", "日"], // the captions for the levels (optional)
"すべての期間") // the root level caption (optional)
]
},
{
caption: "位置", name: "Location", hierarchies: [{
caption: "位置", name: "Location", levels: [
{ name: "AllLocations", caption: "すべての場所", memberProvider: function (item) { return "すべての場所"; } },
{ name: "Country", caption: "国", memberProvider: function (item) { return item.Country; } },
{ name: "City", caption: "市", memberProvider: function (item) { return item.City; } }]
}]
},
{
caption: "製品", name: "Product", hierarchies: [{
caption: "製品", name: "Product", levels: [
{ name: "AllProducts", caption: "すべての製品", memberProvider: function (item) { return "すべての製品"; } },
{ name: "ProductCategory", caption: "カテゴリ", memberProvider: function (item) { return item.ProductCategory; } }]
}]
},
{
caption: "販売員", name: "Seller", hierarchies: [{
caption: "販売員", name: "Seller", levels: [
{ name: "AllSellers", caption: "すべての販売員", memberProvider: function (item) { return "すべての販売員"; } },
{ name: "SellerName", caption: "販売員", memberProvider: function (item) { return item.SellerName; } }]
}]
}
]
}
},
rows: "[Date].[Dates]",
columns: "[Product].[Product]",
measures: "[Measures].[UnitsSold]"
});
$(function () {
$('#dataSelector').igPivotDataSelector({
dataSource: dataSource,
height: "580px",
width: "230px"
});
$("#pivotGrid").igPivotGrid({
dataSource: dataSource,
height: "580px",
width: "580px",
allowSorting: true,
allowHeaderRowsSorting: true,
allowHeaderColumnsSorting: true,
firstSortDirection: "ascending",
firstLevelSortDirection: "ascending",
levelSortDirections: [
{ levelUniqueName: "[Product].[Product].[ProductCategory]" }
],
});
});