[fastadmin]第九篇 FastAdmin高级模型技巧：实现表格Tab切换和软删除 (找遍全网找不到的那种)
23 / 0 / 创建于 2年前 /
wangchunbo 的个人博客
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切换的效果，并且让你可以为不同的数据状态切换视图。
展示效果:
![[fastadmin]第九篇 fastadmin table 常用技巧](https://cdn.learnku.com/uploads/images/202307/18/46135/8c2yFG5nxk.png!large)
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} <span></span></a>
{/foreach}
</div>
效果如下:
![[fastadmin]第九篇 fastadmin table 常用技巧](https://cdn.learnku.com/uploads/images/202307/18/46135/ul5tpTjjLo.png!large)
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 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：