Bootstrap-table 使用说明--如何在表格td里增加一个按钮

Posted 2023-03-18 tomcat2022

Bootstrap-table 使用说明--如何在表格td里增加一个按钮

 

如何在表格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数据

关于按钮弹窗并回调的处理参考：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;

 

分类: FastAdmin

事常与愿违，事亦在人为