如何在表格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里增加一个按钮相关推荐

  1. 怎么给表格添加下拉选项

    下拉选项: <>它保证了数据的统一性,既可以快速准确的数据选项,还可以减少手动输入出错的频率. <>制作表格下拉选项: **步骤一:**首先,你得先建立一个独立的内容所对应的区 ...

  2. 【教程】layui数据表格添加下拉菜单

    效果如图所示: css部分 .layui-table-cell, .layui-table-box, .layui-table-body { overflow: visible; } /* 设置下拉框 ...

  3. layui表格单元格添加下拉选择功能

    layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式 代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...

  4. html表格中加下拉,怎样在iview的Table表格中添加下拉菜单?

    我怎么在table表格里面添加下拉菜单 render: (h, params) => { return h('div', [ h('Button', { props: { type: 'prim ...

  5. html按钮添加下拉箭头,如何实现工具栏的下拉箭头按钮

    如何实现工具栏的下拉箭头按钮 作者/ 论坛中有人曾经问过这样的问题:如何在C++/MFC程序中实现类似IE工具栏中带下拉箭头的按钮,如图一所示: 图一 IE工具栏中带下拉箭头的按钮 本文将告诉你如何实 ...

  6. Vue+EleMentUI实现el-table-colum表格select下拉框可编辑

    说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑 源码:https://gitee.com/charlinchenlin/ ...

  7. 选下拉框的的值对应上传相应的图片_如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据?(excel表格制作选择数据)...

    怎样从多个excel表格中提取数据,做数据分析图呢 1. 数据的.录入.表格的设置,效果如示. 2.如图所示,选进行分析的图据范围 3.如图所示,点击菜单栏目上的"插入",选择&q ...

  8. 选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据?...

    如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列 打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...

  9. 干货丨excel单元格如何添加下拉选项?

    在使用Excel表格时,如何为单元格添加下拉选项(依需分别设置一级菜单.二级菜单)? 利用[数据]中的[数据有效性]/[数据验证]等功能进行操作,以下是详细的操作步骤: ​ 工具:Microsoft ...

最新文章

  1. Question: Short And Long Read Sequencing
  2. ecshop管理找不到index.php,前台出现找不到这样的目录,打不开某文件的提示
  3. git 为什么会有多个head_继续学习Git
  4. 信息系统项目管理师-项目人力资源管理核心知识点思维脑图
  5. 用chkconfig配置linux自启动服务
  6. 作者:邹本友,男,中国人民大学信息学院博士生, CCF学生会员。
  7. Unix EM乱码问题
  8. membership配置数据库(SQL2000)
  9. 【分享】哪些句子一眼就会让你爱上
  10. c与c++分别是怎样动态分配和释放内存的,有什么区别?(转)
  11. 2006毕业设计Delphi篇(二)
  12. 转载:你需要知道的16个Linux服务器监控命令
  13. umpy知识点补充:np.vstack()np.hstack()
  14. mapgis矢量化怎么打分数_mapgis矢量化错了如何后退一步
  15. 计算机物理仿真,仿真物理实验室初中完整版
  16. 监理项目的服务器,idc服务器机房搬迁工程施工监理的重点
  17. 基于微信朋友圈实现时间显示样式
  18. 系统web服务器配置,简单介绍Web服务器的配置方法
  19. 检验杜宾 瓦森检验法R语言_一分钟看完计量经济学
  20. 全球智能制造产业联盟落地深圳

热门文章

  1. mybatis 配置 mysql连接池_spring 5.x 系列第5篇 —— 整合 mybatis + druid 连接池 (xml配置方式)...
  2. history模式监听_面试题:VueRouter中的 hash 模式和 history 模式有什么区别
  3. 求序列最长不下降子序列_最长不下降子序列nlogn算法详解
  4. wpf click事件在触摸屏上点击第一次没反应_你的PLC和你的触摸屏为什么总是通讯不上?...
  5. java开发和基于asp.net开发有什么优越性?_java语言的入门开始介绍
  6. Linux Kbuild文档 2
  7. centos 6 安装mysql,CentOS6.5安装MySQL教程(完整教程)
  8. mysql列调换位置_mysql互换表中两列数据方法
  9. python 管道 异步读取 select_python之异步select解析
  10. python处理ncdc气象数据并利用arcgis可视化