multitable.js
3.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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.size() > 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: 'url', title: __('Url'), formatter: Table.api.formatter.url},
{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;
});