SMART datagrid v.1 > Examples

Back  Forward

Row Grouping  Example

类似于关系数据库的Group By,行分组是一种捆绑指定字段值相同的行并显示其合计等的方法。 SMART datagridGridView显示所捆绑的行为临近的网格行。 而且,可以显示捆绑前后的组页眉或页脚。 

用户可以拖动连接在需要分组的字段上的列标头至分组面板区域并设置行分组。 在分组面板上,将会显示当前设置的组字段列表,并且通过点击字段视图右侧的关闭按钮,可以从分组中进行排除。 

而且,行分组是以DataField(并非)为标准运行的,但分组面板上显示的是连接在字段上的列标头。 

Grid - 1
rows
RowGroup.expandedAdornments:
RowGroup.collapsedAdornments:

脚本可以通过调用groupBy,设置行分组。 另外,如果行分组状态发生变更,则会触发GridView.onGrouped事件。 而且,变更之前,将会触发onGrouping事件。 

如果在onGrouping事件内明确返回false,就不会进行分组变更。 

解除现有分组。 

使用"国家""进出口"字段进行分组。 

从行分组排除所选列。 

Code -1
    // 当分组发生变更时,将会触发下列事件。
    grdMain.onGrouped = function () {
        console.log('Row grouping is changed.');
    });
    // 解除group by。
    grdMain.clearGroupBy();
    // group by。
    grdMain.groupBy(['country', 'flow']);
1. createCallback

可以在RowGroup.createCallback属性中,指定决定是否创建组页脚的回调函数。 如果在回调中明确返回Boolean false,就不会创建页脚。 

只在1 level group中显示页脚。 

2. footer value

在各个组的页脚单元格中,将会计算和显示通过列groupFooterexpressioncallback属性指定的合计属性。 上述例题中,"交易额"列使用了expression,而"交易量"列则使用了callback。 特别是,"交易量"列中已设置可以根据组行的"进出口"状态而显示负数值的功能。 

3. styles

可以通过列的groupFooter属性,设置显示在各个行组的组页脚的值或样式。 而且,可以通过RowGroupPanel.itemStyles等,设置显示在组面板的组字段样式。 

  

 

Code -2
    grdMain.loadStyles({
        groupPanel: {
            background: "#fffad2",
            item: {
                background: "#eee8aa"
            },
            head: {
                background: "#eeeea8"
            }
        }
    });
4. export

导出Excel文件 

查看源代码 JSP 

See Also
GridView.groupBy
GridView.clearGroupBy
GridColumn.groupFooter
GridBase.groupPanel
RowGroup.createFooterCallback
ColumnSummary.expression
ColumnSummary.callback
Examples
合并行分组