Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
文档地址：https://dream-num.github.io/LuckysheetDocs/zh/
做一个页面编辑然后保存进数据库。另一个页面把前一个页面的内容展示出来。第一个页面，
<!DOCTYPE html>
<html>
<head lang='zh'>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
<title>Luckysheet</title>
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<!-- rollup luckysheet.js -->
<script src="./luckysheet.umd.js"></script>
</head>
<body>
<!-- Non-full screen test -->
<!-- <div style="position: relative;width: 100%;height: 100%;">
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
</div> -->
<button onclick="myFunction()">保存</button>
<div id="luckysheet" style="margin:100px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
</div>
<!-- demo feature, non-production use -->
<script>
function myFunction() {
var data2 = luckysheet.getAllSheets();
var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt });
}
$(function () {
// According to the browser language
//var options = {
// container: 'luckysheet' //luckysheet为容器id
//}
//luckysheet.create(options);
var options = {
container: 'luckysheet', //luckysheet为容器id
title: "在线excel", // 设定表格名称
lang: 'zh', // 设定表格语言
}
luckysheet.create(options);
})
</script>
<style>
/* 自定义loading演示样式 */
@keyframes loading-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.loadingAnimation {
width: 3em;
height: 3em;
animation: loading-rotate 2s linear infinite;
}
.loadingAnimation circle {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: currentColor;
stroke-linecap: round;
}
</style>
</body>
</html>
function myFunction() {
var data2 = luckysheet.getAllSheets();
var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt });
}
这段，是把整个excel的 数据全部以json 的方式post一个aspx页面，在这个aspx页面，保存进数据库。
第二个页面：
<!DOCTYPE html>
<html>
<head lang='zh'>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
<title>Luckysheet</title>
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<!-- rollup luckysheet.js -->
<script src="./luckysheet.umd.js"></script>
</head>
<body>
<!-- Non-full screen test -->
<!-- <div style="position: relative;width: 100%;height: 100%;">
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
</div> -->
<button onclick="myFunction()">点我</button>
<div id="luckysheet" style="margin:100px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
</div>
<!-- demo feature, non-production use -->
<script>
function myFunction() {
var data2 = luckysheet.getAllSheets();
var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt });
}
$(function () {
// According to the browser language
//var options = {
// container: 'luckysheet' //luckysheet为容器id
// load
//}
// https://localhost:7048/api/1
//luckysheet.create(options);
var options = {
container: 'luckysheet', //luckysheet为容器id
title: "在线excel", // 设定表格名称
lang: 'zh', // 设定表格语言
gridKey: "excel001",
/* data: eval(returnValue.result),*/
loadUrl: "http://***.***.***.***:9091/api/1"
}
luckysheet.create(options);
})
</script>
<style>
/* 自定义loading演示样式 */
@keyframes loading-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.loadingAnimation {
width: 3em;
height: 3em;
animation: loading-rotate 2s linear infinite;
}
.loadingAnimation circle {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: currentColor;
stroke-linecap: round;
}
</style>
</body>
</html>
黄色这段js，loadUrl: "http://***.***.***.***:9091/api/1" loadUrl 是post方法，获取api 的 json数据，这个json就是上个页面存进数据库的。
using MyWebApp.dapper;
using System.Data;
using System.Security.Claims;
namespace MyWebApp
{
public class MyEndpoint1 : EndpointWithoutRequest
{
public override void Configure()
{
Post("/api/1");
AllowAnonymous();
Options(x => x.RequireCors(p => p.AllowAnyOrigin()));
}
public override Task HandleAsync(CancellationToken t)
{
string sql = AppConfig.sqlserver;
string sqlstr = " select top 1 * from LuckySheetJson order by create_time desc";
DapperUtility dapper = new DapperUtility();
List<m_LuckySheetJson> list=dapper.QuerySQL<m_LuckySheetJson>(sqlstr);
m_LuckySheetJson item = list[0];
string LuckySheetJson = item.LuckySheetJson;
return SendAsync(LuckySheetJson);
}
}
}
我这里尝试用了一下FastEndpoints，感觉还不错。FastEndpoints 是一个基于 .NET 6 开发的开源 webapi 框架，它可以很好地替代 .NET Minimal APIs 和 MVC ，专门为开发效率而生，带来了全新的开发模式和编码体验。
标签：cnt,loading,入门,excel,stroke,LuckySheet,luckysheet,var,rotate From： https://www.cnblogs.com/jiqingsishenet/p/17379601.html