init
This commit is contained in:
Rinjae
@@ -0,0 +1,561 @@
|
||||
|
||||
function defaultEditGrid(element, paramColumns, toolbarHtml, itemLevelColumnName, layoutData, screenMargin, flexColumns) {
|
||||
let jexcelInstance;
|
||||
let columns = paramColumns;
|
||||
let columnNames = [];
|
||||
for (let i = 0; i < paramColumns.length; i++) {
|
||||
columnNames[i] = paramColumns[i].name;
|
||||
}
|
||||
const itemLevelColumnIndex = columnNames.indexOf(itemLevelColumnName)
|
||||
|
||||
function stringToColour(stringInput, alpha) {
|
||||
let stringUniqueHash = [...stringInput].reduce((acc, char) => {
|
||||
return char.charCodeAt(0) + ((acc << 5) - acc);
|
||||
}, 0);
|
||||
return `hsla(${stringUniqueHash % 360}, 85%, 40%, ${alpha})`;
|
||||
}
|
||||
|
||||
var customUpdateTable = function(instance, cell, col, row, val, label, cellName) {
|
||||
if(col == 0 && val != null && val != ''){
|
||||
//cell.style.backgroundColor = '#f46e42';
|
||||
cell.style.textAlign = 'left';
|
||||
var rowData = jexcelInstance.getRowData(Number(row));
|
||||
if(rowData.length > 1){
|
||||
// const itemLenIndex = columnNames.indexOf('itemLevel');
|
||||
const depth = Number(rowData[itemLevelColumnIndex]);
|
||||
cell.style.textAlign = 'left';
|
||||
const padding = depth == 1 ? 5 : (depth*10);
|
||||
cell.style.paddingLeft = padding+'px';
|
||||
const colorVal = (padding*2)+'';
|
||||
const fromColor = stringToColour(colorVal, '20%');
|
||||
const toColor = stringToColour(colorVal, '60%');
|
||||
cell.style.background = `linear-gradient(to right, ${fromColor}, ${fromColor}, ${toColor}) no-repeat left`;
|
||||
cell.style.backgroundSize = (padding - 2) +'px 2px';
|
||||
}
|
||||
}else{
|
||||
const columnProp = columns[col];
|
||||
if (columnProp.align != null) {
|
||||
cell.style.textAlign = columnProp.align;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//JEXCEL 관련 함수 시작
|
||||
function getCellValue(columnName, rowNum){
|
||||
const index = columnNames.indexOf(columnName);
|
||||
//var cell = gridInstance.records[rowNum][index];
|
||||
//return cell.innerText;
|
||||
const cellId = String.fromCharCode(65+index) + rowNum;
|
||||
return jexcelInstance.getValue(cellId)
|
||||
}
|
||||
|
||||
const beforePaste = function (instance, data){
|
||||
console.log('beforePaste');
|
||||
|
||||
const selectedCell = jexcelInstance.selectedCell;
|
||||
const obj = jexcelInstance;
|
||||
|
||||
var ax = Number(selectedCell[0]),
|
||||
ay = Number(selectedCell[1]),
|
||||
bx = Number(selectedCell[2]),
|
||||
by = Number(selectedCell[3]);
|
||||
|
||||
// Paste filter
|
||||
var x = ax,
|
||||
y = ay,
|
||||
w = bx-x+1,
|
||||
h = by-y+1;
|
||||
|
||||
// change paste range if select is from right to left
|
||||
if (bx < ax){
|
||||
x = bx;
|
||||
w = ax-x+1;
|
||||
}
|
||||
// change paste range if select is from down to up
|
||||
if (by < ay){
|
||||
y = by;
|
||||
h = ay-y+1;
|
||||
}
|
||||
|
||||
// Controls
|
||||
var hash = obj.hash(data);
|
||||
var style = (hash == obj.hashString) ? obj.style : null;
|
||||
|
||||
// Depending on the behavior
|
||||
if (obj.options.copyCompatibility == true && hash == obj.hashString) {
|
||||
var data = obj.data;
|
||||
}
|
||||
|
||||
// Split new line
|
||||
var data = obj.parseCSV(data, "\t");
|
||||
|
||||
//modify data to allow wor extending paste range in multiples of input range
|
||||
if (w>1 & Number.isInteger(w/data[0].length )){
|
||||
style = null;
|
||||
repeats = w/data[0].length;
|
||||
|
||||
var arrayB = data.map(function(row,i){
|
||||
var arrayC = Array.apply(null, {length: repeats * row.length})
|
||||
.map(function(e,i){return row[i % row.length]});
|
||||
return arrayC
|
||||
});
|
||||
data = arrayB;
|
||||
|
||||
}
|
||||
if (h>1 & Number.isInteger(h/data.length )){
|
||||
style = null;
|
||||
var repeats = h/data.length;
|
||||
var arrayB = Array.apply(null, {length: repeats * data.length})
|
||||
.map(function(e,i){return data[i % data.length]});
|
||||
data = arrayB;
|
||||
}
|
||||
|
||||
if (x != null && y != null && data) {
|
||||
// Records
|
||||
var i = 0;
|
||||
var j = 0;
|
||||
var records = [];
|
||||
var newStyle = {};
|
||||
var oldStyle = {};
|
||||
var styleIndex = 0;
|
||||
|
||||
// Index
|
||||
var colIndex = parseInt(x);
|
||||
var rowIndex = parseInt(y);
|
||||
var row = null;
|
||||
|
||||
// Go through the columns to get the data
|
||||
while (row = data[j]) {
|
||||
i = 0;
|
||||
var colIndex = parseInt(x);
|
||||
|
||||
while (row[i] != null) {
|
||||
// Update and keep history
|
||||
var record = obj.updateCell(colIndex, rowIndex, row[i]);
|
||||
// Keep history
|
||||
records.push(record);
|
||||
// Style
|
||||
if (style) {
|
||||
var columnName = jexcel.getColumnNameFromId([colIndex, rowIndex]);
|
||||
newStyle[columnName] = style[styleIndex];
|
||||
oldStyle[columnName] = obj.getStyle(columnName);
|
||||
obj.records[rowIndex][colIndex].setAttribute('style', style[styleIndex]);
|
||||
styleIndex++
|
||||
}
|
||||
i++;
|
||||
if (row[i] != null) {
|
||||
if (colIndex >= obj.headers.length - 1) {
|
||||
obj.insertColumn();
|
||||
}
|
||||
colIndex = obj.right.get(colIndex, rowIndex);
|
||||
}
|
||||
}
|
||||
|
||||
j++;
|
||||
if (data[j]) {
|
||||
if (rowIndex >= obj.rows.length - 1) {
|
||||
obj.insertRow();
|
||||
}
|
||||
var rowIndex = obj.down.get(x, rowIndex);
|
||||
}
|
||||
}
|
||||
|
||||
// Select the new cells
|
||||
obj.updateSelectionFromCoords(x, y, colIndex, rowIndex);
|
||||
|
||||
// Update history
|
||||
obj.setHistory({
|
||||
action: 'setValue',
|
||||
records: records,
|
||||
selection: obj.selectedCell,
|
||||
newStyle: newStyle,
|
||||
oldStyle: oldStyle,
|
||||
});
|
||||
|
||||
// Update table
|
||||
obj.updateTable();
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
function moveSelectionRow(up){
|
||||
const selectedCell = jexcelInstance.selectedCell;
|
||||
|
||||
const correction = up ? -1 : 1 ;
|
||||
const selectionCorrection = up ? 0 : 2 ;
|
||||
|
||||
if(selectedCell != null) {
|
||||
const x1 = Number(selectedCell[0]) ;
|
||||
const y1 = Number(selectedCell[1]) ;
|
||||
const x2 = Number(selectedCell[2]);
|
||||
const y2 = Number(selectedCell[3]);
|
||||
if(up){
|
||||
if(y1 === 0)
|
||||
return;
|
||||
jexcelInstance.moveRow(y1 + correction, y2);
|
||||
}else{
|
||||
const rowSize = jexcelInstance.getData().length;
|
||||
if(y2 + 1 === rowSize)
|
||||
return;
|
||||
jexcelInstance.moveRow(y2 + correction, y1);
|
||||
}
|
||||
|
||||
const CODE_A = 65;
|
||||
const x1Code = String.fromCharCode(CODE_A+x1);
|
||||
const x2Code = String.fromCharCode(CODE_A+x2);
|
||||
const startCellCode = x1Code + (y1+selectionCorrection);
|
||||
const endCellCode = x2Code + (y2+selectionCorrection);
|
||||
|
||||
jexcelInstance.updateSelection(jexcelInstance.getCell(startCellCode), jexcelInstance.getCell(endCellCode));
|
||||
}
|
||||
}
|
||||
|
||||
function updateSelectedDepth(increse){
|
||||
const selectedCell = jexcelInstance.selectedCell;
|
||||
const depthColumn = itemLevelColumnIndex;
|
||||
|
||||
if(selectedCell != null) {
|
||||
const y1 = Number(selectedCell[1]);
|
||||
const y2 = Number(selectedCell[3]);
|
||||
const top = y1 < y2 ? y1 : y2;
|
||||
const gap = (y1 < y2 ? y2 - y1 : y1 - y2) + 1;
|
||||
|
||||
const values = [];
|
||||
for (let i = 0; i < gap; i++) {
|
||||
const cellNum = 'C'+(top+i+1);
|
||||
let value = Number(jexcelInstance.getValue(cellNum));
|
||||
value = increse ? value + 1 : (value === 1 ? 1 : value - 1);
|
||||
values[i] = String(value);
|
||||
}
|
||||
updateValues(top, depthColumn, values);
|
||||
}
|
||||
}
|
||||
|
||||
// function updateSelectedColumn(colIndex, value){
|
||||
// const selectedCell = jexcelInstance.selectedCell;
|
||||
// if(selectedCell != null) {
|
||||
// const y1 = Number(selectedCell[1]);
|
||||
// const y2 = Number(selectedCell[3]);
|
||||
// const top = y1 < y2 ? y1 : y2;
|
||||
// const gap = (y1 < y2 ? y2 - y1 : y1 - y2) + 1;
|
||||
//
|
||||
// const values = [];
|
||||
// for (let i = 0; i < gap; i++) {
|
||||
// values[i] = value;
|
||||
// }
|
||||
// updateValues(top, colIndex, values);
|
||||
// }
|
||||
// }
|
||||
|
||||
function updateValues(x, y, values){
|
||||
var records = [];
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
const rowIndex = x + i;
|
||||
// Update and keep history
|
||||
var record = jexcelInstance.updateCell(y, rowIndex, values[i]);
|
||||
// Keep history
|
||||
records.push(record);
|
||||
}
|
||||
|
||||
// Update history
|
||||
jexcelInstance.setHistory({
|
||||
action: 'setValue',
|
||||
records: records,
|
||||
selection: jexcelInstance.selectedCell,
|
||||
});
|
||||
|
||||
// Update table
|
||||
jexcelInstance.updateTable();
|
||||
}
|
||||
|
||||
function onTabKey(event){
|
||||
const selectedCell = jexcelInstance.selectedCell;
|
||||
const x = Number(selectedCell[0]) + 1;
|
||||
const y = Number(selectedCell[1]) + 1;
|
||||
const rowSize = jexcelInstance.getData().length;
|
||||
const colSize = columnNames.length;
|
||||
|
||||
if(x === colSize){
|
||||
if(y === rowSize){
|
||||
jexcelInstance.insertRow();
|
||||
}
|
||||
const cellNum = 'A'+(y+1);
|
||||
jexcelInstance.updateSelection(jexcelInstance.getCell(cellNum));
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
console.log(x+','+y+','+rowSize+','+colSize);
|
||||
}
|
||||
|
||||
function jexcelContextMenu (obj, x, y, e) {
|
||||
var items = [];
|
||||
|
||||
if (y == null) {
|
||||
// Insert a new column
|
||||
if (obj.options.allowInsertColumn == true) {
|
||||
items.push({
|
||||
title: obj.options.text.insertANewColumnBefore,
|
||||
onclick: function () {
|
||||
obj.insertColumn(1, parseInt(x), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (obj.options.allowInsertColumn == true) {
|
||||
items.push({
|
||||
title: obj.options.text.insertANewColumnAfter,
|
||||
onclick: function () {
|
||||
obj.insertColumn(1, parseInt(x), 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Delete a column
|
||||
if (obj.options.allowDeleteColumn == true) {
|
||||
items.push({
|
||||
title: obj.options.text.deleteSelectedColumns,
|
||||
onclick: function () {
|
||||
obj.deleteColumn(obj.getSelectedColumns().length ? undefined : parseInt(x));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Rename column
|
||||
if (obj.options.allowRenameColumn == true) {
|
||||
items.push({
|
||||
title: obj.options.text.renameThisColumn,
|
||||
onclick: function () {
|
||||
obj.setHeader(x);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sorting
|
||||
if (obj.options.columnSorting == true) {
|
||||
// Line
|
||||
items.push({type: 'line'});
|
||||
|
||||
items.push({
|
||||
title: obj.options.text.orderAscending,
|
||||
onclick: function () {
|
||||
obj.orderBy(x, 0);
|
||||
}
|
||||
});
|
||||
items.push({
|
||||
title: obj.options.text.orderDescending,
|
||||
onclick: function () {
|
||||
obj.orderBy(x, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Insert new row
|
||||
if (obj.options.allowInsertRow == true) {
|
||||
items.push({
|
||||
title: '행 삽입',
|
||||
onclick: function () {
|
||||
const selectedCell = obj.selectedCell;
|
||||
if (selectedCell == null) {
|
||||
obj.insertRow(1, parseInt(y), 1);
|
||||
} else {
|
||||
const y1 = Number(selectedCell[1]);
|
||||
const y2 = Number(selectedCell[3]);
|
||||
const top = y1 < y2 ? y1 : y2;
|
||||
const gap = (y1 < y2 ? y2 - y1 : y1 - y2) + 1;
|
||||
obj.insertRow(gap, top, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
items.push({
|
||||
title: 'Add Row',
|
||||
onclick: function () {
|
||||
const selectedCell = obj.selectedCell;
|
||||
if (selectedCell == null) {
|
||||
obj.insertRow(1, parseInt(y), 1);
|
||||
} else {
|
||||
const y1 = Number(selectedCell[1]);
|
||||
const y2 = Number(selectedCell[3]);
|
||||
const bottom = y1 > y2 ? y1 : y2;
|
||||
const gap = (y1 < y2 ? y2 - y1 : y1 - y2) + 1;
|
||||
obj.insertRow(gap, bottom);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (obj.options.allowDeleteRow == true) {
|
||||
items.push({
|
||||
title: 'Delete Row',
|
||||
onclick: function () {
|
||||
obj.deleteRow(obj.getSelectedRows().length ? undefined : parseInt(y));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
items.push({type: 'line'});
|
||||
|
||||
// Copy
|
||||
items.push({
|
||||
title: obj.options.text.copy,
|
||||
shortcut: 'Ctrl + C',
|
||||
onclick: function () {
|
||||
obj.copy();
|
||||
}
|
||||
});
|
||||
// Paste
|
||||
items.push({
|
||||
title: obj.options.text.paste,
|
||||
shortcut: 'Ctrl + V',
|
||||
onclick: function () {
|
||||
obj.paste();
|
||||
}
|
||||
});
|
||||
// Line
|
||||
items.push({type: 'line'});
|
||||
items.push({
|
||||
title: '깊이',
|
||||
submenu: [
|
||||
{
|
||||
title: '깊이증가',
|
||||
shortcut: 'Alt + →',
|
||||
onclick: function () {
|
||||
updateSelectedDepth(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '깊이감소',
|
||||
shortcut: 'Alt + ←',
|
||||
onclick: function () {
|
||||
updateSelectedDepth(false);
|
||||
}
|
||||
},
|
||||
]
|
||||
});
|
||||
items.push({
|
||||
title: '행 이동',
|
||||
submenu: [
|
||||
{
|
||||
title: '위로이동',
|
||||
shortcut: 'Alt + ↑',
|
||||
onclick: function () {
|
||||
moveSelectionRow(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '아래로이동',
|
||||
shortcut: 'Alt + ↓',
|
||||
onclick: function () {
|
||||
moveSelectionRow(false);
|
||||
}
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function createEditGrid(element, columns, toolbarHtml, layoutData) {
|
||||
|
||||
jexcelInstance = jexcel(element.get(0), {
|
||||
data: [[]],
|
||||
columns: columns,
|
||||
rowResize: false,
|
||||
rowDrag: true,
|
||||
columnResize: false,
|
||||
columnDrag: false,
|
||||
columnSorting: false,
|
||||
autoIncrement: false,
|
||||
allowInsertColumn: false,
|
||||
allowInsertOnTab: true,
|
||||
tableOverflow: true,
|
||||
allowManualInsertRow: false,
|
||||
tableHeight: 2500,
|
||||
onbeforepaste: beforePaste,
|
||||
allowDeletingAllRows: true,
|
||||
updateTable: customUpdateTable,
|
||||
contextMenu: jexcelContextMenu
|
||||
});
|
||||
|
||||
const superSetHistory = jexcelInstance.setHistory;
|
||||
jexcelInstance.setHistory = function(changes){
|
||||
if("setWidth" === changes.action){
|
||||
return ;
|
||||
}
|
||||
superSetHistory(changes);
|
||||
};
|
||||
|
||||
element.on("keydown", function (e) {
|
||||
if (e.altKey) {
|
||||
if (e.keyCode == 39) {
|
||||
updateSelectedDepth(true);
|
||||
return false;
|
||||
}
|
||||
if (e.keyCode == 37) {
|
||||
updateSelectedDepth(false);
|
||||
return false;
|
||||
}
|
||||
if (e.keyCode == 38) {
|
||||
moveSelectionRow(true);
|
||||
return false;
|
||||
}
|
||||
if (e.keyCode == 40) {
|
||||
moveSelectionRow(false);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (!e.shiftKey && e.keyCode == 9) {
|
||||
onTabKey(e);
|
||||
}
|
||||
});
|
||||
|
||||
if(toolbarHtml != null && toolbarHtml != ''){
|
||||
element.children().first().before(toolbarHtml);
|
||||
}
|
||||
const gridInstanceData = [[]];
|
||||
for (let i = 0; i < layoutData.length; i++) {
|
||||
const row = layoutData[i];
|
||||
gridInstanceData[i] = row;
|
||||
}
|
||||
jexcelInstance.setData(gridInstanceData);
|
||||
resizeGridInstance();
|
||||
|
||||
return jexcelInstance;
|
||||
}
|
||||
|
||||
let resizing = false;
|
||||
|
||||
function resizeGridInstance(){
|
||||
let screenGap = screenMargin == null ? 113 : screenMargin;
|
||||
var screenWidth = $(window).width() - screenGap;
|
||||
var columnWidth = 0;
|
||||
columns.forEach( function (element){
|
||||
columnWidth += element.width;
|
||||
} );
|
||||
var gap = screenWidth - columnWidth;
|
||||
if(flexColumns == null) {
|
||||
var halfGap = gap / 2;
|
||||
jexcelInstance.setWidth(0, Number(columns[0].width) + halfGap);
|
||||
jexcelInstance.setWidth(1, Number(columns[1].width) + halfGap);
|
||||
}else{
|
||||
const cnt = flexColumns.length
|
||||
const columnGap = gap / cnt;
|
||||
for (let flexColumn of flexColumns) {
|
||||
const index = columnNames.indexOf(flexColumn);
|
||||
jexcelInstance.setWidth(index, Number(columns[index].width) + columnGap);
|
||||
}
|
||||
}
|
||||
resizing = false;
|
||||
}
|
||||
|
||||
$( window ).resize( function() {
|
||||
if(!resizing){
|
||||
resizing = true;
|
||||
setTimeout(resizeGridInstance, 10);
|
||||
}
|
||||
})
|
||||
|
||||
return createEditGrid(element, paramColumns, toolbarHtml, layoutData);
|
||||
}
|
||||
Reference in New Issue
Block a user