如何在表格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：給標簽，額外增加類名

如何動態的控制某一行的按鈕的顯示和隱藏：

通過按鈕屬性的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數據

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

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;

}

總結

以上是生活随笔為你收集整理的html在表格添加下拉按钮,Bootstrap-table 使用说明--如何在表格td里增加一个按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。