dhtmlxSpreadsheet is an open source spreadsheet widget written in pure JavaScript, which allows you to quickly add an editable data sheet similar to Excel on the web page. A highly customizable JavaScript spreadsheet component with an elegant Material style for safe and convenient editing and formatting of data.
Huidu.com can download the trial version of dhtmlxSpreadsheet for free
You can adjust the required settings of dhtmlxSpreadSheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the appearance of toolbars, and control the visibility of menus and edit bars. If required, you can also initialize SpreadSheet in read-only mode.
The toolbar of
SpreadSheet is composed of several control blocks, which can be changed as required. By default, the toolbar has the following control blocks: "Undo", "Color", "Decoration", "Alignment", "Format", "Help":
You can add more blocks from the list: "Lock", "Clear", "Row", "Column", "File".
The structure of the toolbar can be adjusted through the toolbarBlocks configuration option of the component, which is an array containing the string representing the name of the control.
var spreadsheet = new dhx.Spreadsheet(document.body, {
// full toolbar
toolbarBlocks: [
"undo", "colors", "decoration", "align", "lock", "clear",
"rows", "columns ", "help", "format", "file"
]
});
You can also specify your own toolbar structure by enumerating the necessary elements in the toolbarBlocks array in the desired order, for example:
var spreadsheet = new dhx.Spreadsheet ("cont", {
toolbarBlocks: ["help","colors", "align", "decoration", "lock", "clear"]
});The
toolbar is highly customizable. You can add new controls, change control icons and apply the required icon packs.
Edit bar
Since the structure of SpreadSheet is flexible, you can open/close the edit bar to get the desired appearance of the component. Use the editLine configuration option to hide/show the edit bar:
var spreadsheet = new dhx.Spreadsheet(document.body, {
editLine: true
}); When
the number of rows and columns is
initialized , the SpreadSheet has the initial configuration of the grid. Composed of 1000 columns and 25 rows. However, when this limit is exhausted, other rows and columns are automatically rendered, so you don't need to add them. However, if you want to limit them, you can specify the exact number of rows and columns in the grid. To do this, use the colsCount and rowsCount options:
var spreadsheet = new dhx.Spreadsheet(document.body, {
colsCount: 10,
rowsCount: 10
});
freezing columns
starting from v4.0, you can fix (or "freeze") columns on the left side of the spreadsheet to make them Become static, while the remaining columns remain movable. To do this, just set the number of columns to be frozen to the value of the leftSplit property:
var spreadsheet = new dhx.Spreadsheet(document.body, {
leftSplit:3
});
menu
By default, the SpreadSheet menu is hidden. You can turn it on/off through the corresponding configuration options menu:
var spreadsheet = new dhx.Spreadsheet(document.body, {
menu: false
});
read-only mode
can also be enabled through the read-only configuration option to prevent editing SpreadSheet unit:
var spreadsheet = new dhx.Spreadsheet("cont", {
readonly: true
});
You can also customize the read-only behavior of SpreadSheet.
Custom number format for cells
You can apply 5 default formats to cell values:
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'"}
];
You can redefine the configuration of the default format, or you can specify your own number format through the formats config option:
var spreadsheet = new dhx.Spreadsheet(document.body, {
formats: [
{
name: "US 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"
}
]
});
The path to the export/import module
dhtmlxSpreadSheet provides the possibility to import/export data in Excel format. This component uses WebAssembly-based libraries: Excel2Json and JSON2Excel to import/export data.
After installing the necessary libraries, you need to set the path of the worker.js file (local file or CDN file) through the corresponding configuration options -importModulePath or exportModulePath:
var spreadsheet = new dhx.Spreadsheet(document.body, {
importModulePath: ". ./libs/excel2json/1.0/worker.js"
exportModulePath: "../libs/json2excel/1.0/worker.js"
});
APS helps improve the production efficiency of enterprises, truly realize the visual presentation and control of production plans, and respond quickly and effectively Production plans in different scenarios to improve on-time delivery capabilities, increase production capacity and resource utilization
If you want to purchase the genuine authorization of dhtmlxSpreadSheet, or understand the Huidu APS system, please click [Consult online customer service]
This article is reproduced from [Huidu Technology] evget welcomes any form of reprinting, but please be sure to indicate the source, do not modify the relevant links of the original text, and respect the achievements of others