fastadmin 小技巧

关闭自定义弹窗：

var mylay = parent.layer.getFrameIndex(window.name);
parent.layer.close(mylay);

刷新父级表单：

parent.$("a.btn-refresh").trigger("click");


监听编辑(edit)窗口关闭事件

parent.window.$(".layui-layer-iframe").find(".layui-layer-close").on('click',function () {
    parent.$("a.btn-refresh").trigger("click");//关闭时立即刷新表格数据
})


获取表格中选中的项：

table.bootstrapTable('getSelections')



直获取选中的id

var ids =  Table.api.selectedids(table); //取出来是个数组  示例：[1,2,3,4,5]
ids = ids.join(','); //用逗号隔开  数组分割后：1,2,3,4,5




图片预览

{field: 'img', title: __('缩略图'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image}

多图预览：区别在：formatter: Table.api.formatter.images

{field: 'img', title: __('缩略图'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.images}



修改编辑和添加的弹窗的大小

//编辑框（以下只能修改表格里的单条记录的弹窗），放在初始化表格之前即可：
Table.button.edit.extend += ' data-area=["40%","65%"]';  //编辑框

//左上角（刷新按钮旁边）的添加框和编辑框（只能修改此处，其他地方无效），放在表格绑定事件之后即可：
$(".btn-add").data("area", ['40%', '65%']);
$(".btn-edit").data("area", ['40%', '65%']);

//以下是最简单粗暴的方式，会设置当前页面的所有弹窗，在表格绑定事件之前即可：
Fast.config.openArea = ['800px','100px'];




表格里字符串超出部分省略号代替

{
    field: 'content', title: '内容', operate: 'like',
    formatter: function (value, row, index, field) {
        return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.content + "'>" + value + "</span>";
    },
    cellStyle: function (value, row, index, field) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "150px"
            }
        }
    },
},



JS转换时间格式（YYYY-MM-DD）

{field: 'time', title: "时间", operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, datetimeFormat:"YYYY-MM-DD"},

初始化表格时的导出、显示列、通用搜索、显示模式的功能开关：

commonSearch: true,   //通用搜索功能
showColumns: false,    //快速切换字段列的显示和隐藏
showToggle: false,     //卡片视图和表格视图
search: false,    //表格上方的搜索框
showExport: false,    //隐藏导出按钮
//exportDataType: 'basic',  //仅导出当前分页的数据
//exportDataType: 'selected',   //导出选中的行

//表格导出自定义类型

exportTypes: ['csv', 'excel']

按条件去除表格中的编辑按钮

{
    field: 'operate',
    title: __('Operate'),
    table: table,
    events: Table.api.events.operate,   //需要新建标签页注释
    formatter: function (value, row, index) {
        var that = $.extend({}, this);
        if (row.state == 1) {
            $(table).data("operate-edit", {}); // 列表页面显示 .编辑operate-edit  - 删除按钮operate-del
            that.table = table;
            return Table.api.formatter.operate.call(that, value, row, index);
        }
        $(table).data("operate-edit", null); // 列表页面隐藏 .编辑operate-edit  - 删除按钮operate-del
        that.table = table;
        return Table.api.formatter.operate.call(that, value, row, index);
    },
}

两级联动（三级联动也是同理）

edit.html页面先新增两个输入框

　　<div class="form-group">
        <label for="c-dpt_id" class="control-label col-xs-12 col-sm-2">{:__('部门')}:</label>
        <div class="col-xs-12 col-sm-4">
            <input id="c-dpt_id" data-rule="required" data-source="general/department/selectpage" class="form-control selectpage" name="row[dpt_id]" type="text" value="{$row.dpt_id|htmlentities}" data-pagination="true" >
        </div>
    </div>
    <div class="form-group">
        <label for="c-branch_id" class="control-label col-xs-12 col-sm-2">{:__('科室')}:</label>
        <div class="col-xs-12 col-sm-4">
            <input id="c-branch_id" data-rule="required" data-source="general/branch/selectpage" class="form-control selectpage" name="row[branch_id]" type="text" value="{$row.branch_id|htmlentities}" data-pagination="true" >
        </div>
    </div>

然后在js页面中的edit方法中新增：

edit: function () {
    //这里的意思是：当一级输入框有变动时，将其变动后的值，作为二级输入框的搜索条件，获取应该展示的数据

    //监听二级输入框的参数，当一级输入框有变动时传入
    $("#c-branch_id").data("params", function (obj) {
        //绑定一级输入框的值：键(dpt_id)为数据库字段，值为一级输入框的值
        return {custom: {dpt_id: $("#c-dpt_id").val()}};
    });

    //这里是监听一级输入框的变动，只要有变动即清空二级输入框的内容
    $(document).on("change", "#c-dpt_id", function(){
        $("#c-branch_id").val('');//这里清空的是传给后端的值
        $("#c-branch_id_text").val('');//这里清空的是前端展示的内容
    });

    Controller.api.bindevent();
},

注意：如果controller中已经有这个方法，则可以不用加下面代码，如果没有，要加上，不然会请求不到接口

    /**
     * 下拉搜索
     */
    public function selectpage()
    {
        return parent::selectpage();
    }

表格上方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;
   });