FastAdmin 动态下拉(SelectPage)的使用

1、视图层定义一个input

<input id="c-shop_id" data-rule="required" data-source="company/list" class="form-control selectpage" name="row[shop_id]" data-field="name" data-primary-key="id" data-pagination="true" data-page-size="10" type="text" value="">

其中,data-source 为数据源 URL

2、编写控制器

public function list()
{
    $this->model = (new ManystoreShop());
    $condition = [];
    $this->request->filter(['strip_tags']);

    //分页查询
    $word = $this->request->param()['q_word'][0];
    $page = $this->request->param('pageNumber');
    $limit = $this->request->param('pageSize');
    $limit = $limit ? $limit : 1;
    // 模糊搜索
	if (strlen($word) > 0) {
        $condition['name'] = ['like', '%'.$word.'%'];
    }
    if ($this->request->param("keyValue")) {
        $condition['id'] = $this->request->param("keyValue");
    }
    $total = $this->model->where($condition)
        ->order("id", "ASC")
        ->count();
    $list = $this->model
        ->where($condition)
        ->field('id,name')
        ->order("id", "ASC")
        ->limit($limit)
        ->page($page)
        ->select();
    $result = array("total" => $total, "rows" => $list);
    return json($result);
}

3、完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YoddLleG-1673080048982)(https://blog.konghou.xyz/storage/markdown/images/df1708dad3a4875ee3cfb15e9b9da5a962b2c4ba15674.jpg)]

传递参数 data-params

例如我获取数据时,需要在 add.html 或者 edit.html 传递参数,不要直接在视图页面编写JS,需要在对应 js 文件中做修改:

add: function () {
    $("#c-shop_id").data("params", function () {
        return {"city": localStorage.getItem('city')};
    });
    Controller.api.bindevent();
},

问题

测试时,发现打开编辑 edit.html 并没有返回原有的数据值,所以需要对控制器数据源 URL 进行一下修改:
原因是,当我们打开编辑页面时,数据源URL会进行一次请求,请求时会携带一个 keyvalue 的参数,这个参数就是我们对应的源ID,此时我们进行一次查询并返回一条查询的数据就可以了

if($this->request->request("keyValue")){
    $list = $this->model->field('id,name')->find([
        'id' => $this->request->request("keyValue")
    ]);
    return json(["total" => 1, "rows" => $list]);
}

此时可以看到,edit 初次加载就会获取到数据源信息

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FastAdmin 中实现动态下拉表单联动,可以使用 FastAdmin 自带的表单组件以及 jQuery 插件 Chained Selects。 具体实现步骤如下: 1. 定义两个联动的下拉框,如下: ```php $form->select('province_id', '省份')->options('/api/province'); $form->select('city_id', '城市')->options('/api/city')->rules('required'); ``` 其中 `province_id` 和 `city_id` 分别是表单项的 name 值,`/api/province` 和 `/api/city` 是获取数据的接口地址。 2. 在控制器中定义接口方法,用于获取城市数据,如下: ```php namespace app\admin\controller; use think\Controller; class ApiController extends Controller { public function province() { $provinceList = db('province')->select(); return json($provinceList); } public function city() { $provinceId = input('get.province_id'); $cityList = db('city')->where('province_id', $provinceId)->select(); return json($cityList); } } ``` 其中 `province` 方法返回所有省份数据,`city` 方法根据省份 ID 获取该省份下的城市数据。 3. 使用 Chained Selects 插件实现下拉框联动,如下: ```js $(function() { // 省份下拉框改变事件 $('select[name="province_id"]').change(function() { var provinceId = $(this).val(); // 清空城市下拉框 $('select[name="city_id"]').empty(); // 动态加载城市数据 $.getJSON('/admin/api/city', {province_id: provinceId}, function(data) { $.each(data, function(i, item) { $('select[name="city_id"]').append('<option value="' + item.id + '">' + item.name + '</option>'); }); // 触发城市下拉框的 change 事件 $('select[name="city_id"]').trigger('change'); }); }); // 城市下拉框改变事件 $('select[name="city_id"]').change(function() { // TODO: 根据城市 ID 加载其他数据 }); // 初始化省份下拉框 $('select[name="province_id"]').trigger('change'); }); ``` 其中 `change` 事件监听省份下拉框的改变,根据选中的省份 ID 动态加载城市数据,并将加载的城市数据添加到城市下拉框中。同时,触发城市下拉框的 `change` 事件,以便根据城市 ID 加载其他数据。最后,通过触发省份下拉框的 `change` 事件,完成初始化操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值