FastAdmin表单搜索框设置下拉多选搜索

在开发Fastadmin框架程序时遇到了通用搜索需要使用下拉多选来检索数据,在网上找了半天,作此记录

在这里插入图片描述

最终效果如上图

Fastadmin除了使用模板的build_select来生成下拉多选框,JS也可以

JS

{
    field: 'warehouse_id',
    title: '仓库',
    visible: false,
    align: 'left',
    addClass:selectpicker,
    operate:IN,
    data:multiple,
    searchList: $.getJSON('base/wGetAllList'),
},

主要参数就是:

addClass:selectpicker,
operate:IN,
data:multiple

searchList的结构是标准的array结构即可,也可以是接口数据

 [{id:1,name:xxx},...][xxx,...]

html模板

{:build_select('warehouseList[]', $warehouseList, null, ['class'=>'form-control selectpicker', 'multiple'=>'', 'data-rule'=>'required'])}

主要参数:

'multiple'=>''
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个EXT下拉多选搜索组件的示例代码: ```javascript Ext.define('MyApp.view.MultiSelectCombo', { extend: 'Ext.form.field.ComboBox', alias: 'widget.multiselectcombo', multiSelect: true, queryMode: 'local', triggerAction: 'all', initComponent: function() { Ext.apply(this, { tpl: '<tpl for=".">' + '<div class="x-boundlist-item">' + '<input type="checkbox" <tpl if="checked">checked="checked"</tpl>>{text}' + '</div>' + '</tpl>', displayTpl: '<tpl for=".">' + '{[values.checked ? values.text + "," : ""]}' + '</tpl>' }); this.callParent(); }, createPicker: function() { var me = this, picker = me.callParent(arguments); picker.on({ itemclick: me.onItemClick, beforeitemclick: me.onBeforeItemClick, scope: me }); return picker; }, onItemClick: function() { var me = this, picker = me.picker, valueField = picker.valueField, displayField = picker.displayField, selectedRecords = picker.getSelectionModel().getSelection(), value = [], display = []; Ext.each(selectedRecords, function(rec) { value.push(rec.get(valueField)); display.push(rec.get(displayField)); }); me.setValue(value); me.setRawValue(display.join(', ')); }, onBeforeItemClick: function(view, record, item, index, e) { var me = this, checked = !record.get('checked'); record.set('checked', checked); return false; } }); ``` 这个组件继承自Ext.form.field.ComboBox,并添加了一些自定义的配置选项,如multiSelect、tpl和displayTpl。 在initComponent方法中,我们定义了一个自定义的模板,用于渲染下拉列表项。模板中包含一个复选框和一个文本标签,文本标签显示下拉列表项的文本。如果下拉列表项被选中,则复选框被选中。 在createPicker方法中,我们添加了一个itemclick事件处理程序,用于更新组件的值和显示文本。我们还添加了一个beforeitemclick事件处理程序,用于阻止默认的选择行为,并更新下拉列表项的选中状态。 使用时,您可以将这个组件添加到您的表单中,并设置数据源和其他必要的配置选项。例如: ```javascript { xtype: 'multiselectcombo', fieldLabel: '选择项', name: 'items', store: Ext.create('Ext.data.Store', { fields: ['value', 'text'], data: [ {value: '1', text: '选项1'}, {value: '2', text: '选项2'}, {value: '3', text: '选项3'}, {value: '4', text: '选项4'}, {value: '5', text: '选项5'} ] }) } ``` 这将创建一个下拉多选搜索框,其中包含5个选项,并将选中的值存储在名为“items”的表单字段中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值