0

ユーザーが複数のデータ モデル (別名 DB テーブル) に対して CRUD 操作を実行できるアプリを開発しています。私は Dojo を使用していますが、このdojox.gridモジュールには非常に満足しています。ただし、ユーザーもレコードを追加する必要があるため、テーブルごとに追加ダイアログが必要です。

モデルのデータ構造のみを指定して、Dojo グリッドと追加ダイアログを生成する方法/モジュールはありますか? structureのパラメーターのようなものでdojox.grid、グリッドと追加ダイアログの両方が同じデータ型、デフォルト値、制約などを持つようにします。もちろん、それを行うカスタム ウィジェットを作成することもできますが、ここに存在するものを探しています。

4

1 に答える 1

2

答えは、いいえ、そのようなモジュールはありません。派生ダイアログを作成する必要があります。

必要なものを見てみましょう。

  1. 現在のグリッド
  2. グリッド レイアウト (セルタイプ)
  3. 名前とラベル (構造)

pr-grid で定義された「コンテンツの追加」ボタンが 1 つあり、このボタンがそのグリッドの ID を「認識」していると仮定すると、その onClick 関数はダイアログでフォームを起動する必要があります。

dijit.form ウィジェットがありますが、 のcellTypes下に存在するさまざまな定義済み もありますdojox/grid/cells/_base.js。タイプとウィジェットが 1 対 1 のマップを作成してみましょう。

    var map = [{
        type: 'dojox.grid.cells.Cell',
        dijit: 'dijit.form.TextBox'},
    {
        type: 'dojox.grid.cells.Bool',
        dijit: 'dijit.form.CheckBox'},
    {
        type: 'dojox.grid.cells.Select',
        dijit: 'dijit.form.Select'},
    {
        type: 'dojox.grid.cells.DateTextBox',
        dijit: 'dijit.form.DateTextBox'}
             ];

addContents 関数では、dojox.grid.DataGrid の「編集可能」機能を利用します。そのようなものがあることがわかっている場合、確かに DOM を生成する関数 pr-cell もあります。これは、任意の cellType に存在するformatEditing関数です。

  // for instance
  dojox.grid.cells.Select.prototype.formatEditing( /* value */ "", /* row */ -1);

必要なのは、ダイアログに表示するコンテンツを作成することだけです。以下では、上記の機能を使用して、dijit.Dialog での表示に適したマークアップを dijit に提供します。

function addContents(gridId) {
    var grid = dijit.byId(gridId);
    var contents = ['<form action="MySubmitUrl" data-dojo-type="dijit.form.Form"><table>'];
    dojo.forEach(grid.layout.cells, function(cell, idx) {
        var szHtml = cell.formatEditing("", -1);
        var dijitType = map.filter(function(e) {
            return e.type == cell.declaredClass;
        })[0].dijit;
        var name = grid.structure[0][idx].field;
        var label = grid.structure[0][idx].name;
        var elementMod = ' data-dojo-type="' + dijitType + '" id="' + name + '" name="' + name + '" ';
        contents.push('<tr><td>');
        contents.push('<label for="' + name + '">' + label + ': </label>');
        contents.push('</td><td>');
        contents.push(szHtml.replace(/^([^\ ]*)/, "$1" + elementMod));
        contents.push('</td></tr>');
    });
    contents.push('</table></form>');
    var dialog = new dijit.Dialog({
        content: contents.join("")
    });
    dialog.show();
}

コンテンツは簡単にスタイルを設定でき、送信/キャンセル ボタンも提供する必要がありますが、アイデアが得られると確信しています。ランニングサンプル

それがどのように実行されるか教えてください（コンボボックス/日時タイプをテストしていません）

于 2012-07-09T16:58:48.920 に答える