SMART datagrid v.1 > Examples

Back  Forward

Focused Cell  Example

当使用SMART datagrid象的属性或方法时,我们会在很多情况下,需要指定数据单元格的位置。 数据单元格的位置,由等两个值所决定, 所以如果CellIndex对象同时具有这两个值,就可以在相关方法或属性中,将其使用为数据单元格的位置值。 

在本次例题中,我们将会通过用于列分组的字段和列的定义, 了解使用CellIndex的情况、变更通过focusedIndex属性而指定的聚焦单元格位置以及应对变更事件的方法。 

下列网格中,上方显示厚边框的是具有输入焦点的单元格,并且GridBase.focusedIndex属性将会返回这个单元格的位置值。 当开始使用键盘进行输入时,这个单元格上将会显示编辑器并开始变更。 有关单元格编辑的内容,将会在其他例题中进行详细说明。 

Grid - 1
rows
Focused Index =>

通过使用GridBase.setFocusedIndex方法,可以变更聚焦单元格的位置。 如果点击上面的"Change Focus"按钮,焦点位置将会一直向下移动。 

Code -1
    var index = grdMain.focusedIndex();
    index.rowIndex++;
    grdMain.setFocusedIndex(index, true);

当用户使用键盘和鼠标或直接调用setFocusedIndex而变更聚焦单元格位置时,将会触发GridBase.onCurrentChanged事件。 并且,在变更之前,将会触发onCurrentChanging事件,而如果在事件处理器中返回Boolean false,就不会变更单元格位置。 

 

Code -2
    grdMain.onCurrentChanging = function (grid, newIndex, oldIndex) {
        return $('#chkChange')[0].checked;
    };
Code -3
    grdMain.onCurrentChanged = function (grid, newIndex) {
        $('#txtCurrent').text("(" + newIndex.rowIndex + ", " + newIndex.column.name() + ")");  
    };

当我们只需要查看数据行的变更时,可以使用onCurrentRowChanged事件。 这个事件只发生在数据行的位置发生变更的情况。有关详细说明,请参考GridBase.onCurrentRowChanged帮助主题。 

Code -4
    grdMain.onCurrentRowChanged = function (grid, oldRow, newRow) {
        $('#txtCurrentRow').text('DataRow: ' + oldRow + ' -> ' + newRow);  
    };
Grid - 2

在数据组等点击或双击鼠标时,将会触发事件,而这时也会有相关单元格的位置信息传递至CellIndex对象。 

Not clicked.
Code -5
    grid.onDataCellDblClicked = function (grid, index) {
        $('#txtClicked').text("(" + index.rowIndex + ", " + index.column.name() + ") " + " double clicked.");  
    };

查看源代码 JSP 

See Also
CellIndex
GridBase.focusedIndex
GridRow
GridColumn
GridBase.onCurrentChanging
GridBase.onCurrentChanged
GridBase.onCurrentRowChanged
Examples
Hello Grid
单元格编辑