zoukankan      html  css  js  c++  java
  • 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;
    }
    复制代码
  • 相关阅读:
    解决QPainter::drawText修改文字方向
    解决linux环境下qt groupbox 边框不显示问题
    人既然知道努力就可以进步,为什么还是会不努力?
    学会锻炼感悟爱与幸福的能力
    IT人为什么难以拿到高薪?
    在你月薪三千的时候,做月薪八千的事
    哪些人最终能留在北京?
    如何利用数据挖掘进行分析的方法
    查找附近的人
    dapper 操作类封装
  • 原文地址:https://www.cnblogs.com/apolloren/p/13321640.html
Copyright © 2011-2022 走看看