angular 5 中每个单元格上带有复选框的树状网格

Question

我需要这种带有复选框的树形网格，每个单元格都有嵌套 json 在 angular 5. 我检查了 ag-grid and jqwidgets 但找不到解决我的问题的方法。

Answer 1

在下面的 link 中可以看到类似于提供的屏幕截图中的分层复选框 TreeGrid。您可以从中复制并使用源代码。

<jqxTreeGrid [theme]="'material'" 
         [source]="dataAdapter"
         [altRows]="true"
         [sortable]="true"
         [hierarchicalCheckboxes]="true"
         [width]="getWidth()"
         [checkboxes]="true"
         [columns]="columns"
         [ready]="ready"
         #TreeGrid>

app.component.ts

import { Component, ViewChild } from '@angular/core';

从'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree.ts'导入{jqxTreeGridComponent}；

@组件({ 选择器：'app-root'， templateUrl: './app.component.html' })

导出class AppComponent { @ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent

getWidth() : any {
    if (document.body.offsetWidth < 850) {
        return '90%';
    }

    return 850;
}


data: any[] = [
    {
        'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
        'children':
        [
            {
                'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
                'children':
                [
                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
                    {
                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
                        'children':
                        [
                            { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
                            { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
                        ]
                    }
                ]
            },
            {
                'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
                'children':
                [
                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
                ]
            },
            { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
        ]
    }
];

source: any =
{
    dataType: 'json',
    dataFields: [
        { name: 'name', type: 'string' },
        { name: 'budget', type: 'number' },
        { name: 'id', type: 'number' },
        { name: 'children', type: 'array' },
        { name: 'location', type: 'string' }
    ],
    hierarchy:
    {
        root: 'children'
    },
    localData: this.data,
    id: 'id'
};

dataAdapter: any = new jqx.dataAdapter(this.source);

columns: any[] = [
    { text: "Name", align: "center", dataField: "name", width: 350 },
    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 300 },
    { text: "Location", dataField: "location", cellsAlign: "center", align: "center" }
];

ready(): void {
    this.treeGrid.expandRow(1);
    this.treeGrid.expandRow(2);
}

}

https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/treegrid/columnhierarchicalcheckboxes/

希望对您有所帮助。

Answer 2

我用过这个tree 它非常适合我:)

angular 5 中每个单元格上带有复选框的树状网格

Tree grid with checkbox on each cell in angular 5

treegrid

jqwidget

angular