bootstrap 多选 filterClearBtn 未显示
bootstrap multiselect filterClearBtn not showing
我正在使用 Bootstrap multiselect 并且一切正常,但是当我启用 enableFiltering = true 选项时,清除过滤器按钮不显示。
这是我初始化组件的方式:
$("#ultra").multiselect({
buttonWidth: '100%',
enableFiltering: true,
includeSelectAllOption: true,
nSelectedText: 'Selecciones',
nonSelectedText: 'Sin Aplicar',
includeFilterClearBtn:true,
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>'
});
我会回答我自己的问题,以防将来对其他人有用:
pugin 使用 glyphicon,我没有在我的项目中下载它,所以下载并安装可能是一个可能的解决方案。
但在我的例子中,我使用 fa-icons 添加此更改只需要修改这里示例的多选属性模板:
就在这里:class="fa fa-eraser"
$("#mySelect").multiselect({
nSelectedText: 'Selecciones',
enableHTML: true,
templates: {
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-eraser"></i></button></span>'
}
});
我正在使用 Bootstrap multiselect 并且一切正常,但是当我启用 enableFiltering = true 选项时,清除过滤器按钮不显示。 这是我初始化组件的方式:
$("#ultra").multiselect({
buttonWidth: '100%',
enableFiltering: true,
includeSelectAllOption: true,
nSelectedText: 'Selecciones',
nonSelectedText: 'Sin Aplicar',
includeFilterClearBtn:true,
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>'
});
我会回答我自己的问题,以防将来对其他人有用:
pugin 使用 glyphicon,我没有在我的项目中下载它,所以下载并安装可能是一个可能的解决方案。 但在我的例子中,我使用 fa-icons 添加此更改只需要修改这里示例的多选属性模板: 就在这里:class="fa fa-eraser"
$("#mySelect").multiselect({
nSelectedText: 'Selecciones',
enableHTML: true,
templates: {
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-eraser"></i></button></span>'
}
});