Dgrid将重点放在细胞上 [英] Dgrid set focus on cell

问题描述

我正在使用dgrid显示网格格式的数据，它有四列。所有都可以编辑

我用以下方式声明它。

 < table id =griddata-dojo-type =dgrid.CustomGriddata-dojo-props =store：memoryStore> 
< thead> 
< tr> 
< th data-dgrid-column =dgrid.editor（{field：'id'}，dijit.form.TextBox，'click'）> ID< / th> 
< th data-dgrid-column =dgrid.editor（{field：'name'}，dijit.form.TextBox，'click'）> Name< / th> 
< th data-dgrid-column =dgrid.editor（{field：'description'}，dijit.form.TextBox，'click'）>描述< / th> 
< / tr> 
< / thead> 
< / table> 
  

我的问题是，当我编辑第一列时，编辑后应将焦点放在第二列和在该单元格中显示光标，所以我可以开始编辑第二个;对于第三列也是一样。

我对Dojo和dgrid非常新鲜。我在sitepen上发现了一些API，但无法解决我的问题。

请帮助我这个

解决方案

开始使用 dgrid / Grid :: edit（cell）方法。

我使用 dojo / aspect :: after 将一个事件侦听器添加到编辑器小部件（例如 dijit / form / TextBox ），如果不存在，则为特定键听 keypress 事件，在我的情况下> TAB ，然后调用下面要编辑的单元格的 grid.edit（cell）。

请参阅jsFiddle的工作示例： http://jsfiddle.net/phusick/2jU7R/

尚未完成，但至少可以提供一个可能的指导。

 在编辑时使用双击进行编辑，然后按下 aspect.after（grid，edit，function（promise，cellNode）{
 
 if（promise === null）return; 
 
 promise。然后（function（widget）{
 if（！widget._editorKeypressHandle）{
 widget._editorKeypressHandle = widget.on（keypress，function（e）{
 
 for var rowId in grid.selection）{break;} 
 for（var columnId in grid.selection [rowId]）{break;} 
 
 if（e.charOrCode == keys.TAB） {
 e.preventDefault（）; 
 var cellEdited = grid.cell（rowId，columnId）; 
 var cellToEdit = grid.right（cellEdited，1）; 
 
 if（cellEdited.row.id == cellToEdit.row.id 
&& cellEdited.column.id == cellToEdit.column.id 
）{
 //转到下一行
 for（var firstColumnId in grid.columns）{break;} 
 var nextRow = grid.down（cellEdited.row，1）; 
 cellToEdit = grid.cell（nextRow，firstColumnId）; 
}; 
 
 grid.deselect（cellEdited）; 
 grid.select（cellToEdit）; 
 grid.edit（cellToEdit）; 
} 
}）
} 
}）; 
}）; 
  

I am using dgrid for displaying data in grid format , it has four columns. all are editable

I have used following way to declare it.

<table id="grid" data-dojo-type="dgrid.CustomGrid" data-dojo-props="store: memoryStore">
<thead>
    <tr>
        <th data-dgrid-column="dgrid.editor({ field: 'id' }, dijit.form.TextBox, 'click')">ID</th>
        <th data-dgrid-column="dgrid.editor({ field: 'name' }, dijit.form.TextBox, 'click')">Name</th>
        <th data-dgrid-column="dgrid.editor({ field: 'description' }, dijit.form.TextBox, 'click')">Description</th>
    </tr>
</thead>
</table>

My Problem is , when I will edit first column , after editing it should set focus on second column and show cursor in that cell so I can start editing second one ; same is for third column.

I am very much new to dojo and dgrid. I found some APIs on sitepen but couldn't solve my problem

Please help me on this

解决方案

There is dgrid/Grid::edit(cell) method to start with.

I used dojo/aspect::after to add an event listener to an editor widget (e.g. dijit/form/TextBox), if it does not exist, to listen keypress event for a specific key, in my case TAB, and then call grid.edit(cell) with the cell that should be edited next.

See a working example at jsFiddle: http://jsfiddle.net/phusick/2jU7R/

It is far from finished, but at least it can provide a possible directon. Use double click to edit and press TAB when editing to jump to the following cell.

aspect.after(grid, "edit", function(promise, cellNode) {

    if(promise === null) return;

    promise.then(function(widget) {
        if (!widget._editorKeypressHandle) {
            widget._editorKeypressHandle = widget.on("keypress", function(e) {

                for (var rowId in grid.selection) { break;}            
                for (var columnId in grid.selection[rowId]) { break;}

                if(e.charOrCode == keys.TAB) {
                    e.preventDefault();
                    var cellEdited = grid.cell(rowId, columnId);
                    var cellToEdit = grid.right(cellEdited, 1);

                    if(cellEdited.row.id == cellToEdit.row.id
                       && cellEdited.column.id == cellToEdit.column.id
                      ) {
                          // go to next line
                          for(var firstColumnId in grid.columns) { break;}
                          var nextRow = grid.down(cellEdited.row, 1);
                          cellToEdit = grid.cell(nextRow, firstColumnId);
                    };

                    grid.deselect(cellEdited);
                    grid.select(cellToEdit);
                    grid.edit(cellToEdit);
                }
            })
        }
    });
});

这篇关于Dgrid将重点放在细胞上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！