4

データをグリッド形式で表示するためにdgridを使用していますが、4つの列があります。すべて編集可能

私はそれを宣言するために次の方法を使用しました。

<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>

私の問題は、最初の列を編集するときに、編集後に2番目の列にフォーカスを設定し、そのセルにカーソルを表示して、2番目の列の編集を開始できるようにする必要があることです。3列目も同様です。

私は道場とdgridに非常に新しいです。sitepenでいくつかのAPIを見つけましたが、問題を解決できませんでした

これで私を助けてください

4

2 に答える 2

5

そもそもdgrid/Grid::edit(cell)方法があります。

以前dojo/aspect::afterは、イベントリスナーをエディターウィジェット（たとえば）に追加して、特定のキー（私の場合はTABdijit/form/TextBox ）のイベントをリッスンし、次に編集する必要のあるセルを呼び出していました。keypressgrid.edit(cell)

jsFiddleで実際の例を参照してください：http：//jsfiddle.net/phusick/2jU7R/

完成にはほど遠いですが、少なくともそれは可能な方向性を提供することができます。ダブルクリックして編集し、編集時にTabキーを押して、次のセルにジャンプします。

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);
                }
            })
        }
    });
});
于 2012-09-03T14:15:40.010 に答える
0

別のオプションがあります。古いバージョンのdgridのテキスト選択のバグの回避策も含まれています。

postCreate: function() {
    var that = this;
    this.inherited(arguments);

    // FIXME Workaround bug in dgrid that causes the grid to lose
    // focus after each save.
    this.on('dgrid-datachange', function(evt) {
        that._selectedCell = that.cell(evt);
    });

    aspect.after(this, 'save', function(dfd) {
        dfd.then(function() {
        var nextCell = that.right(that.cell(that._selectedCell.row.id, that._selectedCell.column.id));
            that.edit(nextCell);
        // FIXME Workaround dgrid bug that blocks field text to be selected on focus.
        nextCell.element.widget && nextCell.element.widget.textbox && nextCell.element.widget.textbox.select();
        });
    });
}
于 2013-11-21T23:19:41.370 に答える