记录:bootstrap-select(下拉可搜索)在table中循环使用
// HTML页面<table class='my-table'><tbody><ng-container *ngFor='let data of this.Array; let i = index'><tr><td style='width:180px;'><select.
·
// HTML页面
<table class='mytable'>
<tbody>
<ng-container *ngFor='let data of this.Array; let i = index'>
<tr>
<td style='width:180px;'>
<select
// class中添加selectpicker即应用bootstrap-select组件
class="selectpicker show-tick form-control model-list"
formControlName="model"
// id循环赋值
id="model{{i}}"
// 热搜索/热加载:下拉框搜索
data-live-search="true"
// 默认显示 请选择
title="请选择"
// change事件
(change)="modelChange($event)">
</select>
</td>
</tr>
</ng-container>
</tbody>
</table>
// select.component.ts页面
this.Array.map((list,i)=>{
// 接口
this.myService.getData(list.type).subscribe(data=>{
data.forEach((val,index)=>{
// 添加一个空选项
if(index==0){
$('#model'+ i).append('<option value=""></option>')
}
// 根据id添加子元素
$('#model'+ i).append('<option value="'+ val.id +'">'+ val.name +'</option>')
})
// 强制刷新(必须刷新,否则数据无法显示)
jquery.$('#model'+i).selectpicker('refresh');
// 强制重新渲染
jquery.$('#model'+i).selectpicker('render');
// 默认选中
jquery.$('#model'+i).selectpicker('val',list.model);
})
})
.mytable>tbody>tr>td{
// 避免bootstrap-select下拉框被td遮挡
overflow: unset;
}
更多推荐
所有评论(0)