jsheet-plus
Version:
Jspreadsheet-plus is an enhanced lightweight, vanilla javascript plugin to create amazing web-based interactive data grids with spreadsheet like controls compatible with Excel, Google Spreadsheets and any other spreadsheet software.
140 lines (130 loc) • 5.3 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selection Border Demo</title>
<link rel="stylesheet" href="dist/jspreadsheet.css" />
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.demo-container {
margin: 20px 0;
}
h2 {
color: #333;
}
.info {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>JSpreadsheet Plus - 选择边框演示</h1>
<div class="info">
<p><strong>功能说明：</strong></p>
<ul>
<li>当您选择一个或多个单元格时，会出现蓝色边框显示选择区域</li>
<li>边框会动态调整位置和大小以适应所选区域</li>
<li>边框包含透明背景色，使选择更加明显</li>
<li><strong>滚动保持：</strong>滚动表格时，边框会保持显示并自动调整位置</li>
<li><strong>失去焦点保持：</strong>启用 keepSelectionOnBlur 时，失去焦点后边框变为淡色但仍然保持显示</li>
<li><strong>重新获得焦点：</strong>重新点击表格时，边框会恢复为活跃状态（蓝色）</li>
</ul>
<p><strong>测试方法：</strong></p>
<ol>
<li>选择一些单元格，观察蓝色边框</li>
<li>滚动表格，边框应该保持显示</li>
<li>点击表格外部区域，边框变为淡灰色</li>
<li>重新点击表格，边框恢复蓝色</li>
</ol>
</div>
<div class="demo-container">
<h2>基础演示</h2>
<div id="spreadsheet1"></div>
</div>
<div class="demo-container">
<h2>带有更多数据的演示</h2>
<div id="spreadsheet2"></div>
</div>
<script src="dist/jspreadsheet.js"></script>
<script>
// 基础演示
const data1 = [
['苹果', 100, 2.5, 250],
['香蕉', 150, 1.8, 270],
['橙子', 80, 3.2, 256],
['梨', 120, 2.1, 252],
['葡萄', 200, 4.5, 900]
];
const spreadsheet1 = jspreadsheet(document.getElementById('spreadsheet1'), {
keepSelectionOnBlur: true, // 启用失去焦点时保持选择
worksheets: [{
data: data1,
columns: [
{ type: 'text', title: '产品', width: 120 },
{ type: 'numeric', title: '数量', width: 100 },
{ type: 'numeric', title: '单价', width: 100 },
{ type: 'numeric', title: '总计', width: 120 }
],
allowInsertRow: true,
allowDeleteRow: true,
allowInsertColumn: true,
allowDeleteColumn: true,
columnSorting: true,
tableHeight: '300px',
tableWidth: '600px',
worksheetName: 'Sheet1'
}]
});
// 带有更多数据的演示
const data2 = [];
for (let i = 0; i < 20; i++) {
data2.push([
`产品 ${i+1}`,
Math.floor(Math.random() * 200) + 50,
(Math.random() * 5 + 1).toFixed(2),
Math.floor(Math.random() * 1000) + 100,
i % 2 === 0 ? '是' : '否',
['A', 'B', 'C'][i % 3]
]);
}
const spreadsheet2 = jspreadsheet(document.getElementById('spreadsheet2'), {
keepSelectionOnBlur: true, // 启用失去焦点时保持选择
worksheets: [{
data: data2,
columns: [
{ type: 'text', title: '产品名称', width: 120 },
{ type: 'numeric', title: '库存数量', width: 100 },
{ type: 'numeric', title: '单价 (¥)', width: 100 },
{ type: 'numeric', title: '总价值', width: 120 },
{ type: 'checkbox', title: '有库存', width: 80 },
{ type: 'dropdown', title: '类别', width: 100, source: ['A', 'B', 'C'] }
],
allowInsertRow: true,
allowDeleteRow: true,
allowInsertColumn: true,
allowDeleteColumn: true,
columnSorting: true,
tableHeight: '400px',
tableWidth: '800px',
pagination: 10,
search: true,
worksheetName: 'Sheet1'
}]
});
// 添加事件监听器来显示选择信息
spreadsheet1[0].onselection = function(instance, x1, y1, x2, y2) {
console.log('选择区域:', { x1, y1, x2, y2 });
};
spreadsheet2[0].onselection = function(instance, x1, y1, x2, y2) {
console.log('选择区域:', { x1, y1, x2, y2 });
};
</script>
</body>
</html>