開發實例

生成菜單（木用用命令這時問沒有建數據表 不能一鍵生成）

auth_role表：

權限管理--》菜單規則--添加

新建控制器（上圖的的peizi/config表示 創建admin/controller/peizhi/Config.php）

<?php

namespace app\admin\controller\peizi;

use app\common\controller\Backend;

class Config extends Backend{

   //或者什麼方法下面這個方法都不要

    public function _initialize()
    {
        parent::_initialize();
    }

}

將父類straits類合與當前控制器類合併在一塊兒（即fastAdmin默認的controller已實現的方法）

而model則是model/peizi/Config.php

視圖層：view\peizi\config/index.html/add.html、edit.html

 

嫌棄目錄層多一級改下菜單規則：

新建控制器（上圖的的peizi/config表示 創建admin/controller/Gzconfig.php）

新建視圖（admin/view/gzconfig/index.html）      出來了空白頁面！！！

新建模型（admin/mode/Gzconfig.php）

新建驗證器類（admin/validata/Gzconfig.php）

 

admin/controller/Gzconfig.php

 

admin/view/gzconfig/index.html<div class="panel panel-default panel-intro">    {:build_heading()} 模板調用build_heading函數生成頁面Heading

<div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">

                   <!---------------------定義表單之上的其餘html好比一張圖理解表格功能的234區域------------------------------------------------->
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" >
                            <i class="fa fa-refresh"></i> 
                        </a>
                        
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('weixinitem/config/add')?'':'hide'}" title="{:__('Add')}" >
                            <i class="fa fa-plus"></i> 
                            {:__('Add')}
                        </a>
                        
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('weixinitem/config/edit')?'':'hide'}" title="{:__('Edit')}" >
                            <i class="fa fa-pencil"></i> 
                            {:__('Edit')}
                        </a>
                        
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('weixinitem/config/del')?'':'hide'}" title="{:__('Delete')}" >
                            <i class="fa fa-trash"></i> 
                            {:__('Delete')}
                        </a>
                        
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('weixinitem/config/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false">
                            <i class="fa fa-upload"></i> 
                            {:__('Import')}
                        </a>

                        <div class="dropdown btn-group {:$auth->check('weixinitem/config/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown">
                                <i class="fa fa-cog"></i> 
                                {:__('More')}
                            </a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li>
                                    <a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal">
                                        <i class="fa fa-eye"></i> 
                                        {:__('Set to normal')}
                                    </a>
                                </li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden">
                                    <i class="fa fa-eye-slash"></i> 
                                    {:__('Set to hidden')}
                                </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!---------------------------------bootstrap表格------------------------------------------------------------>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('weixinitem/config/edit')}" 
                           data-operate-del="{:$auth->check('weixinitem/config/del')}" 
                           width="100%">
                    </table>

                </div>
            </div>

        </div>
    </div>
</div>

View Code

 

 

上面的代碼效果咱們能夠根據本身的需求刪除或者增長

因爲fastadmin的數據都是jajax交互完成的so咱們去定義它的js文件

public/backend/gzconfig.js

 若是咱們遵循fastadmin的標準控制器js模塊去看看瞭解fastadmin標準的控制器模塊js的表格事件

表格怎麼查看獲取後臺響應的數據：

onPreBody(data渲染數據) 在對錶格體進行渲染前觸發   pre-body.bs.table
onPostBody responseHandler 服務端響應發送的數據會通過這裏由咱們處理後再顯示在html
responseHandler                                                            測試加載一次 必須return不然其餘表單就獲取不到數據  用這個和onLoadSuccess比較好
onPreBody 
onPostBody
onLoadSuccess(data)  當遠程數據被加載完成後觸發 load-success.bs.table           測試加載一次

這幾個的加載順序
onPreBody1
onPostHeader2
onResetView3
onPostBody4
responseHandler5
onPreBody1
onPostHeader2
onResetView3
onPostBody4
onLoadSuccess6

View Code

bootstraptable 有兩種模式一種client 一種server

 server端 前臺接受渲染的數據必須是包含total和rows兩個屬性的json對象；若是後臺返回的數據格式不匹配=請在responsehandler屬性函數中處理

當刷新頁面到加載加載顯示完成觸發的事件

    //onPreBody(data渲染數據) 在對錶格體進行渲染前觸發   pre-body.bs.table
    //onPostHeader(undefined)  在表格列頭渲染完成，並在 DOM 中可見後觸發   post-header.bs.table
    //onResetView(undefind)  當重置表格視圖時觸發
    //onPostBody(data)   在表格體渲染完成，並在 DOM 中可見後觸發
    //onLoadSuccess(data)  當遠程數據被加載完成後觸發 load-success.bs.table

View Code

首先顯示操做裏的默認按鈕（拖拽、編輯、刪除）

只要在初始化中填寫他們的url就能生成用於輸出它們的html的參數對象啦

 Table.api.init({
                extend: {
                    edit_url: 'weixinitem/config/edit',
                    del_url: 'weixinitem/config/del',
                    dragsort_url: 'ajax/weigh'//這個在模板js可不填，在require-table.js裏的Table.defaults.extends給了它默認的'ajax/weigh'值
                  
                }
            });

View Code

可是drags按鈕要輸出html還須要在require_table.js的table.config中配置dragfieldId的值 它的值必須與table表中的行row之field字段名相同

因此若是咱們像要生成拖拽菜單，那我咱們須要相應的數據庫表字段（默認weigh）

總結：輸出和禁用默認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有值

View Code

 

 

 

 

 

 

 

 

 

 

require.table.js源碼

define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-export', 'bootstrap-table-commonsearch', 'bootstrap-table-template'], function ($, undefined, Moment) {
    var Table = {
        list: {},
        // Bootstrap-table 基礎配置
        defaults: {
            url: '',
            sidePagination: 'server',
            method: 'get', //請求方法
            toolbar: ".toolbar", //工具欄
            search: true, //是否啓用快速搜索
            cache: false,
            commonSearch: true, //是否啓用通用搜索
            searchFormVisible: false, //是否始終顯示搜索表單
            titleForm: '', //爲空則不顯示標題，不定義默認顯示：普通搜索
            idTable: 'commonTable',
            showExport: true,
            exportDataType: "all",
            exportTypes: ['json', 'xml', 'csv', 'txt', 'doc', 'excel'],
            pageSize: 10,
            pageList: [10, 25, 50, 'All'],
            pagination: true,
            clickToSelect: true, //是否啓用點擊選中
            dblClickToEdit: true, //是否啓用雙擊編輯
            singleSelect: false, //是否啓用單選
            showRefresh: false,
            locale: 'zh-CN',
            showToggle: true,
            showColumns: true,
            pk: 'id',
            sortName: 'id',
            sortOrder: 'desc',
            paginationFirstText: __("First"),
            paginationPreText: __("Previous"),
            paginationNextText: __("Next"),
            paginationLastText: __("Last"),
            cardView: false, //卡片視圖
            checkOnInit: true, //是否在初始化時判斷
            escape: true, //是否對內容進行轉義
            extend: {
                index_url: '',
                add_url: '',
                edit_url: '',
                del_url: '',
                import_url: '',
                multi_url: '',
                dragsort_url: 'ajax/weigh'
            }
        },
        // Bootstrap-table 列配置
        columnDefaults: {
            align: 'center',
            valign: 'middle'
        },
        config: {
            firsttd: 'tbody tr td:first-child:not(:has(div.card-views))',//不是卡片視圖的的哥td（即checkebox那列）
            toolbar: '.toolbar',//包裹下面這幾個自定義表格按鈕的盒子
            refreshbtn: '.btn-refresh',//刷新
            addbtn: '.btn-add',//增長
            editbtn: '.btn-edit',//編輯
            delbtn: '.btn-del',//刪除
            importbtn: '.btn-import',//導入
            multibtn: '.btn-multi',//批量更新
            disabledbtn: '.btn-disabled',
            editonebtn: '.btn-editone',//操做裏的刪除
            dragsortfield: 'weigh'
        },
        api: {
            //Table.api.init
            init: function (defaults, columnDefaults, locales) {
                defaults = defaults ? defaults : {};
                columnDefaults = columnDefaults ? columnDefaults : {};
                locales = locales ? locales : {};
                // 若是是iOS設備則啓用卡片視圖
                if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
                    Table.defaults.cardView = true;
                }
                // 寫入bootstrap-table默認配置（深拷貝）
                $.extend(true, $.fn.bootstrapTable.defaults, Table.defaults, defaults);
                // 寫入bootstrap-table column配置
                $.extend($.fn.bootstrapTable.columnDefaults, Table.columnDefaults, columnDefaults);
                // 寫入bootstrap-table locale配置
                $.extend($.fn.bootstrapTable.locales[Table.defaults.locale], {
                    formatCommonSearch: function () {
                        return __('Common search');
                    },
                    formatCommonSubmitButton: function () {
                        return __('Submit');
                    },
                    formatCommonResetButton: function () {
                        return __('Reset');
                    },
                    formatCommonCloseButton: function () {
                        return __('Close');
                    },
                    formatCommonChoose: function () {
                        return __('Choose');
                    }
                }, locales);
            },
            //Table.api.bindevent 綁定事件
            bindevent: function (table) {
                //Bootstrap-table的父元素,包含table,toolbar,pagnation
                var parenttable = table.closest('.bootstrap-table');
                //Bootstrap-table配置
                var options = table.bootstrapTable('getOptions');//獲取表格的參數
                //Bootstrap操做區
                var toolbar = $(options.toolbar, parenttable);
                
                //當刷新表格時（當遠程數據被加載出錯後觸發）
                table.on('load-error.bs.table', function (status, res, e) {
                    if (e.status === 0) {
                        return;
                    }
                    Toastr.error(__('Unknown data format'));
                });
                //當刷新表格時（當點擊刷新按鈕對錶格進行刷新時觸發）
                table.on('refresh.bs.table', function (e, settings, data) {
                    $(Table.config.refreshbtn, toolbar).find(".fa").addClass("fa-spin");
                });
                //啓用雙擊編輯時
                if (options.dblClickToEdit) {
                    //當雙擊單元格時
                    table.on('dbl-click-row.bs.table', function (e, row, element, field) {
                        $(Table.config.editonebtn, element).trigger("click");
                    });
                }
                //當內容渲染完成後
                table.on('post-body.bs.table', function (e, settings, json, xhr) {
                    $(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin");
                    $(Table.config.disabledbtn, toolbar).toggleClass('disabled', true);
                    
                    if ($(Table.config.firsttd, table).find("input[type='checkbox'][data-index]").size() > 0) {
                        // 挺拽選擇,須要從新綁定事件
                        require(['drag', 'drop'], function () {
                            $(Table.config.firsttd, table).drag("start", function (ev, dd) {
                                return $('<div class="selection" />').css('opacity', .65).appendTo(document.body);
                            }).drag(function (ev, dd) {
                                $(dd.proxy).css({
                                    top: Math.min(ev.pageY, dd.startY),
                                    left: Math.min(ev.pageX, dd.startX),
                                    height: Math.abs(ev.pageY - dd.startY),
                                    width: Math.abs(ev.pageX - dd.startX)
                                });
                            }).drag("end", function (ev, dd) {
                                $(dd.proxy).remove();
                            });
                            $(Table.config.firsttd, table).drop("start", function () {
                                Table.api.toggleattr(this);// 切換複選框狀態
                            }).drop(function () {
                                Table.api.toggleattr(this);// 切換複選框狀態
                            }).drop("end", function () {
                                Table.api.toggleattr(this);// 切換複選框狀態
                            });
                            $.drop({
                                multi: true
                            });
                        });
                    }
                });
                // 處理選中篩選框後按鈕的狀態統一變動  
                table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                    //獲取選中的條目ID集合
                    var ids = Table.api.selectedids(table);
                    $(Table.config.disabledbtn, toolbar).toggleClass('disabled', !ids.length);
                });
                // 綁定TAB事件  shown.bs.tab bootstrap-tab.js定義的tab事件 選項卡顯示時觸發
                $('.panel-heading ul[data-field] li a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    var field = $(this).closest("ul").data("field");//獲取緩存字段
                    var value = $(this).data("value");//獲取緩存數據
                    $("select[name='" + field + "'] option[value='" + value + "']", table.closest(".bootstrap-table").find(".commonsearch-table")).prop("selected", true);
                    table.bootstrapTable('refresh', {});
                    return false;
                });
                
                // 刷新按鈕事件
                $(toolbar).on('click', Table.config.refreshbtn, function () {
                    table.bootstrapTable('refresh');
                });

                // 添加按鈕事件
                $(toolbar).on('click', Table.config.addbtn, function () {
                    //獲取選中的條目ID集合
                    var ids = Table.api.selectedids(table);
                    var url = options.extend.add_url;//weixinitem/config/add
                    if (url.indexOf("{ids}") !== -1) {
                        //替換URL中的數據(模板數據)
                        url = Table.api.replaceurl(url, {ids: ids.length > 0 ? ids.join(",") : 0}, table);
                    }
                    //彈出窗口 layer模態框
                    Fast.api.open(url, __('Add'), $(this).data() || {});
                });
                // 導入按鈕事件 Table.config.importbtn存在值則默認是有的爲.btn-import
                if ($(Table.config.importbtn, toolbar).size() > 0) {
                    //載入上傳圖片模塊
                    require(['upload'], function (Upload) {

                        Upload.api.plupload($(Table.config.importbtn, toolbar), function (data, ret) {
                            Fast.api.ajax({
                                url: options.extend.import_url,
                                data: {file: data.url},
                            }, function (data, ret) {
                                table.bootstrapTable('refresh');
                            });
                        });
                    });
                }
                // 批量編輯按鈕事件
                $(toolbar).on('click', Table.config.editbtn, function () {
                    var that = this;
                    //循環彈出多個編輯框
                    $.each(table.bootstrapTable('getSelections'), function (index, row) {
                        var url = options.extend.edit_url;
                        row = $.extend({}, row ? row : {}, {ids: row[options.pk]});
                        //替換URL中的數據
                        var url = Table.api.replaceurl(url, row, table);
                        Fast.api.open(url, __('Edit'), $(that).data() || {});
                    });
                });
                // 批量操做按鈕事件
                $(toolbar).on('click', Table.config.multibtn, function () {
                    //獲取選中的條目ID集合
                    var ids = Table.api.selectedids(table);
                    Table.api.multi($(this).data("action"), ids, table, this);
                });
                // 批量刪除按鈕事件
                $(toolbar).on('click', Table.config.delbtn, function () {
                    var that = this;
                    //獲取選中的條目ID集合
                    var ids = Table.api.selectedids(table);
                    Layer.confirm(
                        __('Are you sure you want to delete the %s selected item?', ids.length),
                        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true},
                        function (index) {
                            Table.api.multi("del", ids, table, that);
                            Layer.close(index);
                        }
                    );
                });
                // 拖拽排序
                require(['dragsort'], function () {
                    //綁定拖動排序
                    $("tbody", table).dragsort({
                        itemSelector: 'tr:visible',
                        dragSelector: "a.btn-dragsort",
                        dragEnd: function (a, b) {
                            var element = $("a.btn-dragsort", this);
                            var data = table.bootstrapTable('getData');
                            var current = data[parseInt($(this).data("index"))];
                            var options = table.bootstrapTable('getOptions');
                            //改變的值和改變的ID集合
                            var ids = $.map($("tbody tr:visible", table), function (tr) {
                                return data[parseInt($(tr).data("index"))][options.pk];
                            });
                            var changeid = current[options.pk];
                            var pid = typeof current.pid != 'undefined' ? current.pid : '';
                            var params = {
                                url: table.bootstrapTable('getOptions').extend.dragsort_url,
                                data: {
                                    ids: ids.join(','),
                                    changeid: changeid,
                                    pid: pid,
                                    field: Table.config.dragsortfield,
                                    orderway: options.sortOrder,
                                    table: options.extend.table
                                }
                            };
                            Fast.api.ajax(params, function (data, ret) {
                                var success = $(element).data("success") || $.noop;
                                if (typeof success === 'function') {
                                    if (false === success.call(element, data, ret)) {
                                        return false;
                                    }
                                }
                                table.bootstrapTable('refresh');
                            }, function (data, ret) {
                                var error = $(element).data("error") || $.noop;
                                if (typeof error === 'function') {
                                    if (false === error.call(element, data, ret)) {
                                        return false;
                                    }
                                }
                                table.bootstrapTable('refresh');
                            });
                        },
                        placeHolderTemplate: ""
                    });
                });

                //點擊iuput框（data-id是哪兒的）
                $(table).on("click", "input[data-id][name='checkbox']", function (e) {
                    var ids = $(this).data("id");
                    // 根據主鍵ID獲取行數據
                    var row = Table.api.getrowbyid(table, ids);
                    table.trigger('check.bs.table', [row, this]);
                });
                // 
                $(table).on("click", "[data-id].btn-change", function (e) {
                    e.preventDefault();
                    Table.api.multi($(this).data("action") ? $(this).data("action") : '', [$(this).data("id")], table, this);
                });
                $(table).on("click", "[data-id].btn-edit", function (e) {
                    e.preventDefault();
                    var ids = $(this).data("id");
                    // 根據主鍵ID獲取行數據
                    var row = Table.api.getrowbyid(table, ids);
                    row.ids = ids;
                    //替換URL中的數據
                    var url = Table.api.replaceurl(options.extend.edit_url, row, table);
                    Fast.api.open(url, __('Edit'), $(this).data() || {});
                });
                $(table).on("click", "[data-id].btn-del", function (e) {
                    e.preventDefault();
                    var id = $(this).data("id");
                    var that = this;
                    Layer.confirm(
                        __('Are you sure you want to delete this item?'),
                        {icon: 3, title: __('Warning'), shadeClose: true},
                        function (index) {
                            Table.api.multi("del", id, table, that);
                            Layer.close(index);
                        }
                    );
                });
                var id = table.attr("id");
                Table.list[id] = table;
                return table;
            },
            //Table.api.multi 批量操做請求
            multi: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var data = element ? $(element).data() : {};
                var ids = ($.isArray(ids) ? ids.join(",") : ids);
                var url = typeof data.url !== "undefined" ? data.url : (action == "del" ? options.extend.del_url : options.extend.multi_url);
                //替換URL中的數據
                url = this.replaceurl(url, {ids: ids}, table);
                var params = typeof data.params !== "undefined" ? (typeof data.params == 'object' ? $.param(data.params) : data.params) : '';
                var options = {url: url, data: {action: action, ids: ids, params: params}};
                Fast.api.ajax(options, function (data, ret) {
                    var success = $(element).data("success") || $.noop;
                    if (typeof success === 'function') {
                        if (false === success.call(element, data, ret)) {
                            return false;
                        }
                    }
                    table.bootstrapTable('refresh');
                }, function (data, ret) {
                    var error = $(element).data("error") || $.noop;
                    if (typeof error === 'function') {
                        if (false === error.call(element, data, ret)) {
                            return false;
                        }
                    }
                });
            },
            // 單元格元素事件
            events: {
                operate: {
                    'click .btn-editone': function (e, value, row, index) {
                        e.stopPropagation();
                        e.preventDefault();
                        var table = $(this).closest('table');
                        var options = table.bootstrapTable('getOptions');
                        var ids = row[options.pk];
                        row = $.extend({}, row ? row : {}, {ids: ids});
                        var url = options.extend.edit_url;
                        //replaceurll 替換URL中的數據
                        Fast.api.open(Table.api.replaceurl(url, row, table), __('Edit'), $(this).data() || {});
                    },
                    'click .btn-delone': function (e, value, row, index) {
                        e.stopPropagation();
                        e.preventDefault();
                        var that = this;
                        var top = $(that).offset().top - $(window).scrollTop();
                        var left = $(that).offset().left - $(window).scrollLeft() - 260;
                        if (top + 154 > $(window).height()) {
                            top = top - 154;
                        }
                        if ($(window).width() < 480) {
                            top = left = undefined;
                        }
                        Layer.confirm(
                            __('Are you sure you want to delete this item?'),
                            {icon: 3, title: __('Warning'), offset: [top, left], shadeClose: true},
                            function (index) {
                                var table = $(that).closest('table');
                                var options = table.bootstrapTable('getOptions');
                                Table.api.multi("del", row[options.pk], table, that);
                                Layer.close(index);
                            }
                        );
                    }
                }
            },
            //Table.api.formatter 單元格數據格式化 
            //這裏都是定義的Bootstraptable formatter:function(value, row, index){}
            formatter: {
                icon: function (value, row, index) {
                    if (!value)
                        return '';
                    value = value === null ? '' : value.toString();
                    value = value.indexOf(" ") > -1 ? value : "fa fa-" + value;
                    //渲染fontawesome圖標
                    return '<i class="' + value + '"></i> ' + value;
                },
                operate: function (value, row, index) {
                   // row 行數據
                   //value
                   //index 行索引

                    var table = this.table;
                    // bootstrapTable對象  操做配置
                    var options = table ? table.bootstrapTable('getOptions') : {};

                    // 默認按鈕組(目前都爲空)  將this.buttons合併到第一個參數指定的對象（第一個參數布爾就是三個之後合併到第二個）
                    var buttons = $.extend([], this.buttons || []);
                    

                    // 遍歷拿到全部按鈕名稱
                    var names = [];
                    buttons.forEach(function (item) {//EcmaScript.js的語法
                        names.push(item.name);//向數組的末尾添加一個或多個元素，並返回新的長度
                    });

                    //初始化給這三個賦值了那麼就將buttons所需的參數組裝成對象indexOf查詢字符串或者數組出現的位置，沒有返回-1
                    if (options.extend.dragsort_url !== '' && names.indexOf('dragsort') === -1) {
                        buttons.push({
                            name: 'dragsort',
                            icon: 'fa fa-arrows',
                            title: __('Drag to sort'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-primary btn-dragsort'
                        });
                    }
                    if (options.extend.edit_url !== '' && names.indexOf('edit') === -1) {
                        buttons.push({
                            name: 'edit',
                            icon: 'fa fa-pencil',
                            title: __('Edit'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-success btn-editone',
                            url: options.extend.edit_url
                        });
                    }
                    if (options.extend.del_url !== '' && names.indexOf('del') === -1) {
                        buttons.push({
                            name: 'del',
                            icon: 'fa fa-trash',
                            title: __('Del'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-danger btn-delone'
                        });
                    }

                    //返回生成button樣式的連接
                    return Table.api.buttonlink(this, buttons, value, row, index, 'operate');
                },
                image: function (value, row, index) {
                    value = value ? value : '/assets/img/blank.gif';
                    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                    return '<a href="' + Fast.api.cdnurl(value) + '" target="_blank"><img class="' + classname + '" src="' + Fast.api.cdnurl(value) + '" /></a>';
                },
                images: function (value, row, index) {
                    value = value === null ? '' : value.toString();
                    var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                    var arr = value.split(',');
                    var html = [];
                    $.each(arr, function (i, value) {
                        value = value ? value : '/assets/img/blank.gif';
                        html.push('<a href="' + Fast.api.cdnurl(value) + '" target="_blank"><img class="' + classname + '" src="' + Fast.api.cdnurl(value) + '" /></a>');
                    });
                    return html.join(' ');
                },
                status: function (value, row, index) {
                    var custom = {normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'};
                    if (typeof this.custom !== 'undefined') {
                        custom = $.extend(custom, this.custom);
                    }
                    this.custom = custom;
                    this.icon = 'fa fa-circle';
                    return Table.api.formatter.normal.call(this, value, row, index);
                },
                normal: function (value, row, index) {
                    var colorArr = ["primary", "success", "danger", "warning", "info", "gray", "red", "yellow", "aqua", "blue", "navy", "teal", "olive", "lime", "fuchsia", "purple", "maroon"];
                    var custom = {};
                    if (typeof this.custom !== 'undefined') {
                        custom = $.extend(custom, this.custom);
                    }
                    value = value === null ? '' : value.toString();
                    var keys = typeof this.searchList === 'object' ? Object.keys(this.searchList) : [];
                    var index = keys.indexOf(value);
                    var color = value && typeof custom[value] !== 'undefined' ? custom[value] : null;
                    var display = index > -1 ? this.searchList[value] : null;
                    var icon = typeof this.icon !== 'undefined' ? this.icon : null;
                    if (!color) {
                        color = index > -1 && typeof colorArr[index] !== 'undefined' ? colorArr[index] : 'primary';
                    }
                    if (!display) {
                        display = __(value.charAt(0).toUpperCase() + value.slice(1));
                    }
                    var html = '<span class="text-' + color + '">' + (icon ? '<i class="' + icon + '"></i> ' : '') + display + '</span>';
                    if (this.operate != false) {
                        html = '<a href="javascript:;" class="searchit" data-toggle="tooltip" title="' + __('Click to search %s', display) + '" data-field="' + this.field + '" data-value="' + value + '">' + html + '</a>';
                    }
                    return html;
                },
                toggle: function (value, row, index) {
                    var color = typeof this.color !== 'undefined' ? this.color : 'success';
                    var yes = typeof this.yes !== 'undefined' ? this.yes : 1;
                    var no = typeof this.no !== 'undefined' ? this.no : 0;
                    return "<a href='javascript:;' data-toggle='tooltip' title='" + __('Click to toggle') + "' class='btn-change' data-id='"
                        + row.id + "' data-params='" + this.field + "=" + (value == yes ? no : yes) + "'><i class='fa fa-toggle-on " + (value == yes ? 'text-' + color : 'fa-flip-horizontal text-gray') + " fa-2x'></i></a>";
                },
                url: function (value, row, index) {
                    return '<div class="input-group input-group-sm" style="width:250px;margin:0 auto;"><input type="text" class="form-control input-sm" value="' + value + '"><span class="input-group-btn input-group-sm"><a href="' + value + '" target="_blank" class="btn btn-default btn-sm"><i class="fa fa-link"></i></a></span></div>';
                },
                search: function (value, row, index) {
                    return '<a href="javascript:;" class="searchit" data-toggle="tooltip" title="' + __('Click to search %s', value) + '" data-field="' + this.field + '" data-value="' + value + '">' + value + '</a>';
                },
                addtabs: function (value, row, index) {
                    //替換URL中的數據
                    var url = Table.api.replaceurl(this.url, row, this.table);
                    var title = this.atitle ? this.atitle : __("Search %s", value);
                    return '<a href="' + Fast.api.fixurl(url) + '" class="addtabsit" data-value="' + value + '" title="' + title + '">' + value + '</a>';
                },
                dialog: function (value, row, index) {
                    //替換URL中的數據
                    var url = Table.api.replaceurl(this.url, row, this.table);
                    var title = this.atitle ? this.atitle : __("View %s", value);
                    return '<a href="' + Fast.api.fixurl(url) + '" class="dialogit" data-value="' + value + '" title="' + title + '">' + value + '</a>';
                },
                flag: function (value, row, index) {
                    var that = this;
                    value = value === null ? '' : value.toString();
                    var colorArr = {index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'};
                    //若是字段列有定義custom
                    if (typeof this.custom !== 'undefined') {
                        colorArr = $.extend(colorArr, this.custom);
                    }
                    var field = this.field;
                    if (typeof this.customField !== 'undefined' && typeof row[this.customField] !== 'undefined') {
                        value = row[this.customField];
                        field = this.customField;
                    }

                    //渲染Flag
                    var html = [];
                    var arr = value.split(',');
                    $.each(arr, function (i, value) {
                        value = value === null ? '' : value.toString();
                        if (value == '')
                            return true;
                        var color = value && typeof colorArr[value] !== 'undefined' ? colorArr[value] : 'primary';
                        var display = typeof that.searchList !== 'undefined' && typeof that.searchList[value] !== 'undefined' ? that.searchList[value] : __(value.charAt(0).toUpperCase() + value.slice(1));
                        html.push('<a href="javascript:;" class="searchit" data-toggle="tooltip" title="' + __('Click to search %s', display) + '" data-field="' + field + '" data-value="' + value + '"><span class="label label-' + color + '">' + display + '</span></a>');
                    });
                    return html.join(' ');
                },
                label: function (value, row, index) {
                    return Table.api.formatter.flag.call(this, value, row, index);
                },
                datetime: function (value, row, index) {
                    var datetimeFormat = typeof this.datetimeFormat === 'undefined' ? 'YYYY-MM-DD HH:mm:ss' : this.datetimeFormat;
                    if (isNaN(value)) {
                        return value ? Moment(value).format(datetimeFormat) : __('None');
                    } else {
                        return value ? Moment(parseInt(value) * 1000).format(datetimeFormat) : __('None');
                    }
                },
                buttons: function (value, row, index) {
                    // 默認按鈕組
                    var buttons = $.extend([], this.buttons || []);
                    return Table.api.buttonlink(this, buttons, value, row, index, 'buttons');
                }
            },
            //生成button樣式的a連接
            buttonlink: function (column, buttons, value, row, index, type) {
                var table = column.table;
                type = typeof type === 'undefined' ? 'buttons' : type;
                var options = table ? table.bootstrapTable('getOptions') : {};
                var html = [];
                var hidden, visible, disable, url, classname, icon, text, title, refresh, confirm, extend, click, dropdown, link;
                var fieldIndex = column.fieldIndex;
                var dropdowns = {};
               
                $.each(buttons, function (i, j) {

                    //在最後一個參數爲operate時
                    if (type === 'operate') {

                        if (j.name === 'dragsort' && typeof row[Table.config.dragsortfield] === 'undefined') {
                            
                            //走進這裏了缺了row['weigh']
                            return true;
                        }
                        //buttons 的j.name是下面這個數組的成員而且 定義了它們的url爲空
                        if (['add', 'edit', 'del', 'multi', 'dragsort'].indexOf(j.name) > -1 && !options.extend[j.name + "_url"]) {

                            return true;
                        }

                    }
                    
                    //緩存operate-del/operate-edit/operate-dragsort                    
                    var attr = table.data(type + "-" + j.name);
                    if (typeof attr === 'undefined' || attr) {
                        hidden = typeof j.hidden === 'function' ? j.hidden.call(table, row, j) : (j.hidden ? j.hidden : false);
                        if (hidden) {
                            return true;
                        }
                        visible = typeof j.visible === 'function' ? j.visible.call(table, row, j) : (j.visible ? j.visible : true);
                        if (!visible) {
                            return true;
                        }
                        dropdown = j.dropdown ? j.dropdown : '';
                        url = j.url ? j.url : '';
                        url = typeof url === 'function' ? url.call(table, row, j) : (url ? Fast.api.fixurl(Table.api.replaceurl(url, row, table)) : 'javascript:;');
                        classname = j.classname ? j.classname : 'btn-primary btn-' + name + 'one';
                        icon = j.icon ? j.icon : '';
                        text = j.text ? j.text : '';
                        title = j.title ? j.title : text;
                        refresh = j.refresh ? 'data-refresh="' + j.refresh + '"' : '';
                        confirm = j.confirm ? 'data-confirm="' + j.confirm + '"' : '';
                        extend = j.extend ? j.extend : '';
                        disable = typeof j.disable === 'function' ? j.disable.call(table, row, j) : (j.disable ? j.disable : false);
                        if (disable) {
                            classname = classname + ' disabled';
                        }
                        link = '<a href="' + url + '" class="' + classname + '" ' + (confirm ? confirm + ' ' : '') + (refresh ? refresh + ' ' : '') + extend + ' title="' + title + '" data-table-id="' + (table ? table.attr("id") : '') + '" data-field-index="' + fieldIndex + '" data-row-index="' + index + '" data-button-index="' + i + '"><i class="' + icon + '"></i>' + (text ? ' ' + text : '') + '</a>';

                        if (dropdown) {
                            if (typeof dropdowns[dropdown] == 'undefined') {
                                dropdowns[dropdown] = [];
                            }
                            dropdowns[dropdown].push(link);
                        } else {
                            //zhe
                            html.push(link);
                        }
                    }
                });
                if (!$.isEmptyObject(dropdowns)) {
                    var dropdownHtml = [];
                    $.each(dropdowns, function (i, j) {
                        dropdownHtml.push('<div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown">' + i + '</button><button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu pull-right"><li>' + j.join('</li><li>') + '</li></ul></div>');
                    });
                    html.unshift(dropdownHtml);
                }
                //console.log(html);
                return html.join(' ');
            },
            //  
            replaceurl: function (url, row, table) {
                var options = table ? table.bootstrapTable('getOptions') : null;
                var ids = options ? row[options.pk] : 0;
                row.ids = ids ? ids : (typeof row.ids !== 'undefined' ? row.ids : 0);
                //自動添加ids參數
                url = !url.match(/\{ids\}/i) ? url + (url.match(/(\?|&)+/) ? "&ids=" : "/ids/") + '{ids}' : url;
                url = url.replace(/\{(.*?)\}/gi, function (matched) {
                    matched = matched.substring(1, matched.length - 1);
                    if (matched.indexOf(".") !== -1) {
                        var temp = row;
                        var arr = matched.split(/\./);
                        for (var i = 0; i < arr.length; i++) {
                            if (typeof temp[arr[i]] !== 'undefined') {
                                temp = temp[arr[i]];
                            }
                        }
                        return typeof temp === 'object' ? '' : temp;
                    }
                    return row[matched];
                });
                return url;
            },
            // 獲取選中的條目ID集合
            selectedids: function (table) {
                var options = table.bootstrapTable('getOptions');
                if (options.templateView) {
                    return $.map($("input[data-id][name='checkbox']:checked"), function (dom) {
                        return $(dom).data("id");
                    });
                } else {
                    return $.map(table.bootstrapTable('getSelections'), function (row) {
                        return row[options.pk];
                    });
                }
            },
            // 切換複選框狀態
            toggleattr: function (table) {
                $("input[type='checkbox']", table).trigger('click');
            },
            // 根據行索引獲取行數據
            getrowdata: function (table, index) {
                index = parseInt(index);
                var data = table.bootstrapTable('getData');
                return typeof data[index] !== 'undefined' ? data[index] : null;
            },
            // 根據行索引獲取行數據
            getrowbyindex: function (table, index) {
                return Table.api.getrowdata(table, index);
            },
            // 根據主鍵ID獲取行數據
            getrowbyid: function (table, id) {
                var row = {};
                var options = table.bootstrapTable("getOptions");
                $.each(table.bootstrapTable('getData'), function (i, j) {
                    if (j[options.pk] == id) {
                        row = j;
                        return false;
                    }
                });
                return row;
            }
        },
    };
    return Table;
});

View Code