【fastadmin】自定义搜索条件及tab切换

在FastAdmin中,自定义搜索条件和Tab切换可以通过修改控制器和视图文件来实现。

以下是一个简单的例子,展示了如何在FastAdmin中添加自定义搜索条件和Tab切换。

  1. 修改控制器(例如 YourController.php):



<?php
namespace app\admin\controller;
use app\common\controller\Backend;
 
class YourController extends Backend
{
    protected $modelValidate = true;
    protected $modelSceneValidate = true;
    protected $searchFields = 'name,email';
    protected $tabNavs = [
        'tab1' => ['title' => 'Tab1', 'url' => 'your/tab1'],
        'tab2' => ['title' => 'Tab2', 'url' => 'your/tab2'],
    ];
 
    public function _initialize()
    {
        parent::_initialize();
        $this->tabNavs = $this->auth->getNavs('your', 'tab');
        $this->assign('tabNavs', $this->tabNavs);
    }
 
    public function tab1()
    {
        // 自定义Tab1的逻辑
    }
 
    public function tab2()
    {
        // 自定义Tab2的逻辑
    }
}
  1. 修改视图文件(例如 your_tab1.htmlyour_tab2.html):



<!-- your_tab1.html -->
<div class="panel panel-default panel-intro">
    <!-- 搜索表单 -->
    <div class="panel-body">
        <div id="toolbar" class="toolbar">
            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i class="fa fa-refresh"></i> </a>
            <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('your/add')?'':'hide'}" title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
            <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('your/del')?'':'hide'}" title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
        </div>
        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
               data-operate-edit="{:$auth->check('your/edit')}" 
               data-operate-del="{:$auth->check('your/del')}" 
               width="100%">
        </table>
    </div>
</div>
<script src="/assets/js/require<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.js" data-main="/assets/js/require-backend<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.js?v=<?php echo htmlentities($site['version']); ?>"></script>



<!-- your_tab2.html -->
<!-- 与tab1.html内容相似,只是URL和title不同 -->

在这个例子中,我们定义了两个Tab,并在控制器中设置了自定义搜索字段。_initialize 方法中,我们获取并赋值导航菜单,以便在视图中渲染Tab

none
最后修改于:2024年08月27日 20:02

评论已关闭

推荐阅读

Vue中使用mind-map实现在线思维导图
2024年08月04日
VUE
Web前端最全Vue实现免密登录跳转的方式_vue怎么样不登录返回首页,最强技术实现
2024年08月04日
VUE
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)
2024年08月04日
VUE
Vue-颜色选择器实现方案——>Vue-Color( 实战*1+ Demo*7)
2024年08月04日
VUE
Vue项目卡顿慢加载?这些优化技巧告诉你!_vue数据多渲染卡顿
2024年08月04日
VUE
vue中的keep-alive详解与应用场景
2024年08月04日
VUE
Vue、React实现excel导出功能(三种实现方式保姆级讲解)
2024年08月04日
vue-office/docx插件实现docx文件预览
2024年08月04日
VUE
java调用js文件的两种方法(支持V8引擎)
2024年08月04日
JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js
2024年08月04日
两周从爬虫小白变大神 _yjs_js_security_passport
2024年08月04日
JS笔记(对象、函数、数组)
2024年08月04日
Markdown.js:强大的纯JavaScript Markdown解析器
2024年08月04日
Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
2024年08月04日
vue 父组件怎么获取子组件里面的data数据
2024年08月04日
VUE
个人开发实现AI套壳网站快速搭建(Vue+elementUI+SpringBoot)
2024年08月04日
el-table 表格封装并改造实现单元格可编辑
2024年08月04日
none
nodejs环境下创建vue项目、SSH密钥登陆!!!
2024年08月04日
vue+quill+element-ui实现视频、图片上传及缩放保姆级教程,轻松使用富文本
2024年08月04日
【three.js】22. Imported Models导入模型
2024年08月04日