When initializing the workbook, you can set an object configuration string ʻoptions` to customize the configuration of Luckysheet.
The following is a simple configuration example:
```js
// Configuration item
const options = {
container:'luckysheet', // set the id of the DOM container
title:'Luckysheet Demo', // set the name of the table
lang:'zh' // set language
// More other settings...
}
// Initialize the table
luckysheet.create(options)
```
The `options` configuration item here will affect the entire workbook. In particular, the configuration of a single worksheet needs to be set in the `options.data` array to set corresponding more detailed parameters. Refer to [Worksheet Configuration](/zh/guide/sheet.html)
For personalized needs, in addition to allowing configuration information bar ([showinfobar](#showinfobar)), toolbar ([showtoolbar](#showtoolbar)), bottom sheet bar ([showsheetbar](#showsheetbar)), bottom count bar ([ShowstatisticBar](#showstatisticBar)),
Luckysheet has opened more detailed custom configuration options, which are as follows:
- Customize the toolbar ([showtoolbarConfig](#showtoolbarConfig))
- Customize the bottom sheet bar ([showsheetbarConfig](#showsheetbarConfig))
- Customize the counting bar ([showstatisticBarConfig](#showstatisticBarConfig))
- Custom add row and back to the top ([sheetBottomConfig](#sheetBottomConfig))
- Custom cell right-click menu ([cellRightClickConfig](#cellRightClickConfig))
- Customize the right-click menu of the bottom sheet bar ([sheetRightClickConfig](#sheetRightClickConfig))
## Configuration item
The following are all supported setting parameters
- Container ID [container](#container)
- Workbook name [title](#title)
- Language [lang](#lang)
- Unique key [gridKey](#gridKey)
- Load the entire workbook [loadUrl](#loadUrl)
- Load other worksheet celldata [loadSheetUrl](#loadSheetUrl)
- Usage: Configure the address of `loadUrl` and use it in conjunction with `loadSheetUrl`, which is generally used when the amount of data is large. You can also not use the interface parameters provided by Luckysheet, and use the [data](#data) parameter to prepare all table data for initialization in advance.
Luckysheet will request the entire workbook data through ajax, and load all `celldata` in the worksheet data with status 1 by default, and load all the fields except the `celldata` field in the rest of the worksheets. However, considering that some formulas, charts and pivot tables will reference data from other worksheets, the front end will add a judgment. If the current worksheet references data from other worksheets, it will request data through the interface address configured by `loadSheetUrl` , And load the data of the related worksheets. Because `loadUrl` is only responsible for the current worksheet data, it is also necessary to configure `loadSheetUrl` as an interface for asynchronously loading data.
- Usage: Configure the address of `loadSheetUrl`, the parameters are `gridKey` (workbook primary key) and `index` (worksheet primary key collection, the format is `["sheet_01","sheet_02","sheet_03"]`), the returned data is the `celldata` field data collection of the worksheet. In order to load performance considerations, except for the first load of the celldata data of the current worksheet, the data of the other worksheets will be requested only when the worksheet is switched to that worksheet.
- Usage: Whether to allow back-end update after operating the table, used in conjunction with `updateUrl`
------------
### updateUrl
- Type: String
- Default: ""
- Usage: The back-end update address after operating the workbook will be valid only when `allowUpdate` is `true`. This interface is also the interface address for shared editing.
Note that you also need to configure `loadUrl` and `loadSheetUrl` to take effect.
- Usage: When `loadUrl` and `loadSheetUrl` are not configured, you need to manually configure all the sheet data passed to the entire client `[shee1, sheet2, sheet3]`. For detailed parameter settings, please refer to [worksheet configuration](/zh/guide/sheet.html)
- Usage: Function buttons in the upper right corner, for example:`'<buttonid=""class="btn btn-primary"style="padding:3px 6px;font-size: 12px;margin-right: 10px;">download</button><buttonid=""class="btn btn-primary btn-danger"style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">share</button><buttonid="luckysheet-share-btn-title"class="btn btn-primary btn-danger"style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">show data</button>'`
------------
### showConfigWindowResize
- Type: Boolean
- Default: true
- Usage: The configuration of the chart or pivot table will pop up on the right, set whether the workbook will be automatically indented after popping up
By default, in order to improve loading performance, when the table is initialized, cells containing formulas will directly obtain `v` and `m` as data results by default without real-time calculation.
If the data of the cell associated with the formula has changed, or the result of the cell data where the formula is located has changed, it will cause the calculated result of the associated cell to be inconsistent with the actual displayed result. This requires the formula refresh to be turned on to ensure the data The accuracy of real-time calculations.
⚠️Reminder, there will be performance problems when there are more formulas, use it with caution!
When the hook function is used in secondary development, hooks will be implanted in each common mouse or keyboard operation, and the function passed in by the developer will be called to expand the function of Luckysheet.
The hook functions are uniformly configured under ʻoptions.hook`, and configuration hooks can be created separately for cells, sheet pages, and tables.
- Usage: Triggered before the worksheet is created. The old hook function is called `beforeCreateDom`
- Parameter:
- {Object} [book]:Configuration of the entire workbook (options)
------------
### workbookCreateAfter
- Type: Function
- Default: null
- Usage: Triggered after the workbook is created
- Parameter:
- {Object} [book]:Configuration of the entire workbook (options)
------------
### workbookDestroyBefore
- Type: Function
- Default: null
- Usage: Triggered before the workbook is destroyed
- Parameter:
- {Object} [book]:Configuration of the entire workbook (options)
------------
### workbookDestroyAfter
- Type: Function
- Default: null
- Usage: Triggered after the workbook is destroyed
- Parameter:
- {Object} [book]:Configuration of the entire workbook (options)
------------
### updated
- Type: Function
- Default: null
- Usage: The method executed after each operation is updated is executed after the canvas rendering, that is, every time the client performs a workbook operation, Luckysheet saves the operation in the history and triggers it. When undoing and redoing, it is also an operation, of course, the hook function will be triggered.
- Parameter:
- {Object} [operate]: The history information of this operation will have different history records according to different operations. Refer to the source code [History](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/controlHistory.js )
------------
### resized
- Type: Function
- Default: null
- Usage: After resize is executed
- Parameter:
- {Object} [size]: The width and height of the entire workbook area
------------
## Image
### imageInsertBefore
- Type: Function
- Default: null
- Usage: Before the picture is inserted
- Parameter:
- {Object} [url]: Picture address
------------
### imageInsertAfter
- Type: Function
- Default: null
- Usage: After the picture is inserted
- Parameter:
- {Object} [item]]: Picture address, width and height, location and other information
------------
### imageUpdateBefore
- Type: Function
- Default: null
- Usage: Before the picture is modified, the modified content includes operations such as width and height, position, and cropping
- Parameter:
- {Object} [item]]: Picture address, width and height, location and other information
------------
### imageUpdateAfter
- Type: Function
- Default: null
- Usage: After the picture is modified, the modified content includes operations such as width and height, position, and cropping
- Parameter:
- {Object} [oldItem]]: Before modification, the picture address, width and height, location and other information
- {Object} [newItem]]: After modification, the picture address, width and height, location and other information
------------
### imageDeleteBefore
- Type: Function
- Default: null
- Usage: Before the picture is deleted
- Parameter:
- {Object} [item]]: Picture address, width and height, location and other information
------------
### imageDeleteAfter
- Type: Function
- Default: null
- Usage: After the picture is deleted
- Parameter:
- {Object} [item]]: Picture address, width and height, location and other information
------------
## Comment
### commentInsertBefore
- Type: Function
- Default: null
- Usage: Before inserting comments
- Parameter:
- {Object} [cell]: The cell information of the comment to be inserted, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
------------
### commentInsertAfter
- Type: Function
- Default: null
- Usage: After inserting comments
- Parameter:
- {Object} [cell]: The cell information where the comment is inserted, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`, contains comment information
------------
### commentDeleteBefore
- Type: Function
- Default: null
- Usage: Before deleting comments
- Parameter:
- {Object} [cell]: The cell information of the comment to be deleted, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
------------
### commentDeleteAfter
- Type: Function
- Default: null
- Usage: After deleting the comment
- Parameter:
- {Object} [cell]: The cell information of the deleted comment, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
------------
### commentUpdateBefore
- Type: Function
- Default: null
- Usage: Before modifying comments
- Parameter:
- {Object} [cell]: The cell information of the comment, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
------------
### commentUpdateAfter
- Type: Function
- Default: null
- Usage: After modifying the comment
- Parameter:
- {Object} [oldCell]: Before modification, the cell information where the comment is located, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
- {Object} [newCell]: After modification, the cell information where the comment is located, such as:`{ r:0,c:2,v:{m:'233',v:'233'}}`
------------
## Pivot table
### pivotTableEditBefore
- Type: Function
- Default: null
- Usage: Before modifying the PivotTable, operations such as dragging fields, etc.
- Parameter:
- {Object} [sheet]: Worksheet configuration where the pivot table is located
------------
### pivotTableEditAfter
- Type: Function
- Default: null
- Usage: After modifying the PivotTable, operations such as dragging fields, etc.
- Parameter:
- {Object} [oldSheet]: Before modification, the worksheet configuration where the pivot table is located
- {Object} [newSheet]: After modification, the worksheet configuration where the pivot table is located
