Fastadmin后台操作

[wzhanjun]

自定义批量删除

 $(document).on("click", "#toolbar .btn-del-multi", function () {
    var that = this;
    var ids = Table.api.selectedids(table);
    layer.confirm(
        __('确定删除选中的 %s 项吗?', ids.length),
        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true},
        function (index) {
            Fast.api.ajax({
                url: $.fn.bootstrapTable.defaults.extend.multi_del_url,
                data: {ids: ids.join(',')}
            }, function (data, ret) {
                Toastr.success("操作成功");
                $(".btn-refresh").trigger("click");
                return false;
            }, function (data, ret) {
                Toastr.error(ret.msg);
                return false;
            });
            layer.close(index);
        }
    );

});

[wzhanjun]

单元格格式设置

cellStyle: function () {
      return {
            css: {"min-width": "100px", "white-space": "normal", "max-width":"250px"}
    };
}


cellStyle: function () {
      return {
            css: {"min-width": "150px", "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width":"300px"}
    };
}

[wzhanjun]

搜索列表selectpage

或者可以考虑把下面那些data的设置直接写入列属性extend里面。

{
addClass:'selectpage',
extend:'data-source="xxx/xxx" data-field="xxx"'
}

[wzhanjun]

添加分页页码

https://ask.fastadmin.net/question/1237.html

[wzhanjun]

图片预览

  /*! 注册 data-tips-image 事件行为 */
    $('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;
    });

    Table.api.formatter.image =  function(value){
        return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
    };

参考：https://ask.fastadmin.net/question/7452.html

[wzhanjun]

selectpage 自定义显示字段

 $('#c-equipment_elist_id').selectPage({
                showField : 'name' ,
                data : list,
                dropButton : false,
                    //格式化显示项目，提供源数据进行使用
                formatItem : function(data){
                        return data.name + '(' + data.code + ')';
                },
                eSelect : `function(data){`
                        alert($('#c-equipment_elist_id').val());
                }
            });

    $('#c-test').selectPage({
                eAjaxSuccess: function (data) {
                    data.list = typeof data.rows !== 'undefined' ? data.rows : (typeof data.list !== 'undefined' ? data.list : []);
                    data.totalRow = typeof data.total !== 'undefined' ? data.total : (typeof data.totalRow !== 'undefined' ? data.totalRow : data.list.length);
                    return data;
                },
                formatItem: function (data) {
                    return data.nickname + '(' + data.mobile + ')';
                }
            });

[wzhanjun]

固定表格

1、将js和css文件复制到public/assets/libs/bootstrap-table/dist目录下，我会上传到本文的资源文件中供大家下载。

2、找到public/assets/js/require-backend.js文件，大约在35行左右，配置文件路径。

'bootstrap-table-fixed-columns': '../libs/bootstrap-table/dist/bootstrap-table-fixed-columns',

'bootstrap-table-fixed-columns': {
deps: ['bootstrap-table','css!../libs/bootstrap-table/dist/bootstrap-table-fixed-columns.css'],
exports: '$.fn.bootstrapTable.defaults'
}

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'bootstrap-table-fixed-columns'], function ($, undefined, Backend, Table, Form) { }

table.bootstrapTable({

        ...
            fixedColumns: true,//固定列
            fixedNumber:2,//固定前两列
        ...

修复checkbox

function registCheckbox($element) {
    var options = $element.bootstrapTable('getOptions')
    if (!options.singleSelect) {
        //全选
        $('.fixed-table-header-columns').on('click', 'input[name="btSelectAll"]', function () {
            if ($(this).is(':checked')) {
                $('input[name="btSelectItem"]').prop('checked', true);
            } else {
                $('input[name="btSelectItem"]').prop('checked', false);
            }
            $('.fixed-table-header').find('input[name="btSelectAll"]').click();
        });

    }

    $('.fixed-table-container').on('click', 'input[name="btSelectItem"]', function () {
        var inputs = $(this).parents('.fixed-table-body-columns').find('input[name="btSelectItem"]');

        //true为单选   false为多选
        if (options.singleSelect) {
            var checked = $(this).is(":checked");//记录点击的状态
            inputs.each(function () {
                if ($(this).is(':checked')) {
                    $(this).prop('checked', false);//将之前的全部取消
                }
            });
            $(this).prop('checked', checked);
        } else {
            var num = 0;
            inputs.each(function () {
                if ($(this).is(':checked')) {
                    num++;
                }
            });
            if (num == inputs.length) {
                $('input[name="btSelectAll"]').prop('checked', true);
            } else {
                $('input[name="btSelectAll"]').prop('checked', false);
            }
        }
        var index = $(this).parents('tr').index();
        $element.find('input[name="btSelectItem"]').eq(index).click();
    });

}

 registCheckbox($('#bootstrap-table'))


#### 修改出现多个表头，表格主体
 onPageChange:function() {
                    if ($(".fixed-table-header-columns").size() > 1)
                    {
                        $(".fixed-table-header-columns:not(:last)").remove();
                    }

                    if ($(".fixed-table-body-columns").size() > 1)
                    {
                        $(".fixed-table-body-columns:not(:last)").remove();
                    }
                }

参考：
https://blog.csdn.net/paulluo0739/article/details/104676835
https://blog.csdn.net/qq_29729735/article/details/102700095
https://blog.csdn.net/tel13259437538/article/details/82891528
https://ask.fastadmin.net/question/22316.html

[wzhanjun]

限制数字输入

function numberLimit(obj){
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
}

onkeyup="numberLimit(this)"

[wzhanjun]

bootstrap table 导出

设置exportOptions 参数 ignoreColumn， fileName， onMsoNumberFormat， onCellHtmlData

$table.bootstrapTable({
          ...
            exportOptions: {
                onCellHtmlData: function (cell, rowIndex, colIndex, htmlData) {
                    return (htmlData.startsWith('<div') ? $(htmlData).html() : htmlData);
                }
            },
        ...
        });

参考

https://www.jianshu.com/p/9cc6c903c4b6
kayalshri/tableExport.jquery.plugin#96

[wzhanjun]

关闭弹窗

let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

[wzhanjun]

百度编辑器Ueditor

addons.js中添加

loader.setAttribute('style', 'width:100%');