diff --git a/README-zh.md b/README-zh.md index cc791fc..bd8d141 100644 --- a/README-zh.md +++ b/README-zh.md @@ -21,10 +21,6 @@ - excel导入导出库: [Luckyexcel](https://github.com/mengshukeji/Luckyexcel) - 图表插件: [chartMix](https://github.com/mengshukeji/chartMix) -## 支持 -Luckysheet是MIT许可的开源项目，其持续的开发完全有赖于许多出色支持者的支持。如果您想加入他们，请考虑： -- [kickstarter](https://www.kickstarter.com/projects/luckysheet/luckysheet) - ## 特性 ### 🛠️格式设置 @@ -160,6 +156,7 @@ npm run build ## 合作项目 - [鲁班h5](https://github.com/ly525/luban-h5) +- [excelize](https://github.com/360EntSecGroup-Skylar/excelize) ## 加入共建 @@ -194,15 +191,26 @@ npm run build ### 团队成员 - [@wbfsa](https://github.com/wbfsa) - [@wpxp123456](https://github.com/wpxp123456) -- [@swen-xiong](https://github.com/swen-xiong) - [@tonytonychopper123](https://github.com/tonytonychopper123) - [@Dushusir](https://github.com/Dushusir) +- [@c19c19i](https://weibo.com/u/3884623955) ### 活跃成员 - [@danielcai1987](https://github.com/danielcai1987) - [@qq6690876](https://github.com/qq6690876) - [@javahuang](https://github.com/javahuang) - [@gsw945](https://github.com/gsw945) +- [@swen-xiong](https://github.com/swen-xiong) + +## 捐赠 + +如果你感觉这个项目对你有用或者有所启发，可以请作者喝杯果汁： + +| 微信 | 支付宝 | +|---|---| +| | | + +[Paypal Me](https://www.paypal.me/wbfsa) ## 版权信息 [MIT](http://opensource.org/licenses/MIT) diff --git a/README.md b/README.md index 1982494..d8d9799 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,6 @@ English| [简体中文](./README-zh.md) - Excel import and export library: [Luckyexcel](https://github.com/mengshukeji/Luckyexcel) - Chart plugin: [chartMix](https://github.com/mengshukeji/chartMix) -## Support -Luckysheet is an MIT-licensed open source project with its ongoing development made possible entirely by the support of many awesome backers. If you'd like to join them, please consider: -- [kickstarter](https://www.kickstarter.com/projects/luckysheet/luckysheet) - ## Features ### 🛠️Formatting @@ -165,6 +161,7 @@ Create a table ## Partner project - [luban-h5](https://github.com/ly525/luban-h5) +- [excelize](https://github.com/360EntSecGroup-Skylar/excelize) ## Co-construction @@ -191,15 +188,27 @@ Create a table ### Team - [@wbfsa](https://github.com/wbfsa) - [@wpxp123456](https://github.com/wpxp123456) -- [@swen-xiong](https://github.com/swen-xiong) - [@tonytonychopper123](https://github.com/tonytonychopper123) - [@Dushusir](https://github.com/Dushusir) +- [@c19c19i](https://weibo.com/u/3884623955) ### Active participants - [@danielcai1987](https://github.com/danielcai1987) - [@qq6690876](https://github.com/qq6690876) - [@javahuang](https://github.com/javahuang) - [@gsw945](https://github.com/gsw945) +- [@swen-xiong](https://github.com/swen-xiong) + +## Donate + +If you find this project useful, you can buy author a glass of juice: + +| WeChat | Alipay | +|---|---| +| | | + +[Paypal Me](https://www.paypal.me/wbfsa) + ## License [MIT](http://opensource.org/licenses/MIT) diff --git a/docs/guide/FAQ.md b/docs/guide/FAQ.md index 7e7ba8e..475bf99 100644 --- a/docs/guide/FAQ.md +++ b/docs/guide/FAQ.md @@ -42,6 +42,7 @@ luckysheet.buildGridData(luckysheetfile) ## **Q** Is the remote loading data loadUrl or updateUrl? **A**: [loadUrl](/zh/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 and loadSheetUrl parameters, while for collaborative editing, in addition to the configuration of loadUrl and loadSheetUrl, updateUrl and allowUpdate must be configured to take effect. ------------ diff --git a/docs/guide/api.md b/docs/guide/api.md index 59b02cd..927b12b 100644 --- a/docs/guide/api.md +++ b/docs/guide/api.md @@ -212,6 +212,25 @@ Use note: ------------ +### exitEditMode([,setting]) + + +- **Parameter**： + + - {PlainObject} [setting]: optional parameters + + {Function} [success]: callback function for the end of the operation + +- **Explanation**： + + Exit edit mode. After double-clicking the cell with the mouse, it will enter the cell editing mode. After the editing is completed, when the mouse clicks on the input box elsewhere to lose focus, the editing mode will be exited, and the value of the cell will be saved. This Api is the operation of automatically exiting the editing mode, mainly to trigger the automatic saving of cells. + +- **Usage**: + + - Manually trigger to exit edit mode + `luckysheet.exitEditMode()` + +------------ + ## Row and column operations ### setHorizontalFrozen(isRange [,setting]) @@ -1994,6 +2013,48 @@ Use note: ------------ +### showGridLines([setting]) + +- **Parameter**： + + - {PlainObject} [setting]: optional parameters + + {Number} [order]: The subscript of the worksheet that needs to show the grid lines; the default value is the subscript of the current worksheet + + {Function} [success]: callback function for the end of the operation + +- **Explanation**： + + Show the grid lines of the specified subscript worksheet, and return the worksheet object of the operation + +- **Usage**: + + - Show the grid lines of the current worksheet + `luckysheet.showGridLines()` + - Show the grid lines of the third worksheet + `luckysheet.showGridLines({order:2})` + +------------ + +### hideGridLines([setting]) + +- **Parameter**： + + - {PlainObject} [setting]: optional parameters + + {Number} [order]: The subscript of the worksheet that needs to hdie the grid lines; the default value is the subscript of the current worksheet + + {Function} [success]: callback function for the end of the operation + +- **Explanation**： + + Hide the grid lines of the specified subscript worksheet, and return the worksheet object of the operation + +- **Usage**: + + - Hide grid lines of current worksheet + `luckysheet.hideGridLines()` + - Hide the grid lines of the third worksheet + `luckysheet.hideGridLines({order:2})` + +------------ + ## Workbook operations ### create(options [,setting]) @@ -2136,7 +2197,23 @@ Use note: ------------ -## chart +### 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 + +- **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. + +------------ + +## Chart ### insertChart([setting]) diff --git a/docs/guide/config.md b/docs/guide/config.md index c1622da..a1c016c 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -1,200 +1,956 @@ -# Basic Configuration - -## container +# Overall configuration + +## Basic Structure + +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) +- Allow updates [allowUpdate](#allowUpdate) +- Update address [updateUrl](#updateUrl) +- Thumbnail update address [updateImageUrl](#updateImageUrl) +- Worksheet configuration [data](#data) +- Plugins [plugins](#plugins) +- Number of columns [column](#column) +- Number of rows [row](#row) +- Billion format [autoFormatw](#autoFormatw) +- Accuracy [accuracy](#accuracy) +- Allow copying [allowCopy](#allowCopy) +- Toolbar [showtoolbar](#showtoolbar) +- Customize Toolbar [showtoolbarConfig](#showtoolbarConfig) +- Information bar [showinfobar](#showinfobar) +- Bottom sheet bar [showsheetbar](#showsheetbar) +- Customize the bottom sheet bar [showsheetbarConfig](#showsheetbarConfig) +- The bottom count bar [showstatisticBar](#showstatisticBar) +- Custom Count Bar [showstatisticBarConfig](#showstatisticBarConfig) +- Custom add row and back to top [sheetBottomConfig](#sheetBottomConfig) +- Allow editing [allowEdit](#allowEdit) +- Allow adding rows [enableAddRow](#enableAddRow) +- Allow adding columns [enableAddCol](#enableAddCol) +- User Info [userInfo](#userInfo) +- User Information Menu [userMenuItem](#userMenuItem) +- Back button link [myFolderUrl](#myFolderUrl) +- Ratio [devicePixelRatio](#devicePixelRatio) +- Function Button [functionButton](#functionButton) +- Auto-indent interface [showConfigWindowResize](#showConfigWindowResize) +- Load the next page [enablePage](#enablePage) +- Refresh formula [forceCalculation](#forceCalculation) +- Custom cell right-click menu [cellRightClickConfig](#cellRightClickConfig) +- Customize the right-click menu of the bottom sheet bar [sheetRightClickConfig](#sheetRightClickConfig) +- Whether to show the row number area [showRowBar](#showRowBar) +- Whether to show the column number area [showColumnBar](#showColumnBar) +- Whether to show the formula bar [sheetFormulaBar](#sheetFormulaBar) +- Initialize the default font size [defaultFontSize](#defaultFontSize) + +### container - Type: String - Default: "luckysheet" - Usage: Container ID ------------ -## title +### title - Type: String - Default: "Luckysheet Demo" -- Usage: Table's name +- Usage：Workbook name ------------ -## lang +### lang - Type: String - Default: "en" -- Usage: Internationalization settings, allowing to set the language of the table, temporarily supporting Chinese ("zh") and English ("en") +- Usage: Internationalization settings, allowing to set the language of the workbook, supporting Chinese ("zh") and English ("en") ------------ -## gridKey +### gridKey - Type: String - Default: "" -- Usage: Form unique identifier +- Usage: Workbook unique identifier ------------ -## column -- Type: Number -- Default: 60 -- Usage: The default number of columns in an empty table +### loadUrl +- Type: String +- Default: "" +- 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. ------------ -## row -- Type: Number -- Default: 84 -- Usage: The default number of rows in an empty table +### loadSheetUrl +- Type: String +- Default: "" +- 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. ------------ -## data +### allowUpdate +- Type: Boolean +- Default: false +- 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. + +------------ +### updateImageUrl +- Type: String +- Default: "" +- Usage: Update address of thumbnail + +------------ +### data - Type: Array - Default: [{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }] -- Usage: Client sheet data `[shee1, sheet2, sheet3]` +- 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) ------------ -## plugins +### plugins - Type: Array - Default: [] -- Usage: Plug-in configuration, support chart: "chart" +- Usage: Configure plug-in, support chart: "chart" ------------ -## autoFormatw -- Type: Boolean -- Default: false -- Usage: Automatically format numbers with more than 4 digits as 'billion format', for example: true or "true" or "TRUE" +### column +- Type: Number +- Default: 60 +- Usage: The default number of columns in an empty workbook ------------ -## accuracy +### row - Type: Number -- Default: undefined -- Usage: Set the accuracy,the number of digits after the decimal point. Pass the parameter as a number or numeric string, for example: "0" or 0 +- Default: 84 +- Usage: The default number of rows in an empty workbook ------------ -## allowCopy +### autoFormatw - Type: Boolean -- Default: true -- Usage: Whether to allow copying +- Default: false +- Usage: Automatically format numbers with more than 4 digits into "billion format", for example: true or "true" or "TRUE" ------------ -## showGridLines +### accuracy - Type: Number -- Default: 1 -- Usage: Whether to show grid lines, `1` means show，`0` means hide +- Default: undefined +- Usage: Set the precision, the number of digits after the decimal point. The parameter is a number or a string of numbers, for example: "0" or 0 ------------ -## showtoolbar +### allowCopy - Type: Boolean - Default: true -- Usage: Whether to display the toolbar in the second row +- Usage: Whether to allow copy ------------ -## showinfobar +### showtoolbar - Type: Boolean - Default: true -- Usage: Whether to display the top name bar +- Usage: Whether to show the toolbar + +------------ +### showtoolbarConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Custom configuration toolbar +- Format: + ```json + { + undoRedo: false, //Undo redo + paintFormat: false, //Format brush + currencyFormat: false, //currency format + percentageFormat: false, //Percentage format + numberDecrease: false, //'Decrease the number of decimal places' + numberIncrease: false, //'Increase the number of decimal places + moreFormats: false, //'More Formats' + font: false, //'font' + fontSize: false, //'Font size' + bold: false, //'Bold (Ctrl+B)' + italic: false, //'Italic (Ctrl+I)' + strikethrough: false, //'Strikethrough (Alt+Shift+5)' + textColor: false, //'Text color' + fillColor: false, //'Cell color' + border: false, //'border' + mergeCell: false, //'Merge cells' + horizontalAlignMode: false, //'Horizontal alignment' + verticalAlignMode: false, //'Vertical alignment' + textWrapMode: false, //'Wrap mode' + textRotateMode: false, //'Text Rotation Mode' + frozenMode: false, //'freeze mode' + sort: false, //'sort' + filter: false, //'filter' + findAndReplace: false, //'Find and Replace' + function: false, //'formula' + conditionalFormat: false, //'Conditional Format' + postil: false, //'comment' + pivotTable: false, //'PivotTable' + chart: false, //'chart' (the icon is hidden, but if the chart plugin is configured, you can still create a new chart by right click) + screenshot: false, //'screenshot' + splitColumn: false, //'Split column' + } + ``` + +------------ +### showinfobar +- Type: Boolean +- Default: true +- Usage: Whether to show the top information bar ------------ -## showsheetbar +### showsheetbar - Type: Boolean - Default: true -- Usage: Whether to display the bottom table name area +- Usage: Whether to show the bottom sheet button + +------------ +### showsheetbarConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Custom configuration bottom sheet button +- Format: + ```json + { + add: false, //Add worksheet + menu: false, //Worksheet management menu + sheet: false //Worksheet display + } + ``` ------------ -## showstatisticBar +### showstatisticBar - Type: Boolean - Default: true -- Usage: Whether to display the bottom count bar +- Usage: Whether to show the bottom count bar + +------------ +### showstatisticBarConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Customize the bottom count bar +- Format: + ```json + { + count: false, // Count bar + zoom: false // Zoom + } + +------------ +### sheetBottomConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Add row button and back to top button configuration below the worksheet +- Format: + ```json + { + addRow: false, // Add row button + backTop: false // Back to the top + } ------------ -## allowEdit +### allowEdit - Type: Boolean - Default: true -- Usage: Whether to allow frontend editing +- Usage: Whether to allow front-end editing ------------ -## enableAddRow +### enableAddRow - Type: Boolean - Default: true -- Usage: Allow add line +- Usage: Allow additional rows ------------ -## enableAddCol +### enableAddCol - Type: Boolean - Default: true -- Usage: Allow add column +- Usage: Allow adding columns ------------ -## userInfo +### userInfo - Type: String - Default: `' rabbit'` - Usage: User information display style in the upper right corner ------------ -## userMenuItem +### userMenuItem - Type: Array -- Default: `[{url:"www.baidu.com", "icon":'', "name":"My Table"}, {url:"www.baidu.com", "icon":'', "name":"Sign Out"}]` -- Usage: The menu, which popped up by clicking the user information in the upper right corner +- Default: `[{url:"www.baidu.com", "icon":'', "name":"我的表格"}, {url:"www.baidu.com", "icon":'', "name":"退出登陆"}]` +- Usage: Click the pop-up menu of user information in the upper right corner ------------ -## myFolderUrl +### myFolderUrl - Type: String - Default: "www.baidu.com" -- Usage: Back button link in the upper left corner +- Usage: The link of the `<` back button in the upper left corner ------------ -## devicePixelRatio +### devicePixelRatio - Type: Number - Default: window.devicePixelRatio -- Usage: Device Pixel Ratio, the larger the ratio, the higher the table resolution +- Usage: Device ratio, the larger the ratio, the higher the resolution of the workbook ------------ -## allowUpdate -- Type: Boolean -- Default: false -- Usage: Whether to allow back-end update after operating the table, used in conjunction with `updateUrl` - ------------- -## loadUrl +### functionButton - Type: String - Default: "" -- Usage: Configure the address of `loadUrl`, Luckysheet will request the table data through ajax. By default, all `data` in the sheet data with status 1 is loaded, and the rest of the sheet loads all fields except the `data` field. +- Usage: Function buttons in the upper right corner, for example:`' '` ------------ -## loadSheetUrl -- Type: String -- Default: "" -- Usage: Configure the address of `loadSheetUrl`, the parameters are `gridKey` (table primary key) and `index` (sheet primary key collection, format is `[1,2,3]`), the returned data is the `data` field set of sheet +### 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 ------------ -## updateUrl -- Type: String -- Default: "" -- Usage: The back-end update address after operating the table will only be effective when `allowUpdate` is `true` +### enablePage +- Type: Boolean +- Default: false +- Usage: Allow to load next page ------------ -## updateImageUrl -- Type: String -- Default: "" -- Usage: Update URL of thumbnail +### forceCalculation +- Type: Boolean +- Default: false +- Usage: Force refresh formula. + + 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! + +------------ +### cellRightClickConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Custom configuration cell right-click menu +- Format: + ```json + { + copy: false, //Copy + copyAs: false, //Copy as + paste: false, //Paste + insert: false, //Insert + delete: false, //Delete + hide: false, //Hide + deleteCell: false, //Delete cell + clear: false, //Clear content + matrix: false, //Matrix operation selection + sort: false, //Sort selection + filter: false, //Filter selection + chart: false //Chart generation + } + +------------ +### sheetRightClickConfig + +[todo] + +- Type: Object +- Default: {} +- Usage: Customize the right-click menu of the bottom sheet bar +- Format: + ```json + { + delete: false, //Delete + copy: false, //Copy + rename: false, //Rename + color: false, //Change color + hide: false, //Hide + show: false, //Unhide + left: false, //Move to the left + right: false //Move to the right + } + +------------ +### showRowBar +- Type: Boolean +- Default: true +- Usage: Whether to show the row number area ------------ -## functionButton -- Type: String -- Default: "" -- Usage: Function buttons in the upper right corner, for example`' '` +### showColumnBar +- Type: Boolean +- Default: true +- Usage: Whether to show the column number area ------------ -## showConfigWindowResize +### sheetFormulaBar - Type: Boolean - Default: true -- Usage: The configuration of the chart or pivot table will pop up on the right. Set whether the table will be automatically indented after popping up +- Usage: Whether to show the formula bar ------------ -## enablePage -- Type: Boolean -- Default: false -- Usage: Allow next page to load +### defaultFontSize +- Type：Number +- Default：11 +- Usage：Initialize the default font size + +------------ + +## Hook Function (TODO) + +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. + +## Cell + +### cellRenderAfter +- Type: Function +- Default: null +- Usage: Triggered after the cell rendering ends +- Parameter: + - {Number} [r]: Row number of cell + - {Number} [c]: Column number of cell + - {Object} [v]: Cell object + +------------ +### cellHover +- Type: Function +- Default: null +- Usage: Triggered when the mouse moves over the cell (hover) +- Parameter: + - {Number} [r]: Row number of cell + - {Number} [c]: Column number of cell + - {Object} [v]: Cell object + +------------ +### cellEditBefore +- Type: Function +- Default: null +- Usage: Triggered after double-clicking the cell, that is, when double-clicking the cell to edit the content, this method is triggered first +- Parameter: + - {Number} [r]: Row number of cell + - {Number} [c]: Column number of cell + - {Object} [v]: Cell object + +------------ +### cellEditAfter +- Type: Function +- Default: null +- Usage: Triggered after double-clicking the cell, that is, when double-clicking the cell to edit the content, this method is finally triggered +- Parameter: + - {Number} [r]: Row number of cell + - {Number} [c]: Column number of cell + - {Object} [oldV]: Cell object before Modified + - {Object} [newV]: Cell object after Modified + +------------ +### fireMousedown +- Type: Function +- Default: null +- Usage: Customized method of drilling down cell data + +------------ + +## Selected area + +### rangeSelectBefore +- Type: Function +- Default: null +- Usage: Frame selection or trigger before setting selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + +------------ +### rangeSelectAfter +- Type: Function +- Default: null +- Usage: Frame selection or trigger after setting selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + +------------ +### rangeMoveBefore +- Type: Function +- Default: null +- Usage: Before moving the selection, include a single cell +- Parameter: + - {Array} [range]: The current selection area, can only be a single selection area + +------------ +### rangeMoveAfter +- Type: Function +- Default: null +- Usage: After moving the selection, include a single cell +- Parameter: + - {Array} [oldRange]: The current selection range before moving, can only be a single selection + - {Array} [newRange]: The current selection range after moving, can only be a single selection + +------------ +### rangeEditBefore +- Type: Function +- Default: null +- Usage: Before the selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: Data corresponding to the selection area + +------------ +### rangeEditAfter +- Type: Function +- Default: null +- Usage: After the selection is modified +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [oldData]: Before modification, the data corresponding to the selection area + - {Object} [newData]: After modification, the data corresponding to the selection area + +------------ +### rangeCopyBefore +- Type: Function +- Default: null +- Usage: Before copying selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: Data corresponding to the selection area + +------------ +### rangeCopyAfter +- Type: Function +- Default: null +- Usage: After copying selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: Data corresponding to the selection area + +------------ +### rangePasteBefore +- Type: Function +- Default: null +- Usage: Before pasting the selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: The data corresponding to the selection area to be pasted + +------------ +### rangePasteAfter +- Type: Function +- Default: null +- Usage: After pasting the selection +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [originData]: The data corresponding to the selection area to be pasted + - {Object} [pasteData]: Data to paste + +------------ +### rangeCutBefore +- Type: Function +- Default: null +- Usage: Before selection cut +- Parameter: + - {Array} [range]: Selection range, can only be a single range + - {Object} [data]: The data corresponding to the selection area to be cut + +------------ +### rangeCutAfter +- Type: Function +- Default: null +- Usage: After selection cut +- Parameter: + - {Array} [range]: Selection range, can only be a single range + - {Object} [data]: The data corresponding to the selection area to be cut ------------ -## beforeCreateDom +### rangeDeleteBefore - Type: Function - Default: null -- Usage: Custom method before table creation +- Usage: Before the selection is deleted +- Parameter: + - {Array} [range]: Selection range, can only be a single range + - {Object} [data]: The data corresponding to the selection area to be deleted ------------ -## fireMousedown +### rangeDeleteAfter - Type: Function - Default: null -- Usage: Custom method for drilling down cell data +- Usage: After the selection is deleted +- Parameter: + - {Array} [range]: Selection range, can only be a single range + - {Object} [data]: The data corresponding to the selection area to be deleted +------------ +### rangeClearBefore +- Type: Function +- Default: null +- Usage: Before the selection is cleared +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: The data corresponding to the selection area to be cleared + +------------ +### rangeClearAfter +- Type: Function +- Default: null +- Usage: After the selection is cleared +- Parameter: + - {Object || Array} [range]: Selection area, may be multiple selection areas + - {Object} [data]: The data corresponding to the selection area to be cleared + +------------ +### rangePullBefore +- Type: Function +- Default: null +- Usage: Before selection drop down +- Parameter: + - {Array} [range]: The current selection range, can only be a single range + +------------ +### rangePullAfter +- Type: Function +- Default: null +- Usage: After selection drop down +- Parameter: + - {Array} [range]: The selection range after the drop-down can only be a single range + +------------ + +## Worksheet + +### sheetCreatekBefore +- Type: Function +- Default: null +- Usage: Triggered before the worksheet is created, the new worksheet also includes the new pivot table + +------------ +### sheetCreateAfter +- Type: Function +- Default: null +- Usage: Triggered after the worksheet is created, the new worksheet also includes the new pivot table +- Parameter: + - {Object} [sheet]: The configuration of the newly created worksheet + +------------ +### sheetMoveBefore +- Type: Function +- Default: null +- Usage: Before the worksheet is moved +- Parameter: + - {Number} [i]: `index` of current worksheet + - {Number} [order]: `Order` of current worksheet + +------------ +### sheetMoveAfter +- Type: Function +- Default: null +- Usage: After the worksheet is moved +- Parameter: + - {Number} [i]: `index` of current worksheet + - {Number} [oldOrder]: Before modification, the `order` of the current worksheet + - {Number} [newOrder]: After modification, the `order` of the current worksheet + +------------ +### sheetDeleteBefore +- Type: Function +- Default: null +- Usage: Before the worksheet is deleted +- Parameter: + - {Object} [sheet]: Configuration of the worksheet to be deleted + +------------ +### sheetDeleteAfter +- Type: Function +- Default: null +- Usage: After the worksheet is deleted +- Parameter: + - {Object} [sheet]: Configuration of deleted worksheet + +------------ +### sheetEditNameBefore +- Type: Function +- Default: null +- Usage: Before changing the name of the worksheet +- Parameter: + - {Number} [i]: `index` of current worksheet + - {String} [name]: Current worksheet name + +------------ +### sheetEditNameAfter +- Type: Function +- Default: null +- Usage: After changing the name of the worksheet +- Parameter: + - {Number} [i]: `index` of current worksheet + - {String} [oldName]: Before modification, the current worksheet name + - {String} [newName]: After modification, the current worksheet name + +------------ +### sheetEditColorBefore +- Type: Function +- Default: null +- Usage: Before changing the color of the worksheet +- Parameter: + - {Number} [i]: `index` of current worksheet + - {String} [color]: Current worksheet color + +------------ +### sheetEditColorAfter +- Type: Function +- Default: null +- Usage: After changing the color of the worksheet +- Parameter: + - {Number} [i]: `index` of current worksheet + - {String} [oldColor]: Before modification, the current worksheet color + - {String} [newColor]: After modification, the current worksheet color + +------------ + +## Workbook + +### workbookCreateBefore +- Type: Function +- Default: null +- 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 + +------------ + +## Freeze + +### frozenCreateBefore +- Type: Function +- Default: null +- Usage: Before setting freeze +- Parameter: + - {Object} [frozen]: Freeze type information + +------------ +### frozenCreateAfter +- Type: Function +- Default: null +- Usage: After setting freeze +- Parameter: + - {Object} [frozen]: Freeze type information + +------------ +### frozenCancelBefore +- Type: Function +- Default: null +- Usage: Before unfreezing +- Parameter: + - {Object} [frozen]: Freeze type information + +------------ +### frozenCancelAfter +- Type: Function +- Default: null +- Usage: After unfreezing +- Parameter: + - {Object} [frozen]: Freeze type information + ------------ \ No newline at end of file diff --git a/docs/guide/operate.md b/docs/guide/operate.md index 6b63fbc..c349bf7 100644 --- a/docs/guide/operate.md +++ b/docs/guide/operate.md @@ -1,16 +1,28 @@ # Table Operation +`luckysheet` stores all operations in the history to `undo` and `redo`. If `allowupdate` is set to true and `updateURL` is available in initial, operations will be updated on the backend in real-time via webSocket. And every one can edit same sheet on the same time. -## Cell refresh +>Source code [`src/controllers/server.js`] (https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/server.js) The module shows us the function of background saving. + +In general, shared editing(or collaborative editing) is controled by the account system created by developers to control permissions. + +The following are all types of operations that support transferring to the background. In this case, I use mongodb as a storage example to explain how front-end and back-end interacts with eachother. +Pay attention, `i` in the object is the `index` of the sheet rather than `order`. +## Cell refresh +### single cell refresh - **Format**： ```json { "t": "v", - "i": 3, - "v": "asdf", - "r": 5, - "c": 7 + "i": "Sheet_0554kKiKl4M7_1597974810804", + "v": { + "v": 233, + "ct": { "fa": "General", "t": "n" }, + "m": "233" + }, + "r": 0, + "c": 1 } ``` @@ -20,7 +32,7 @@ | ------------ | ------------ | |t|Operation type symbol| |i|The index value of the current sheet| - |v|Cell value| + |v|Cell value, refer to [单元格属性表](/zh/guide/cell.html#基本单元格)| |r|Row number of cell| |c|The column number of the cell| @@ -515,6 +527,43 @@ Delete the sheet whose index is the value corresponding to `deleIndex`. +### restore from a deleted sheet + +- **format**： + + ```json + { + "t": "shre", + "i": null, + "v": { + "reIndex": "0" + } + } + ``` + +- **Explanation**： + + + + + + + + + + + + + + + + +
ParameterExplanation
tOperation type symbol
vdeleIndex需要恢复的sheet索引
+ +- **Backend update**： + + restore the sheet whose index is the number of `reIndex`. + ### Position - **Format**： @@ -522,8 +571,17 @@ ```json { "t": "shr", + "i": null, "v": { - "index": "positon" + "0": 1, + "1": 0, + "2": 2, + "3": 3, + "4": 4, + "5": 5, + "6": 6, + "7": 7, + "Sheet_6az6nei65t1i_1596209937084": 8 } } ``` @@ -543,6 +601,31 @@ `luckysheetfile[key2].order = value2` `luckysheetfile[key3].order = value3` +### switch to the specified sheet + +- **format**： + + ```json + { + "t": "shs", + "i": null, + "v": 1 + } + ``` + +- **Explanation**： + + |Parameter|Explanation| + | ------------ | ------------ | + |t|Operation type symbol| + |v|index of the specified sheet| + +- **Backend update**： + + setting the `status` = `1`, when the `index` of a sheet is eaqul to `v`： + + `luckysheetfile[v].status = 1` + ## Sheet attributes (hide or show) - **Format**： @@ -618,4 +701,188 @@ - **Backend update**： - According to gridkey, update the thumbnail field of the table in mysql to the img value, and update the status field of the sheet whose index is the curindex value to 1, and set the status value of other sheets to 0. \ No newline at end of file + According to gridkey, update the thumbnail field of the table in mysql to the img value, and update the status field of the sheet whose index is the curindex value to 1, and set the status value of other sheets to 0. + +## Chart(TODO) + +There are four types of chart operations: add new chart -"add", move chart position-"xy", zoom chart-"wh", and update chart configuration-"update". + +### new chart + +- **format**： + + ```json + { + "t": "c", + "i": 0, + "op":"add", + "v": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "width": 400, + "height": 250, + "left": 20, + "top": 120, + "sheetIndex": "Sheet_6az6nei65t1i_1596209937084", + "needRangeShow": true, + "chartOptions": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "chartAllType": "echarts|line|default", + "rangeArray": [ { "row": [ 0, 4 ], "column": [ 0, 7 ] } ], + "rangeColCheck": { "exits": true, "range": [ 0, 0 ] }, + "rangeRowCheck": { "exits": true, "range": [ 0, 0 ] }, + "rangeConfigCheck": false, + "defaultOption": { + "title": { + "show": true, + "text": "default title" + } + } + }, + "isShow": true + } + } + ``` + +- **Explanation**： + + |Parameter|Explanation| + | ------------ | ------------ | + |t|Operation type symbol| + |i|The index value of the current sheet| + |op|Operation options include hide and show| + |v|configuration information of charts| + +- **Backend update**： + + update the chart settings in the current sheet,if`luckysheetfile[i].chart` is null，the array should be `[]` on initial. + + ```json + luckysheetfile[0].chart.push(v) + ``` + +### move chart position + +- **format**： + + ```json + { + "t": "c", + "i": 0, + "op":"xy", + "v": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "left": 20, + "top": 120 + } + } + ``` + +- **Explanation**： + + |Parameter|Explanation| + | ------------ | ------------ | + |t|Operation type symbol| + |i|The index value of the current sheet| + |op|Operation options include hide and show| + |v|configuration information of charts| + +- **Backend update**： + + update the chart settings in the current sheet + + ```js + luckysheetfile[0].chart[v.chart_id].left = v.left; + luckysheetfile[0].chart[v.chart_id].top = v.top; + ``` + +### zoom chart + +- **format**： + + ```json + { + "t": "c", + "i": 0, + "op":"wh", + "v": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "width": 400, + "height": 250, + "left": 20, + "top": 120 + } + } + ``` + +- **Explanation**： + + |Parameter|Explanation| + | ------------ | ------------ | + |t|Operation type symbol| + |i|The index value of the current sheet| + |op|Operation options include hide and show| + |v|configuration information of charts| + +- **Backend update**： + + update the chart settings in the current sheet + + ```js + luckysheetfile[0].chart[v.chart_id].left = v.left; + luckysheetfile[0].chart[v.chart_id].top = v.top; + luckysheetfile[0].chart[v.chart_id].width = v.width; + luckysheetfile[0].chart[v.chart_id].height = v.height; + ``` + +### change the configuration of charts + +- **format**： + + ```json + { + "t": "c", + "i": 0, + "op":"update", + "v": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "width": 400, + "height": 250, + "left": 20, + "top": 120, + "sheetIndex": "Sheet_6az6nei65t1i_1596209937084", + "needRangeShow": true, + "chartOptions": { + "chart_id": "chart_p145W6i73otw_1596209943446", + "chartAllType": "echarts|line|default", + "rangeArray": [ { "row": [ 0, 4 ], "column": [ 0, 7 ] } ], + "rangeColCheck": { "exits": true, "range": [ 0, 0 ] }, + "rangeRowCheck": { "exits": true, "range": [ 0, 0 ] }, + "rangeConfigCheck": false, + "defaultOption": { + "title": { + "show": true, + "text": "default title" + } + } + }, + "isShow": true + } + } + ``` + +- **Explanation**： + + |Parameter|Explanation| + | ------------ | ------------ | + |t|Operation type symbol| + |i|The index value of the current sheet| + |op|Operation options include hide and show| + |v|configuration information of charts| + +- **Backend update**： + + update the chart settings in the current sheet + + ```js + luckysheetfile[0].chart[v.chart_id] = v; + ``` diff --git a/docs/guide/sheet.md b/docs/guide/sheet.md index 872bbdc..eaa126f 100644 --- a/docs/guide/sheet.md +++ b/docs/guide/sheet.md @@ -43,6 +43,8 @@ eg: options.data： "chart": [], //Chart configuration "allowEdit": true, //is editable "zoomRatio":1, // zoom ratio + "image":[], //image + "showGridLines": 1, //Whether to show grid lines }, { "name": "Sheet2", @@ -1219,6 +1221,48 @@ eg: options.data： - default：1 - usage： the zoom ratio of a sheet, which is a two decimal digit between 0~1, like `0.1`、`0.56`. +------------ +### image +- type：Array +- default：[] +- usage： Insert the picture information in the table, including picture address, width and height, position, cropping and other information +- example： + The following is an example of `imageItem`, usually there may be multiple images in a worksheet, so the format of `image` is array `[imageItem,imageItem,...]` + ```json + { + type: '3', //1 Move and resize the cell 2 Move and do not resize the cell 3 Don't move and resize the cell + src:'', //image url + originWidth: 1484, //The original width of the picture + originHeight: 834, //The original height of the picture + default: { + width: 293, //image width + height: 196, //image height + left: 409, //The position of the picture from the left of the table + top: 248, //The position of the picture from the top of the table + }, + crop: { + width: 293, //The width of the picture after cropping + height: 196, //The height of the picture after cropping + offsetLeft: 0, //Displacement from the left of the picture after cropping + offsetTop: 0, //Displacement from the left of the picture after cropping + }, + isFixedPos: false, //Fixed position + fixedLeft: 507, //Fixed position left displacement + fixedTop: 141, //fixed position right displacement + border: { + width: 0, //border width + radius: 0, //Border radius + style:'solid', //border type + color:'#000', //Border color + } + } + ``` +------------ +### showGridLines +- Type: Number +- Default: 1 +- Usage: Whether to show grid lines, `1` means show, `0` means hidden + ------------ ## debug information diff --git a/docs/zh/guide/FAQ.md b/docs/zh/guide/FAQ.md index d28f312..6ae06b1 100644 --- a/docs/zh/guide/FAQ.md +++ b/docs/zh/guide/FAQ.md @@ -42,6 +42,7 @@ luckysheet.buildGridData(luckysheetfile) ## **Q** 远端加载数据是loadUrl还是updateUrl？ **A** : [loadUrl](/zh/guide/config.html#loadurl)。配置了loadUrl，Luckysheet会通过ajax请求整个表格数据，而updateUrl会作为协同编辑实时保存的接口地址。 +注意：初始化数据需要配置loadUrl和loadSheetUrl参数，而协同编辑则在配置loadUrl和loadSheetUrl的基础上，还要配置updateUrl和allowUpdate才能生效。 ------------ diff --git a/docs/zh/guide/api.md b/docs/zh/guide/api.md index a53bd87..40ca681 100644 --- a/docs/zh/guide/api.md +++ b/docs/zh/guide/api.md @@ -215,6 +215,25 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开 ------------ +### exitEditMode([,setting]) + + +- **参数**： + + - {PlainObject} [setting]: 可选参数 + + {Function} [success]: 操作结束的回调函数 + +- **说明**： + + 退出编辑模式。鼠标双击单元格后，会进入单元格编辑模式，编辑完成后，当鼠标再次点击别的地方输入框失焦的时候，则会退出编辑模式，随即单元格的值会进行保存。此Api就是自动退出编辑模式的操作，主要是为了触发自动保存单元格。 + +- **示例**: + + - 手动触发退出编辑模式 + `luckysheet.exitEditMode()` + +------------ + ## 行和列操作 ### setHorizontalFrozen(isRange [,setting]) @@ -1941,6 +1960,48 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开 ------------ +### showGridLines([setting]) + +- **参数**： + + - {PlainObject} [setting]: 可选参数 + + {Number} [order]: 需要显示网格线的工作表下标；默认值为当前工作表下标 + + {Function} [success]: 操作结束的回调函数 + +- **说明**： + + 显示指定下标工作表的网格线，返回操作的工作表对象 + +- **示例**: + + - 显示当前工作表的网格线 + `luckysheet.showGridLines()` + - 显示第三个工作表的网格线 + `luckysheet.showGridLines({order:2})` + +------------ + +### hideGridLines([setting]) + +- **参数**： + + - {PlainObject} [setting]: 可选参数 + + {Number} [order]: 需要隐藏网格线的工作表下标；默认值为当前工作表下标 + + {Function} [success]: 操作结束的回调函数 + +- **说明**： + + 隐藏指定下标工作表的网格线，返回操作的工作表对象 + +- **示例**: + + - 隐藏当前工作表的网格线 + `luckysheet.hideGridLines()` + - 隐藏第三个工作表的网格线 + `luckysheet.hideGridLines({order:2})` + +------------ + ## 工作簿操作 ### create(options [,setting]) @@ -2083,6 +2144,22 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开 ------------ +### refreshFormula([setting]) + +[todo] + +- **参数**： + + - {PlainObject} [setting]: 可选参数 + + {Object | String} [range]: 选区范围,支持选区的格式为`"A1:B2"`、`"sheetName!A1:B2"`或者`{row:[0,1],column:[0,1]}`，只能为单个选区；默认为整个当前工作表 + + {Function} [success]: 操作结束的回调函数 + +- **说明**： + + 强制刷新公式。当你直接修改了多个单元格的值，且没有触发刷新，且这些单元格跟公式相关联，则可以使用这个api最后强制触发一次公式刷新，一般是建议指定受影响的单元格范围便于防止性能问题，如果无法确定，则留空保持整个工作表遍历刷新。 + +------------ + ## 图表 ### insertChart([setting]) diff --git a/docs/zh/guide/config.md b/docs/zh/guide/config.md index 3b3d52c..0d804e0 100644 --- a/docs/zh/guide/config.md +++ b/docs/zh/guide/config.md @@ -22,7 +22,7 @@ luckysheet.create(options) 这里的`options`配置项会作用于整个表格，特别的，单个sheet的配置则需要在`options.data`数组中，分别设置对应更详细的参数，参考[工作表配置](/zh/guide/sheet.html) -针对个性化的需求，除了允许配置名称栏（[showinfobar](#showinfobar)）、工具栏（[showtoolbar](#showtoolbar)）、底部sheet页（[showsheetbar](#showsheetbar)）、底部计数栏（[showstatisticBar](#showstatisticBar)）之外， +针对个性化的需求，除了允许配置信息栏（[showinfobar](#showinfobar)）、工具栏（[showtoolbar](#showtoolbar)）、底部sheet页（[showsheetbar](#showsheetbar)）、底部计数栏（[showstatisticBar](#showstatisticBar)）之外， Luckysheet开放了更细致的自定义配置选项，分别有 - 自定义工具栏（[showtoolbarConfig](#showtoolbarConfig)） @@ -30,7 +30,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 自定义计数栏（[showstatisticBarConfig](#showstatisticBarConfig)） - 自定义添加行和回到顶部（[sheetBottomConfig](#sheetBottomConfig)） - 自定义单元格右键菜单（[cellRightClickConfig](#cellRightClickConfig)） -- 自定义sheet页右击菜单（[sheetRightClickConfig](#sheetRightClickConfig)） +- 自定义底部sheet页右击菜单（[sheetRightClickConfig](#sheetRightClickConfig)） ## 配置项 @@ -53,10 +53,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 亿万格式 [autoFormatw](#autoFormatw) - 精度 [accuracy](#accuracy) - 允许复制 [allowCopy](#allowCopy) -- 网格线 [showGridLines](#showGridLines) - 工具栏 [showtoolbar](#showtoolbar) - 自定义工具栏[showtoolbarConfig](#showtoolbarConfig) -- 名称栏 [showinfobar](#showinfobar) +- 信息栏 [showinfobar](#showinfobar) - 底部sheet页 [showsheetbar](#showsheetbar) - 自定义底部sheet页 [showsheetbarConfig](#showsheetbarConfig) - 底部计数栏 [showstatisticBar](#showstatisticBar) @@ -75,6 +74,10 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 刷新公式 [forceCalculation](#forceCalculation) - 自定义单元格右键菜单 [cellRightClickConfig](#cellRightClickConfig) - 自定义sheet页右击菜单 [sheetRightClickConfig](#sheetRightClickConfig) +- 是否显示行号区域 [showRowBar](#showRowBar) +- 是否显示列号区域 [showColumnBar](#showColumnBar) +- 是否显示公式栏 [sheetFormulaBar](#sheetFormulaBar) +- 初始化默认字体大小 [defaultFontSize](#defaultFontSize) ### container - 类型：String @@ -103,13 +106,15 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### loadUrl - 类型：String - 默认值："" -- 作用：配置`loadUrl`的地址，Luckysheet会通过ajax请求整个表格数据，默认载入status为1的sheet数据中的所有`celldata`，其余的sheet载入除`celldata`字段外的所有字段。但是考虑到一些公式、图表及数据透视表会引用其他sheet的数据，所以前台会加一个判断，如果该当前sheet引用了其他sheet的数据则把引用到的sheet的数据一并补全。 +- 作用：配置`loadUrl`的地址，与`loadSheetUrl`配合使用，一般用于大数据量的时候。也可以不用Luckysheet提供的接口参数，使用[data](#data)参数可以提前准备好所有表格数据用于初始化。 + + Luckysheet会通过ajax请求整个表格数据，默认载入status为1的sheet数据中的所有`celldata`，其余的sheet载入除`celldata`字段外的所有字段。但是考虑到一些公式、图表及数据透视表会引用其他sheet的数据，所以前台会加一个判断，如果该当前sheet引用了其他sheet的数据则会通过`loadSheetUrl`配置的接口地址请求数据，把引用到的sheet的数据一并补全。因为 `loadUrl`只负责当前页数据，所以还需要配置`loadSheetUrl`作为异步加载数据的接口。 ------------ ### loadSheetUrl - 类型：String - 默认值："" -- 作用：配置`loadSheetUrl`的地址，参数为`gridKey`（表格主键） 和 `index`（sheet主键合集，格式为`[1,2,3]`），返回的数据为sheet的`celldata`字段数据集合 +- 作用：配置`loadSheetUrl`的地址，参数为`gridKey`（表格主键） 和 `index`（sheet主键合集，格式为`["sheet_01","sheet_02","sheet_0"]`），返回的数据为sheet的`celldata`字段数据集合。为了加载性能考虑，除了第一次加载当前页的`celldata`数据之外，其余sheet的数据，是在切换到那个sheet页的时候，才会请求那一页的数据。 ------------ ### allowUpdate @@ -121,7 +126,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### updateUrl - 类型：String - 默认值："" -- 作用：操作表格后的后台更新地址，在`allowUpdate`为`true`时才会有效 +- 作用：操作表格后的后台更新地址，在`allowUpdate`为`true`时才会有效，此接口也是共享编辑的接口地址。 + +注意，还需要配置`loadUrl`和`loadSheetUrl`才能生效 ------------ ### updateImageUrl @@ -171,17 +178,11 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：true - 作用：是否允许拷贝 ------------- -### showGridLines -- 类型：Number -- 默认值：1 -- 作用：是否显示网格线，`1`表示显示，`0`表示隐藏 - ------------ ### showtoolbar - 类型：Boolean - 默认值：true -- 作用：是否第二列显示工具栏 +- 作用：是否显示工具栏 ------------ ### showtoolbarConfig @@ -232,7 +233,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### showinfobar - 类型：Boolean - 默认值：true -- 作用：是否显示顶部名称栏 +- 作用：是否显示顶部信息栏 ------------ ### showsheetbar @@ -376,18 +377,18 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 格式： ```json { - copy: false, // '复制' - copyAs: false, // '复制为' - paste: false, // '粘贴' - insert: false, // '插入' - delete: false, // '删除' - hide: false, // '隐藏' - deleteCell: false, // '删除单元格' - clear: false, // '清除内容' - matrix: false, // '矩阵操作选区' - sort: false, // '排序选区' - filter: false, //'筛选选区' - chart: false // '图表生成' + copy: false, // 复制 + copyAs: false, // 复制为 + paste: false, // 粘贴 + insert: false, // 插入 + delete: false, // 删除 + hide: false, // 隐藏 + deleteCell: false, // 删除单元格 + clear: false, // 清除内容 + matrix: false, // 矩阵操作选区 + sort: false, // 排序选区 + filter: false, // 筛选选区 + chart: false // 图表生成 } ------------ @@ -401,8 +402,8 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 格式： ```json { - delete: false, // '删除' - copy: false, // '复制' + delete: false, // 删除 + copy: false, // 复制 rename: false, //重命名 color: false, //更改颜色 hide: false, //隐藏 @@ -411,6 +412,30 @@ Luckysheet开放了更细致的自定义配置选项，分别有 right: false //向右移 } +------------ +### showRowBar +- 类型：Boolean +- 默认值：true +- 作用：是否显示行号区域 + +------------ +### showColumnBar +- 类型：Boolean +- 默认值：true +- 作用：是否显示列号区域 + +------------ +### sheetFormulaBar +- 类型：Boolean +- 默认值：true +- 作用：是否显示公示栏 + +------------ +### defaultFontSize +- 类型：Number +- 默认值：11 +- 作用：初始化默认字体大小 + ------------ ## 钩子函数（TODO） @@ -652,8 +677,8 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：null - 作用：sheet移动前 - 参数： - - {Number} [i]: 当前sheet页的index - - {Number} [order]: 当前sheet页order + - {Number} [i]: 当前sheet页的`index` + - {Number} [order]: 当前sheet页`order` ------------ ### sheetMoveAfter @@ -661,9 +686,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：null - 作用：sheet移动后 - 参数： - - {Number} [i]: 当前sheet页的index - - {Number} [oldOrder]: 修改前当前sheet页order - - {Number} [newOrder]: 修改后当前sheet页order + - {Number} [i]: 当前sheet页的`index` + - {Number} [oldOrder]: 修改前当前sheet页`order` + - {Number} [newOrder]: 修改后当前sheet页`order` ------------ ### sheetDeleteBefore @@ -687,7 +712,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：null - 作用：sheet修改名称前 - 参数： - - {Number} [i]: sheet页的index + - {Number} [i]: sheet页的`index` - {String} [name]: 当前sheet页名称 ------------ @@ -706,7 +731,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：null - 作用：sheet修改颜色前 - 参数： - - {Number} [i]: sheet页的index + - {Number} [i]: sheet页的`index` - {String} [color]: 当前sheet页颜色 ------------ @@ -715,7 +740,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 默认值：null - 作用：sheet修改颜色后 - 参数： - - {Number} [i]: sheet页的index + - {Number} [i]: sheet页的`index` - {String} [oldColor]: 修改前当前sheet页颜色 - {String} [newColor]: 修改后当前sheet页颜色 @@ -742,7 +767,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### workbookDestroyBefore - 类型：Function - 默认值：null -- 作用：表格创建之后触发 +- 作用：表格销毁之前触发 - 参数： - {Object} [book]: 整个工作簿的配置（options） @@ -750,7 +775,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### workbookDestroyAfter - 类型：Function - 默认值：null -- 作用：表格创建之后触发 +- 作用：表格销毁之后触发 - 参数： - {Object} [book]: 整个工作簿的配置（options） diff --git a/docs/zh/guide/sheet.md b/docs/zh/guide/sheet.md index ab1fbaa..e3f3358 100644 --- a/docs/zh/guide/sheet.md +++ b/docs/zh/guide/sheet.md @@ -44,6 +44,7 @@ options.data示例如下： "allowEdit": true, //是否允许编辑 "zoomRatio":1, // 缩放比例 "image":[], //图片 + "showGridLines": 1, //是否显示网格线 }, { "name": "Sheet2", @@ -1260,7 +1261,12 @@ options.data示例如下： } ``` ------------ +### showGridLines +- 类型：Number +- 默认值：1 +- 作用：是否显示网格线，`1`表示显示，`0`表示隐藏 +------------ ## 调试信息 初始化所需要的参数，会从简洁的角度出发来考虑设计，但是本地存储的参数则不同。 diff --git a/gulpfile.js b/gulpfile.js index 3e39621..bbfd919 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -173,7 +173,9 @@ async function core() { file: 'dist/luckysheet.umd.js', format: 'umd', name: 'luckysheet', - sourcemap: true + sourcemap: true, + inlineDynamicImports:true, + }); if(production){ @@ -181,7 +183,8 @@ async function core() { file: 'dist/luckysheet.esm.js', format: 'esm', name: 'luckysheet', - sourcemap: true + sourcemap: true, + inlineDynamicImports:true, }); } diff --git a/package.json b/package.json index e2997ee..5657c58 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "luckysheet", - "version": "2.1.0", + "version": "2.1.2", "main": "dist/luckysheet.cjs.js", "module": "dist/luckysheet.esm.js", "browser": "dist/luckysheet.umd.js", diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html index f599eff..d1f50f4 100644 --- a/src/assets/iconfont/demo_index.html +++ b/src/assets/iconfont/demo_index.html @@ -30,6 +30,30 @@