2

私は与えられたグリッドを持っています。各行の属性内に id 値を配置したいと考えています。(行 ID を取得し、削除および編集アクションを実行するため)。

私が考えた最良の方法は、フォーマッタを使用して属性に出力することですが、IDをフォーマッタ関数に渡す方法が見つかりません。フォーマッタ呼び出しが列の減速レベルであり、各行IDを取得しています、データループ内。

どうやってするか？

function NameFormatter(row, cell, value, columnDef, dataContext) {
    return '<span data-user-id="'+id+'">"'+text+'"</span>';
}

columns.push({ 
   id: "name", name: "Name", field: "name", width: 180, 
   cssClass: "cellName", sortable: true, formatter:NameFormatter
})

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        /*
           What I do here?
           How do I pass list_users[i].id & 
           list_users[i].name to the formatter from here? 
        */
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now'
    };
}
4

3 に答える 3

6

私の質問に出くわすユーザーが将来使用できるように、コードと回答をここに文書化します。

SlickGrid のロジックは次のように機能します。

  1. テーブル ヘッダーと、Sortable、幅などのその他のランタイム プロパティを定義する列。
  2. json & register 値をDataViewに取得するデータ ループ。
  3. このメンバーは、フォーマッターを使用するときに役立ちます。

Columns宣言内でフォーマッタを呼び出す場合は、フォーマッタを呼び出すだけです。スリックグリッドが残りを行います。

これは私の列定義で、条件に基づいて値と ID を持つ {span} 要素があります。

columns.push({ 
    id: "options", 
    name: "Options", 
    field: "options", 
    width: 110, 
    cssClass: "cellOptions slick-last-cell", 
    formatter: optionsFormatter 
})

すべてが正しく定義されている場合、フォーマッターは条件またはその他の種類のジョブに必要なすべてのパラメーターを渡します。

フォーマッタは、dataView から渡されたすべての Row Params を受け取ります。次のようにデータを定義した場合:

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        id: list_users[i].id,
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now',
        isPending: list_users[i].isPending
    };
}

私のdataContextがこの配列を彼の手で保持し、それをフォーマッターに渡します。フォーマッターで、変数値で必要なことを行います。

 function optionsFormatter(row, cell, value, columnDef, dataContext) {
    if (dataContext.isPending) {
        return '<span onclick="deleteUser(' + dataContext.id + ')" class="actionIcon delete">Cancel</span>';
    } else {
        return '<span onclick="editUser(' + dataContext.id + ')" class="actionIcon edit">Edit</span>';
    }
}

ご覧のとおり、id と isPending はユーザーにはグリッドに表示されませんが、どの dataContext でも使用できます。

それでおしまい。手にした瞬間はとてもシンプル。

于 2012-05-28T21:53:34.323 に答える
2

フォーマッタはレンダリング時に呼び出されます。したがって、すべてのデータはすでにグリッドにロードされています。

ID に専用の列を使用しないのはなぜですか (grid.setColumns を呼び出して、レンダリング後に表示から除外できます)。または、さらに良いことに、dataView を使用します。ID の必須列が既にあり、編集/削除に使用できます。

お役に立てれば！

于 2012-05-25T19:59:55.683 に答える