SMART datagrid v.1 > Examples

Back  Forward

State Cells  Example

如果将RowIndicator.stateVisible指定为true,就可以在RowIndicator的各个单元格右侧,追加显示可以显示数据行状态的状态单元格。 

Grid - 1
rows

状态单元格基本上是通过指定在各状态的样式组中的背景颜色等样式而显示的。 我们可以添加、修改或删除行并变更下列各状态的颜色。 有关指定颜色的方法,请参考颜色概述页面。 

DataRowState.CREATEDUPDATEDDELETED

我们通过stateStyles而指定状态单元格的默认样式组, 并且可以分别通过RowIndicator.createdStylesupdatedStylesdeletedStyles而追加指定各状态的样式。 

Code -1
    grdMain.setRowIndicator({
        createdStyles: { background: "#f00" },
        updatedStyles: { background: "#00f" },
        deletedStyles: { background: "#333" }
    });

除了使用不同的背景颜色而显示单元格的基本方法以外,还可以通过指定GridStyles.shapeName而显示各状态的图形。 而且,也可以通过指定iconIndexRowIndicator.stateImageList而显示各状态的图像图标。 

 

 

为指定图标,首先需要在网格中注册将会指定在stateImageListImageList。 而且,当指定iconIndex时,shapeName将会被忽视。 

Code -2
    // shapes
    grdMain.setRowIndicator({
        stateStyles: { background: "#f8f8f8" },
        createdStyles: { shapeName: "plus", shapeColor: "#f00" },
        updatedStyles: { shapeName: "circle", shapeColor: "#00f", shapeSize: "70%" },
        deletedStyles: { shapeName: "minus", shapeColor: "#333" }
    });
    // icons
    grdMain.setRowIndicator({
        stateImageList: "stateIcons",
        createdStyles: { iconIndex: '0' },
        updatedStyles: { iconIndex: '1' },
        deletedStyles: { iconIndex: '2' }
    });
Grid - 2
rows

根据具体情况,文本有时会比图标或形状更能明确显示状态。 如果分别指定RowIndicator.createdLabelupdatedLabeldeletedLabel, 图标或形状设置将会被忽视,并且会显示这些状态标签。 

 

Code -3
    grdMain2.setRowIndicator({
        createdLabel: "C",
        updatedLabel: "U",
        deletedLabel: "D"
    });

查看源代码 JSP 

See Also
stateVisible
Examples
行指示器