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;
});
