Angular UI Grid を使用して列を別の列と同じ順序で並べ替える方法を誰かが知っているかどうか疑問に思っていました。
2 に答える
たとえば、名前と姓をそれぞれ表示する「名」列と「姓」列がある場合、「姓」で並べ替えをクリックすると、実際にテーブルが次のように並べ替えられます。 「名」の順番は?
その場合は、セル テンプレートを使用してこれを実現できます。
次の表があるとします。
「姓」列をソートすると、実際には「名」列のデータ順にテーブルがソートされます。
次のデータを想定します。
$scope.gridOptions.data = [{
"firstName": "David",
"lastName": "Carney",
}, {
"firstName": "Bob",
"lastName": "Wise",
}, {
"firstName": "Peter",
"lastName": "Thompson",
}];
次のように定義columnDefs
します。
$scope.gridOptions.columnDefs = [{
name: 'firstName',
field: 'firstName'
}, {
name: 'lastName',
field: 'firstName',
cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.lastName}}</div>'
}];
2 番目の列の列定義は列「Last Name」とセル テンプレートによってlastName
属性がセルに表示されることを保証しますが、列がそれfield
にバインドされfirstName
ているため、列が並べ替えられたときに並べ替えられることを意味しfirstName
ます。
例はここにあります。2 列目 (Last Name) を並べ替えると、行は実際には 1 列目 (First Name) の順に並べ替えられます。
Grid は、フィールド値とともに偶数行を引数として sort 関数に渡します。以下のようなソート機能を呼び出します。
sortFn(propA, propB, rowA, rowB, direction);
この追加情報を使用して、データを適切に並べ替えることができます。
colDef の sortingAlgorithm プロパティで sortFunc を指定できます。
これは、ui-grid バージョン 3.0.7 から発生します。