fastadmin和Bootstrap-table 使用說明

圖解析FastAdmin中的表格列表的功能：https://ask.fastadmin.net/article/323.html

如何在表格td里增加一個按鈕：如何在列表操作列區域添加按鈕  

初始化表格
table.bootstrapTable --》columns 增加：
{
    field: 'operate', title: __('Operate'), table: table,
    buttons: [
        {name: 'detail', text: '詳情', title: '詳情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail'}
    ],
    events: Table.api.events.operate, formatter: Table.api.formatter.operate
}

其中：    
buttons: [{name: 'detail', text: '詳情', title: '詳情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail'}]

說明：
name:唯一標識,其中index/add/edit/del/multi/dragsort這幾個框架已經暫用,如果使用將會覆蓋已有屬性
text:按鈕上的文本，可以為空時，為空時按鈕將不顯示文字信息，為空時最好配置上icon的值
title:按鈕的標題信息，當鼠標移到上面時顯示的文字，同時作為dialog彈出窗時的標題信息
icon:按鈕上的按鈕信息，可使用Font-awesome的按鈕，當text為空時請務必填寫該值
classname:按鈕的class標簽的值，建議btn btn-xs為必選，這樣可以和其它按鈕更加協調搭配，可搭配用的按鈕顏色有btn-primary、btn-success、btn-danger、btn-warning，還有額外的功能class如btn-dialog、btn-addtabs、btn-ajax，下面會詳細介紹。
url : 按鈕點擊后跳轉的鏈接，可選且可使用相對鏈接。為空時按鈕的鏈接為javascript:;
dropdown:按鈕分組名稱，用於將按鈕分組下拉
refresh:是否在執行完事件后刷新列表，常配合classname:'btn-ajax'使用
confirm:提示確認信息，常配合classname屬性為btn-ajax、btn-dialog、btn-addtabs使用
extend:擴展屬性，用於擴展按鈕的自定義屬性，比如自定義尺寸：extend:'data-area=["300px","350px"]'
hidden:控制按鈕是否隱藏屬性,支持function
visible:控制按鈕是否顯示屬性,支持function
disable:控制按鈕是否禁用屬性,支持function
addclass：給標簽，額外增加類名

列表中，如何去掉自帶的修改和刪除按鈕：在js文件中index方法：

$(table).data("operate-edit", null); $(table).data("operate-del", null);


            // 為表格綁定事件
            Table.api.bindevent(table);

 

如何動態的控制某一行的按鈕的顯示和隱藏：
通過按鈕屬性的hidden來控制：

hidden:function(row){                                    
if(row.is_ok){
    return true;
}
}

其他解決方法：
https://ask.fastadmin.net/question/468.html
https://ask.fastadmin.net/question/1762.html

 

如何調起彈窗：

$('.btn-test').on('click', function () {
                Fast.api.open('shop/test', __('Test'), $(this).data() || {});
});

//$(this).data() 就是 data-url、data-test數據

關於按鈕彈窗並回調的處理參考：https://ask.fastadmin.net/article/2527.html

 

回調刷新，只要工具欄中存在刷新按鈕就可以：

<div id="toolbar" class="toolbar ">
<a href="javascript:;" class="btn btn-primary btn-refresh hidden"><i class="fa fa-refresh"></i></a>
</div>

 js調用：$(".btn-refresh").trigger("click");

 

表格中日期格式設置：

法1、在input標簽中設置：data-date-format="YYYY-MM-DD HH:mm:ss"

法2、formatter: Table.api.formatter.datetime, datetimeFormat:"YYYY-MM-DD" },

表格中動態生成下拉多選或單選框：{:build_select('group[]', $groupdata, $groupids, ['class'=>'form-control selectpicker', 'multiple'=>'', 'data-rule'=>'required'])}

第一個參數：select的name值

第二個參數：select的下拉數據

第三個參數：選中的selected數值

第四個參數：class

第五個參數：'multiple'=>'' 表示多選，全掉這個參數，表示單選

第六個參數：表示驗證數據規則

 

如何設置成卡片游覽模式？

Table.defaults.cardView = true;

手機端自動使用卡片模式游覽：

修改核心文件require-table.js：

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    Table.defaults.cardView = true;
}
改成
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
    Table.defaults.cardView = true;
}

 

富文本編輯器中圖片追加域名前綴的方法：

修改application/extra/upload.php中的 cdnurl 值。

 

FastAdmin中使用Ajax發送請求：https://ask.fastadmin.net/article/2402.html

Fast.api.ajax({
   url:'控制器/方法',
   data:{name:"名稱"},
　　loading:false, //是否顯示loading
success:function(data, ret){
   //成功的回調
   alert(ret.msg);
   return false; //返回false，則阻斷系統的提示，系統識別的格式：{code:1,msg:'',data:null}
}, 
error:function(data, ret){
   //失敗的回調
   alert(ret.msg);
   return false;
}
});

 

表格分頁數量設置：table.bootstrapTable({  pageSize:2  })

 

操作提示框：

Toastr.success("操作成功！");
layer.msg('操作成功');

Toastr.clear();//清除
Toastr.remove();//刪除

Layer.closeAll();//關閉加載

 

表格字太多，導致頁面變形：移除table的類名table-nowrap

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"

或者隱藏：
{field: 'xxx', title: __('Scope'),cellStyle: {css: {"max-width": "300px","white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}}},

 

綁定表單事件：

Form.api.bindevent(form, success, error, submit);

用法：
Form.api.bindevent($("form[role=form]"), function(data, ret){
    Toastr.success(data);//成功
}, function(data, ret){
    Toastr.success("失敗");
}, function(success, error){
    Form.api.submit(this, success, error);
    return false;
});

 

表單驗證，nice-validator提示位置：

自定義表單提醒方式

    自定義表單提醒樣式

    自定義表單提醒樣式使用theme關鍵字，其定義如下：

    yellow_right----在右側提示

    yellow_right_effect----右側提示並有動態效果

    simple_bottom----在下方顯示

    yellow_top-----在上方顯示

eg:
<form id="add-develop-form"  role="form" data-toggle="validator" method="POST" action="" data-validator-option="{theme:'simple_bottom'}" >

或者：
在input標簽加上<span class="msg-box"></span>，該標簽用於顯示 錯誤提示框