<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>x-data-spreadsheet电子表格</title>
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js"></script>
<style type="text/css">
.uni-flex {
display: flex;
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
.menu-item {
width: 200px;
}
.border-gray {
border: solid 1px #DEDEDE;
}
</style>
</head>
<body>
<div class="uni-flex">
<div class="menu-item">
<ul>
<li draggable="true" id='name'><span>【姓名】</span></li>
</ul>
</div>
<div class="uni-flex-item border-gray" id="x-spreadsheet-demo"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (evtAll) => {
x_spreadsheet.locale('zh-cn');
const xs = new x_spreadsheet("#x-spreadsheet-demo", {
mode: 'edit', // edit | read
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
height: () => document.documentElement.clientHeight,
width: () => document.documentElement.clientWidth - 200,
},
row: {
len: 100,
height: 25,
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
strike: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false,
},
},
})
.loadData({}) // load data
.change(data => {
// save data to db
});
// data validation
xs.validate();
// 测试xs的方法
setTimeout(() => {
console.log('xs.data:', xs.sheet.data.getCellRectByXY(550, 310));
}, 2000);
function onSelected(event) {
// event.target.style = 'background-color: blue';
console.log('xxx')
}
document.getElementById('name').addEventListener('click', onSelected, false);
/**
* 拖拽开始
* @param {DragEvent} event事件对象
*
*/
function onDragStart(event) {
if(!event.target || !event.dataTransfer) {
return;
}
let text = event.target.innerText;
let children = event.target.children[0].innerText;
console.log('from text:', text, 'children:', children);
// 传送的数据
event.dataTransfer.setData('key', 'name');
// 传送的数据
event.dataTransfer.setData('value', text);
}
document.getElementById('name').addEventListener('dragstart', onDragStart, false);
// 拖动事件
function onDragOver(event) {
event.stopPropagation();
event.preventDefault();
}
// 松开拖放
function onDrop(event) {
event.stopPropagation();
event.preventDefault();
const target = event.currentTarget;
if(!target || !event.dataTransfer) {
return;
}
let key = event.dataTransfer.getData('key');
let value = event.dataTransfer.getData('value');
// 目标位置
var targetPosition = getTargetPosition(event);
/**
* 通过鼠标目标位置的x、y坐标，获取所在的行下表、列下标
* ri 行下标
* ci 列下标
*/
const { ri, ci } = xs.sheet.data.getCellRectByXY(targetPosition.x, targetPosition.y);
xs.cellText(ri, ci, `${key}:${value}`).reRender();
}
// 监听事件
document.getElementById('x-spreadsheet-demo').addEventListener('dragover', onDragOver, false);
document.getElementById('x-spreadsheet-demo').addEventListener('drop', onDrop, false);
// 获取拖拽松开鼠标时，目标位置的x、y坐标
function getTargetPosition(event) {
const canvas = document.querySelector('.x-spreadsheet-table');
const x = event.pageX - canvas.getBoundingClientRect().left;
const y = event.pageY - canvas.getBoundingClientRect().top;
return { x: x, y: y };
}
});
</script>
</body>
</html>
400 186 1886
