jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix setStyle, remove appendStyle, change setColumnWidth to use setStyle

Browse Source
This commit is contained in:
Faris Ansari 2017-09-30 22:03:03 +05:30
parent a7f7d060da
commit 9b1e19dcac
4 changed files with 86 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <title>ReGrid</title>
<style> <style>
body { body {
font-family: 'Tahoma'; font-family: 'Tahoma';
@ -495,7 +495,7 @@
] ]
}; };
for (let i = 0; i < 10; i++) { for (let i = 0; i < 5; i++) {
data.rows = data.rows.concat(data.rows); data.rows = data.rows.concat(data.rows);
} }

69
lib/ReGrid.js
View File

@ -339,13 +339,15 @@ var ReGrid = function () {
$col.addClass('selected'); $col.addClass('selected');
}); });
this.bindCellDoubleClick(); this.bindEditCell();
this.bindResizeColumn(); this.bindResizeColumn();
this.bindSortColumn(); this.bindSortColumn();
} }
}, { }, {
key: 'setDimensions', key: 'setDimensions',
value: function setDimensions() { value: function setDimensions() {
var self = this;
// setting width as 0 will ensure that the // setting width as 0 will ensure that the
// header doesn't take the available space // header doesn't take the available space
this.header.css({ this.header.css({
@ -353,23 +355,17 @@ var ReGrid = function () {
margin: 0 margin: 0
}); });
var styles = ''; // set the width for each column
// set the width for each cell
this.header.find('.data-table-col').each(function () { this.header.find('.data-table-col').each(function () {
var col = (0, _jQuery2.default)(this); var col = (0, _jQuery2.default)(this);
var height = col.find('.content').height();
var width = col.find('.content').width(); var width = col.find('.content').width();
var colIndex = col.attr('data-col-index'); var colIndex = col.attr('data-col-index');
styles += '\n [data-col-index="' + colIndex + '"] .content {\n width: ' + width + 'px;\n height: ' + height + 'px;\n }\n '; self.setColumnWidth(colIndex, width);
}); });
this.appendStyle(styles);
this.setBodyWidth(); this.setBodyWidth();
// this.setColumnWidths();
this.bodyScrollable.css({ this.bodyScrollable.css({
marginTop: this.header.height() + 1 marginTop: this.header.height() + 1
}); });
@ -377,8 +373,8 @@ var ReGrid = function () {
this.bodyScrollable.find('.table').css('margin', 0); this.bodyScrollable.find('.table').css('margin', 0);
} }
}, { }, {
key: 'bindCellDoubleClick', key: 'bindEditCell',
value: function bindCellDoubleClick() { value: function bindEditCell() {
var events = this.events; var events = this.events;
var $editPopup = this.wrapper.find('.edit-popup'); var $editPopup = this.wrapper.find('.edit-popup');
@ -453,7 +449,7 @@ var ReGrid = function () {
var finalWidth = startWidth + (e.pageX - startX); var finalWidth = startWidth + (e.pageX - startX);
var colIndex = $currCell.attr('data-col-index'); var colIndex = $currCell.attr('data-col-index');
self.setStyle('[data-col-index="' + colIndex + '"] .content', 'width: ' + finalWidth + 'px;'); self.setColumnWidth(colIndex, finalWidth);
self.setBodyWidth(); self.setBodyWidth();
// self.setColumnHeaderWidth($currCell, finalWidth); // self.setColumnHeaderWidth($currCell, finalWidth);
}); });
@ -517,17 +513,12 @@ var ReGrid = function () {
}, { }, {
key: 'setColumnWidth', key: 'setColumnWidth',
value: function setColumnWidth(colIndex, width) { value: function setColumnWidth(colIndex, width) {
var header = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; this.setStyle('[data-col-index="' + colIndex + '"] .content', 'width: ' + width + 'px;');
var selector = '.data-table-col[data-col-index="' + colIndex + '"] .content';
var $el = void 0;
if (header) {
$el = this.header.find(selector);
} else {
$el = this.bodyScrollable.find(selector);
} }
$el.css('width', width); }, {
key: 'setRowHeight',
value: function setRowHeight(rowIndex, height) {
self.setStyle('[data-row-index="' + rowIndex + '"] .content', 'width: ' + height + 'px;');
} }
}, { }, {
key: 'setColumnHeaderWidth', key: 'setColumnHeaderWidth',
@ -577,34 +568,36 @@ var ReGrid = function () {
value: function setBodyWidth() { value: function setBodyWidth() {
this.bodyScrollable.css('width', parseInt(this.header.css('width'), 10) + 1); this.bodyScrollable.css('width', parseInt(this.header.css('width'), 10) + 1);
} }
}, {
key: 'appendStyle',
value: function appendStyle(style) {
this.getStyleEl();
// existing styles
var styles = this.$style.text();
styles += style;
this.$style.html(styles);
}
}, { }, {
key: 'setStyle', key: 'setStyle',
value: function setStyle(rule, style) { value: function setStyle(rule, style) {
this.getStyleEl(); this.getStyleEl();
var styles = this.$style.text(); var styles = this.$style.text();
var patternStr = (0, _utils.escapeRegExp)(rule) + ' {([^}]*)}'; var rulePatternStr = (0, _utils.escapeRegExp)(rule) + ' {([^}]*)}';
var pattern = new RegExp(patternStr, 'g'); var rulePattern = new RegExp(rulePatternStr, 'g');
if (styles.match(rulePattern)) {
// rules exists, append/replace properties
var property = style.split(':')[0]; var property = style.split(':')[0];
var propPattern = new RegExp((0, _utils.escapeRegExp)(property) + '[^;]*;'); var propPattern = new RegExp((0, _utils.escapeRegExp)(property) + '[^;]*;');
styles = styles.replace(pattern, function (match, p1) { styles = styles.replace(rulePattern, function (match, propertyStr) {
var replacer = rule + ' {' + p1.trim() + style + '}'; if (propertyStr.match(propPattern)) {
// property exists, replace with empty string
propertyStr = propertyStr.replace(propPattern, '');
}
propertyStr = propertyStr.trim();
return replacer.replace(propPattern, ''); var replacer = rule + ' {' + propertyStr + style + '}';
return replacer;
}); });
} else {
// rules doesn't exists, add rule with properties
styles += rule + ' {' + style + '}';
}
this.$style.html(styles); this.$style.html(styles);
} }
}, { }, {

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

87
src/regrid.js
View File

@ -14,7 +14,14 @@ import Clusterize from 'clusterize.js';
import './style.scss'; import './style.scss';
export default class ReGrid { export default class ReGrid {
constructor({ wrapper, events, data, addSerialNoColumn, enableClusterize, enableLogs }) { constructor({
wrapper,
events,
data,
addSerialNoColumn,
enableClusterize,
enableLogs
}) {
this.wrapper = $(wrapper); this.wrapper = $(wrapper);
if (this.wrapper.length === 0) { if (this.wrapper.length === 0) {
throw new Error('Invalid argument given for `wrapper`'); throw new Error('Invalid argument given for `wrapper`');
@ -217,12 +224,14 @@ export default class ReGrid {
$col.addClass('selected'); $col.addClass('selected');
}); });
this.bindCellDoubleClick(); this.bindEditCell();
this.bindResizeColumn(); this.bindResizeColumn();
this.bindSortColumn(); this.bindSortColumn();
} }
setDimensions() { setDimensions() {
const self = this;
// setting width as 0 will ensure that the // setting width as 0 will ensure that the
// header doesn't take the available space // header doesn't take the available space
this.header.css({ this.header.css({
@ -230,28 +239,17 @@ export default class ReGrid {
margin: 0 margin: 0
}); });
let styles = ''; // set the width for each column
// set the width for each cell
this.header.find('.data-table-col').each(function () { this.header.find('.data-table-col').each(function () {
const col = $(this); const col = $(this);
const height = col.find('.content').height();
const width = col.find('.content').width(); const width = col.find('.content').width();
const colIndex = col.attr('data-col-index'); const colIndex = col.attr('data-col-index');
styles += ` self.setColumnWidth(colIndex, width);
[data-col-index="${colIndex}"] .content {
width: ${width}px;
height: ${height}px;
}
`;
}); });
this.appendStyle(styles);
this.setBodyWidth(); this.setBodyWidth();
// this.setColumnWidths();
this.bodyScrollable.css({ this.bodyScrollable.css({
marginTop: this.header.height() + 1 marginTop: this.header.height() + 1
}); });
@ -259,7 +257,7 @@ export default class ReGrid {
this.bodyScrollable.find('.table').css('margin', 0); this.bodyScrollable.find('.table').css('margin', 0);
} }
bindCellDoubleClick() { bindEditCell() {
const { events } = this; const { events } = this;
const $editPopup = this.wrapper.find('.edit-popup'); const $editPopup = this.wrapper.find('.edit-popup');
@ -332,7 +330,7 @@ export default class ReGrid {
const finalWidth = startWidth + (e.pageX - startX); const finalWidth = startWidth + (e.pageX - startX);
const colIndex = $currCell.attr('data-col-index'); const colIndex = $currCell.attr('data-col-index');
self.setStyle(`[data-col-index="${colIndex}"] .content`, `width: ${finalWidth}px;`); self.setColumnWidth(colIndex, finalWidth);
self.setBodyWidth(); self.setBodyWidth();
// self.setColumnHeaderWidth($currCell, finalWidth); // self.setColumnHeaderWidth($currCell, finalWidth);
}); });
@ -395,16 +393,18 @@ export default class ReGrid {
}); });
} }
setColumnWidth(colIndex, width, header = false) { setColumnWidth(colIndex, width) {
const selector = `.data-table-col[data-col-index="${colIndex}"] .content`; this.setStyle(
let $el; `[data-col-index="${colIndex}"] .content`,
`width: ${width}px;`
if (header) { );
$el = this.header.find(selector);
} else {
$el = this.bodyScrollable.find(selector);
} }
$el.css('width', width);
setRowHeight(rowIndex, height) {
self.setStyle(
`[data-row-index="${rowIndex}"] .content`,
`width: ${height}px;`
);
} }
setColumnHeaderWidth(colIndex, width) { setColumnHeaderWidth(colIndex, width) {
@ -453,32 +453,35 @@ export default class ReGrid {
); );
} }
appendStyle(style) {
this.getStyleEl();
// existing styles
let styles = this.$style.text();
styles += style;
this.$style.html(styles);
}
setStyle(rule, style) { setStyle(rule, style) {
this.getStyleEl(); this.getStyleEl();
let styles = this.$style.text(); let styles = this.$style.text();
const patternStr = `${escapeRegExp(rule)} {([^}]*)}`; const rulePatternStr = `${escapeRegExp(rule)} {([^}]*)}`;
const pattern = new RegExp(patternStr, 'g'); const rulePattern = new RegExp(rulePatternStr, 'g');
if (styles.match(rulePattern)) {
// rules exists, append/replace properties
const property = style.split(':')[0]; const property = style.split(':')[0];
const propPattern = new RegExp(`${escapeRegExp(property)}[^;]*;`); const propPattern = new RegExp(`${escapeRegExp(property)}[^;]*;`);
styles = styles.replace(pattern, function (match, p1) { styles = styles.replace(rulePattern, function (match, propertyStr) {
const replacer = if (propertyStr.match(propPattern)) {
`${rule} {${p1.trim()}${style}}`; // property exists, replace with empty string
propertyStr = propertyStr.replace(propPattern, '');
}
propertyStr = propertyStr.trim();
return replacer.replace(propPattern, ''); const replacer =
`${rule} {${propertyStr}${style}}`;
return replacer;
}); });
} else {
// rules doesn't exists, add rule with properties
styles += `${rule} {${style}}`;
}
this.$style.html(styles); this.$style.html(styles);
} }