Browse Source

columnresizer

es6
guy 8 years ago
parent
commit
dd7032324b
  1. 6
      bi/base.css
  2. 46
      bi/base.js
  3. 6
      docs/base.css
  4. 46
      docs/base.js
  5. 22
      src/base/table/table.resizable.cell.js
  6. 24
      src/base/table/table.resizable.js
  7. 3
      src/css/base/table/table.resizable.cell.css
  8. 3
      src/css/base/table/table.resizable.css
  9. 5
      src/less/base/table/table.resizable.cell.less
  10. 5
      src/less/base/table/table.resizable.less

6
bi/base.css

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

46
bi/base.js

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

6
docs/base.css

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

46
docs/base.js

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

22
src/base/table/table.resizable.cell.js

@ -11,6 +11,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -24,22 +27,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();

24
src/base/table/table.resizable.js

@ -212,14 +212,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -239,8 +245,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -248,8 +256,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

3
src/css/base/table/table.resizable.cell.css

@ -9,3 +9,6 @@
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}

3
src/css/base/table/table.resizable.css

@ -6,6 +6,9 @@
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

5
src/less/base/table/table.resizable.cell.less

@ -9,5 +9,10 @@
background-color: @color-bi-background-highlight;
}
}
&.suitable{
& .resizable-table-cell-resizer-knob {
background-color: @color-bi-background-success;
}
}
}
}

5
src/less/base/table/table.resizable.less

@ -1,10 +1,13 @@
@import "../../bibase";
.bi-resizable-table {
& .resizable-table-resizer{
& .resizable-table-resizer {
cursor: ew-resize;
z-index: 1;
background-color: @color-bi-background-highlight;
&.suitable {
background-color: @color-bi-background-success;
}
}
& .resizable-table-region-resizer {
cursor: ew-resize;

Loading…
Cancel
Save