使用electron写一个表格
时间: 2024-05-10 18:20:13 浏览: 229
由于electron是基于web技术的桌面应用开发框架,因此可以使用HTML/CSS/JavaScript来构建表格。
以下是一个简单的示例,使用了jQuery和Bootstrap库:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js"></script>
</body>
</html>
```
JavaScript:
```
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
```
这个示例使用了Bootstrap的表格样式,通过jQuery动态生成表格内容。可以根据具体需求修改HTML/CSS/JavaScript代码来实现更加复杂的表格功能。
阅读全文