AG-GRID не может добавить кнопку со значком в каждый ряд ag-grid и флажок множественного выбора в моей ag-grid - PullRequest
Новая
       6

AG-GRID не может добавить кнопку со значком в каждый ряд ag-grid и флажок множественного выбора в моей ag-grid

0 голосов
/ 24 декабря 2018

В каждом ряду моей аг-сетки.Мне нужно добавить кнопку со значком углового материала в каждый ряд сетки.Тем не менее, результат показал мне только текстовую кнопку.Он не отображает кнопку со значком в моей сети.

Далее мне нужно установить флажок множественного выбора в моей сетке.Однако в моей ag-сетке можно выделить только одну строку.Как я могу добиться для строки множественного выбора в списке ag-grid.

Ниже приведен мой исходный код. 

  constructor() { 
      this.gridOptions = <GridOptions>{
          paginationPageSize: 18,
          animateRows: true,
    };
      this.gridOptions.columnDefs = [
        {
            field: "",
            width: 110,
            checkboxSelection: true
        },
        {
            headerName: "Distributor Code",
            field: "dist_code",
            width: 330,
            sortingOrder: ["asc", "desc"]
        },
        {
            headerName: "Distributor Name",
            field: "dist_name",
            width: 330,
            sortingOrder: ["asc", "desc"]
        },
        {
            headerName: "Status",
            field: "status",
            width: 330,
            sortingOrder: ["asc", "desc"],

        },
        {
            field: "", 
            width: 110, 
            cellRenderer: function clickNextRendererFunc(){
                    return '<button mat-stroked-button><mat-icon>keyboard_arrow_right</mat-icon></button>';
            }
        }
    ];
    this.gridOptions.rowData = [
        {dist_code: 1, dist_name: "ABC Enterprise", status: "Inactive"},
        {dist_code: 2, dist_name: "Go Go Enterprise", status: "Active"},
        {dist_code: 3, dist_name: "Alibaba Enterprise", status: "Active"},
        {dist_code: 4, dist_name: "Silver Enterprise", status: "Active"},
        {dist_code: 5, dist_name: "George Enterprise", status: "Inactive"},
        {dist_code: 6, dist_name: "Kent Enterprise", status: "Active"},
        {dist_code: 7, dist_name: "NP Enterprise", status: "Active"},
        {dist_code: 8, dist_name: "ED Enterprise", status: "Inactive"},
        {dist_code: 9, dist_name: "DD Enterprise", status: "Active"},
        {dist_code: 10, dist_name: "DF Enterprise", status: "Active"},
        {dist_code: 11, dist_name: "JS Enterprise", status: "Active"},
        {dist_code: 12, dist_name: "JD Enterprise", status: "Inactive"},
        {dist_code: 13, dist_name: "KFC Enterprise", status: "Active"},
        {dist_code: 14, dist_name: "MCD Enterprise", status: "Inactive"},
        {dist_code: 15, dist_name: "AH Enterprise", status: "Active"},
        {dist_code: 16, dist_name: "PP Enterprise", status: "Active"},
        {dist_code: 17, dist_name: "KOH Enterprise", status: "Active"},
        {dist_code: 18, dist_name: "HH Enterprise", status: "Active"},
        {dist_code: 19, dist_name: "GG Enterprise", status: "Inactive"},
        {dist_code: 20, dist_name: "PP2 Enterprise", status: "Active"}
    ]

    }

Ниже приведен мой экран печати enter image description here

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Этот вопрос состоит из 3 частей.

1.Разрешить множественный выбор:

Этот элемент необходим для элемента ag-grid-angular: rowSelection="multiple"

2.Включите флажок выбора:

Сохранить checkboxSelection: true для первого ColDef, который вы уже делаете.

3.Добавить кнопку с изображением углового материала в каждую строку

Вам необходимо использовать cellRenderer и вернуть для этого строку html. 

cellRenderer: (data) => {
    return `<mat-icon class="mat-icon material-icons mat-icon-no-color" role="img" aria-hidden="true">
       home</mat-icon>`;
}

С cellRendererожидает html-строки взамен, вы не должны просто предоставлять <mat-icon>home</mat-icon>, так как она не будет скомпилирована.

0 голосов
/ 24 декабря 2018

В настоящее время вы используете строку как обработанную, вам нужен компонент или вы можете использовать пользовательский класс, который обрабатывает ее, например this .но, поскольку вы хотите визуализировать компонент материала, вам все равно придется скомпилировать кнопку материала.

Я бы предложил вам использовать cellRendererFramework и использовать пользовательский компонент, создать пользовательский компонент с именем RedComponentComponent и выполнить рендеринг.это так. 

cellRendererFramework: RedComponentComponent,//your custom component

Итак, ваша ячейка будет выглядеть так 

      {
        headerName: "Value",
        field: "value",
        cellRendererFramework: RedComponentComponent,
        width: 100
      },

И у этого компонента будет код вашей кнопки, и он будет отвечать за ваш рендеринг.

Я раздвоил их демо, и это здесь Вы можете посмотреть.

...