0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Ox.ColumnList: add 'resize' option, correctly handle key_left, key_right and select, pass 'sort' option

Browse source
This commit is contained in:
rolux 2012-12-18 11:50:44 +01:00
parent 087c7eb956
commit 65501544f8
1 changed files with 65 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
source/Ox.UI/js/List/ColumnList.js
View file

@ -14,15 +14,18 @@ Ox.ColumnList = function(options, self) {
custom: {}, custom: {},
items: [], items: [],
list: 'table', list: 'table',
selected: [], resize: null,
width: 768 width: 768
}) })
.options(options || {}) .options(options || {})
.update({ .update({
width: function() { width: function() {
self.columnWidths = getColumnWidths(); self.columnWidths = getColumnWidths();
self.$panel.size(0, self.columnWidths[0]), self.$panel.size(0, self.columnWidths[0]);
self.$panel.size(2, self.columnWidths[2]) self.$panel.size(2, self.columnWidths[2]);
self.$lists.forEach(function($list, i) {
$list.options({itemWidth: self.columnWidths[i]});
});
} }
}) })
.addClass('OxColumnList'); .addClass('OxColumnList');
@ -31,56 +34,88 @@ Ox.ColumnList = function(options, self) {
self.numberOfColumns = self.options.columns.length; self.numberOfColumns = self.options.columns.length;
self.$lists = self.options.columns.map(function(column, i) { self.$lists = self.options.columns.map(function(column, i) {
var isLastColumn = i == self.numberOfColumns - 1; //Ox.print('SELECTED::', self.options.selected[i]);
return Ox.CustomList({ return Ox.CustomList({
item: self.options.columns[i].item, item: self.options.columns[i].item,
itemHeight: self.options.columns[i].itemHeight, itemHeight: self.options.columns[i].itemHeight,
items: i == 0 ? self.options.items : [], items: i == 0 ? self.options.items : [],
itemWidth: self.columnWidths[i], itemWidth: self.columnWidths[i],
keys: self.options.columns[i].keys, keys: self.options.columns[i].keys,
max: 1, max: self.options.columns[i].max,
resize: self.options.resize,
scrollbarVisible: true, scrollbarVisible: true,
selected: self.options.columns[i].selected,
sort: self.options.columns[i].sort,
unique: 'id' unique: 'id'
}) })
.bindEvent({ .bindEvent({
key_left: function() { key_left: function() {
i && self.$lists[i - 1].gainFocus(); if (i > 0) {
self.$lists[i - 1].gainFocus();
that.triggerEvent('select', {
id: self.options.columns[i - 1].id,
ids: self.$lists[i - 1].options('selected')
});
}
}, },
key_right: function() { key_right: function() {
var object, selected = self.$lists[i].options('selected'); var index, object, selected = self.$lists[i].options('selected');
if (selected.length) { if (selected.length) {
if (i < self.numberOfColumns - 1) { if (i < self.numberOfColumns - 1) {
object = Ox.getObjectById(self.options.items, self.options.selected[0][0]); if (self.$lists[i + 1].options('selected').length == 0) {
if (i == 1) { self.$lists[i + 1].selectPosition(0);
object = Ox.getObjectById(object.items, self.options.selected[1][0]);
} }
self.$lists[i + 1] self.$lists[i + 1].gainFocus();
.options({selected: [object.items[0].id]}) that.triggerEvent('select', {
.gainFocus(); id: self.options.columns[i + 1].id,
ids: self.$lists[i + 1].options('selected')
});
} }
} }
}, },
select: function(data) { select: function(data) {
var id = data.ids[0], index; var items = [];
self.options.selected[i] = data.ids; self.options.columns[i].selected = data.ids;
if (i < self.numberOfColumns - 1) {
data.ids.forEach(function(id) {
var index;
if (i == 0) { if (i == 0) {
index = Ox.getIndexById(self.options.items, id); index = Ox.getIndexById(self.options.items, id);
self.$lists[1].options({ items = items.concat(
items: id ? self.options.items[index].items : [] self.options.items[index].items
}); );
} else if (i == 1) { } else if (i == 1) {
index = []; index = [];
index[0] = Ox.getIndexById(self.options.items, self.options.selected[0][0]); Ox.forEach(self.options.columns[0].selected, function(id_) {
index[1] = Ox.getIndexById(self.options.items[index[0]].items, id); index[0] = Ox.getIndexById(
self.$lists[2].options({ self.options.items, id_
items: id ? self.options.items[index[0]].items[index[1]].items : [] );
}); index[1] = Ox.getIndexById(
self.options.items[index[0]].items, id
);
if (index[1] > -1) {
return false;
} }
});
items = items.concat(
self.options.items[index[0]].items[index[1]].items
);
}
});
self.$lists[i + 1].options({items: items})
}
if (i == 0 || data.ids.length) {
that.triggerEvent('select', { that.triggerEvent('select', {
id: column.id, id: column.id,
ids: data.ids ids: data.ids
}); });
} else {
self.$lists[i - 1].gainFocus();
that.triggerEvent('select', {
id: self.options.columns[i - 1].id,
ids: self.$lists[i - 1].options('selected')
});
}
} }
}); });
}); });