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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<title>ReGrid</title>
<style>
body {
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);
}

77
lib/ReGrid.js
View File

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

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

93
src/regrid.js
View File

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