整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web端如此強大的電子表格Excel插件,輕松進行數據處理-jExcel

          jExcel是一個輕量級的原生javascript插件,用于創建與Excel或任何其他電子表格軟件兼容的基于Web的交互式表格和電子表格。可以從JS數組,JSON,CSV或XSLX文件創建在線電子表格表。可以從excel復制并直接粘貼到jExcel電子表格,反之亦然。集成任何第三方javascript插件非常容易,可以創建自己的自定義列,自定義編輯器,并在應用程序中自定義任何功能。jExcel通過其原生列類型提供了大量不同的輸入選項,以涵蓋最常見的基于Web的應用程序需求。它是Web數據管理的完整解決方案。使用jExcel javascript電子表格創建出色的應用程序。



          開源地址

          https://github.com/paulhodel/jexcel

          主要優點

          • 制作豐富且用戶友好的Web界面和應用程序
          • 可以使用用戶的方式輕松處理復雜的數據輸入。
          • 改善用戶軟件體驗
          • 創建豐富的CRUDS和漂亮的UI
          • 與excel的兼容性:用戶可以使用常見的復制和粘貼快捷方式移動數據
          • 通過簡單的第三方插件集成輕松進行自定義
          • 精益,快速且易于使用
          • 成千上萬的成功用戶案例
          • 加快處理基于Web的軟件中的復雜數據輸入的工作

          安裝使用

          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一般



          查看DEMO

          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 },
           ]
          });
          


          • 列類型支持
          1. text
          2. numeric
          3. hidden
          4. dropdown
          5. autocomplete
          6. checkbox
          7. radio
          8. calendar
          9. image
          10. color

          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. 書籍參考:

          • "HTML and CSS: Design and Build Websites" by Jon Duckett
          • "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins


          7. 總結: 通過本文的介紹,我們了解了HTML中<tr>和<td>標簽的基本用法,以及如何創建簡單的表格和添加樣式。使用這些標簽,我們可以輕松地創建具有結構和內容的網頁表格,提升頁面的可讀性和可視性。

          文由ScriptEcho平臺提供技術支持

          項目地址:傳送門

          Plotly.js 動態生成 HTML 表格

          應用場景介紹

          在數據分析和可視化領域,經常需要以表格的形式展示數據。Plotly.js 是一款功能強大的 JavaScript 庫,不僅可以創建交互式圖表,還可以動態生成 HTML 表格。

          代碼基本功能介紹

          本代碼使用 Plotly.js 創建了一個動態 HTML 表格,可以顯示多行多列數據。表格具有以下特點:

          • 可自定義表頭和單元格內容
          • 支持設置表頭和單元格樣式,包括顏色、字體和對齊方式
          • 表格可以根據數據動態更新

          功能實現步驟及關鍵代碼分析說明

          1. 導入 Plotly.js 庫

          import Plotly from 'plotly.js-dist'
          

          2. 定義表格數據

          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 數組包含了表格的數據,其中第一行是表頭,其余行是數據行。

          3. 定義表格樣式

          var headerColor = "grey";
          var rowEvenColor = "lightgrey";
          var rowOddColor = "white";
          

          這些變量用于定義表頭和單元格的樣式,包括顏色和填充顏色。

          4. 創建 Plotly 表格對象

          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 對象定義了單元格。

          5. 繪制表格

          Plotly.newPlot('myDiv', data);
          

          Plotly.newPlot() 函數將表格繪制到指定容器中,在本例中容器的 ID 為 myDiv。

          總結與展望

          開發這段代碼讓我對 Plotly.js 的表格功能有了更深入的了解。我學到了如何動態生成 HTML 表格,并使用樣式對其進行自定義。

          未來,該表格功能可以拓展和優化:

          • 支持表格數據的動態更新
          • 添加交互功能,例如單元格排序和過濾
          • 優化表格的響應式布局,以適應不同屏幕尺寸
          • 更多組件:

          獲取更多Echos

          本文由ScriptEcho平臺提供技術支持

          項目地址:傳送門

          微信搜索ScriptEcho了解更多


          主站蜘蛛池模板: 爆乳熟妇一区二区三区| 日韩一区二区三区在线精品| 色婷婷av一区二区三区仙踪林| 人妻久久久一区二区三区 | 成人免费一区二区三区| 偷拍激情视频一区二区三区| 99精品久久精品一区二区| 亚洲性无码一区二区三区| 中文字幕一区二区精品区| 亚洲AV无码一区二区三区DV| 久久久人妻精品无码一区| 日韩AV在线不卡一区二区三区| 影院成人区精品一区二区婷婷丽春院影视 | 在线免费视频一区二区| ...91久久精品一区二区三区| 国精产品一区一区三区免费视频 | 久久久久成人精品一区二区| 三上悠亚日韩精品一区在线| 波多野结衣在线观看一区| 日韩三级一区二区三区| 国产在线一区二区三区在线| 久久蜜桃精品一区二区三区| 在线观看视频一区二区| 日本在线视频一区二区三区| 国内精品视频一区二区八戒| 日韩一区二区三区不卡视频 | 日韩经典精品无码一区| 无码喷水一区二区浪潮AV| 国产萌白酱在线一区二区| 国产高清视频一区二区| 无码毛片一区二区三区中文字幕| 国产综合精品一区二区| 国产日韩高清一区二区三区| 国产一区二区三区久久精品| 国产成人久久精品一区二区三区| 精品无码人妻一区二区三区品| 亚洲AV成人一区二区三区在线看| 午夜在线视频一区二区三区| 日本精品一区二区三区在线视频一| 国产AⅤ精品一区二区三区久久| 国产美女精品一区二区三区|