整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、在線表格編輯器——TablesGenerator
表格制作工具TablesGenerator是一個在線制作 LaTeX、HTML、Markdown 格式的表格代碼工具，支持在表格中填充數據，修改字體/背景顏色，對齊方式等等，還支持從 Excel、Google Docs 里直接復制粘貼數據，以及多個 HTML 表格樣式。Tables Generator 支持四種格式:LaTeX、HTML、Markdown、TEXT，先在 Table > Set size 中設置表格大小，然后填充數據，設置格式，就能在頁面下面找到代碼了。
2、在線表格編輯器——思邁特軟件Smartbi
其以“真Excel”操作的特色，擁有了其它報表軟件望塵莫及的功能特色。只要在Excel端安裝Smartbi報表工具插件，用戶就可以直接在Excel中設計報表格式或進行數據分析。Smartbi表格制作工具巧妙利用Excel自身的表格、圖形、函數的能力，就能夠實現各種BI應用，還可將報表一鍵發布到Web/APP端進行瀏覽，且軟件內置多種免費的表格模板可供使用。
針對類似模板固定的Word/PPT分析報告，Smartbi利用Office分析報告插件，將報告模板中的數據元素數據（單數字、表格、圖形）從“靜態”變成“動態”，每當需要使用時，數據分析師可以像刷新報表一樣刷新這些分析報告，按照所輸入的參數對報告數據進行解讀、討論、建議，從而將更多時間用在“分析”上。
3、在線表格編輯器——FCKeditor 編輯器
FCKeditor 是一款開源的所見所得網頁文本編輯器，可通過CKeditor設置表格，在表格中定義表單元素，主要支持文本框、復選框、單選框、單行文本、多行文本、列表、按鈕、圖片、隱藏域。
4、在線表格編輯器——Ueditor Formdesign Plugins Web表單設計器
Ueditor Formdesign 是開源免費的表單設計器，可應用于工作流管理系統、OA等，是一款可視化的Web表單構建器，HTML元素組件較豐富，主要包含：文本框、多行文本、下拉菜單、單選框、復選框、宏控件、進度條等，并可以生成二維碼。
5、在線表格編輯器——SpreadJS
SpreadJS 在線Excel表格編輯器，是類似在線Excel功能和外觀的在線表格編輯程序，也是 SpreadJS 桌面設計器的在線版本，提供源代碼，可自由定制，任意擴展。該產品內嵌了SpreadJS，使用離線和在線方式均可進行表格編輯。
現在web技術蓬勃發展，辦公應用特別是excel都搬到了線上，比較流行的有騰訊文檔，金山文檔，石墨文檔，google doc，這些都屬于企業服務。但是小型企業或者團隊，如果想自己搭建一套在線表格系統呢？有沒有開源的方案？
當然是有的，一些表格具有相對簡單的功能，只能顯示數據和過濾器功能，或者某些表格支持多種單元格樣式，但是此類功能需要付費。比較出名有spreadjs，handsontable，這兩個插件有明顯的缺點，spreadjs增值功能收費太貴，handsontable二次開發坑很多。
Luckysheet ，是一款國產的純JS實現的類似excel的在線表格，功能強大、配置簡單、完全開源。
Luckysheet是用純JavaScript編寫的前端表格庫，可以嵌入到任何前端項目或應用程序中，增強原有的系統功能，而無需使用excel或其他復雜的軟件進行數據處理。
這使我們的數據處理、分析、顯示和存儲可以由一個系統完成，而無需切換平臺，不切換系統，便于集成和完全自動化。
“我們決心制作一個功能最豐富，配置和使用最簡單的開源電子表格-Luckysheet，為企業報表平臺和數據分析平臺提供支持，并建立一個數據分析社區。具體來說，我們提供了一個類似于excel的在線編輯表格，其中包含單元格樣式，公式，過濾，凍結和其他功能。我們基本支持excel的常用功能，數據分析，顯示和編輯的需求。” —Luckysheet作者
Luckysheet ，是一款國產的純JS實現的類似excel的在線表格，功能強大、配置簡單、完全開源。
開源地址：https://gitee.com/mengshukeji/Luckysheet
在線文檔：https://mengshukeji.github.io/LuckysheetDocs/zh/guide
在線演示：https://mengshukeji.gitee.io/luckysheetdemo
要使用LuckySheet，有2種方式，可以從官網下載JS，然后引入本地頁面，也可以引入CDN。
<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>
<script src="./luckysheet.umd.js"></script><div id="luckysheet"></div><script>
$(function () {
//配置項
var options = {
container: 'luckysheet' //luckysheet為容器id
}
luckysheet.create(options)
})
</script>這樣，一個在線Excel就完成了。LuckySheet只提供前端的操作，數據保存要由開發人員自己實現。
數據保存分為兩種，一種是：實時保存，一種是“全部保存”。實時保存比較復雜，現在介紹一種簡單的全部保存方法。
LuckySheet提供了一個 luckysheet.getAllSheets() 方法，調用此方法，Luckysheet系統會把所有數據一股腦的傳遞給你，
你可以再頁面的OnClick的保存事件里保存這些數據，然后利用Jquery的Post方法，接收數據寫入數據庫。
下面代碼演示了把Luckysheet POST到 xls.aspx 頁面
function save() {
var data2 = luckysheet.getAllSheets();
var cnt = JSON.stringify(data2);
$.post("xls.aspx", {
cnt: cnt
});
}在 xls.aspx頁面，利用 Request[“cnt”] 就可以獲取所有數據，然后保存到數據庫。
LuckySheet提供了loadUrl屬性，當前端初始化完畢后，luckysheet會調用此屬性加載初始化數據。所以，利用此屬性，可以還原數據庫里保存的數據。
var options = {
container: 'luckysheet',
lang: 'zh',
showinfobar: false,
row: 20,
column: 15,
plugins: ['chart'],
showstatisticBar: false,
loadUrl: 'data.aspx?id=11', //還原數據URL
showsheetbar: false,
showsheetbarConfig: {
add: false,
menu: false,
}（1） Luckysheet允許在本地加載Luckysheet需要的JS,CSS等，但是這些JS、CSS比較大，為此，可以利用link的prefetch預加載CSS,JS。
<link rel="prefetch" href="../javascript/luckysheet/plugins/css/pluginsCss.css" />
<link rel="prefetch" href="../javascript/luckysheet/plugins/plugins.css" />
<link rel="prefetch" href="../javascript/luckysheet/css/luckysheet.css" />
<link rel="prefetch" href="../javascript/luckysheet/assets/iconfont/iconfont.css" />
<link rel="prefetch" href="../javascript/luckysheet/plugins/js/plugin.js" />
<link rel="prefetch" href="../javascript/luckysheet/luckysheet.umd.js" />（2）Luckysheet在插入圖片時，圖片會議Base64格式存儲，所以，最終保存的數據可能非常大。
（3）需要理解Excel的一些簡單概念：一個Excel是由多個Sheet組成，而一個Sheet是由多個Cell組成，而每個單元格都會包括 r，c，v（r:單元格的行 row、c：單元格的列 column、 v：單元格的值 value），在使用實時保存時， 二維數組數據轉化成 {r, c, v}格式 一維數組。實時保存數據量小，但是比較復雜。
LuckySheet提供了一個LuckyExcel，他支持Excel的導入和導出。
演示：https://mengshukeji.gitee.io/luckyexceldemo
Luckysheet可以使用Echart生成圖表組件（餅形圖，柱狀圖，曲線圖等）。
.表格的制作
1、表格元素–<table>
表格中的行–<tr>
表格中的列–<td>
表格中的表頭–【居中/加粗】
table標記的邊框–border
table標記的寬度–width
table標記的高度–height
table標記的水平對齊方式–align
table標記的表格背景色–bgcolor
table標記的表格邊框色–bordercolor
table標記的表格中的內容與邊框之間的距離–cellpadding
table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】
tr標記的align屬性–設置當前行的水平對齊方式
tr標記的bgcolor屬性–設置當前行的背景色
tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】
td標記的align屬性–設置當前列的水平對齊方式
td標記的bgcolor屬性–設置當前列的背景色
td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】
合并單元格
水平方向合并單元格–跨列—colspan
以下是計算器的控制面板代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算器的控制面板</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"
align="center" bgcolor="aliceblue">
<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>
<tr align="center">
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr align="center">
<td><-</td>
<td>CE</td>
<td>C</td>
<td>+/-</td>
<td>√</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan="2" bgcolor="yellow">=
</td>
</tr>
<tr align="center">
<td colspan="2">0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
看成品:
2. 列表元素
2.1 有序列表
ol—有序列表
li—列表中的每一項【條目】
默認的標志是有順序的數字
我們可以通過ol的type屬性來修改標志
1–有順序的數字
a–有順序的小寫字母
A–有順序的大寫字母
i–有順序的小寫羅馬數字
I–有順序的大寫羅馬數字
start屬性設置書順序的開始值
2.2 無序列表
ul—無序列表
li—列表中的每一項【條目】
默認的標志是實心點
我們可以通過ul的type屬性來修改標志
circle–圓形【?！?/p>
disc----實心點[默認]
square–正方形
none–沒有標志
2.3 自定義列表
dl—自定義列表
dt—自定義列表的頭
dd—子項目
以下是有序，無序，和自定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="none">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
</dl>
</body>
</html>
3. 表單<form>
主要負責采集信息的，可以將采集的信息提交。
form的屬性
action—指定表單數據的后端處理程序
method----指定表單數據的提交方式【get[默認]/post】
get提交數據會將被處理的數據跟隨在請求地址之后
被提交的數據255個字符
https://www.baidu.com/s?&wd=html
post提交數據會將被處理的數據封裝到http協議的頭
https://www.baidu.com/s
被提交的數據沒有限制
通常情況下提交文件只能用post
enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" align="center" cellpadding="20px" cellspacing="0">
<tr>
<td>application/x-www-form-urlencoded</td>
<td>在發送前對所有字符進行編碼（默認）。</td>
</tr>
<tr>
<td>multipart/form-data</td>
<td>不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。
</td>
</tr>
<tr>
<td>text/plain</td>
<td>將空格轉換為 "+" 符號，但不編碼特殊字符。</td>
</tr>
</table>
</body>
</html>
表單元素
input 文本框/密碼框/單選按鈕/復選框…
seletc 下拉列表
textarea 文本域—富文本編輯器
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
