Сетка дерева с флажком на каждой ячейке в угловой - PullRequest
Новая
       199

Сетка дерева с флажком на каждой ячейке в угловой

0 голосов
/ 13 сентября 2018

Мне нужна такая сетка дерева с флажком для каждой ячейки с вложенным json в угловых 5. Я проверил ag-grid и jqwidgets , но не смог найти растворк моей проблеме.enter image description here

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Я использую это дерево , и оно прекрасно работает для меня:)

0 голосов
/ 14 сентября 2018

Иерархические флажки 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';

import {jqxTreeGridComponent} из 'jqwidgets-scripts /jqwidgets-ts / angular_jqxtree.ts ';

@ Component ({selector:' 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/

Надеюсь, это поможет.

...