SMART datagrid v.1 > Examples

Back  Forward

Check Bar  Example

网格的各个可以具有checked状态。 当EditOptions.checkabletrue时, 用户可以在运行时间,通过用鼠标点击显示在网格左侧的试件的check单元格,变更网格行的checked状态。 另外,有很多api属性和方法是与checked相关的。 

Grid - 1
rows

如果将指定为true,用户就只能选择一个行,并且复选框的形状也会显示为radio按钮类型。 

如果将CheckBar.draggable设置为true,用户就可以替代重复点击各个check单元格的方式,只需通过拖动相关位置而进行选择。 如果在按ctrl键的同时进行拖动,所选状态将会被切换。 

Code -1
    grid.checkBar().setExclusive(ev.target.checked);

网格的Check状态也可以被用于动态样式。  

Code -2
    grid.body().setCellDynamicStyles([{
        criteria: 'checked',
        styles: { background: '#3000ff00' }
    }]);

已被checked的行的列表,可以通过GridBase.getCheckedRows方法而获取。  

Code -3
    var rows = grdMain.getCheckedRows();
    grdMain.deleteRows(rows, true);

另外,有些api是可以告知网格行的checked状态或check和uncheck指定行的。 我们可以在下列网格中进行测试。 网格行的checked状态,是在网格级别(而非数据组的值)进行管理的。 也就是说,即使两个网格都连接在同一数据组上,下方网格中指定的checked状态与上方网格中的是没有关系的。 


Grid - 2
rows

当设置CheckBar.checkAllExpressioncheckAllCallback时, 如果用户点击"全部选定",就只会选择在指定公式或回调中返回true的行。 


查看源代码 JSP 

See Also
CheckBar
CheckBar.exclusive
EditOptions.checkable
GridBase.checkBar
GridBase.checkRow
GridBase.checkRows
GridBase.checkAll
GridBase.getSelectedRows
GridBase.onRowChecked
GridBase.onRowsChecked
Examples
可选的表达式和回调