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,
columns,
data,
editing(colIndex, rowIndex, value, parent) {
getEditor(colIndex, rowIndex, value, parent) {
// editing obj only for date field
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 Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify } from './utils';
export default class BodyRenderer {
@ -87,14 +86,14 @@ export default class BodyRenderer {
}
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) {
return `
<tbody>
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
</tbody>
`;
}

134
src/cellmanager.js
View File

@ -353,12 +353,12 @@ export default class CellManager {
const $editCell = $('.edit-cell', $cell);
$editCell.innerHTML = '';
const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
const editor = this.getEditor(colIndex, rowIndex, cell.content, $editCell);
if (editing) {
this.currentCellEditing = editing;
if (editor) {
this.currentCellEditor = editor;
// 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;
}
getEditingObject(colIndex, rowIndex, value, parent) {
getEditor(colIndex, rowIndex, value, parent) {
// 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;
// editing fallback
@ -403,11 +403,11 @@ export default class CellManager {
const col = this.datamanager.getColumn(colIndex);
if ($cell) {
const editing = this.currentCellEditing;
const editor = this.currentCellEditor;
if (editing) {
const value = editing.getValue();
const done = editing.setValue(value, rowIndex, col);
if (editor) {
const value = editor.getValue();
const done = editor.setValue(value, rowIndex, col);
const oldValue = this.getCell(colIndex, rowIndex).content;
// update cell immediately
@ -424,7 +424,7 @@ export default class CellManager {
}
}
this.currentCellEditing = null;
this.currentCellEditor = null;
}
copyCellContents($cell1, $cell2) {
@ -467,8 +467,8 @@ export default class CellManager {
}
refreshCell(cell) {
const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = getCellContent(cell);
const $cell = $(this.cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
$cell.innerHTML = this.getCellContent(cell);
}
isStandardCell(colIndex) {
@ -477,7 +477,7 @@ export default class CellManager {
}
getCell$(colIndex, rowIndex) {
return $(cellSelector(colIndex, rowIndex), this.bodyScrollable);
return $(this.cellSelector(colIndex, rowIndex), this.bodyScrollable);
}
getAboveCell$($cell) {
@ -541,57 +541,57 @@ export default class CellManager {
getRowCountPerPage() {
return Math.ceil(this.instance.getViewportHeight() / this.getRowHeight());
}
}
export function getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
colIndex,
isHeader
});
return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
${getCellContent(cell)}
</td>
`;
}
export function getCellContent(cell) {
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
const resizable = isHeader && cell.resizable !== false;
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const hasDropdown = isHeader && cell.dropdown !== false;
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
return `
<div class="content ellipsis">
${(contentHTML)}
${sortIndicator}
${resizeColumn}
${dropdown}
</div>
${editCellHTML}
`;
}
export function getEditCellHTML() {
return `
<div class="edit-cell"></div>
`;
}
function cellSelector(colIndex, rowIndex) {
return `.data-table-col[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
getCellHTML(cell) {
const { rowIndex, colIndex, isHeader } = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
colIndex,
isHeader
});
return `
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
${this.getCellContent(cell)}
</td>
`;
}
getCellContent(cell) {
const { isHeader } = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? this.getEditCellHTML() : '';
const sortable = isHeader && cell.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
const resizable = isHeader && cell.resizable !== false;
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
const hasDropdown = isHeader && cell.dropdown !== false;
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
return `
<div class="content ellipsis">
${(contentHTML)}
${sortIndicator}
${resizeColumn}
${dropdown}
</div>
${editCellHTML}
`;
}
getEditCellHTML() {
return `
<div class="edit-cell"></div>
`;
}
cellSelector(colIndex, 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 Sortable from 'sortablejs';
import { getRowHTML } from './rowmanager';
import { getDefault } from './utils';
export default class ColumnManager {
@ -28,13 +27,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) {
// insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
} else {
// refresh dom state
const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) {
// deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
return;
}

2
src/defaults.js
View File

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

17
src/rowmanager.js
View File

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