EasyUI
PivotGrid
Extension » PivotGrid
Usage Example
Create the pivot grid
Properties
The properties extend from treegrid, below is the added properties for pivotgrid.
Name | Type | Description | Default |
---|---|---|---|
frozenColumnTitle | string | The title for the frozen column. | |
valueFieldWidth | number | The column width of the value fields. | 80 |
valuePrecision | number | The precision of the value fields. | 0 |
valueStyler | function(value,row,index) | The cell styler function for the value fields. | |
valueFormatter | function(value,row,index) | The cell formatter function for the value fields. | |
headerStyler | function(title,col) | The header cell styler function for the header fields. | |
headerFormatter | function(title,col) | The header cell formatter function for the header fields. | |
pivot | object |
The pivot grid configuration, contains the following properties: rows: array, the rows displayed on the left. columns: array, the columns displayed above the grid. values: array, the value fields displayed under the columns. filters: array, the filters. filterRules: object, the filter rules. aggregate: object, the aggregate value for the rows and columns. |
|
i18n | object |
The i18n configuration, contains the following items: fields: the title of the fields region. filters: the title of the filters region. rows: the title of the rows region. columns: the title of the columns region. ok: the title of the OK button. cancel: the title of the CANCEL button. |
|
defaultOperator | string | The default operator on the value columns. | sum |
operators | object |
The operators on the value fields, available options are:'sum','count','max','min'.
Code example: //implement the 'sum' operator $.extend($.fn.pivotgrid.defaults.operators, { sum: function(rows, field){ var opts = $(this).pivotgrid('options'); var v = 0; $.map(rows,function(row){ v += parseFloat(row[field])||0; }); return v.toFixed(opts.valuePrecision); } }); |
Events
The events below extend from treegrid.
Methods
The methods below extend from treegrid.
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
getData | none | Get the loaded data. |
layout | none | Open the layout dialog that allows the user to change the cube at runtime. |
toArray | rows | Export the array data. |
toExcel | param |
Export to the excel file.
Code example: $('#pg').pivotgrid('toExcel', { filename: 'pivotgrid.xls', worksheet: 'Worksheet', caption: 'Caption' }); // export with customized rows $('#pg').pivotgrid('toExcel', { filename: 'pivotgrid.xls', worksheet: 'Worksheet', caption: 'Caption', rows: rows }); |
toCsv | param |
Export to the csv file.
Code examples: $('#pg').pivotgrid('toCsv', 'pivotgrid.csv'); // export with customized rows $('#pg').pivotgrid('toCsv', { filename: 'pivotgrid.csv', rows: rows }); |