forked from 0x2620/oxjs
simpler text list column head elements, better column drag
This commit is contained in:
rlx
parent
7bf42e5b0b
commit
0ba258281f
12 changed files with 461 additions and 330 deletions
|
|
@ -81,59 +81,59 @@ Ox.TextList = function(options, self) {
|
|||
keys: find
|
||||
});
|
||||
|
||||
self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function?
|
||||
self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function?
|
||||
// fixme: and can't these just remain undefined?
|
||||
if (Ox.isUndefined(v.align)) {
|
||||
v.align = 'left';
|
||||
if (Ox.isUndefined(column.align)) {
|
||||
column.align = 'left';
|
||||
}
|
||||
if (Ox.isUndefined(v.clickable)) {
|
||||
v.clickable = false;
|
||||
if (Ox.isUndefined(column.clickable)) {
|
||||
column.clickable = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.editable)) {
|
||||
v.editable = false;
|
||||
if (Ox.isUndefined(column.editable)) {
|
||||
column.editable = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.unique)) {
|
||||
v.unique = false;
|
||||
if (Ox.isUndefined(column.unique)) {
|
||||
column.unique = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.visible)) {
|
||||
v.visible = false;
|
||||
if (Ox.isUndefined(column.visible)) {
|
||||
column.visible = false;
|
||||
}
|
||||
if (v.unique) {
|
||||
self.unique = v.id;
|
||||
if (column.unique) {
|
||||
self.unique = column.id;
|
||||
}
|
||||
});
|
||||
|
||||
$.extend(self, {
|
||||
Ox.extend(self, {
|
||||
columnPositions: [],
|
||||
defaultColumnWidths: $.map(self.options.columns, function(v) {
|
||||
return v.defaultWidth || v.width;
|
||||
defaultColumnWidths: self.options.columns.map(function(column) {
|
||||
return column.defaultWidth || column.width;
|
||||
}),
|
||||
itemHeight: 16,
|
||||
page: 0,
|
||||
pageLength: 100,
|
||||
scrollLeft: 0,
|
||||
selectedColumn: getColumnIndexById(self.options.sort[0].key),
|
||||
visibleColumns: $.map(self.options.columns, function(v) {
|
||||
return v.visible ? v : null;
|
||||
visibleColumns: self.options.columns.filter(function(column) {
|
||||
return column.visible;
|
||||
})
|
||||
});
|
||||
// fixme: there might be a better way than passing both visible and position
|
||||
self.options.columns.forEach(function(v) {
|
||||
if (!Ox.isUndefined(v.position)) {
|
||||
self.visibleColumns[v.position] = v;
|
||||
self.options.columns.forEach(function(column) {
|
||||
if (!Ox.isUndefined(column.position)) {
|
||||
self.visibleColumns[column.position] = column;
|
||||
}
|
||||
});
|
||||
$.extend(self, {
|
||||
columnWidths: $.map(self.visibleColumns, function(v, i) {
|
||||
return v.width;
|
||||
Ox.extend(self, {
|
||||
columnWidths: self.visibleColumns.map(function(column) {
|
||||
return column.width;
|
||||
}),
|
||||
pageHeight: self.options.pageLength * self.itemHeight
|
||||
});
|
||||
|
||||
self.format = {};
|
||||
self.options.columns.forEach(function(v, i) {
|
||||
if (v.format) {
|
||||
self.format[v.id] = v.format;
|
||||
self.options.columns.forEach(function(column) {
|
||||
if (column.format) {
|
||||
self.format[column.id] = column.format;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -147,7 +147,8 @@ Ox.TextList = function(options, self) {
|
|||
that.$head = Ox.Container()
|
||||
.addClass('OxHead')
|
||||
.css({
|
||||
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||
right: self.options.scrollbarVisible
|
||||
? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||
})
|
||||
.appendTo(that.$bar);
|
||||
that.$head.$content.addClass('OxTitles');
|
||||
|
|
@ -155,13 +156,13 @@ Ox.TextList = function(options, self) {
|
|||
if (self.options.columnsRemovable) {
|
||||
that.$select = Ox.Select({
|
||||
id: self.options.id + 'SelectColumns',
|
||||
items: $.map(self.options.columns, function(v, i) {
|
||||
items: self.options.columns.map(function(column) {
|
||||
return {
|
||||
checked: v.visible,
|
||||
disabled: v.removable === false,
|
||||
id: v.id,
|
||||
title: v.title
|
||||
}
|
||||
checked: column.visible,
|
||||
disabled: column.removable === false,
|
||||
id: column.id,
|
||||
title: column.title
|
||||
};
|
||||
}),
|
||||
max: -1,
|
||||
min: 1,
|
||||
|
|
@ -195,7 +196,7 @@ Ox.TextList = function(options, self) {
|
|||
sortable: self.options.sortable,
|
||||
type: 'text',
|
||||
unique: self.unique
|
||||
}, $.extend({}, self)) // pass event handler
|
||||
}, Ox.extend({}, self)) // pass event handler
|
||||
.addClass('OxBody')
|
||||
.css({
|
||||
top: (self.options.columnsVisible ? 16 : 0) + 'px',
|
||||
|
|
@ -305,83 +306,87 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function constructHead() {
|
||||
var offset = 0;
|
||||
that.$titles = [];
|
||||
self.columnOffsets = [];
|
||||
self.visibleColumns.forEach(function(v, i) {
|
||||
var $order, $resize, $left, $center, $right;
|
||||
offset += self.columnWidths[i];
|
||||
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
|
||||
that.$titles[i] = Ox.Element()
|
||||
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
|
||||
.css({
|
||||
width: (self.columnWidths[i] - 9) + 'px',
|
||||
textAlign: v.align
|
||||
})
|
||||
.html(v.title)
|
||||
self.$heads = [];
|
||||
self.$titles = [];
|
||||
self.$orderButtons = [];
|
||||
self.visibleColumns.forEach(function(column, i) {
|
||||
var $resize;
|
||||
self.$heads[i] = Ox.Element()
|
||||
.addClass('OxHeadCell OxColumn' + Ox.toTitleCase(column.id))
|
||||
.css({width: self.columnWidths[i] - 5 + 'px'})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
// if sort operator is set, bind click event
|
||||
if (v.operator) {
|
||||
that.$titles[i].bindEvent({
|
||||
anyclick: function(event, e) {
|
||||
clickColumn(v.id);
|
||||
if (column.operator) {
|
||||
self.$heads[i].bindEvent({
|
||||
anyclick: function() {
|
||||
clickColumn(column.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
// if columns are movable, bind drag events
|
||||
if (self.options.columnsMovable) {
|
||||
that.$titles[i].bindEvent({
|
||||
self.$heads[i].bindEvent({
|
||||
dragstart: function(event, e) {
|
||||
dragstartColumn(v.id, e);
|
||||
dragstartColumn(column.id, e);
|
||||
},
|
||||
drag: function(event, e) {
|
||||
dragColumn(v.id, e);
|
||||
dragColumn(column.id, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragendColumn(v.id, e);
|
||||
dragendColumn(column.id, e);
|
||||
}
|
||||
})
|
||||
}
|
||||
$order = $('<div>')
|
||||
.addClass('OxOrder')
|
||||
.html(Ox.UI.symbols['triangle_' + (
|
||||
v.operator == '+' ? 'up' : 'down'
|
||||
)])
|
||||
.click(function() {
|
||||
$(this).prev().trigger('click')
|
||||
self.$titles[i] = Ox.Element()
|
||||
.addClass('OxTitle')
|
||||
.css({
|
||||
width: self.columnWidths[i] - 9 + 'px',
|
||||
textAlign: column.align
|
||||
})
|
||||
.appendTo(that.$head.$content.$element);
|
||||
.html(column.title)
|
||||
.appendTo(self.$heads[i]);
|
||||
self.$orderButtons[i] = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: column.operator == '+' ? 'up' : 'down',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxOrder')
|
||||
.css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'})
|
||||
.click(function() {
|
||||
$(this).parent().trigger('click');
|
||||
})
|
||||
.appendTo(self.$heads[i]);
|
||||
$resize = Ox.Element()
|
||||
.addClass('OxResize')
|
||||
.appendTo(that.$head.$content.$element);
|
||||
$('<div>').appendTo($resize);
|
||||
$('<div>').addClass('OxCenter').appendTo($resize);
|
||||
$('<div>').appendTo($resize);
|
||||
// if columns are resizable, bind click and drag events
|
||||
if (self.options.columnsResizable) {
|
||||
$resize.addClass('OxResizable')
|
||||
.bindEvent({
|
||||
doubleclick: function(event, e) {
|
||||
resetColumn(v.id, e);
|
||||
resetColumn(column.id, e);
|
||||
},
|
||||
dragstart: function(event, e) {
|
||||
dragstartResize(v.id, e);
|
||||
dragstartResize(column.id, e);
|
||||
},
|
||||
drag: function(event, e) {
|
||||
dragResize(v.id, e);
|
||||
dragResize(column.id, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragendResize(v.id, e);
|
||||
dragendResize(column.id, e);
|
||||
}
|
||||
});
|
||||
}
|
||||
$left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
|
||||
$center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
|
||||
$right = $('<div>').addClass('OxRight').appendTo($resize.$element);
|
||||
});
|
||||
that.$head.$content.css({
|
||||
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
||||
});
|
||||
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
|
||||
toggleSelected(self.options.columns[self.selectedColumn].id);
|
||||
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
|
||||
self.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
|
||||
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
|
||||
});
|
||||
}
|
||||
|
|
@ -419,56 +424,39 @@ Ox.TextList = function(options, self) {
|
|||
return $item;
|
||||
}
|
||||
|
||||
function formatValue(key, value, data) {
|
||||
// fixme: this may be obscure...
|
||||
// since the format of a value may depend on another value,
|
||||
// we pass all data as a second parameter to the supplied format function
|
||||
var format = self.format[key];
|
||||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || [])) :
|
||||
format(value, data);
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function dragstartColumn(id, e) {
|
||||
self.drag = {
|
||||
startX: e.clientX,
|
||||
columnOffsets: getColumnOffsets(),
|
||||
// fixme: doesn't take into account horizontal scroll
|
||||
listOffset: that.$element.offset().left,
|
||||
startPos: getColumnPositionById(id)
|
||||
}
|
||||
$.extend(self.drag, {
|
||||
stopPos: self.drag.startPos,
|
||||
offsets: $.map(self.visibleColumns, function(v, i) {
|
||||
return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos]
|
||||
})
|
||||
});
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
||||
opacity: 0.25
|
||||
});
|
||||
that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
|
||||
self.drag.stopPos = self.drag.startPos;
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 0.25});
|
||||
self.drag.startPos > 0 && self.$heads[self.drag.startPos].prev().children().eq(2).css({opacity: 0.25});
|
||||
self.$heads[self.drag.startPos].next().children().eq(0).css({opacity: 0.25});
|
||||
self.$heads[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
|
||||
cursor: 'move'
|
||||
});
|
||||
//Ox.print('columnOffsets', self.drag.columnOffsets)
|
||||
}
|
||||
|
||||
function dragColumn(id, e) {
|
||||
var d = e.clientX - self.drag.startX,
|
||||
pos = self.drag.stopPos;
|
||||
Ox.forEach(self.drag.offsets, function(v, i) {
|
||||
if (d < 0 && d < v) {
|
||||
var pos = self.drag.stopPos;
|
||||
Ox.forEach(self.drag.columnOffsets, function(offset, i) {
|
||||
var x = self.drag.listOffset + offset + self.columnWidths[i] / 2;
|
||||
if (i < self.drag.startPos && e.clientX < x) {
|
||||
self.drag.stopPos = i;
|
||||
return false;
|
||||
} else if (d > 0 && d > v) {
|
||||
} else if (i > self.drag.startPos && e.clientX > x) {
|
||||
self.drag.stopPos = i;
|
||||
}
|
||||
});
|
||||
if (self.drag.stopPos != pos) {
|
||||
moveColumn(id, self.drag.stopPos);
|
||||
self.drag.columnOffsets = getColumnOffsets();
|
||||
self.drag.startPos = self.drag.stopPos;
|
||||
//Ox.print('columnOffsets', self.drag.columnOffsets)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -479,10 +467,8 @@ Ox.TextList = function(options, self) {
|
|||
self.columnWidths.splice(self.drag.stopPos, 0, width);
|
||||
that.$head.$content.empty();
|
||||
constructHead();
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
||||
opacity: 1
|
||||
});
|
||||
that.$titles[self.drag.stopPos].removeClass('OxDrag').css({
|
||||
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 1});
|
||||
self.$heads[self.drag.stopPos].removeClass('OxDrag').css({
|
||||
cursor: 'pointer'
|
||||
});
|
||||
that.$body.clearCache();
|
||||
|
|
@ -492,14 +478,13 @@ Ox.TextList = function(options, self) {
|
|||
function dragstartResize(id, e) {
|
||||
var pos = getColumnPositionById(id);
|
||||
self.drag = {
|
||||
startX: e.clientX,
|
||||
startWidth: self.columnWidths[pos]
|
||||
};
|
||||
}
|
||||
|
||||
function dragResize(id, e) {
|
||||
var width = Ox.limit(
|
||||
self.drag.startWidth - self.drag.startX + e.clientX,
|
||||
self.drag.startWidth + e.clientDX,
|
||||
self.options.columnWidth[0],
|
||||
self.options.columnWidth[1]
|
||||
);
|
||||
|
|
@ -531,6 +516,24 @@ Ox.TextList = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function formatValue(key, value, data) {
|
||||
// fixme: this may be obscure...
|
||||
// since the format of a value may depend on another value,
|
||||
// we pass all data as a second parameter to the supplied format function
|
||||
var format = self.format[key];
|
||||
if (value === null) {
|
||||
value = '';
|
||||
} else if (format) {
|
||||
value = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, Ox.merge([value], format.args || [])) :
|
||||
format(value, data);
|
||||
} else if (Ox.isArray(value)) {
|
||||
value = value.join(', ');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function getCell(id, key) {
|
||||
Ox.print('getCell', id, key)
|
||||
var $item = getItem(id);
|
||||
|
|
@ -538,6 +541,14 @@ Ox.TextList = function(options, self) {
|
|||
return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
|
||||
}
|
||||
|
||||
function getColumnOffsets() {
|
||||
return self.visibleColumns.map(function(column, i) {
|
||||
return Ox.sum(self.visibleColumns.map(function(column_, i_) {
|
||||
return i_ < i ? self.columnWidths[i_] : 0;
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function getColumnIndexById(id) {
|
||||
return Ox.getPositionById(self.options.columns, id);
|
||||
}
|
||||
|
|
@ -549,10 +560,10 @@ Ox.TextList = function(options, self) {
|
|||
function getItem(id) {
|
||||
//Ox.print('getItem', id)
|
||||
var $item = null;
|
||||
$.each(that.find('.OxItem'), function(i, v) {
|
||||
$v = $(v);
|
||||
if ($v.data('id') == id) {
|
||||
$item = $v;
|
||||
that.find('.OxItem').each(function() {
|
||||
$this = $(this);
|
||||
if ($this.data('id') == id) {
|
||||
$item = $this;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -579,37 +590,50 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function moveColumn(id, pos) {
|
||||
// fixme: column head should be one element, not three
|
||||
//Ox.print('moveColumn', id, pos)
|
||||
var startPos = getColumnPositionById(id),
|
||||
stopPos = pos,
|
||||
startClassName = '.OxColumn' + Ox.toTitleCase(id),
|
||||
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
|
||||
startSelector = '.OxColumn' + Ox.toTitleCase(id),
|
||||
stopSelector = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
|
||||
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
|
||||
$column = $('.OxTitle' + startClassName),
|
||||
$order = $column.next(),
|
||||
$resize = $order.next();
|
||||
//Ox.print(startClassName, insert, stopClassName)
|
||||
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
|
||||
$order.detach().insertAfter($column);
|
||||
$resize.detach().insertAfter($order);
|
||||
$.each(that.$body.find('.OxItem'), function(i, v) {
|
||||
var $v = $(v);
|
||||
$v.children(startClassName).detach()[insert]($v.children(stopClassName));
|
||||
$column = $('.OxHeadCell' + startSelector),
|
||||
$resize = $column.next();
|
||||
//Ox.print(startSelector, insert, stopSelector)
|
||||
$column.detach()[insert](insert == 'insertAfter'
|
||||
? $('.OxHeadCell' + stopSelector).next()
|
||||
: $('.OxHeadCell' + stopSelector));
|
||||
$resize.detach().insertAfter($column);
|
||||
that.$body.find('.OxItem').each(function() {
|
||||
var $this = $(this);
|
||||
$this.children(startSelector).detach()[insert](
|
||||
$this.children(stopSelector)
|
||||
);
|
||||
});
|
||||
var column = self.visibleColumns.splice(startPos, 1)[0],
|
||||
width = self.columnWidths.splice(startPos, 1)[0];
|
||||
self.visibleColumns.splice(stopPos, 0, column);
|
||||
self.columnWidths.splice(stopPos, 0, width);
|
||||
var $head = self.$heads.splice(startPos, 1)[0],
|
||||
columnWidth = self.columnWidths.splice(startPos, 1)[0],
|
||||
visibleColumn = self.visibleColumns.splice(startPos, 1)[0];
|
||||
self.$heads.splice(stopPos, 0, $head);
|
||||
self.columnWidths.splice(stopPos, 0, columnWidth);
|
||||
self.visibleColumns.splice(stopPos, 0, visibleColumn);
|
||||
var pos = getColumnPositionById(self.options.columns[self.selectedColumn].id);
|
||||
if (pos > -1) {
|
||||
that.$element.find('.OxResize .OxSelected').removeClass('OxSelected');
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).addClass('OxSelected');
|
||||
self.$heads[pos].next().children().eq(0).addClass('OxSelected');
|
||||
if (pos == stopPos) {
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).css({opacity: 0.25});
|
||||
self.$heads[pos].next().children().eq(0).css({opacity: 0.25});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeColumn(id) {
|
||||
//Ox.print('removeColumn', id);
|
||||
var className = '.OxColumn' + Ox.toTitleCase(id),
|
||||
index = getColumnIndexById(id),
|
||||
var index = getColumnIndexById(id),
|
||||
itemWidth,
|
||||
position = getColumnPositionById(id),
|
||||
$column = $('.OxTitle' + className),
|
||||
selector = '.OxColumn' + Ox.toTitleCase(id),
|
||||
$column = $('.OxHeadCell ' + selector),
|
||||
$order = $column.next(),
|
||||
$resize = $order.next();
|
||||
self.options.columns[index].visible = false;
|
||||
|
|
@ -618,19 +642,17 @@ Ox.TextList = function(options, self) {
|
|||
that.$head.$content.empty();
|
||||
constructHead();
|
||||
itemWidth = getItemWidth();
|
||||
$.each(that.$body.find('.OxItem'), function(i, v) {
|
||||
var $v = $(v);
|
||||
$v.children(className).remove();
|
||||
$v.css({
|
||||
width: itemWidth + 'px'
|
||||
});
|
||||
that.$body.find('.OxItem').each(function() {
|
||||
var $this = $(this);
|
||||
$this.children(selector).remove();
|
||||
$this.css({width: itemWidth + 'px'});
|
||||
});
|
||||
that.$body.$content.css({
|
||||
width: itemWidth + 'px'
|
||||
});
|
||||
that.$body.options({
|
||||
keys: Ox.merge(self.visibleColumns.map(function(column) {
|
||||
return colum.id;
|
||||
return column.id;
|
||||
}), self.options.keys)
|
||||
});
|
||||
//that.$body.clearCache();
|
||||
|
|
@ -654,12 +676,15 @@ Ox.TextList = function(options, self) {
|
|||
that.$head.$content.css({
|
||||
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
||||
});
|
||||
that.$titles[pos].css({
|
||||
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
|
||||
self.$heads[pos].css({
|
||||
width: width - 5 + 'px'
|
||||
});
|
||||
self.$titles[pos].css({
|
||||
width: width - 9 - (i == self.selectedColumn ? 16 : 0) + 'px'
|
||||
});
|
||||
}
|
||||
that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
|
||||
width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
|
||||
width: width - (self.options.columnsVisible ? 9 : 8) + 'px'
|
||||
});
|
||||
setWidth();
|
||||
}
|
||||
|
|
@ -678,13 +703,12 @@ Ox.TextList = function(options, self) {
|
|||
var pos = getColumnPositionById(id);
|
||||
if (pos > -1) {
|
||||
updateOrder(id);
|
||||
pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
|
||||
that.$titles[pos].toggleClass('OxSelected');
|
||||
that.$titles[pos].next().toggleClass('OxSelected');
|
||||
that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
|
||||
that.$titles[pos].css({
|
||||
pos > 0 && self.$heads[pos].prev().children().eq(2).toggleClass('OxSelected');
|
||||
self.$heads[pos].toggleClass('OxSelected');
|
||||
self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
|
||||
self.$titles[pos].css({
|
||||
width: (
|
||||
that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
) + 'px'
|
||||
});
|
||||
}
|
||||
|
|
@ -692,8 +716,8 @@ Ox.TextList = function(options, self) {
|
|||
|
||||
function triggerColumnChangeEvent() {
|
||||
that.triggerEvent('columnchange', {
|
||||
ids: $.map(self.visibleColumns, function(v, i) {
|
||||
return v.id;
|
||||
ids: self.visibleColumns.map(function(column) {
|
||||
return column.id;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -713,11 +737,14 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function updateOrder(id) {
|
||||
var pos = getColumnPositionById(id);
|
||||
var operator = self.options.sort[0].operator,
|
||||
pos = getColumnPositionById(id);
|
||||
if (pos > -1) {
|
||||
that.$titles[pos].next().html(Ox.UI.symbols[
|
||||
'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down')
|
||||
]);
|
||||
self.$orderButtons[pos].options({
|
||||
title: operator == '+' ? 'up' : 'down'
|
||||
}).css({
|
||||
marginTop: (operator == '+' ? 1 : -1) + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue