[fastadmin]第九篇 FastAdmin高级模型技巧：实现表格Tab切换和软删除 (找遍全网找不到的那种)

1. table上的 tab 切换

1.1 自动生成Tab选项卡

使用FastAdmin为表格创建Tab切换非常简单，这里我们将探讨如何通过字段命名和一些配置来实现这一点。

忘掉长篇大论的文档，直接进入关键配置。首要的一步是确保你的数据库中有一个名为status的字段。这个字段的存在让FastAdmin能自动为你生成选项卡。

`deletetime` int(10) DEFAULT NULL COMMENT '软删除标记位',

为了启动这个过程，在插件的在线命令行中执行相应的生成命令。如果之前生成失败，记得勾选“强制覆盖”选项。

一旦命令执行完成，就可以查看生成的Tab选项卡了。

然后一键生成菜单：

到生成的页面查看：

oK。。。。。。。走到这一步。就已经恭喜你生成成功了。
www.cnblogs.com/web928943/p/125742...

1.2 手动添加Tab选项卡代码

如果你想手动定制Tab选项卡，可以在index.html中添加以下代码：

<!-- 省略的其他代码 -->
<ul class="nav nav-tabs" data-field="status">
    <li><a href="javascript:;" data-value="">{:__('All')}</a></li>
    <!-- 其他的Tab按钮 -->
</ul>

演示代码如下：

代码如下:

 <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>


            {foreach name="statusList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>

这段代码将会生成Tab切换的效果，并且让你可以为不同的数据状态切换视图。

展示效果:

2. 解决Tab切换与自定义搜索的冲突

2.1. 删除或注释掉searchFormTemplate参数

当使用自定义搜索功能时，可能会与Tab切换发生冲突，导致无法正常传递参数。解决这个问题的方法是删除或注释掉searchFormTemplate参数。

// 已被注释的代码
// searchFormTemplate: 'orderformtpl',

接着，我们采用自定义按钮动态切换Tab标签页的数据，为此需要在对应的JS文件中禁用searchFormTemplate设置，并在搜索模板中加入你想要搜索的字段的下拉框#。

在添加了下拉框并对按钮组样式进行了定制后，当点击对应的标签时，页面将立即进行请求并展示相应状态的数据。

至此，我们的表格上的Tab切换以及软删除功能便成功实现了。

注意：实际使用时，请确保将代码示例中的占位符替换为真实的字段名和实际需要的值。

2.2 找到自定义搜索 tpl中 加一个,你要搜索的字段下拉框

我现在加一个status进去.
ps:不要问我代码在哪里找,详情你请看,自定义搜索文章:

<div class="col-xs-12 col-sm-6 col-md-3" style="min-height:68px;">
                    <!--这里添加68px是为了避免刷新时出现元素错位闪屏-->
                    <div class="form-group">
                        <label class="control-label">状态</label>
                        <input type="hidden" class="operate" data-name="status" value="in"/>
                        <div>
                            <!--给select一个固定的高度-->
                            <!--@formatter:off-->
                            <select id="c-flag" class="form-control selectpicker" name="status" style="height:31px;">
                                {foreach name="statusList" item="vo"}
                                <option value="{$key}" >{$vo}</option>
                                {/foreach}
                            </select>
                            <!--@formatter:on-->
                        </div>
                    </div>
                </div>

2.3. 增加按钮tab

直接加在 删除 添加按钮上面 下面都行, 看你自己审美.
代码如下:

<!-- 按钮组 实现切换tab -->
<div class="btn-group">

  <!-- 顶头tab 切换例子 按钮形式-->
  <a href="#" class="btn btn-info btn-switch active btn-mini-xs" data-type="all"><i class="fa fa-list"></i> {:__('All')}</a>
  {foreach name="statusList" item="vo"}
    <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="{$key}"><i class="fa fa-gift"></i>{$vo} &nbsp; <span></span></a>
  {/foreach}
</div>

效果如下:

2.4. 改为点击tab,立马请求界面.

在var table = $("#table"); 下面
js中增加一行:

// 切换
$(document).on("click", ".btn-switch", function () {
    //这里只是切换样式的类名
  $(".btn-switch").removeClass("active");
  $(this).addClass("active");
  console.log($(this).data("type"));
  //主要部分 没有赋值上
  if ($("form.form-commonsearch select[name='status']").val($(this).data("type"))) $(this).submit();

  // if ($("form.form-commonsearch input[name='info_labor_type']").val($(this).data("value")))$(this).submit();
  table.bootstrapTable("refresh");
 return false;});

至此完成.

本作品采用《CC 协议》，转载必须注明作者和本文链接