jExcel是一個輕量級的原生javascript插件,用于創建與Excel或任何其他電子表格軟件兼容的基于Web的交互式表格和電子表格。可以從JS數組,JSON,CSV或XSLX文件創建在線電子表格表。可以從excel復制并直接粘貼到jExcel電子表格,反之亦然。集成任何第三方javascript插件非常容易,可以創建自己的自定義列,自定義編輯器,并在應用程序中自定義任何功能。jExcel通過其原生列類型提供了大量不同的輸入選項,以涵蓋最常見的基于Web的應用程序需求。它是Web數據管理的完整解決方案。使用jExcel javascript電子表格創建出色的應用程序。
https://github.com/paulhodel/jexcel
npm install jexcel
將javascript電子表格集成到站中,創建您的第一個在線電子表格的基本示例:
1、首先引入相關js和css文件
<script src="./jexcel/v3/jexcel.js"></script> <script src="./jsuites/v2/jsuites.js"></script> <link rel="stylesheet" href="./jsuites/v2/jsuites.css" type="text/css" /> <link rel="stylesheet" href="./jexcel/v3/jexcel.css" type="text/css" />
2、定義一個基于div的容器并編寫js
<div id="mytable"></div> <script> data = [ ["蘋果", 0, 1], ["草莓", 1, 2], ["西瓜", 2, 3] ]; jexcel(document.getElementById("mytable"), { data: data, colWidths: [300, 80, 100] }); </script>
3、打開瀏覽器查看效果
就這么幾句簡單的代碼就像打開了一個無限簡化的Excel一般
Github上提供了相關Demo,我們一起來看一看都有哪些
jexcel(document.getElementById('spreadsheet'), { csv:'https://bossanova.uk/jexcel/v3/demo.csv', csvHeaders:true, search:true, pagination:10, columns: [ { type:'text', width:300 }, { type:'text', width:200 }, { type:'text', width:100 }, { type:'text', width:100 }, { type:'text', width:100 }, ] });
var data = [ ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'], ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type: 'text', title:'Car', width:120 }, { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] }, { type: 'calendar', title:'Available', width:200 }, { type: 'image', title:'Photo', width:120 }, { type: 'checkbox', title:'Stock', width:80 }, { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' }, { type: 'color', width:100, render:'square', } ] });
var data = [ ['US', 'Wholemeal', 'Yes', '2019-02-12'], ['CA;US;UK', 'Breakfast Cereals', 'Yes', '2019-03-01'], ['CA;BR', 'Grains', 'No', '2018-11-10'], ['BR', 'Pasta', 'Yes', '2019-01-12'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'dropdown', width:'300', title:'Product Origin', url:'/jexcel/countries', autocomplete:true, multiple:true }, { type:'text', width:'200', title:'Description' }, { type:'dropdown', width:'100', title:'Stock', source:['No','Yes'] }, { type:'calendar', width:'100', title:'Best before' }, ] });
var data = [ ['Flag Fen', 'South East', '2019-01-01'], ['Bristol Aero Collection (BAC)','South West','2019-04-03'], ['Experience Barnsley', 'North','2018-12-03'], ['Cinema Museum', 'London',''], ['University of Hertfordshire Art Collection', 'South East',''], ['LUX London', 'London','2016-11-03'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'text', title:'Museum', width:'300', }, { type:'dropdown', title:'Region', source:['South East','South West','North','London'], width:'200', }, { type:'calendar', title:'Last visit', options: { format:'DD/MM/YYYY' }, width:'100', }, ] });
jexcel(document.getElementById('spreadsheet'), { data:data, columns: [ { type:'text', width:300, title:'Title' }, { type:'image', width:120, title:'Cover' }, ] });
插入,移除和移動列和行,這塊就是表格的相關操作了,都可以通過相關API實現
jExcel電子表格使用指令nestedHeadrs本機實現嵌套頭文件,如下面的示例所示。
導出非常簡單,就調用一個方法
mySpreadsheet = jexcel(document.getElementById('spreadsheet1'), { csv:'https://bossanova.uk/jexcel/v3/demo.csv', csvHeaders:true, columns: [ { type:'text', width:70 }, { type:'text', width:200 }, { type:'text', width:300 }, ] }); document.getElementById('download').onclick = function () { mySpreadsheet.download(); }
由于相關示例比較豐富,包括合并單元格、懶加載等豐富的功能等再此就不在展示,已經對它感興趣的小伙伴不妨直接去體驗下,就能感受到它的強悍了!并且還提供了包括React、Vue、jQuery等在內的相關實現,這樣你就可以更好的集成到你的相關項目中去了,非常的人性化!
jExcel是一個非常簡單而且功能豐富的Web端JavaScript電子表格,就和名字一樣,就如同是Web端的Excel,相當于是Excel的表格模塊,無論是處理數據還是用戶操作比普通的HTML表格強上無數倍,相信已經有小伙伴想去嘗試一番了,趕緊試試吧!希望對你有所幫助!
挑戰30天在頭條寫日記#
HTML是一種用于創建網頁結構和內容的標記語言,其中包含了許多標簽,可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法,并通過示例展示如何創建表格。
1. <tr>標簽的作用: <tr>標簽代表HTML表格中的一行(行數據),它可以包含一個或多個<td>元素作為單元格。
2. <td>標簽的作用: <td>標簽用于定義表格中的一個單元格(列數據),可以包含文本、圖像、鏈接等內容。
3. 如何使用<tr>和<td>: 在使用<tr>和<td>標簽時,首先需要創建一個<table>元素作為表格的容器,然后在其中嵌套<tr>和<td>標簽,如下所示:
htmlCopy code<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
4. 表格樣式: 可以使用CSS來為表格添加樣式,如設置邊框、背景顏色等。以下是一個簡單的示例:
htmlCopy code<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
5. 示例應用: 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>城市</td>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
6. 書籍參考:
7. 總結: 通過本文的介紹,我們了解了HTML中<tr>和<td>標簽的基本用法,以及如何創建簡單的表格和添加樣式。使用這些標簽,我們可以輕松地創建具有結構和內容的網頁表格,提升頁面的可讀性和可視性。
文由ScriptEcho平臺提供技術支持
項目地址:傳送門
在數據分析和可視化領域,經常需要以表格的形式展示數據。Plotly.js 是一款功能強大的 JavaScript 庫,不僅可以創建交互式圖表,還可以動態生成 HTML 表格。
本代碼使用 Plotly.js 創建了一個動態 HTML 表格,可以顯示多行多列數據。表格具有以下特點:
import Plotly from 'plotly.js-dist'
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]
values 數組包含了表格的數據,其中第一行是表頭,其余行是數據行。
var headerColor = "grey";
var rowEvenColor = "lightgrey";
var rowOddColor = "white";
這些變量用于定義表頭和單元格的樣式,包括顏色和填充顏色。
var data = [{
type: 'table',
header: {
values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: headerColor},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: "center",
line: {color: "black", width: 1},
fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
rowEvenColor,rowOddColor]]},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]
data 對象定義了表格的結構和樣式。header 對象定義了表頭,cells 對象定義了單元格。
Plotly.newPlot('myDiv', data);
Plotly.newPlot() 函數將表格繪制到指定容器中,在本例中容器的 ID 為 myDiv。
開發這段代碼讓我對 Plotly.js 的表格功能有了更深入的了解。我學到了如何動態生成 HTML 表格,并使用樣式對其進行自定義。
未來,該表格功能可以拓展和優化:
獲取更多Echos
本文由ScriptEcho平臺提供技術支持
項目地址:傳送門
微信搜索ScriptEcho了解更多
*請認真填寫需求信息,我們會在24小時內與您取得聯系。