jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #14 from frappe/html-refactor

Browse Source
This commit is contained in:
Faris Ansari 2018-02-12 11:35:33 +05:30 committed by GitHub
commit e1e4ca5eee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1110 additions and 1109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -70,7 +70,7 @@
takeAvailableSpace: false, takeAvailableSpace: false,
columns, columns,
data, data,
editing(colIndex, rowIndex, value, parent) { getEditor(colIndex, rowIndex, value, parent) {
// editing obj only for date field // editing obj only for date field
if (colIndex != 6) return; if (colIndex != 6) return;

2052
lib/frappe-datatable.js
View File

File diff suppressed because it is too large Load Diff

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

5
src/body-renderer.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import Clusterize from 'clusterize.js'; import Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify } from './utils'; import { promisify } from './utils';
export default class BodyRenderer { export default class BodyRenderer {
@ -87,14 +86,14 @@ export default class BodyRenderer {
} }
getDataForClusterize(rows) { getDataForClusterize(rows) {
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex })); return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
} }
}; };
export function getBodyHTML(rows) { export function getBodyHTML(rows) {
return ` return `
<tbody> <tbody>
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')} ${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
</tbody> </tbody>
`; `;
} }

48
src/cellmanager.js
View File

@ -353,12 +353,12 @@ export default class CellManager {
const $editCell = $('.edit-cell', $cell); const $editCell = $('.edit-cell', $cell);
$editCell.innerHTML = ''; $editCell.innerHTML = '';
const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell); const editor = this.getEditor(colIndex, rowIndex, cell.content, $editCell);
if (editing) { if (editor) {
this.currentCellEditing = editing; this.currentCellEditor = editor;
// initialize editing input with cell value // initialize editing input with cell value
editing.initValue(cell.content, rowIndex, col); editor.initValue(cell.content, rowIndex, col);
} }
} }
@ -371,9 +371,9 @@ export default class CellManager {
this.$editingCell = null; this.$editingCell = null;
} }
getEditingObject(colIndex, rowIndex, value, parent) { getEditor(colIndex, rowIndex, value, parent) {
// debugger; // debugger;
const obj = this.options.editing(colIndex, rowIndex, value, parent); const obj = this.options.getEditor(colIndex, rowIndex, value, parent);
if (obj && obj.setValue) return obj; if (obj && obj.setValue) return obj;
// editing fallback // editing fallback
@ -403,11 +403,11 @@ export default class CellManager {
const col = this.datamanager.getColumn(colIndex); const col = this.datamanager.getColumn(colIndex);
if ($cell) { if ($cell) {
const editing = this.currentCellEditing; const editor = this.currentCellEditor;
if (editing) { if (editor) {
const value = editing.getValue(); const value = editor.getValue();
const done = editing.setValue(value, rowIndex, col); const done = editor.setValue(value, rowIndex, col);
const oldValue = this.getCell(colIndex, rowIndex).content; const oldValue = this.getCell(colIndex, rowIndex).content;
// update cell immediately // update cell immediately
@ -424,7 +424,7 @@ export default class CellManager {
} }
} }
this.currentCellEditing = null; this.currentCellEditor = null;
} }
copyCellContents($cell1, $cell2) { copyCellContents($cell1, $cell2) {
@ -467,8 +467,8 @@ export default class CellManager {
} }
refreshCell(cell) { refreshCell(cell) {
const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable); const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = getCellContent(cell); $cell.innerHTML = this.getCellContent(cell);
} }
isStandardCell(colIndex) { isStandardCell(colIndex) {
@ -477,7 +477,7 @@ export default class CellManager {
} }
getCell$(colIndex, rowIndex) { getCell$(colIndex, rowIndex) {
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable); return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable);
} }
getAboveCell$($cell) { getAboveCell$($cell) {
@ -541,9 +541,8 @@ export default class CellManager {
getRowCountPerPage() { getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight()); return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
} }
}
export function getCellHTML(cell) { getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell; const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({ const dataAttr = makeDataAttributeString({
rowIndex, rowIndex,
@ -553,16 +552,16 @@ export function getCellHTML(cell) {
return ` return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0"> <td class="data-table-col noselect" ${dataAttr} tabindex="0">
${getCellContent(cell)} ${this.getCellContent(cell)}
</td> </td>
`; `;
} }
export function getCellContent(cell) { getCellContent(cell) {
const { isHeader } = cell; const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false; const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? getEditCellHTML() : ''; const editCellHTML = editable ? this.getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false; const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : ''; const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
@ -584,14 +583,15 @@ export function getCellContent(cell) {
</div> </div>
${editCellHTML} ${editCellHTML}
`; `;
} }
export function getEditCellHTML() { getEditCellHTML() {
return ` return `
<div class="edit-cell"></div> <div class="edit-cell"></div>
`; `;
} }
function cellSelector(colIndex, rowIndex) { cellSelector(colIndex, rowIndex) {
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`; return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
}
} }

5
src/columnmanager.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { getRowHTML } from './rowmanager';
import { getDefault } from './utils'; import { getDefault } from './utils';
export default class ColumnManager { export default class ColumnManager {
@ -28,13 +27,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) { if (!$('.data-table-col', this.header)) {
// insert html // insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
} else { } else {
// refresh dom state // refresh dom state
const $cols = $.each('.data-table-col', this.header); const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) { if (columns.length < $cols.length) {
// deleted column // deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
return; return;
} }

2
src/defaults.js
View File

@ -39,7 +39,7 @@ export default {
none: '' none: ''
}, },
freezeMessage: '', freezeMessage: '',
editing: () => {}, getEditor: () => {},
addSerialNoColumn: true, addSerialNoColumn: true,
addCheckboxColumn: false, addCheckboxColumn: false,
enableClusterize: true, enableClusterize: true,

7
src/rowmanager.js
View File

@ -1,6 +1,5 @@
import $ from './dom'; import $ from './dom';
import { makeDataAttributeString, promisify } from './utils'; import { makeDataAttributeString, promisify } from './utils';
import { getCellHTML } from './cellmanager';
export default class RowManager { export default class RowManager {
constructor(instance) { constructor(instance) {
@ -184,14 +183,14 @@ export default class RowManager {
this._lastScrollTo = rowIndex; this._lastScrollTo = rowIndex;
$.scrollTop(this.bodyScrollable, offset); $.scrollTop(this.bodyScrollable, offset);
} }
}
export function getRowHTML(row, props) { getRowHTML(row, props) {
const dataAttr = makeDataAttributeString(props); const dataAttr = makeDataAttributeString(props);
return ` return `
<tr class="data-table-row" ${dataAttr}> <tr class="data-table-row" ${dataAttr}>
${row.map(getCellHTML).join('')} ${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
</tr> </tr>
`; `;
}
} }