如何在 ng2-smart-table 的下拉列表中设置多选?
How to set multiple selection in dropdown in ng2-smart-table?
在我的应用程序中,我在 ng2-smart-table 的下拉列表中加载了动态值。现在我必须在 ng2-smart-table.
的下拉菜单中启用多项选择
注意:下拉列表中的多项选择不适用于复选框。
我认为您可以尝试使用自己的自定义编辑器组件。我添加了一个基本 select
和多个 attribute
,但您可以根据需要创建更复杂的自定义组件。
使用 valuePrepareFunction
将数据传递给您的组件,瞧。
settings.ts
private settings = {
// Previous config ...
columns: {
multiple: {
title: 'Multi select',
type: 'html',
editor: {
type: 'custom',
valuePrepareFunction: (cell, row) => row,
component: MultiSelComponent,
},
}
}
}
multiSel.component.html
<select multiple [(ngModel)]="yourModelStore">
<option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
</select>
multiSel.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
....
export class MultiSelComponent implements OnInit {
@Input() value;
yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];
ngOnInit() {
this.myValues = this.value;
}
module.ts
declarations:[
//others ...
MultiSelComponent
]
entryComponents: [
MultiSelComponent
]
**我编辑了答案并添加了更多关于设置的信息,component.ts
yourField: {
title: 'Your field title',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: '1', title: 'Admin' },
{ value: '2', title: 'Manager' },
],
},
},
type: 'number',
},
在我的应用程序中,我在 ng2-smart-table 的下拉列表中加载了动态值。现在我必须在 ng2-smart-table.
的下拉菜单中启用多项选择注意:下拉列表中的多项选择不适用于复选框。
我认为您可以尝试使用自己的自定义编辑器组件。我添加了一个基本 select
和多个 attribute
,但您可以根据需要创建更复杂的自定义组件。
使用 valuePrepareFunction
将数据传递给您的组件,瞧。
settings.ts
private settings = {
// Previous config ...
columns: {
multiple: {
title: 'Multi select',
type: 'html',
editor: {
type: 'custom',
valuePrepareFunction: (cell, row) => row,
component: MultiSelComponent,
},
}
}
}
multiSel.component.html
<select multiple [(ngModel)]="yourModelStore">
<option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
</select>
multiSel.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
....
export class MultiSelComponent implements OnInit {
@Input() value;
yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];
ngOnInit() {
this.myValues = this.value;
}
module.ts
declarations:[
//others ...
MultiSelComponent
]
entryComponents: [
MultiSelComponent
]
**我编辑了答案并添加了更多关于设置的信息,component.ts
yourField: {
title: 'Your field title',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: '1', title: 'Admin' },
{ value: '2', title: 'Manager' },
],
},
},
type: 'number',
},