7

ag-grid で「グループ化」行を選択する方法があるかどうか疑問に思っています。

たとえば、Web サイトに示されている例: http://www.ag-grid.com/angular-grid-grouping/index.php

「rowSelection」パラメーターを「single」に設定して、最下位ノードの行全体を強調表示できます。ただし、「国」行を強調表示することはできません。

この例では、これを行う唯一の方法は、その行の下の要素を「すべて選択」することです。

ありがとう！

4

4 に答える 4

4

ドキュメントによると、 grid オプションgroupSelectsChildrenをに設定falseすると、グループ化行がその子から独立して選択可能になります。

groupSelectsChildren: true の場合、グループを選択すると、そのすべての子を選択するという影響があります。グループは、すべての子が選択されている場合は「選択済み」、何も選択されていない場合は「未選択」、子に選択済みと未選択が混在している場合は「中間」と表示されます。ノードが子を選択している場合、api.getSelectedNodes() を呼び出すと、選択されたセットには表示されません。falseの場合、グループは子ノードとは無関係に選択可能です。子とは別にグループ ノードを選択すると、api.getSelectedNodes() の呼び出し時にセットに表示されます。

于 2016-12-14T10:36:45.760 に答える
1

私は同じ問題を抱えていたので、行を選択するルックアンドフィールをエミュレートすることで回避しました。

columnDefsオブジェクトで、属性を EVERY 列定義に追加しますcellClassRules(すべてのセルが強調表示され、クリックすると行自体が強調表示されているように見えます)。

var columnDefs = [
    { headerName: "#1", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col1" },
    { headerName: "#2", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col2" },
    { headerName: "#3", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col3" }
]

次に、オブジェクトにイベント リスナーを追加onCellClickedします。gridOptions

onCellClicked: function(cell) {
    SelectedRowIndex = cell.rowIndex;
    $scope.gridOptions.api.refreshView();
}

コントローラーで、次の変数を定義しますSelectedRowIndex。

var SelectedRowIndex; // this will contain the currently selected row number

次に、セルを画面上にレンダリングしようとするたびにCustomRowStyle呼び出される関数を作成します。この関数は、セルが(ユーザーが最後にクリックした行に基づいて)ag-gridと同じ行にあるかどうかをチェックして、セルがクラスと共に表示されるかどうかを判断します。SelectedRowIndexrowSelected

function CustomRowStyle(params) {
    return params.rowIndex === SelectedRowIndex
}

最後に、rowSelected選択した行 CSS でクラスを定義します。

.rowSelected {
    background-color: silver !important;
}

どの行をクリックしても (それがグループ アイテムであるか子アイテムであるかに関係なく)、rowSelectedCSS と共に表示されます。コントローラーは、SelectedRowIndex変数をチェックすることで、現在どの行が選択されているかを常に知ることができます。

于 2016-07-22T18:03:49.163 に答える