fastadmin 自定义 按钮 动态切换数据 TAB切换

需求：制作一组类似TAB数据切换效果的按钮组。

思路:

• 自定义按钮

• 给按钮绑定点击事件

• 将点击的按钮值赋值搜索框

视图部分

<!-- 按钮组 -->
<div class="btn-group">
   <a href="#" class="btn btn-info btn-switch active btn-mini-xs" data-type="all"><i class="fa fa-list"></i> {:__('All')}</a>
   <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="0"><i class="fa fa-gift"></i>离职 &nbsp; <span>{$dimission}</span></a>
   <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="1"><i class="fa fa-rmb"></i>在职 &nbsp; <span>{$incumbency}</span> </a>
   <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="2" data-value="0"><i class="fa fa-rmb"></i>学员 &nbsp; <span>{$student}</span> </a>
   <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="3" data-value="1"><i class="fa fa-rmb"></i>短期派遣 &nbsp; <span>{$shortTerm}</span> </a>
   <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="4" data-value="2"><i class="fa fa-rmb"></i>长期派遣 &nbsp; <span>{$longTerm}</span> </a>
</div>

JS部分

• 触发点击事件可以看到，当我点击离职的时候返回的状态值是0，也就是在视图部分定义的data-type，点击的值赋值给了form表单的select。只有当点击提交的时候才会提交并重载数据

• 那么，我们肯定不是通过点击搜索按钮才去提交的，所以当赋值的同时，同时触发表单的提交事件，也就是submit。

• 在js种我写了两个if判断，是因为要读取的是两个字段的值，并且一个是select的赋值，一个是input的赋值，不过道理都是相同的，

• 代码如下：

// 切换
$(document).on("click", ".btn-switch", function () {
    //这里只是切换样式的类名 
   $(".btn-switch").removeClass("active");
   $(this).addClass("active");
   //主要部分
   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;
});