dhtmlxSpreadsheet是用純JavaScript編寫的開源電子表格小部件，可讓您快速在網頁上添加類似于Excel的可編輯數據表。高度可定制的JavaScript電子表格組件，具有優雅的Material樣式，可安全、方便地編輯和格式化數據。

點擊下載dhtmlxSpreadsheet試用版

您可以調整dhtmlxSpreadSheet的所需設置滿足您的需求。可用的配置選項使您可以限制行和列的數量，更改工具欄的外觀以及控制菜單和編輯欄的可見性。如果需要，您還可以在只讀模式下初始化SpreadSheet。

SpreadSheet的工具欄由幾個控件塊組成，可以根據需要進行更改。默認情況下，工具欄中有以下控件塊：“撤消”，“顏色”，“裝飾”，“對齊”，“格式”，“幫助”：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    // full toolbar
    toolbarBlocks: [
        "undo", "colors", "decoration", "align", "lock", "clear", 
        "rows", "columns", "help", "format", "file"
    ]
});

var spreadsheet = new dhx.Spreadsheet("cont", {
    toolbarBlocks: ["help","colors", "align", "decoration", "lock", "clear"]
});

編輯欄

由于SpreadSheet的結構是靈活的，因此您可以打開/關閉編輯欄以獲得所需的組件外觀。使用editLine配置選項隱藏/顯示編輯欄：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    editLine: true
});

初始化SpreadSheet時，它具有網格的初始配置，該網格由1000列和25行組成。但是，當此限制用完時，會自動呈現其他行和列，因此您無需添加它們。但是，如果要限制它們，則可以指定網格中確切的行數和列數。為此，請使用colsCount和rowsCount 選項：

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    colsCount: 10,
    rowsCount: 10
});

從v4.0開始，可以在電子表格的左側固定（或“凍結”）列，以使它們變為靜態，而其余列保持可移動狀態。為此，只需將要凍結的列數設置為leftSplit屬性的值即可：

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    leftSplit:3 
});

默認情況下，SpreadSheet的菜單是隱藏的。您可以通過相應的配置選項菜單將其打開/關閉：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    menu: false
});

也可以通過只讀配置選項啟用只讀模式以防止編輯SpreadSheet單元：

var spreadsheet = new dhx.Spreadsheet("cont", {
    readonly: true
});

單元格的自定義數字格式

可以將5種默認格式應用于單元格的值：

defaultFormats = [
    { name: "Common", id: "common", mask: "", example: "2702.31" },
    { name: "Number", id: "number", mask: "#,##0.00", example: "2702.31" },
    { name: "Percent", id: "percent", mask: "#,##0.00%", example: "27.0231%" },
    { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$2702.31" },
    { name: "Text", id: "text", mask: "abc", example: "'2702.31'" }
];

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    formats: [
        {
            name: "U.S. Dollar",
            id: "currency",
            mask: "$#,##0.00"
        },
        {
            name: "Euro",
            id: "euro",
            mask: "[$€]#.##0,00",
            example: "1000.50"
        },
        {
            name: "Swiss franc",
            id: "franc",
            mask: "[$CHF ]#.##0,00"
        }
    ]
});

dhtmlxSpreadSheet提供了以Excel格式導入/導出數據的可能性。該組件使用基于WebAssembly的庫：Excel2Json 和JSON2Excel來導入/導出數據。

安裝必要的庫之后，您需要通過相應的配置選項-importModulePath或exportModulePath來設置worker.js文件的路徑（本地文件或CDN文件）：

var spreadsheet = new dhx.Spreadsheet(document.body, {  
    importModulePath: "../libs/excel2json/1.0/worker.js"
    exportModulePath: "../libs/json2excel/1.0/worker.js"
});

APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率