fastAdmin表格与其他快捷方法使用

1. 使用 confirm 改变字段状态

{field: 'is_show', searchList: {'0': '下架', '1': '上架'}, title: __('Is_show'), formatter: function (value, row, index) {
        if (value == 0) {
            return '<button class="btn btn-xs btn-primary">下架</button>';
        } else {
            return '<button class="btn btn-xs btn-success">上架</button>';
        }
    }, events: {
        'click .btn': function(e, value, row, index){
            let t,p;
            if (value == 0) {
                t = '确认是否上架？';
                p = 'is_show=1';
            } else {
                t = '确认是否下架？';
                p = 'is_show=0';
            }
            Layer.confirm(t, function(index) {
                Fast.api.ajax({url: 'ticket/gift_pack/multi', data: {'ids': row.id, 'params': p}}, function () {
                    Layer.close(index);
                    table.bootstrapTable('refresh', {});
                });
            });
        }
    }},

2. 点击表格打开其他tab页面，class 添加 addtabsit

{field: 'status_text', title: __('Status'), operate: false, formatter: function(value, row, index) {
     if (row.refundid > 0) {
         if (row.orderrefund.status == 1) {
             return '<span class="label label-danger">维权完成</span>';
         } else if(row.orderrefund.status == 0) {
             return '<span class="label label-danger">申请维权</span><!-- <a href="order/refund" class="label label-success addtabsit" title="查看">查看</a>-->';
         } else if(row.orderrefund.status == -1) {
             value = value + '<br><span style="display: inline-block;margin-top: 5px;" class="label label-primary">维权驳回</span>';
         }
     }
     return value;
 }},

3. 自定义 button，根据字段状态不同移除指定 button

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, 			 			formatter: function (value, row, index) {
          var that = $.extend({}, this);
          var table = $(that.table).clone(true);
          // operate-edit编辑  perate-del删除
          //判断什么时候显示什么时候不显示
          if (row.status != 0) {
              $(table).data("operate-del", null); // 列表页面隐藏 .编辑operate-edit  - 删除按钮operate-del
          }
          that.table = table;
          return Table.api.formatter.operate.call(that, value, row, index);
},
buttons: [
{
            name: 'apply',
               text: __('处理申请'),
               icon: 'fa fa-list',
               classname: 'btn btn-warning btn-xs btn-dialog',
               url: 'order/refund/apply/id/{id}',
               visible: function(row) {
                   return row['status'] == 0;
               }
           },
           {
               name: 'detail',
               text: __('Detail'),
               icon: 'fa fa-list',
               classname: 'btn btn-info btn-xs btn-detail btn-dialog',
               url: function(row){
                   // js 生成url
                   //var url = location.protocol + '//' + location.host + Fast.api.fixurl('store/store_paiban/workers?id=' + row.id);
                   return location.protocol + '//' + location.host + Fast.api.fixurl(Table.api.replaceurl('store/order/detail', row, table));
               }
           },
   	]
}

4. 手动刷新表格

$(".btn-refresh").trigger("click"); // 方法1
table.bootstrapTable('refresh', {}); // 方法2

5. 通用的点击图片浏览处理

   $('body').on('click', '[data-tips-image]', function () {
       var img = new Image();
       var imgWidth = this.getAttribute('data-width') || '480px';
       img.onload = function () {
           var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
           Layer.open({
               type: 1, area: imgWidth, title: false, closeBtn: 1,
               skin: 'layui-layer-nobg', shadeClose: true, content: $content,
               end: function () {
                   $(img).remove();
               },
               success: function () {

               }
           });
       };
       img.onerror = function (e) {

       };
       img.src = this.getAttribute('data-tips-image') || this.src;
   });

6. 设置表格打开弹窗比例

   var table = $("#table");
   table.on('post-body.bs.table', function (e, settings, json, xhr) {
          $(".btn-detail").data("area", ["100%", "100%"]);
   });

7. 表单自定义验证

  $("form[role=form]").data("validator-options", {
      rules: {
          settledmoney: function (element) {
              var money = parseFloat($("#c-money").val()).toFixed(2);
              var handingfee = parseFloat($("#c-handingfee").val()).toFixed(2);
              var taxes = parseFloat($("#c-taxes").val()).toFixed(2);
              var settledmoney = (money - handingfee - taxes).toFixed(2);
              return settledmoney > 0 ||
                  '金额输入不正确';
          },
          account: function (element) {
              return this.test(element, "mobile") === true ||
                  this.test(element, "email") === true ||
                  '请填写手机号或者邮箱';
          }
      }
  });
  //不可见的元素不验证
  $("form#add-form").data("validator-options", {
      ignore: ':hidden',
      rules: {
          content: function () {
              return ['radio', 'checkbox', 'select', 'selects'].indexOf($("#add-form select[name='row[type]']").val()) > -1;
          },
          extend: function () {
              return $("#add-form select[name='row[type]']").val() == 'custom';
          }
      }
  });

8. 表格长字段内容 tooltip 显示

   {field: 'content', title: __('Content'), align: 'left', operate: false, formatter: function(value){
           let c = '';
           if (value.length > 20) {
               c = value.substr(0, 20) + '...';
           } else {
               c = value;
           }
           return '<span data-toggle="tooltip" data-placement="right" data-original-title="'+ value +'">'+ c +'</span>';
       }},

9. 表格字段通过js创建二维码

   {field: 'custom', title: '绑定二维码', operate: false, formatter: function (value, row, index) {
                       var h = '<i style="cursor: pointer;" class="fa fa-qrcode show-qrcode" data-id="'+row.id+'"></i>';
                       if (row.openid) {
                           h += ' <a href="javascript:void(0)" target="_blank" class="unbind" data-id="'+row.id+'">解除绑定</a>';
                       }
                       return h;
               }},

   $(document).on('click', '.show-qrcode', function(event) {
       event.preventDefault();
       event.stopPropagation();
       var id = $(this).data('id');
       var url = location.protocol + '//' + location.host + '/index/index/login?id='+ id + '&id=' + id;
       var doc = document.createElement('div');
       var qrcode = new QRCode(doc, {
           text: url,
           width: 200,
           height: 200,
           colorDark : "#000000",
           colorLight : "#ffffff",
           correctLevel : QRCode.CorrectLevel.H
       });
       var $content = $(doc).appendTo('body').css({background: '#fff', width: 'auto', height: 'auto'});
       Layer.open({
           type: 1, area: 400, title: false, closeBtn: 1,
           skin: 'layui-layer-nobg', shadeClose: true, content: $content,
           end: function () {
               $(doc).remove();
           },
           success: function () {

           }
       });
   });

   $(document).on('click', '.unbind', function(event) {
       event.preventDefault();
       event.stopPropagation();
       var id = $(this).data('id');
       Layer.confirm('确认解除微信绑定？', function (index) {

           Fast.api.ajax({
               url: 'store/worker/unbind',
               loading: false,
               data: {id: id},
               success: function (ret) {
                   Layer.close(index);
                   Toastr.success("解除成功");
                   $("a.btn-refresh").trigger("click");
               }
           });
       });
   })

10. 表单动态select 动态监听

   $("#c-option_ids,#c-change_ids").data("params", function (obj) {
       // 通过其他选择内容改变 select 内容
       const id  = $('select[name="row[store_id]"]').val();
       return {custom: {store_id: id}};
   });
   $('select[name="row[store_id]"]').change(function(event) {
       // 清除选择
       $("#c-option_ids").selectPageClear();
       $("#c-change_ids").selectPageClear();
   });

11. 自定义按钮获取搜索表单内容，实现自定义导出按钮

            // 方法1
            $('#orderExport').click(function () {
                var url = $(this).data('url');
                var data = '';
                $.each($(".form-commonsearch").find('input,select,textarea').serializeArray(), function (i, j) {
                    var reg = /operate/g;
                    var match = reg.exec(j.name);
                    if (match)
                        return true;
                    data += j.name + '=' + j.value + '&';
                });
                window.top.location = url + '?' + data;
            });
            // 方法2
            $('#orderExport').click(function () {
                var url = $(this).data('url');
                var filter = {};
                var op = {};
                $.each($(".form-commonsearch").find('input,select,textarea').serializeArray(), function (i, j) {
                    var reg = /operate/g;
                    var match = reg.exec(j.name);
                    if (match || j.value === '')
                        return true;
                    filter[j.name] = j.value;
                    op[j.name] = '=';
                });
                window.top.location = url + '?filter=' + escape(JSON.stringify(filter)) + '&op=' + escape(JSON.stringify(op));
            });
            // 方法3
			$(document).on("click", "#orderExport", function () {
				var url = $(this).data('url');
			    var options = table.bootstrapTable('getOptions');
			    var search = options.queryParams({});
			    var filter = search.filter;
			    var op = search.op;
			    location.href = url + '?filter=' + filter + '&op=' + op;
			
			});

12. 处理tab 绑定事件导致自定义搜索无效问题

            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = 'type';
                var value = $(this).attr("href").replace('#', '');
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                var queryParams = options.queryParams;
                options.queryParams = function (params) {
                    params = queryParams(params);
                    var filter = params.filter ? JSON.parse(params.filter) : {};
                    if (value !== '' && value != 'all') {
                        filter[field] = value;
                    } else {
                        delete filter[field];
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });

13. 动态添加修改键值组件(Fieldlist)

<style>
    .fa-close {
        margin-left: 10px;
        cursor: pointer;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    {:token()}

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">添加标题:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" name="" class="form-control" value="" id="add-title">
        </div>
        <div class="help-block">
            <a href="javascript:;" class="btn btn-sm btn-success" id="but-add"><i class="fa fa-plus"></i> 添加</a>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">表格:</label>
        <div class="col-xs-12 col-sm-8">
            <dl class="fieldlist" data-name="row[test]" data-template="testtpl">
                <dd>
                    <ins>姓名<i class="fa fa-close"></i></ins>
                    <ins>性别<i class="fa fa-close"></i></ins>
                    <ins>年龄<i class="fa fa-close"></i></ins>
                </dd>
                <dd>
                    <a href="javascript:;" class="btn btn-sm btn-success btn-add"><i class="fa fa-plus"></i> 追加</a>
                    <!-- 需要隐藏否则初始化不了 textarea 值 -->
                    <a style="display: none" href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
                </dd>
                <textarea name="row[test]" class="form-control hide" cols="30" rows="5">[{"name":"张三","gender":"男","age":"23"},{"name":"李四","gender":"男","age":"26"}]</textarea>
            </dl>
            <!--定义模板，模板语法使用Art-Template模板语法-->
            <script type="text/html" id="testtpl">
                <dd class="form-inline input-list">
                    <!-- 初始化数量 -->
                    <% var temp = input_num ? input_num : 3; %>
                    <% for(var i = 0; i < temp; i++){ %>
                    <input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10">
                    <% } %>
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                </dd>
            </script>
        </div>
    </div>
</form>

            var init_length = 3; // 初始化数量
            $('#but-add').click(function (event) {
                var title = $('#add-title').val();
                if (!title) {
                    Fast.api.toastr.error('请输入标题');
                } else {
                    var dd_length = init_length + 1;
                    init_length++;
                    $($('.fieldlist').find('dd')[0]).append('<ins>'+ title +'<i class="fa fa-close"></i></ins>');
                    $('.fieldlist .input-list .btn-remove').trigger('click')
                    var row = {};
                    var container = $(".fieldlist");
                    var tagName = container.data("tag") || "dd";
                    var index = container.data("index");
                    var name = container.data("name");
                    var template = container.data("template");
                    var data = container.data();
                    index = index ? parseInt(index) : 0;
                    container.data("index", index + 1);
                    row = row ? row : {};
                    var vars = {index: index, name: name, data: data, row: row, input_num: dd_length};
                    var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                    $(html).attr("fieldlist-item", true).insertBefore($(tagName + ":last", container));
                    container.trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
                }
            });
            $('.btn-add').click(function () {
                var dd_length = init_length;
                var row = {};
                var container = $(".fieldlist");
                var tagName = container.data("tag") || "dd";
                var index = container.data("index");
                var name = container.data("name");
                var template = container.data("template");
                var data = container.data();
                index = index ? parseInt(index) : 0;
                container.data("index", index + 1);
                row = row ? row : {};
                var vars = {index: index, name: name, data: data, row: row, input_num: dd_length};
                var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                $(html).attr("fieldlist-item", true).insertBefore($(tagName + ":last", container));
                container.trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
            });
            $(document).on('click', '.fa-close', function () {
                init_length--;
                $('.fieldlist .input-list .btn-remove').trigger('click');
                $(this).parent('ins').remove();
            });