初始化表格
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:控制按鈕是否停用屬性,支援functionaddclass:給標籤,額外增加類別名

文章標籤
全站熱搜
創作者介紹
創作者 benny 的頭像
benny

Benny的網站開發筆記

benny 發表在 痞客邦 留言(0) 人氣(6)