需求：制作一组类似TAB数据切换效果的按钮组。
思路:
- 自定义按钮
- 给按钮绑定点击事件
- 将点击的按钮值赋值搜索框
视图部分
1. <!-- 按钮组 --> 2. <div class="btn-group"> 3. <a href="#" class="btn btn-info btn-switch active btn-mini-xs" data-type="all"><i class="fa fa-list"></i> {:__('All')}</a> 4. <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="0"><i class="fa fa-gift"></i>离职 <span>{$dimission}</span></a> 5. <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="1"><i class="fa fa-rmb"></i>在职 <span>{$incumbency}</span> </a> 6. <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="2" data-value="0"><i class="fa fa-rmb"></i>学员 <span>{$student}</span> </a> 7. <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="3" data-value="1"><i class="fa fa-rmb"></i>短期派遣 <span>{$shortTerm}</span> </a> 8. <a href="#" class="btn btn-info btn-switch btn-mini-xs" data-type="4" data-value="2"><i class="fa fa-rmb"></i>长期派遣 <span>{$longTerm}</span> </a> 9. </div>
JS部分
- 触发点击事件可以看到，当我点击离职的时候返回的状态值是0，也就是在视图部分定义的data-type，点击的值赋值给了form表单的select。只有当点击提交的时候才会提交并重载数据
- 那么，我们肯定不是通过点击搜索按钮才去提交的，所以当赋值的同时，同时触发表单的提交事件，也就是submit。
- 在js种我写了两个if判断，是因为要读取的是两个字段的值，并且一个是select的赋值，一个是input的赋值，不过道理都是相同的，
- 代码如下：
1. // 切换 2. $(document).on("click", ".btn-switch", function () { 3. //这里只是切换样式的类名 4. $(".btn-switch").removeClass("active"); 5. $(this).addClass("active"); 6. //主要部分 7. if ($("form.form-commonsearch select[name='status']").val($(this).data("type"))) $(this).submit(); 8. if ($("form.form-commonsearch input[name='info_labor_type']").val($(this).data("value")))$(this).submit(); 9. table.bootstrapTable("refresh"); 10. return false; 11. });
