DiverseYouthNightSchool/public/assets/js/backend/example/multitable.js

94 lines
3.6 KiB
JavaScript

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init();
//绑定事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var panel = $($(this).attr("href"));
if (panel.length > 0) {
Controller.table[panel.attr("id")].call(this);
$(this).on('click', function (e) {
$($(this).attr("href")).find(".btn-refresh").trigger("click");
});
}
//移除绑定的事件
$(this).unbind('shown.bs.tab');
});
//必须默认触发shown.bs.tab事件
$('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");
},
table: {
first: function () {
// 表格1
var table1 = $("#table1");
table1.bootstrapTable({
url: 'example/multitable/table1',
toolbar: '#toolbar1',
sortName: 'id',
search: false,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID'},
{field: 'filename', title: __('Name')},
{field: 'imagewidth', title: __('Imagewidth')},
{field: 'imageheight', title: __('Imageheight')},
{field: 'mimetype', title: __('Mimetype')},
{field: 'operate', title: __('Operate'), table: table1, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});
// 为表格1绑定事件
Table.api.bindevent(table1);
},
second: function () {
// 表格2
var table2 = $("#table2");
table2.bootstrapTable({
url: 'example/multitable/table2',
extend: {
index_url: '',
add_url: '',
edit_url: '',
del_url: '',
multi_url: '',
table: '',
},
toolbar: '#toolbar2',
sortName: 'id',
search: false,
columns: [
[
{field: 'id', title: 'ID'},
{field: 'title', title: __('Title')},
{field: 'url', title: __('Url'), align: 'left', formatter: Table.api.formatter.url},
{field: 'ip', title: __('ip')},
{field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
]
]
});
// 为表格2绑定事件
Table.api.bindevent(table2);
}
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
},
}
};
return Controller;
});