Rinjae
561 lines
19 KiB
JavaScript
561 lines
19 KiB
JavaScript
|
|
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);
|
|
} |