【FastAdmin开发记录】表单开关控制字段显示

背景：发起活动时，有些字段不是每个活动都需要配置的，所以需要根据需要来进行配置

效果

方案

html代码

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('分组开关')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input  id="c-groupSwitch" name="row[groupSwitch]" type="hidden" value="{$row.groupSwitch}">
        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-groupSwitch" data-yes="1" data-no="0" >
            <i class="fa fa-toggle-on text-success {eq name="$row.groupSwitch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
        </a>
    </div>
</div>

<div class="form-group" id="group" {eq name="$row.groupSwitch" value="0"}style="display:none;"{/eq}>
    <label class="control-label col-xs-12 col-sm-2">{:__('分组')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-group" class="form-control" name="row[group]" type="number" value="{$row.group|htmlentities}">
    </div>
</div>

根据 $row.groupSwitch 的值来判断当前默认的开关状态和控制是否显示对应的字段
需要注意的是开关的样式是通过class：fa-flip-horizontal text-gray来决定的
然后通过change事件来修改显示隐藏

$(document).on("change", "#c-groupSwitch", function(){
    $("#group").toggle($("#c-groupSwitch").val() > 0);
});

参考官方文档-开关组件