fastadmin自定义Select下拉搜索前后端代码

ETO_冬

已于 2022-12-15 18:01:07 修改

阅读量1.7k

点赞数 2

文章标签：前端 html javascript php

于 2022-12-15 16:58:21 首次发布

本文链接：https://blog.csdn.net/qq_40088333/article/details/128331963

版权

根据接口返回的数据在select下拉选择框，展示名字，但是给接口传值id。最后效果如下图。

html文件添加代码

<script id="bookyejicatehtml" type="text/html">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline" data-toggle="cxselect" data-selects="bookyejicate">
                <select style="width: 100%" class="bookyejicate form-control" name="bookyejicate_id" data-url="bookyejicate/get_cate_list" ></select>
                <input type="hidden" class="operate" data-name="bookyejicate_id" value="=" />
            </div>
        </div>
    </div>
</script>

其中<script>中的id 要对应js文件代码中 Template('bookyejicatehtml', {});

data-url="bookyejicate/get_cate_list" 是后台给select返回列表的地址。

<select>的name要对应数据库中的字段。

input中的value用于设置筛选方式如：= LIKE等等。

js文件代码在改列表对应的js中添加一列。

table.bootstrapTable——columns

{
    field: 'cate', title: '业绩分组', operate: '=',
    formatter: function (value, row, index) {
         return '';
    },visible:false,
    searchList: function (column) {//重点
        return Template('bookyejicatehtml', {});
    }
},

php接口方法代码注意要返回两列一列value用于传后台筛选一列name用于展示

    public function get_cate_list(){
        $list = $this->model->field('id as value,name')->select();
        $this->success('获取成功','',$list);
    }