fix bugs in treelist where the icon would not update, items would not expand, and expanding items would be slow

This commit is contained in:
rlx 2011-10-01 13:06:50 +00:00
parent f2dbfbd1e5
commit b3e7945a96
3 changed files with 67 additions and 58 deletions

View file

@ -1,9 +1,13 @@
Ox.load('UI', {debug: true}, function() { Ox.load({UI: {debug: true}, Geo: {}}, function() {
Ox.load('Geo', function() {
var $treeList = new Ox.TreeList({ var $treeList = new Ox.TreeList({
data: {'Ox.COUNTRIES': Ox.COUNTRIES} data: {'Ox.COUNTRIES': Ox.COUNTRIES},
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
.bindEvent({
resize: function(data) {
$treeList.options({width: data.width - Ox.UI.SCROLLBAR_SIZE});
}
}), }),
$debug = new Ox.Element('div'), $debug = new Ox.Element('div'),
$button = new Ox.Button({ $button = new Ox.Button({
@ -31,6 +35,4 @@ Ox.load('UI', {debug: true}, function() {
orientation: 'horizontal' orientation: 'horizontal'
}).appendTo($('body')); }).appendTo($('body'));
});
}); });

View file

@ -692,8 +692,8 @@ Ox.List = function(options, self) {
}); });
self.selected.length && scrollToPosition(self.selected[0]); self.selected.length && scrollToPosition(self.selected[0]);
// that.triggerEvent('init', {items: self.options.items.length}); // that.triggerEvent('init', {items: self.options.items.length});
// fixme: do async lists need to trigger init? // fixme: do sync lists need to trigger init?
// will this only be reached in async lists? // will this only be reached in sync lists?
} }
function loadPage(page, callback) { function loadPage(page, callback) {
@ -1397,8 +1397,7 @@ Ox.List = function(options, self) {
@*/ @*/
that.addItems = function(pos, items) { that.addItems = function(pos, items) {
var $items = [], var $items = [],
length = items.length length = items.length;
//first = self.$items.length == 0;
self.selected.forEach(function(v, i) { self.selected.forEach(function(v, i) {
if (v >= pos) { if (v >= pos) {
self.selected[i] += length; self.selected[i] += length;
@ -1422,11 +1421,9 @@ Ox.List = function(options, self) {
$item.insertAfter($items[i - 1]); $item.insertAfter($items[i - 1]);
} }
}); });
self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items)); self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items));
self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items)); self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items));
//if(first) //loadItems();
loadItems();
updatePositions(); updatePositions();
} }
@ -1548,12 +1545,13 @@ Ox.List = function(options, self) {
length <n> number of items to remove length <n> number of items to remove
@*/ @*/
that.removeItems = function(pos, length) { that.removeItems = function(pos, length) {
if(!length) { //pos is list of ids Ox.print('removeItems', pos, length)
if (Ox.isUndefined(length)) { // pos is list of ids
pos.forEach(function(id) { pos.forEach(function(id) {
var p = getPositionById(id); var p = getPositionById(id);
that.removeItems(p, 1); that.removeItems(p, 1);
}); });
} else { //remove items from pos to pos+length } else { // remove items from pos to pos+length
Ox.range(pos, pos + length).forEach(function(i) { Ox.range(pos, pos + length).forEach(function(i) {
self.selected.indexOf(i) > -1 && deselect(i); self.selected.indexOf(i) > -1 && deselect(i);
self.$items[i].removeElement(); self.$items[i].removeElement();
@ -1667,6 +1665,8 @@ Ox.List = function(options, self) {
return id_ == data[key] ? value : id_ return id_ == data[key] ? value : id_
}); });
} }
self.options.items[pos][key] = value;
if (pos == 0) Ox.print(self.options.items[pos])
data[key] = value; data[key] = value;
$item.options({data: data}); $item.options({data: data});
return that; return that;

View file

@ -33,11 +33,9 @@ Ox.TreeList = function(options, self) {
if (self.options.data) { if (self.options.data) {
self.options.items = []; self.options.items = [];
//Ox.print('d', self.options.data, 'i', self.options.items)
Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) { Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) {
self.options.items.push(parseData(key, self.options.data[key])); self.options.items.push(parseData(key, self.options.data[key]));
}); });
//Ox.print('d', self.options.data, 'i', self.options.items)
} }
that.$element = Ox.List({ that.$element = Ox.List({
@ -48,7 +46,7 @@ Ox.TreeList = function(options, self) {
max: self.options.max, max: self.options.max,
min: self.options.min, min: self.options.min,
unique: 'id' unique: 'id'
}, Ox.extend({}, self)) }, Ox.copy(self))
.addClass('OxTextList OxTreeList') .addClass('OxTextList OxTreeList')
.css({ .css({
width: self.options.width + 'px' width: self.options.width + 'px'
@ -72,6 +70,7 @@ Ox.TreeList = function(options, self) {
function constructItem(data) { function constructItem(data) {
var $item = $('<div>'), //.css({width: self.options.width + 'px'}), var $item = $('<div>'), //.css({width: self.options.width + 'px'}),
padding = (data.level + !data.items) * 16 - 8; padding = (data.level + !data.items) * 16 - 8;
if (data.title.indexOf('COUNTRIES') > -1) Ox.print('DATA...', data);
if (data.level || !data.items) { if (data.level || !data.items) {
$('<div>') $('<div>')
.addClass('OxCell OxTarget') .addClass('OxCell OxTarget')
@ -137,7 +136,8 @@ Ox.TreeList = function(options, self) {
function parseData(key, value) { function parseData(key, value) {
//Ox.print('parseData', key, value) //Ox.print('parseData', key, value)
var ret = { var ret = {
id: Ox.uid(), expanded: false,
id: Ox.uid().toString(),
title: key.toString() + ': ' title: key.toString() + ': '
}, },
type = Ox.typeOf(value); type = Ox.typeOf(value);
@ -148,9 +148,9 @@ Ox.TreeList = function(options, self) {
}); });
} else { } else {
ret.title += ( ret.title += (
type == 'function' ? type == 'function'
value.toString().split('{')[0] : ? value.toString().split('{')[0]
JSON.stringify(value) : JSON.stringify(value)
); );
} }
return ret; return ret;
@ -163,10 +163,14 @@ Ox.TreeList = function(options, self) {
items.forEach(function(item, i) { items.forEach(function(item, i) {
var item_ = Ox.extend({ var item_ = Ox.extend({
level: level level: level
}, item, item.items ? { }, item, item.items
items: !!item.expanded ? ? {
parseItems(item.items, level + 1) : [] items: !!item.expanded
} : {}); ? parseItems(item.items, level + 1)
: []
}
: {}
);
ret.push(item_); ret.push(item_);
item.items && Ox.merge(ret, item_.items); item.items && Ox.merge(ret, item_.items);
}); });
@ -176,7 +180,6 @@ Ox.TreeList = function(options, self) {
function toggleItem(item, expanded) { function toggleItem(item, expanded) {
var $img, pos; var $img, pos;
item.expanded = expanded; item.expanded = expanded;
//getItemById(item.id).expanded = expanded;
that.$element.find('.OxItem').each(function() { that.$element.find('.OxItem').each(function() {
var $item = $(this); var $item = $(this);
if ($item.data('id') == item.id) { if ($item.data('id') == item.id) {
@ -185,15 +188,19 @@ Ox.TreeList = function(options, self) {
return false; return false;
} }
}); });
//that.$element.value(item.id, 'expanded', expanded);
$img.attr({ $img.attr({
src: Ox.UI.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (expanded ? 'Down' : 'Right') 'symbol' + (expanded ? 'Down' : 'Right')
) )
}); });
that.$element.value(item.id, 'expanded', expanded); expanded
expanded ? ? that.$element.addItems(
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) : pos + 1, parseItems(item.items, item.level + 1)
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length); )
: that.$element.removeItems(
pos + 1, parseItems(item.items, item.level + 1).length
);
} }
function toggleItems(data) { function toggleItems(data) {