## **<spanstyle="font-size:20px;">Q</span>** What is the difference between data and celldata in luckysheetfile?
The content of this chapter collects the common problems that everyone has feedback. If the official documents and this list can’t answer your questions, I recommend you to [Official Forum](https://github.com/mengshukeji/Luckysheet/discussions)
## What is the difference between data and celldata in luckysheetfile?
**<spanstyle="font-size:20px;">A</span>**: Use one-dimensional array format [celldata](/guide/sheet.html#celldata), after the initialization is completed, the data converted into a two-dimensional array format is used for storage and update, and celldata is no longer used.
## **<spanstyle="font-size:20px;">Q</span>** Why will the formula in the table not be triggered after initialization?
## Why will the formula in the table not be triggered after initialization?
**<spanstyle="font-size:20px;">A</span>**: Refer to [Table data format](/guide/sheet.html#calcchain) ,just set the calcChain corresponding to the cell data.
**<spanstyle="font-size:20px;">A</span>**: Refer to [Table data format](/guide/sheet.html#calcchain) ,just set the calcChain corresponding to the cell data.
------------
## **<spanstyle="font-size:20px;">Q</span>** Is the remote loading data loadUrl or updateUrl?
## Is the remote loading data loadUrl or updateUrl?
**<spanstyle="font-size:20px;">A</span>**: [loadUrl](/guide/config.html#loadurl). Configure loadUrl, Luckysheet will request the entire table data through ajax, and updateUrl will be used as the interface address for collaborative editing in real-time saving.
Note: Initial data needs to be configured with loadUrl parameter, while for collaborative editing, the four parameters of loadUrl, updateUrl and allowUpdate can be configured to take effect.
------------
## **<spanstyle="font-size:20px;">Q</span>** What is the difference between `index` and `order` for each sheet page?
## What is the difference between `index` and `order` for each sheet page?
**<spanstyle="font-size:20px;">A</span>**: Each sheet page has a unique id, which is `index`, which can be incremented by numbers or a random string. And `order` is the sorting situation of all sheets, starting from 0, can only be numbers `0,1,2...`.
------------
## **<spanstyle="font-size:20px;">Q</span>** Why can’t I run the project directly under the dist folder?
## Why can’t I run the project directly under the dist folder?
**<spanstyle="font-size:20px;">A</span>**: Need to start the local server
@ -61,7 +63,7 @@ Note: Initial data needs to be configured with loadUrl parameter, while for coll
------------
## **<spanstyle="font-size:20px;">Q</span>** How to import and export excel?
## How to import and export excel?
**<spanstyle="font-size:20px;">A</span>**: The excel import and export library developed with Luckysheet-[Luckyexcel](https://github.com/mengshukeji/Luckyexcel) has realized the excel import function, and the export function is under development.You can refer to these 2 blog posts for excel export at this stage:
@ -70,77 +72,77 @@ Note: Initial data needs to be configured with loadUrl parameter, while for coll
------------
## **<spanstyle="font-size:20px;">Q</span>** How to merge cells during initialization?
## How to merge cells during initialization?
**<spanstyle="font-size:20px;">A</span>**: Refer to the following case:
- [How Luckysheet initializes the data with merged cells](https://www.cnblogs.com/DuShuSir/p/13272397.html)
------------
## **<spanstyle="font-size:20px;">Q</span>** How does 'Luckysheet' save the data from the table to the database? Is there a soulution for storage and collaboration?
## How does 'Luckysheet' save the data from the table to the database? Is there a soulution for storage and collaboration?
**<spanstyle="font-size:20px;">A</span>** :There are two options：
**<spanstyle="font-size:20px;">A</span>**: There are two options:
- 1. after the table operation is completed, you can use `luckysheet.getAllSheets()` to get all sheet data that stroed in the back-end.
- 2. enable the collaborative editing function to transmit data to the back-end in real-time.
refer this article：
refer this article:
[How Luckysheet saves the data in the table to the database](https://www.cnblogs.com/DuShuSir/p/13857874.html)
------------
## **<spanstyle="font-size:20px;">Q</span>** How to monitor cell hover or click events? how to monitor `cellRenderAfter` in real-time?
## How to monitor cell hover or click events? how to monitor `cellRenderAfter` in real-time?
**<spanstyle="font-size:20px;">A</span>**: We have collected the secondary development requirements for cell events, and planned the cell-related hook functions, refer to [cell hook function](/guide/config.html#cellrenderafter) (the TODO displayed is not yet open)
------------
## **<spanstyle="font-size:20px;">Q</span>** How to customize the top toolbar?
## How to customize the top toolbar?
**<spanstyle="font-size:20px;">A</span>** ：
**<spanstyle="font-size:20px;">A</span>**:
reference: [options.showtoolbarconfig](/guide/config.html#showtoolbarconfig)(TODO means waiting to developed)
------------
## **<spanstyle="font-size:20px;">Q</span>** Does the project use jQuery?
## Does the project use jQuery?
**<spanstyle="font-size:20px;">A</span>** ：yes. At the beginning, Luckysheet uses jQuery。The packaging tool will package the jQuery to this file `./plugins/js/plugin.js`
**<spanstyle="font-size:20px;">A</span>**: yes. At the beginning, Luckysheet uses jQuery。The packaging tool will package the jQuery to this file `./plugins/js/plugin.js`
If your project (such as react / Vue) also references jQuery globally and causes conflicts, you can try to remove a jQuery.
if you want to remove jQuery in `Luckysheet`, you can find `jQuery` in source code folder `gulpfile.js`：[src/plugins/js/jquery.min.js](https://github.com/mengshukeji/Luckysheet/blob/master/gulpfile.js)，then delete information related to jQuery.
if you want to remove jQuery in `Luckysheet`, you can find `jQuery` in source code folder `gulpfile.js`: [src/plugins/js/jquery.min.js](https://github.com/mengshukeji/Luckysheet/blob/master/gulpfile.js)，then delete information related to jQuery.
------------
## **<spanstyle="font-size:20px;">Q</span>** How to add a field to a cell object?
## How to add a field to a cell object?
**<spanstyle="font-size:20px;">A</span>** reference [cell object format](/guide/cell.html)，then read this annotation[src/controllers/postil.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/postil.js)。the annotation is a configuration in a cell object.
**<spanstyle="font-size:20px;">A</span>**: reference [cell object format](/guide/cell.html)，then read this annotation[src/controllers/postil.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/postil.js)。the annotation is a configuration in a cell object.
------------
## **<spanstyle="font-size:20px;">Q</span>** The toolbar icon is on the loading stage all the time.
## The toolbar icon is on the loading stage all the time.
**<spanstyle="font-size:20px;">A</span>** The luckysheet use iconfont icon in this project, if any icon cannot be loaded ,plz check your iconfont.css. we are so sorry that we did not describe it clearly in the old version documents.
**<spanstyle="font-size:20px;">A</span>**: The luckysheet use iconfont icon in this project, if any icon cannot be loaded ,plz check your iconfont.css. we are so sorry that we did not describe it clearly in the old version documents.
Now the documents have been updated.[official documents](/guide/#steps-for-usage)
------------
## **<spanstyle="font-size:20px;">Q</span>** Can't run Luckyexcel after package.
## Can't run Luckyexcel after package.
**<spanstyle="font-size:20px;">A</span>** Terminal does not show `end`, but if the `dist` folder has this file `luckyexcel.js`, it is normal.
**<spanstyle="font-size:20px;">A</span>**: Terminal does not show `end`, but if the `dist` folder has this file `luckyexcel.js`, it is normal.
Lucky excel is an excel import and export library. The project uses `gulp` as a packaging tool. There is a problem with the old version of the packaging tool, but it is fixed now. if this problem still troubles you, plz check the following steps：
Lucky excel is an excel import and export library. The project uses `gulp` as a packaging tool. There is a problem with the old version of the packaging tool, but it is fixed now. if this problem still troubles you, plz check the following steps:
1. pull the latest code.
2. `npm i`
3. `npm run build`
more information：[Luckyexcel](https://github.com/mengshukeji/Luckyexcel/)
more information: [Luckyexcel](https://github.com/mengshukeji/Luckyexcel/)
------------
## **<spanstyle="font-size:20px;">Q</span>** How to disable editing of cells？How to open sheet protection?
## How to disable editing of cells？How to open sheet protection?
**<spanstyle="font-size:20px;">A</span>** Sheet protection includes disable editing of cells that you need to make some configurations on each sheets. `config.authority`, the latest configurations[sheet protection](/guide/sheet.html#config-authority)。
**<spanstyle="font-size:20px;">A</span>**: Sheet protection includes disable editing of cells that you need to make some configurations on each sheets. `config.authority`, the latest configurations[sheet protection](/guide/sheet.html#config-authority)。
In order to make it easier for you to understand the function of sheet protection, the following video shows how to make the whole sheet uneditable, but allow a column of cells to be edited:
@ -150,21 +152,21 @@ In you local browser, you can open the control pannel, use `luckysheet.getLuckys
------------
## **<spanstyle="font-size:20px;">Q</span>** How to configure data validation?
## How to configure data validation?
**<spanstyle="font-size:20px;">A</span>** there is the configuration of data validation，[data validation](/guide/sheet.html#dataVerification)。Also there is the API that you can use `data validation` in any time. [setDataVerification](/guide/api.html#setdataverification-optionitem-setting).
**<spanstyle="font-size:20px;">A</span>**: there is the configuration of data validation，[data validation](/guide/sheet.html#dataVerification)。Also there is the API that you can use `data validation` in any time. [setDataVerification](/guide/api.html#setdataverification-optionitem-setting).
------------
## **<spanstyle="font-size:20px;">Q</span>** Is there a case for using Luckysheet with CDN?
## Is there a case for using Luckysheet with CDN?
**<spanstyle="font-size:20px;">A</span>** Luckysheet supports CDN. reference：[The case of using luckysheet by CDN](https://www.cnblogs.com/DuShuSir/p/13859103.html)
**<spanstyle="font-size:20px;">A</span>**: Luckysheet supports CDN. reference: [The case of using luckysheet by CDN](https://www.cnblogs.com/DuShuSir/p/13859103.html)
------------
## **<spanstyle="font-size:20px;">Q</span>** how to limit the adaptive height of a picture in a cell？
## how to limit the adaptive height of a picture in a cell？
**<spanstyle="font-size:20px;">A</span>** First of all, you need to move the picture and adjust the cell size, and then there are the following situations:
**<spanstyle="font-size:20px;">A</span>**: First of all, you need to move the picture and adjust the cell size, and then there are the following situations:
- if the cell contains a picture and you expand the cell, the picure will not be expanded.
- if the cell contains a picture and you shorten the cell to the edge of the picture, the picture will shrink.
@ -176,43 +178,43 @@ if you want to get the position of the picture, you can overlap the picture with
------------
## **<spanstyle="font-size:20px;">Q</span>** How to get the default row height and column width of the worksheet?
## How to get the default row height and column width of the worksheet?
**<spanstyle="font-size:20px;">A</span>** There are two ways to get it
**<spanstyle="font-size:20px;">A</span>**: There are two ways to get it
- 1. use `luckysheet.getLuckysheetfile()` to get all configuration data, so you can get the `defaultRowHeight` and `defaultColWidth` in the sheet configuration data。
- 2. use API to get the default row height [getDefaultRowHeight](/guide/api.html#getdefaultrowheight-setting) and column width.[getDefaultColWidth](/guide/api.html#getdefaultcolwidth-setting)
------------
## **<spanstyle="font-size:20px;">Q</span>** How to hide the add row button and the back to top button below the worksheet?
## How to hide the add row button and the back to top button below the worksheet?
**<spanstyle="font-size:20px;">A</span>** Configuration is open
**<spanstyle="font-size:20px;">A</span>**: Configuration is open
- Allow back to top [enableAddBackTop](/guide/config.html#enableAddBackTop)
------------
## **<spanstyle="font-size:20px;">Q</span>** How to hide the row and column headings of the worksheet?
## How to hide the row and column headings of the worksheet?
**<spanstyle="font-size:20px;">A</span>** Configuration is open
**<spanstyle="font-size:20px;">A</span>**: Configuration is open
- The width of the row header area [rowHeaderWidth](/guide/config.html#rowheaderwidth)
- The height of the column header area [columnHeaderHeight](/guide/config.html#columnHeaderHeight)
------------
## **<spanstyle="font-size:20px;">Q</span>** What method can be called to set `config.merge`?
## What method can be called to set `config.merge`?
**<spanstyle="font-size:20px;">A</span>** Three methods
**<spanstyle="font-size:20px;">A</span>**: Three methods
- Interface operation
- Use API: [setRangeMerge](/guide/api.html#setrangemerge-type-setting)
- Manually assemble merge parameters
------------
## **<spanstyle="font-size:20px;">Q</span>** Why is the official new feature ineffective?
## Why is the official new feature ineffective?
**<spanstyle="font-size:20px;">A</span>** The first step is to check whether you have used CDN to import,
**<spanstyle="font-size:20px;">A</span>**: The first step is to check whether you have used CDN to import,
The CDN link used in the Luckysheet tutorial is the service provided by [jsdelivr](https://www.jsdelivr.com/package/npm/luckysheet), and the code is from [npmjs.com](https://www.npmjs.com/) automatically sync the past, not from [Github](https://github.com/mengshukeji/Luckysheet/). Because our newly submitted code still needs to be tested for a period of time, it will not be released to npm immediately, causing the npm code to lag behind Github.
@ -222,9 +224,9 @@ The second step, if it is to import the packaged code of the github repository,
------------
## **<spanstyle="font-size:20px;">Q</span>** `npm run dev` reported an error: ʻError: Cannot find module'rollup'`?
## `npm run dev` reported an error: ʻError: Cannot find module'rollup'`?
**<spanstyle="font-size:20px;">A</span>** It may be a problem with the npm package installation, try the following steps:
**<spanstyle="font-size:20px;">A</span>**: It may be a problem with the npm package installation, try the following steps:
1. `npm cache clean --force`
2. `npm i rimraf -g`
3. `rimraf node_modules`
@ -236,9 +238,9 @@ Tip: Most other npm installation problems can also be solved by trying above ste
------------
## **<spanstyle="font-size:20px;">Q</span>**How to carry out secondary development of Luckysheet in Vue project?
## How to carry out secondary development of Luckysheet in Vue project?
**<spanstyle="font-size:20px;">A</span>** The [luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) case is to provide an application integration solution.
**<spanstyle="font-size:20px;">A</span>**: The [luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) case is to provide an application integration solution.
If directly developed locally:
1. Start both the Luckysheet project and your own Vue project. For example, the Luckysheet project is at http://localhost:3001
@ -248,38 +250,38 @@ In this case, after Luckysheet is modified in real time, the changes can be seen
------------
## **<spanstyle="font-size:20px;">Q</span>** Error reporting `Store.createChart` when creating chart?
## Error reporting `Store.createChart` when creating chart?
**<spanstyle="font-size:20px;">A</span>** You need to introduce a chart plugin to use it. You should configure the chart plugin to use when the workbook is initialized. Refer to
**<spanstyle="font-size:20px;">A</span>**: You need to introduce a chart plugin to use it. You should configure the chart plugin to use when the workbook is initialized. Refer to
## **<spanstyle="font-size:20px;">Q</span>** Can cells add custom attributes?
## Can cells add custom attributes?
**<spanstyle="font-size:20px;">A</span>** The custom attributes directly assigned to the cell object will be filtered. To make the custom attributes take effect, you need to edit the code to remove the filter attributes.
**<spanstyle="font-size:20px;">A</span>**: The custom attributes directly assigned to the cell object will be filtered. To make the custom attributes take effect, you need to edit the code to remove the filter attributes.
------------
## **<spanstyle="font-size:20px;">Q</span>** How to enter text starting with `'='`? For example, `=currentDate('YYYY-MM-DD')`, it will remove the function by default, how to prohibit the function?
## How to enter text starting with `'='`? For example, `=currentDate('YYYY-MM-DD')`, it will remove the function by default, how to prohibit the function?
**<spanstyle="font-size:20px;">A</span>** Just add a single quotation mark in front of it, and it will be forcibly recognized as a string, which is consistent with excel. For example: `'=currentDate('YYYY-MM-DD')`
**<spanstyle="font-size:20px;">A</span>**: Just add a single quotation mark in front of it, and it will be forcibly recognized as a string, which is consistent with excel. For example: `'=currentDate('YYYY-MM-DD')`
------------
## **<spanstyle="font-size:20px;">Q</span>** Why does the create callback have no effect?
## Why does the create callback have no effect?
**<spanstyle="font-size:20px;">A</span>** The API method `luckysheet.create()` does not have a callback, but Luckysheet provides a hook function to execute the callback method at a specified location, such as:
**<spanstyle="font-size:20px;">A</span>**: The API method `luckysheet.create()` does not have a callback, but Luckysheet provides a hook function to execute the callback method at a specified location, such as:
- Triggered before the workbook is created [workbookCreateBefore](/guide/config.html#workbookcreatebefore)
- Triggered after the workbook is created [workbookCreateAfter](/guide/config.html#workbookcreateafter)
------------
## **<spanstyle="font-size:20px;">Q</span>** When create, the first cell is selected by default, how to remove it?
## When create, the first cell is selected by default, how to remove it?
**<spanstyle="font-size:20px;">A</span>** When the cell is selected, it is highlighted by default, just remove the highlight, use API: [setRangeShow](/guide/api.html#setrangeshow-range-setting)
**<spanstyle="font-size:20px;">A</span>**: When the cell is selected, it is highlighted by default, just remove the highlight, use API: [setRangeShow](/guide/api.html#setrangeshow-range-setting)
## **<spanstyle="font-size:20px;">Q</span>** Where is the right-click event bound?
## Where is the right-click event bound?
**<spanstyle="font-size:20px;">A</span>** In the source code [src/controllers/hander.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/handler.js), search for `event.which == "3"` to find the code executed by the right-click event.
**<spanstyle="font-size:20px;">A</span>**: In the source code [src/controllers/hander.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/handler.js), search for `event.which == "3"` to find the code executed by the right-click event.
------------
## **<spanstyle="font-size:20px;">Q</span>** How to add a custom toolbar?
## How to add a custom toolbar?
**<spanstyle="font-size:20px;">A</span>** No configuration is currently provided, you can refer to the implementation of the print button in the toolbar to modify the source code:
**<spanstyle="font-size:20px;">A</span>**: No configuration is currently provided, you can refer to the implementation of the print button in the toolbar to modify the source code:
1. Search for `luckysheet-icon-print` globally to find the implementation of the print button, in [src/controllers/constant.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/constant.js) add a similar template string, you need to customize a unique id
2. Modify [src/controllers/resize.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/resize.js) and add a new record in the toobarConfig object
3. Modify [src/controllers/menuButton.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/menuButton.js) to add an event listener
------------
## How to add custom formulas?
**<spanstyle="font-size:20px;">A</span>**: Two source codes need to be modified:
1. Add a formula to the `functionImplementation` object in the [src/function/functionImplementation.js](https://github.com/mengshukeji/Luckysheet/blob/master/src/function/functionImplementation.js) file, format refer to formulas such as `SUM`/`AVERAGE`
2. Modify all the language packs in the [src/locale](https://github.com/mengshukeji/Luckysheet/blob/master/src/locale) file directory, and add the new formula description to the `functionlist` array in. Among them, `t` is the category of the function, `m` is the number of parameters, the minimum number of parameters and the maximum number of parameters.
------------
## Is there a similar loadData interface, I want to load 10 records first, and then dynamically load the data, these data are appended to the table?
**<spanstyle="font-size:20px;">A</span>**: Yes. Our `loadSheetUrl` provides this function, which can be turned on by initializing `options.enablePage = true`.
Searching for `enablePage` in the source code, you can see that there is a `method.addDataAjax` method, which contains an ajax request to dynamically load data, which will be appended to the worksheet.
This function is now hidden in the document, because when we made this interface, the interface parameters were matched according to our actual business, which may not be universal. We are going to abstract and release it for everyone to use. If you want to use it yourself you can change it based on this.
It is recommended that you consider writing your own interface to load the data, and then use `setRangeValue` to append the data at the specified location, which has a higher degree of customization.
- {Number} [columnInfo]: Correspondence between the number of columns and the width
- {Object} [columnInfo]: Correspondence between the number of columns and the width
- {PlainObject} [setting]: optional parameters
+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
@ -2560,17 +2560,13 @@ Use note:
### refreshFormula([setting])
[todo]
- **Parameter**：
- {PlainObject} [setting]: optional parameters
+ {Object | String} [range]: Set the target selection range of the parameter. The supported selection format is `"A1:B2"`, `"sheetName!A1:B2"` or `{row:[0,1], column:[0,1]}`, allows an array of multiple selections; the default is the current selection ;The default is the entire current worksheet
+ {Function} [success]: callback function for the end of the operation
- {Function} [success]: callback function for the end of the operation
- **Explanation**：
Force refresh formula. When you directly modify the values of multiple cells without triggering a refresh, and these cells are associated with formulas, you can use this API to force a formula refresh to be triggered at the end. It is generally recommended to specify the affected cell range to prevent For performance issues, if you can't determine it, leave it blank to keep the entire worksheet traversed and refreshed.
Force refresh formula. When you directly modify the values of multiple cells without triggering a refresh, and these cells are associated with formulas, you can use this API to force a formula refresh to be triggered at the end.
@ -73,6 +73,7 @@ The following are all supported setting parameters
- The height of the column header area [columnHeaderHeight](#columnHeaderHeight)
- Whether to show the formula bar [sheetFormulaBar](#sheetFormulaBar)
- Initialize the default font size [defaultFontSize](#defaultFontSize)
- Pager [pager](#pager)
### container
- Type: String
@ -567,6 +568,21 @@ Note that you also need to configure `loadUrl` and `loadSheetUrl` to take effect
------------
### pager
- Type：Object
- Default：null
- Usage：Pager button settings, the first version of the solution is directly used jquery plug-in [sPage](https://github.com/jvbei/sPage)
Clicking the paging button will trigger the hook function `onTogglePager`, which returns the current page number, which is the same as the `backFun` method of `sPage`. This pager setting is only responsible for the UI part. For the specific data request and data rendering after switching paging, please enter the `onTogglePager` custom processing in the number of hook lines.
```js
pager: {
pageIndex: 1, //Current page number
pageSize: 10, //How many rows of data are displayed on each page
total: 50, //Total number of rows of data
selectOption: [10, 20] //Options that allow setting the number of rows per page
}
```
------------
## Hook Function (TODO)
@ -1071,7 +1087,7 @@ The hook functions are uniformly configured under ʻoptions.hook`, and configura
### 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.
- Usage: The method executed after each operation is updated is executed after the canvas rendering, monitor changes in worksheet content, 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 )
@ -1251,4 +1267,16 @@ The hook functions are uniformly configured under ʻoptions.hook`, and configura
- Default: null
- Usage: Customized method of drilling down cell data, note that this hook function is mounted under options: `options.fireMousedown`
------------
## Pager
### onTogglePager
- Type: Function
- Default: null
- Usage: Click the page button to call back the function, return the current page number, refer to [sPage backFun](https://github.com/jvbei/sPage)
CN\wuwx26
5 years ago