需求
Luckysheet支持使用CDN加載，那么我們如何采用這種方式引入呢？
步驟
基本上根據官方文檔就可以寫出來
第一步
引入依賴
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/luckysheet.umd.js"></script>
第二步
初始化表格
<script type="text/javascript">
$(function () {
luckysheet.create({
container: 'luckysheet',
showinfobar:false,
});
});
</script>
這樣就大功告成了！
源碼
這里展示一個完整的源碼，可以全部復制下來，然后保存到一個.html文件中，直接雙擊這個html文件在瀏覽器打開即可看到效果。
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.2/dist/luckysheet.umd.js"></script>
<script type="text/javascript">
$(function () {
luckysheet.create({
container: 'luckysheet',
showinfobar:false,
});
});
</script>
<body>
<div class="w3-container">
<h2>Tabs</h2>
<p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button" onclick="openCity('London')">Luckysheet</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
<div id="London" class="w3-container city" style="position: absolute;width: 100%;top:145px;bottom: 0px;left:0px">
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</div>
<div id="Paris" class="w3-container city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="w3-container city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
</script>
</body>
</html>
拓展
更多在Vue和React中使用請參考：