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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/**
* Copyright 2010-2013 Ben Birch
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this software except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
( function( $, app ) {
var ui = app.ns("ui");
ui.Table = ui.AbstractWidget.extend({
defaults: {
store: null, // (required) implements interface app.data.DataSourceInterface
height: 0,
width: 0
},
_baseCls: "uiTable",
init: function(parent) {
this._super();
this.initElements(parent);
this.config.store.on("data", this._data_handler);
},
attach: function(parent) {
if(parent) {
this._super(parent);
this._reflow();
}
},
initElements: function(parent) {
this.el = $.joey(this._main_template());
this.body = this.el.find(".uiTable-body");
this.headers = this.el.find(".uiTable-headers");
this.tools = this.el.find(".uiTable-tools");
this.attach( parent );
},
_data_handler: function(store) {
this.tools.text(store.summary);
this.headers.empty().append(this._header_template(store.columns));
this.body.empty().append(this._body_template(store.data, store.columns));
this._reflow();
},
_reflow: function() {
var firstCol = this.body.find("TR:first TH.uiTable-header-cell > DIV"),
headers = this.headers.find("TR:first TH.uiTable-header-cell > DIV");
for(var i = 0; i < headers.length; i++) {
$(headers[i]).width( $(firstCol[i]).width() );
}
this._scroll_handler();
},
_scroll_handler: function(ev) {
this.el.find(".uiTable-headers").scrollLeft(this.body.scrollLeft());
},
_dataClick_handler: function(ev) {
var row = $(ev.target).closest("TR");
if(row.length) {
this.fire("rowClick", this, { row: row } );
}
},
_headerClick_handler: function(ev) {
var header = $(ev.target).closest("TH.uiTable-header-cell");
if(header.length) {
this.fire("headerClick", this, { header: header, column: header.data("column"), dir: header.data("dir") });
}
},
_main_template: function() {
return { tag: "DIV", id: this.id(), css: { width: this.config.width + "px" }, cls: this._baseCls, children: [
{ tag: "DIV", cls: "uiTable-tools" },
{ tag: "DIV", cls: "uiTable-headers", onclick: this._headerClick_handler },
{ tag: "DIV", cls: "uiTable-body",
onclick: this._dataClick_handler,
onscroll: this._scroll_handler,
css: { height: this.config.height + "px", width: this.config.width + "px" }
}
] };
},
_header_template: function(columns) {
var ret = { tag: "TABLE", children: [ this._headerRow_template(columns) ] };
ret.children[0].children.push(this._headerEndCap_template());
return ret;
},
_headerRow_template: function(columns) {
return { tag: "TR", cls: "uiTable-header-row", children: columns.map(function(column) {
var dir = ((this.config.store.sort.column === column) && this.config.store.sort.dir) || "none";
return { tag: "TH", data: { column: column, dir: dir }, cls: "uiTable-header-cell" + ((dir !== "none") ? " uiTable-sort" : ""), children: [
{ tag: "DIV", children: [
{ tag: "DIV", cls: "uiTable-headercell-menu", text: dir === "asc" ? "\u25b2" : "\u25bc" },
{ tag: "DIV", cls: "uiTable-headercell-text", text: column }
]}
]};
}, this)};
},
_headerEndCap_template: function() {
return { tag: "TH", cls: "uiTable-headerEndCap", children: [ { tag: "DIV" } ] };
},
_body_template: function(data, columns) {
return { tag: "TABLE", children: []
.concat(this._headerRow_template(columns))
.concat(data.map(function(row) {
return { tag: "TR", data: { row: row }, cls: "uiTable-row", children: columns.map(function(column){
return { tag: "TD", cls: "uiTable-cell", children: [ { tag: "DIV", text: (row[column] || "").toString() } ] };
})};
}))
};
}
});
})( this.jQuery, this.app );
|
