🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
表格展示数据只是一方面,为了方便操作,需要增加一些筛选方便检索数据 suframe目前提供2中模式,**1.顶部独立检索项目**,**2.表格表头检索** ## 1. 顶部独立检索项目 独立检索需要单独配置到ui/table/*.php 类中的filter方法中,格式如下: ``` class DemoTable extends TableInterface { public function filters() { return [ 'id' => ['label' => 'ID', 'type' => 'text'], 'create_time' => ['label' => '时间', 'type' => 'date'], 'create_times' => ['label' => '时间范围', 'type' => 'daterange'], 'avatar' => ['label' => '头像', 'type' => 'select', 'value' => ['类型1', '类型2']], 'avatars' => ['label' => '头像多选', 'type' => 'select', 'value' => ['类型3', '类型4'], 'multiple' => true], 'area' => [ 'label' => '地区', 'type' => 'cascader', 'multiple' => true, 'checkStrictly' => true, 'value' => [ [ 'label' => '选项一', 'value' => '1', 'children' => [['label' => '选项一.1', 'value' => '1.1'], ['label' => '选项一.2', 'value' => '1.2']] ], [ 'label' => '选项二', 'value' => '2', 'children' => [['label' => '选项二.1', 'value' => '2.1'], ['label' => '选项二.2', 'value' => '2.2']] ], ] ] ]; } ``` 目前类型支持: - text 文本搜索 - date 日期搜索 - daterange 搜索 - select 下拉搜索 ,可选项 [multiple多选] - cascader 级联搜索 如果是全等搜索,不需要单独做任何配置,如果是条件搜索,比如like,between等,需要自行在控制器ajaxSeaerch或者模型的搜索器加条件 搜索器文档:[https://www.kancloud.cn/manual/thinkphp6\_0/1037590](https://www.kancloud.cn/manual/thinkphp6_0/1037590) 控制器条件格式如下: ``` private function ajaxSearch() { $rs = $this->parseSearchWhere($this->getManageModel(), [ 'name' => 'like', //模糊搜索 'create_time' => 'betweenTime', // 时间范围 ... ]); return json_return($rs); } ``` 检索条件支持如下: - eq 等于 - neq 不等于 - gt 大于 - gtn 大于等于 - lt 小于 - ltn 小于等于 - in 集合内 - notIn 集合外 - like 模糊检索 - like 模糊排除 - betweenTime 日期范围 - between 范围 ## 2. 表格表头检索 表头检索检索项目会在表头字段右侧展示 格式如下 ``` public function header() { return [ 'id' => ['label' => 'ID', 'sort' => true, 'fixed' => 'left', 'width' => 80], 'username' => ['label' => '用户名', 'filter' => [1 => 'john', 2 => 'jack']], 'real_name' => ['label' => '姓名', 'filter' => [1 => '老钱', 2 => '老王'], 'multiple' => true], 'avatar' => ['label' => '头像', 'type' => 'image'], 'sex' => '性别', 'create_time' => ['label' => '创建时间', 'sort' => true], ]; } ``` 支持的筛选类型: - sort 排序 - filter 下拉筛选, 可选项:multiple多选