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

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

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