Pivot Table Research with Angular - jQWidgets
【摘要】 jQWidgets组件比较多，本次研究挑选两个组件演示：样式文件引入： <link rel="stylesheet" type="text/css" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css"> <link rel="stylesheet" type="text/css" href="http...
jQWidgets组件比较多，本次研究挑选两个组件演示：
样式文件引入：
<link rel="stylesheet" type="text/css" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" type="text/css" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.material.css">
jqx-grid
模块引入
import { jqxGridModule } from 'jqwidgets-scripts/jqwidgets-ng/jqxgrid';
组件引入：
html：
<jqxGrid [theme]="'material'"
[width]="getWidth()" [source]="dataAdapter" [columns]="columns"
[pageable]="true" [autoheight]="true" [sortable]="true"
[altrows]="true" [enabletooltips]="true" [editable]="true"
[selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
</jqxGrid>
ts:
source: any =
{
datatype: 'xml',
datafields: [
{ name: 'ProductName', type: 'string' },
{ name: 'QuantityPerUnit', type: 'int' },
{ name: 'UnitPrice', type: 'float' },
{ name: 'UnitsInStock', type: 'float' },
{ name: 'Discontinued', type: 'bool' }
],
root: 'Products',
record: 'Product',
id: 'ProductID',
url: '../assets/products.txt'
};
getWidth() : any {
if (document.body.offsetWidth < 850) {
return '90%';
}
return 850;
}
dataAdapter: any = new jqx.dataAdapter(this.source);
cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
if (value < 20) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
}
else {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
}
};
columns: any[] =
[
{ text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: 100 },
{ text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' }
];
columngroups: any[] =
[
{ text: 'Product Details', align: 'center', name: 'ProductDetails' }
];
数据文件：
products.txt见附件。
演示 ：
jqxPivotGrid
模块引入：
import { jqx
html
<h1>jqxPivotGrid</h1>
<jqxPivotGrid
#pivotGrid1
[width]="getWidth()"
[height]="400"
[source]="pivotDataSource"
[treeStyleRows] = "false"
[autoResize] = "false"
[multipleSelectionEnabled] = "true"
>
</jqxPivotGrid>
ts:
@ViewChild('pivotGrid1', {static: false}) pivotGrid1: jqxPivotGridComponent;
constructor()
{
this.pivotDataSource = this.createPivotDataSource();
}
ngAfterViewInit(): void {
this.pivotGrid1.getPivotRows().items[0].expand();
this.pivotGrid1.refresh();
}
getWidth() : any {
if (document.body.offsetWidth < 850) {
return '90%';
}
return 850;
}
pivotDataSource: null;
createPivotDataSource(): any {
// prepare sample data
let data = new Array();
let firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars"
];
let lastNames =
[
"Fuller", "Davolio", "Burke"
];
let productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte"
];
let priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (let i = 0; i < 100; i++) {
let row = {};
let productindex = Math.floor(Math.random() * productNames.length);
let price = parseFloat(priceValues[productindex]);
let quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
let source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
let dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
let pivotDataSource = new jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: true,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname'}],
columns: [{ dataField: 'productname' }],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', width: NamedNodeMap, formatSettings: { prefix: '$', decimalPlaces: 2 } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2} }
]
}
);
return pivotDataSource;
}
演示：
-
29.95KB 下载次数：0次
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）