0

私はng-gridをチェックアウトしており、特定の列に別のcellTemplateを使用するようにcolumnDefsを変更しました。このテンプレートは実際の値を表示しませんが、エンドユーザーが読みやすいように別のオブジェクトで検索します (基本的には、人間が理解できるものに変換される外部キー ID)。

gridOptions で showGroupPanel: true を有効にすると、1 つの列を「グループ化」バーにドラッグすると、結果がグループ化されます。

テンプレートを編集した列の 1 つでこれを行うと、cellTemplate が使用されず、ID が再度表示されます。

グループのヘッダーでも、単に値を表示する ng-grid の代わりに、独自のテンプレートを使用できることを確認する方法はありますか?

[更新] 一部のコード (本質のみを示すために 1 列に簡略化) を使用すると、理解しやすくなる可能性があります (コード エラーはすべてタイプミスであり、これは私の実際のコードのコピー アンド ペーストではありません)。

HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

JS:

$scope.gridOptions = { 
    data: 'data', enableSorting: true, showFilter: true, multiSelect: false,
    showGroupPanel: true,
    columnDefs: 'colDefs',
};

$scope.colDefs = [];
$scope.topicid_fkvalues = { 1: "Languages", 2: "Mathematics" };

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

$scope.colDefs.push( colDef1 );

$scope.data = [ { topicid: 1 }, { topicid: 2 }, { topicid: 1 } ]

したがって、この列をグループ バーにドラッグすると、ID だけでなく、グループ ヘッダーにも説明が表示されます。

[更新 2] 解決策

これに対する良い解決策を見つけたと思います。

cellTemplate は必要なく、フィルターだけであることがわかりました。

したがって、モジュールに新しいフィルターを定義すると、次のようになります。

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

これを置き換えることができます：

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

以下によって

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

$scope.topicid_fkvalues パラメーターを 2 番目の引数としてフィルターを追加します (このフィルターは「集計」ビューでも使用されます)。したがって、翻訳が異なる異なる列がある場合でも、同じフィルターを使用できますが、翻訳には複数のスコープ変数を使用できます。

これが理にかなっており、同じ質問をしている可能性のある人々の助けになることを願っています...

4

1 に答える 1