Question

我需要这种带有嵌套json的每个单元格带有复选框的树形网格在角度5。我已经检查过ag-grid和jqwidgets，但找不到我的问题的解决方法。

Answer 1

分层复选框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};

@Component（{ 选择器：“ app-root”， templateUrl：“ ./ app.component.html” }）

导出类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 它对我来说很完美：）

在角度5的每个单元格上带有复选框的树形网格

2 个答案: