fastadmin 使用 bootstrap tabs 新增以及编辑 详解

新增

因为需要区分是那种类型的所以在表单中加入了一个隐藏字段 type 

我这里把type赋空 通过JQ来进行赋值，表单填写之后 切换 tabs之后填写内容也需要清空 在对应的js文件中的add方法里面进行修改（type 默认赋值0）

add: function () {
            $("input[name='row[type]']").val("0");
            $("#notice-tab").click(function (){
                $("input[name='row[title]']").val("");
                $("#c-content").val("");
                $("input[name='row[link_url]']").val("");
                $("input[name='row[type]']").val("0");
            });
            $("#info-tab").click(function (){
                $("input[name='row[title]']").val("");
                $("#c-content").val("");
                $("input[name='row[link_url]']").val("");
                $("input[name='row[type]']").val("1");
            });
            Controller.api.bindevent();
        },

新增表单代码

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item active" role="presentation">
            <a class="nav-link active" id="notice-tab" data-toggle="tab" href="#notice" role="tab" aria-controls="notice" aria-selected="true">平台公告</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">系统消息</a>
        </li>
    </ul>
    <div style="margin-top: 20px"></div>

    <input type="hidden" name="row[type]" value="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text">
        </div>
    </div>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane  active" id="notice" role="tabpanel" aria-labelledby="notice-tab">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="info" role="tabpanel" aria-labelledby="info-tab">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Link_url')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-link_url" class="form-control" name="row[link_url]" type="text">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[time]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('State')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="stateList" item="vo"}
                <label for="row[state]-{$key}"><input id="row[state]-{$key}" name="row[state]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

 编辑

遇到的问题 ：1、 编辑时tabs不默认选中   2.、编辑时表单不跟随tabs 更改

 解决技巧：1、根据 type判断当前tabs是哪一个来进行选中  2、默认选中tabs 之后不可切换tabs 

edit: function () {
            var val = $("input[name='row[type]']").val();
            if (val > 0 ){
                $('#myTab a[href="#info"]').tab('show');
                $('#myTab a[href="#notice"]').on('show.bs.tab', function(e) {//禁止切换tabs
                    e.preventDefault();
                });
            }else{
                $('#myTab a[href="#notice"]').tab('show');
                $('#myTab a[href="#info"]').on('show.bs.tab', function(e) {//禁止切换tabs
                    e.preventDefault();
                });
            }
        },

编辑表单代码

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="notice-tab" data-toggle="tab" href="#notice" role="tab" aria-controls="notice" aria-selected="true">平台公告</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">系统消息</a>
        </li>
    </ul>
    <div style="margin-top: 20px"></div>

    <input type="hidden" name="row[type]" value="{$row.type|htmlentities}">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text" value="{$row.title|htmlentities}">
        </div>
    </div>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane  active" id="notice" role="tabpanel" aria-labelledby="notice-tab">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|htmlentities}</textarea>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="info" role="tabpanel" aria-labelledby="info-tab">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Link_url')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-link_url" class="form-control" name="row[link_url]" type="text" value="{$row.link_url|htmlentities}">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[time]" type="text" value="{:$row.time?datetime($row.time):''}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('State')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <div class="radio">
            {foreach name="stateList" item="vo"}
            <label for="row[state]-{$key}"><input id="row[state]-{$key}" name="row[state]" type="radio" value="{$key}" {in name="key" value="$row.state"}checked{/in} /> {$vo}</label> 
            {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>