sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

TableList: add clearButton and clearButtonTooltip options, update CSS

Browse source
This commit is contained in:
rolux 2012-08-31 16:57:03 +02:00
commit a01ab0ab58
4 changed files with 47 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

34
source/Ox.UI/js/List/TableList.js
View file

@ -3,6 +3,8 @@
/*@
Ox.TableList <f> TableList Widget
options <o> Options object
clearButton <b|false> If true and columns are visible, show clear button
clearButtonTooltip <s|''> Clear button tooltip
columns <[o]|[]> Columns
# Fixme: There's probably more...
editable <b> ...
@ -54,6 +56,8 @@ Ox.TableList = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
clearButton: false,
clearButtonTooltip: '',
columns: [],
columnsMovable: false,
columnsRemovable: false,
@ -94,6 +98,7 @@ Ox.TableList = function(options, self) {
},
selected: function() {
that.$body.options({selected: self.options.selected});
updateClearButton();
},
sort: function() {
updateColumn();
@ -213,7 +218,27 @@ Ox.TableList = function(options, self) {
})
})
.bindEvent('change', changeColumns)
.appendTo(that.$bar.$element);
.appendTo(that.$bar);
} else if (self.options.clearButton) {
self.$clearButton = Ox.Element({
element: '<img>',
tooltip: self.options.clearButtonTooltip
})
.addClass('OxClear')
.attr({src: Ox.UI.getImageURL('symbolClose')})
.css({
right: Math.floor(Ox.UI.SCROLLBAR_SIZE - 8) / 2 + 'px'
})
[self.options.selected.length ? 'show' : 'hide']()
.bindEvent({
anyclick: function() {
self.$clearButton.hide();
self.options.selected = [];
that.$body.options({selected: self.options.selected});
that.triggerEvent('select', {ids: []});
}
})
.appendTo(that.$bar);
}
}
@ -271,6 +296,7 @@ Ox.TableList = function(options, self) {
that.editCell(data.id, data.key);
} else if (event == 'select') {
self.options.selected = data.ids;
updateClearButton();
}
that.triggerEvent(event, data);
})
@ -826,6 +852,12 @@ Ox.TableList = function(options, self) {
});
}
function updateClearButton() {
if (self.options.clearButton) {
self.$clearButton[self.options.selected.length ? 'show' : 'hide']();
}
}
function updateColumn() {
var columnId = self.options.columns[self.selectedColumn].id,
isSelected = columnId == self.options.sort[0].key;