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

點(diǎn)擊下載dhtmlxSpreadsheet試用版

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

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

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的結(jié)構(gòu)是靈活的，因此您可以打開/關(guān)閉編輯欄以獲得所需的組件外觀。使用editLine配置選項(xiàng)隱藏/顯示編輯欄：

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

初始化SpreadSheet時(shí)，它具有網(wǎng)格的初始配置，該網(wǎng)格由1000列和25行組成。但是，當(dāng)此限制用完時(shí)，會(huì)自動(dòng)呈現(xiàn)其他行和列，因此您無需添加它們。但是，如果要限制它們，則可以指定網(wǎng)格中確切的行數(shù)和列數(shù)。為此，請(qǐng)使用colsCount和rowsCount 選項(xiàng)：

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

從v4.0開始，可以在電子表格的左側(cè)固定（或“凍結(jié)”）列，以使它們變?yōu)殪o態(tài)，而其余列保持可移動(dòng)狀態(tài)。為此，只需將要凍結(jié)的列數(shù)設(shè)置為leftSplit屬性的值即可：

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

默認(rèn)情況下，SpreadSheet的菜單是隱藏的。您可以通過相應(yīng)的配置選項(xiàng)菜單將其打開/關(guān)閉：

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

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

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

單元格的自定義數(shù)字格式

可以將5種默認(rèn)格式應(yīng)用于單元格的值：

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格式導(dǎo)入/導(dǎo)出數(shù)據(jù)的可能性。該組件使用基于WebAssembly的庫(kù)：Excel2Json 和JSON2Excel來導(dǎo)入/導(dǎo)出數(shù)據(jù)。

安裝必要的庫(kù)之后，您需要通過相應(yīng)的配置選項(xiàng)-importModulePath或exportModulePath來設(shè)置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幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率