jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Set initial width as naturally calculated by table, add refresh method, revert to old resize behaviour

Browse Source
This commit is contained in:
Faris Ansari 2017-10-01 17:12:46 +05:30
parent b164e108f6
commit 606b631dba
3 changed files with 84 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
lib/ReGrid.js
View File

@ -136,11 +136,8 @@ var ReGrid = function () {
this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
this.makeDom();
this.bindEvents();
if (data) {
this.data = this.prepareData(data);
this.render();
this.refresh(data);
}
}
@ -154,11 +151,18 @@ var ReGrid = function () {
// this.body = this.wrapper.find('.data-table-body');
this.footer = this.wrapper.find('.data-table-footer');
}
}, {
key: 'refresh',
value: function refresh(data) {
this.data = this.prepareData(data);
this.render();
}
}, {
key: 'render',
value: function render() {
if (this.wrapper.find('.data-table').length === 0) {
this.makeDom();
this.makeStyle();
this.bindEvents();
}
@ -345,18 +349,30 @@ var ReGrid = function () {
margin: 0
});
// cache minWidth for each column
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
// set the width for each column
this.header.find('.data-table-col').each(function () {
var col = $(this);
var width = col.find('.content').width();
var width = parseInt(col.find('.content').css('width'), 10);
var colIndex = col.attr('data-col-index');
if (!self.minWidthMap[colIndex]) {
// only set this once
self.minWidthMap[colIndex] = width;
}
});
// set initial width as naturally calculated by table's first row
this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
var $cell = $(this);
var width = parseInt($cell.find('.content').css('width'), 10);
var height = parseInt($cell.find('.content').css('height'), 10);
var _self$getCellAttr = self.getCellAttr($cell),
colIndex = _self$getCellAttr.colIndex;
self.setColumnWidth(colIndex, width);
self.setDefaultCellHeight(height);
});
this.setBodyWidth();
@ -461,13 +477,13 @@ var ReGrid = function () {
$('body').on('mouseup', function (e) {
if (!$currCell) return;
isDragging = false;
// const colIndex = $currCell.attr('data-col-index');
var colIndex = $currCell.attr('data-col-index');
if ($currCell) {
// const width = $currCell.find('.content').css('width');
var width = parseInt($currCell.find('.content').css('width'), 10);
// self.setColumnWidth(colIndex, width);
// self.setBodyWidth();
self.setColumnWidth(colIndex, width);
self.setBodyWidth();
$currCell = null;
}
});
@ -482,9 +498,7 @@ var ReGrid = function () {
return;
}
self.setColumnWidth(colIndex, finalWidth);
self.setBodyWidth();
// self.setColumnHeaderWidth($currCell, finalWidth);
self.setColumnHeaderWidth(colIndex, finalWidth);
});
}
}, {
@ -562,6 +576,20 @@ var ReGrid = function () {
width: width + 'px'
});
}
}, {
key: 'setColumnHeaderWidth',
value: function setColumnHeaderWidth(colIndex, width) {
this.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
width: width + 'px'
});
}
}, {
key: 'setDefaultCellHeight',
value: function setDefaultCellHeight(height) {
this.setStyle('.data-table-col .content', {
height: height + 'px'
});
}
}, {
key: 'setRowHeight',
value: function setRowHeight(rowIndex, height) {
@ -569,21 +597,6 @@ var ReGrid = function () {
height: height + 'px'
});
}
}, {
key: 'setColumnHeaderWidth',
value: function setColumnHeaderWidth(colIndex, width) {
colIndex = +colIndex;
var $cell = void 0;
if (typeof colIndex === 'number') {
$cell = this.getColumnHeaderElement(colIndex);
} else {
// directly element is passed
$cell = colIndex;
}
$cell.find('.content').width(width);
}
}, {
key: 'setColumnWidths',
value: function setColumnWidths() {
@ -620,20 +633,15 @@ var ReGrid = function () {
}, {
key: 'setStyle',
value: function setStyle(rule, styleMap) {
this.getStyleEl();
var styles = this.$style.text();
styles = (0, _utils.buildCSSRule)(rule, styleMap, styles);
this.$style.html(styles);
}
}, {
key: 'getStyleEl',
value: function getStyleEl() {
if (!this.$style) {
this.$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
return this.$style;
key: 'makeStyle',
value: function makeStyle() {
this.$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
}, {
key: 'getColumn',

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

74
src/regrid.js
View File

@ -33,11 +33,8 @@ export default class ReGrid {
this.enableClusterize = getDefault(enableClusterize, false);
this.enableLogs = getDefault(enableLogs, true);
this.makeDom();
this.bindEvents();
if (data) {
this.data = this.prepareData(data);
this.render();
this.refresh(data);
}
}
@ -62,9 +59,15 @@ export default class ReGrid {
this.footer = this.wrapper.find('.data-table-footer');
}
refresh(data) {
this.data = this.prepareData(data);
this.render();
}
render() {
if (this.wrapper.find('.data-table').length === 0) {
this.makeDom();
this.makeStyle();
this.bindEvents();
}
@ -236,18 +239,28 @@ export default class ReGrid {
margin: 0
});
// cache minWidth for each column
this.minWidthMap = getDefault(this.minWidthMap, []);
// set the width for each column
this.header.find('.data-table-col').each(function () {
const col = $(this);
const width = col.find('.content').width();
const width = parseInt(col.find('.content').css('width'), 10);
const colIndex = col.attr('data-col-index');
if (!self.minWidthMap[colIndex]) {
// only set this once
self.minWidthMap[colIndex] = width;
}
});
// set initial width as naturally calculated by table's first row
this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
const $cell = $(this);
const width = parseInt($cell.find('.content').css('width'), 10);
const height = parseInt($cell.find('.content').css('height'), 10);
const { colIndex } = self.getCellAttr($cell);
self.setColumnWidth(colIndex, width);
self.setDefaultCellHeight(height);
});
this.setBodyWidth();
@ -344,13 +357,13 @@ export default class ReGrid {
$('body').on('mouseup', function (e) {
if (!$currCell) return;
isDragging = false;
// const colIndex = $currCell.attr('data-col-index');
const colIndex = $currCell.attr('data-col-index');
if ($currCell) {
// const width = $currCell.find('.content').css('width');
const width = parseInt($currCell.find('.content').css('width'), 10);
// self.setColumnWidth(colIndex, width);
// self.setBodyWidth();
self.setColumnWidth(colIndex, width);
self.setBodyWidth();
$currCell = null;
}
});
@ -365,9 +378,7 @@ export default class ReGrid {
return;
}
self.setColumnWidth(colIndex, finalWidth);
self.setBodyWidth();
// self.setColumnHeaderWidth($currCell, finalWidth);
self.setColumnHeaderWidth(colIndex, finalWidth);
});
}
@ -441,24 +452,22 @@ export default class ReGrid {
});
}
setRowHeight(rowIndex, height) {
this.setStyle(`[data-row-index="${rowIndex}"] .content`, {
setColumnHeaderWidth(colIndex, width) {
this.setStyle(`[data-col-index="${colIndex}"][data-is-header] .content`, {
width: width + 'px'
});
}
setDefaultCellHeight(height) {
this.setStyle('.data-table-col .content', {
height: height + 'px'
});
}
setColumnHeaderWidth(colIndex, width) {
colIndex = +colIndex;
let $cell;
if (typeof colIndex === 'number') {
$cell = this.getColumnHeaderElement(colIndex);
} else {
// directly element is passed
$cell = colIndex;
}
$cell.find('.content').width(width);
setRowHeight(rowIndex, height) {
this.setStyle(`[data-row-index="${rowIndex}"] .content`, {
height: height + 'px'
});
}
setColumnWidths() {
@ -494,20 +503,15 @@ export default class ReGrid {
}
setStyle(rule, styleMap) {
this.getStyleEl();
let styles = this.$style.text();
styles = buildCSSRule(rule, styleMap, styles);
this.$style.html(styles);
}
getStyleEl() {
if (!this.$style) {
this.$style = $('<style data-id="regrid"></style>')
.prependTo(this.wrapper);
}
return this.$style;
makeStyle() {
this.$style = $('<style data-id="regrid"></style>')
.prependTo(this.wrapper);
}
getColumn(colIndex) {