瞭解fastadmin標準的控制器模塊js的表格事件

controller/A.php<-------------->public/assets/js/backend/a.js

controller/b/A.php<-------------->public/assets/js/backend/b/a.js

標準的控制器模塊js

<script src="/assets/js/require.js" data-main="/assets/js/require-backend.js?v=1551685919"></script>

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格參數配置
            Table.api.init({
                extend: {
                    index_url: 'category/index',
                    add_url: 'category/add',
                    edit_url: 'category/edit',
                    del_url: 'category/del',
                    multi_url: 'category/multi',
                    dragsort_url: '',
                    table: 'category',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                escape: false,
                pk: 'id',
                sortName: 'weigh',
                pagination: false,
                commonSearch: false,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'type', title: __('Type')},
                        {field: 'name', title: __('Name'), align: 'left'},
                        {field: 'nickname', title: __('Nickname')},
                        {field: 'flag', title: __('Flag'), operate: false, formatter: Table.api.formatter.flag},
                        {field: 'image', title: __('Image'), operate: false, formatter: Table.api.formatter.image},
                        {field: 'weigh', title: __('Weigh')},
                        {field: 'status', title: __('Status'), operate: false, formatter: Table.api.formatter.status},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 爲表格綁定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

View Code

每個控制器請求的方法對應JS模塊中一個方法 

js中有定義一個Controller 對象，它有index/add/edit/api四個方法，這四個方法分別與咱們控制器中的方法一一對應

若是咱們在js中添加了本身的方法，如detail方法，則對應添加Controller下的對應控制器文件下的detail方法

在public/assets/js/backend/a.js用define()定義了a模塊

加載用require(['a'], function (a){...}

咱們在require配置文件/assets/js/require-backend.js中找到

//加載相應模塊
if (Config.jsname) {
    require([Config.jsname], function (Controller) {
        Controller[Config.actionname] != undefined && Controller[Config.actionname]();
    }, function (e) {
        console.error(e);
        // 這裏可捕獲模塊加載的錯誤
    });
}

參數Config.jsname即爲自定義的模塊名（js文件），格式爲：backend/a ;
Config.actionname爲你在js模塊定義的一個對象的屬性，屬性有四個方法（對象），這四個方法分別與咱們控制器中的方法一一對應
分別執行了模塊js的idnex、add、edit、api這四個對象屬性
Controller.index：
index 調用的是Table.api.bindevent(table); 即調用的是require-table.js裏的Table對象
上面這個table有什麼對象呀，事件有哪些呢Controllerindex/add/edit/api

Table.list                 //已經渲染的表格對象
Table.defaults             Bootstrap-table表格默認列的配置
Table.columnDefaults       bootstraptable  column的默認參數
Table.config               表格相關DOM元素類配置 如定義的button等選擇器
Table.api.init(Table.defaults, Table.columnDefaults, locales)      初始化table 在這自定義修改表的前兩個默認參數
Table.api.bindevent(table)  //綁定事件
Table.api.multi(action, ids, table, element)   // 批量操做請求
Table.api.events          //單元格元素事件
Table.api.formatter       //單元格數據格式化

> `Table.api.formatter.icon` 快速將字段渲染成一個按鈕，僅支持Fontawesome按鈕
> `Table.api.formatter.image` 快速將字段渲染成圖片展現的形式
> `Table.api.formatter.images` 快速將字段渲染成多圖片展現的形式,字段數據請以`,`進行分隔
> `Table.api.formatter.status` 快速將字段渲染成狀態，默認`normal/hidden/deleted/locked`這四個狀態
> `Table.api.formatter.url` 快速將字段渲染成URL框
> `Table.api.formatter.search` 快速將字段渲染成可搜索的連接，點擊後將執行搜索
> `Table.api.formatter.addtabs` 快速將字段渲染成可添加到選項卡的連接，點擊後將把連接添加到選項卡
> `Table.api.formatter.flag` 快速將字段渲染成標誌，僅支持`index/hot/recommend/new`這四種標誌
> `Table.api.formatter.label` 快速將字段渲染Label標籤
> `Table.api.formatter.datetime` 快速時間戳數據渲染成日期時間數據
> `Table.api.formatter.operate` 操做欄固定按鈕
> `Table.api.formatter.buttons` 快速生成多個按鈕
> `Table.api.formatter.toggle` 快速生成切換按鈕

Table.api.buttonlink(column, buttons, value, row, index, type) //生成button樣式的連接 
Table.api.replaceurl(url, row, table) //替換URL中的數據（{變量名}）
Table.api.selectedids(table) // 獲取選中的條目ID集合
Table.api.toggleattr(table)  // 切換複選框狀態    
Table.api.getrowdata(table, index) //根據行索引獲取行數據
Table.api.getrowbyindex(table, index)// 根據行索引獲取行數據
Table.api.getrowbyid(table, id) // 根據主鍵ID獲取行數據

 

Table主要功能

load-error.bs.table  當遠程數據被加載出錯後觸發   
refresh.bs.table      當點擊刷新按鈕對錶格進行刷新時觸發 在.btn-refresh .fa的元素上添加一個fa-spin的類，轉圈的圖標。。。
dbl-click-row.bs.table  當雙擊單元格時  向.btn-edit元素傳遞一個click事件
post-body.bs.table     當內容渲染完成後  移除.fa-spin  向.btn-disabled類元素添加disabled屬性禁止交互、不是卡片視圖的的type是checkebox的td的data-index屬性大於0 時拖拽選擇須要從新綁定事件
check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table  選中一行。取消選中一行全選框選中全選框取消時.btn-disabled類元素disabled狀態的切換
綁定panel-heading類的tab事件
.toolbar .btn-refresh下的刷新按鈕事件
.toolbar .btn-add下的添加按鈕事件
.toolbar .btn-import下的導入按鈕事件
.toolbar .btn-edit下的編輯按鈕事件
.toolbar .btn-multi批量操做按鈕事件
.toolbar btn-del批量刪除按鈕事件
綁定拖動排序
input[data-id][name='checkbox']點擊事件
[data-id].btn-change點擊事件
[data-id].btn-edit點擊事件
[data-id].btn-del
批量操做請求
單元格元素事件 click .btn-editone和click .btn-delone
單元格數據格式化

View Code

按鈕顯示： 

 

這裏的默認幾個自定義的按鈕或者本身在添加的直接在view模板裏寫注意類名要對應上；

fastadmin給默認的按鈕都指定了類別以下：

Table.config.firsttd: 'tbody tr td:first-child:not(:has(div.card-views))',//不是卡片視圖的的哥td（即checkebox那列）
Table.config.toolbar: '.toolbar',//包裹下面這幾個自定義表格按鈕的盒子
Table.config.refreshbtn: '.btn-refresh',//刷新
Table.config.addbtn: '.btn-add',//增長
Table.config.editbtn: '.btn-edit',//編輯
Table.config.delbtn: '.btn-del',//刪除
Table.config.importbtn: '.btn-import',//導入
Table.config.multibtn: '.btn-multi',//批量更新
Table.config.disabledbtn: '.btn-disabled',
Table.config.editonebtn: '.btn-editone',//操做裏的刪除
Table.config.dragsortfield: 'weigh'

事件：

點擊刷新    觸發 .toolbar Table.config.refreshbtn的click事件

點擊添加    觸發 .toolbar Table.config.addbtn點擊事件

點加導入：觸發 Table.config.importbtn  點加事件

點擊批量編輯按鈕(螺母形狀)：觸發 .toolbar Table.config.editbtn 點擊事件

點擊刪除：觸發 .toolbar Table.config.delbtn 點擊事件

 

表格默認button：輸出和禁用默認button

            // 初始化表格參數配置
            Table.api.init({
                extend: {
                    index_url: 'weixinitem/config/index',
                    add_url: 'weixinitem/config/add',
                    edit_url: 'weixinitem/config/edit',//默認爲空則不生成
                    del_url: 'weixinitem/config/del',//默認爲空則不生成
                    dragsort_ur:'',//爲空則不生成
                    multi_url: 'weixinitem/config/multi',
                    table: 'weixinitem_config',
                }
            });
拖拽圖標的話、在數據庫不用建默認的weigh字段或者responseHandler裏修改row的field字段名、或者修改require_table.js裏的Table.config裏的dragsortfield的值

重點說下拖拽的圖標顯示咱們須要後臺傳過來的字段名（傳過來前可隨意組裝）與table表field的值相同且與Table.config.dragsortfield的值相同且與Table.defaults.extend.dragsort_url有值

事件：

拖拽事件require(['dragsort'], function () {})

編輯：觸發.btn-editone點擊事件 Table.api.events.operate

 刪除：觸發btn-delone的點擊事件Table.api.events.operate

 

 ps

表單的生成：

fastadmin form表單組件（每一個表單元素的生成）

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('文本框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::text('row[text]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多行文本框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::textarea('row[textarea]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('富文本編輯器')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::editor('row[editor]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('單選')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::radios('row[radio]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('複選')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::checkboxs('row[checkbox]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::select('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(多選)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selects('row[select]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpicker('row[selectpicker]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('下拉列表(友好)(多選)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpickers('row[selectpickers]', ['aa'=>'AA', 'bb'=>'BB'], 'aa', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('動態下拉列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpage('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('動態下拉列表(多選)')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::selectpages('row[select]', 2, 'category/selectpage', null, null, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('城市選擇框')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::citypicker('row[citypicker]', 2, ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datepicker('row[datepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('時間')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::timepicker('row[timepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期時間')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datetimepicker('row[timepicker]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期區間')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::daterange('row[daterange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('時間區間')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::timerange('row[timerange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('日期時間區間')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::datetimerange('row[datetimerange]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('動態字段列表')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::fieldlist('row[fieldlist]', ['aa'=>'AA', 'bb'=>'BB'], null, '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('單圖')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::image('row[image]', '/uploads/20180629/b83227ea668e7b2d61def9812bbce3da.png', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多圖')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::images('row[images]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('單文件')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::upload('row[upload]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('多文件')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::uploads('row[uploads]', '', ['data-rule'=>'required'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('開關')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::switcher('row[switcher1]', '0', ['color'=>'success'])}
                                {:Form::switcher('row[switcher2]', '1', ['color'=>'yellow', 'disabled'=>true])}
                                {:Form::switcher('row[switcher3]', 'Y', ['color'=>'navy', 'yes'=>'Y', 'no'=>'N'])}
                                {:Form::switcher('row[switcher4]', '1', ['color'=>'info'])}
                                {:Form::switcher('row[switcher4]', '1', ['color'=>'danger', 'disabled'])}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('聯動選擇')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                {:Form::cxselect('ajax/area', ['province','city'], ['province'=>37, 'city'=>38])}
                            </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-success btn-embossed disabled">{:__('Submit')}</button>
                                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                            </div>
                        </div>
                    </form>

View Code

注意：必須還要在js中用Form.api.bindevent("form[role=form]");進行組件初始化，不然部分組件會不生效。