diff --git a/docs/angular_integration.md b/docs/angular_integration.md index 40b43e43..4a841f78 100644 --- a/docs/angular_integration.md +++ b/docs/angular_integration.md @@ -18,14 +18,14 @@ DHTMLX Spreadsheet is compatible with **Angular**. We have prepared code example Before you start to create a new project, install [**Angular CLI**](https://angular.dev/tools/cli) and [**Node.js**](https://nodejs.org/en/). ::: -Create a new **my-angular-spreadsheet-app** project using Angular CLI. Run the following command for this purpose: +Create a new *my-angular-spreadsheet-app* project using Angular CLI. Run the following command: ~~~json ng new my-angular-spreadsheet-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating a new Angular app. ::: The command above installs all the necessary tools, so you don't need to run any additional commands. @@ -45,25 +45,25 @@ yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create an Angular component, to add Spreadsheet into the application. Create the **spreadsheet** folder in the **src/app/** directory, add a new file into it and name it **spreadsheet.component.ts**. Then complete the steps described below. +Now you need to create an Angular component to add Spreadsheet into the application. Create the *spreadsheet* folder in the *src/app/* directory, add a new file into it and name it *spreadsheet.component.ts*. Then complete the steps described below. #### Importing source files Open the file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the imported path looks like this: ~~~jsx import { Spreadsheet } from 'dhx-spreadsheet-package'; @@ -111,7 +111,7 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { #### Adding styles -To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the **spreadsheet.component.css** file in the **src/app/spreadsheet/** directory and specify important styles for Spreadsheet and its container: +To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the *spreadsheet.component.css* file in the *src/app/spreadsheet/* directory and specify important styles for Spreadsheet and its container: ~~~css title="spreadsheet.component.css" /* import Spreadsheet styles */ @@ -133,7 +133,7 @@ body { #### Loading data -To add data into Spreadsheet, you need to provide a data set. You can create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.ts* file in the *src/app/spreadsheet/* directory and add some data into it: ~~~jsx title="data.ts" export function getData(): any { @@ -178,7 +178,7 @@ export function getData(): any { } ~~~ -Then open the ***spreadsheet.component.ts*** file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. +Then open the *spreadsheet.component.ts* file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below. ~~~jsx {2,18,21} title="spreadsheet.component.ts" import { Spreadsheet } from "@dhx/trial-spreadsheet"; @@ -210,13 +210,13 @@ export class SpreadsheetComponent implements OnInit, OnDestroy { } ~~~ -Now the Spreadsheet component is ready to use. When the element will be added to the page, it will initialize the Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. +Now the Spreadsheet component is ready to use. When the element is added to the page, it initializes Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties. #### Handling events -When a user makes some action in the Spreadsheet, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +When a user performs an action in Spreadsheet, the widget invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). -Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in: +Open the *spreadsheet.component.ts* file and complete the `ngOnInit()` method as in: ~~~jsx {5-8} title="spreadsheet.component.ts" // ... @@ -236,7 +236,7 @@ ngOnDestroy() { ### Step 3. Adding Spreadsheet into the app -To add the ***SpreadsheetComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +To add the `SpreadsheetComponent` component into the app, open the *src/app/app.component.ts* file and replace the default code with the following one: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -250,7 +250,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *SpreadsheetComponent* as shown below: +Then create the *app.module.ts* file in the *src/app/* directory and specify the `SpreadsheetComponent` as shown below: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -267,7 +267,7 @@ import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +The last step is to open the *src/main.ts* file and replace the existing code with the following one: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -281,4 +281,4 @@ After that, you can start the app to see Spreadsheet loaded with data on a page. ![DHTMLX Spreadsheet initialized with sample data in an Angular application](/img/integrations/trial_spreadsheet.png) -Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). +Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. You can find the final example on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). diff --git a/docs/api/eventsbus_detach_method.md b/docs/api/eventsbus_detach_method.md index 4da0f011..02607b5c 100644 --- a/docs/api/eventsbus_detach_method.md +++ b/docs/api/eventsbus_detach_method.md @@ -8,7 +8,7 @@ description: You can learn about the detach events bus method in the documentati ### Description -@short: Detaches a handler from an event (which was attached before by the on() method) +@short: Detaches a handler from an event (previously attached with the `on()` method) ### Usage @@ -18,7 +18,7 @@ detach(name: string): void; ### Parameters -- `name` - (required) the name of event to detach +- `name` - (required) the name of the event to detach ### Example @@ -36,7 +36,7 @@ spreadsheet.events.detach("StyleChange"); ~~~ :::info -By default **detach()** removes all event handlers from the target event. You can detach particular event handlers by using the context marker. +By default, `detach()` removes all event handlers from the target event. You can detach particular event handlers using a context marker. ::: ~~~jsx @@ -48,4 +48,4 @@ spreadsheet.events.on("StyleChange", handler2, marker); spreadsheet.events.detach("StyleChange", marker); ~~~ -**Related articles:** [Event Handling](handling_events.md) +**Related article:** [Event Handling](handling_events.md) diff --git a/docs/api/eventsbus_fire_method.md b/docs/api/eventsbus_fire_method.md index ecaccb80..69a340bc 100644 --- a/docs/api/eventsbus_fire_method.md +++ b/docs/api/eventsbus_fire_method.md @@ -27,7 +27,7 @@ fire(name: string, arguments: array): boolean; ### Returns -The method returns `false`, if some of the event handlers return `false`. Otherwise, `true` +The method returns `false` if some of the event handlers return `false`. Otherwise, `true` ### Example @@ -44,4 +44,4 @@ spreadsheet.events.on("CustomEvent", function(param1, param2){ const res = spreadsheet.events.fire("CustomEvent", [12, "abc"]); ~~~ -**Related articles:** [Event Handling](handling_events.md) +**Related article:** [Event Handling](handling_events.md) diff --git a/docs/api/eventsbus_on_method.md b/docs/api/eventsbus_on_method.md index 7d3abedd..e7ac68a5 100644 --- a/docs/api/eventsbus_on_method.md +++ b/docs/api/eventsbus_on_method.md @@ -37,9 +37,9 @@ spreadsheet.events.on("StyleChange", function(id){ :::info See the full list of the Spreadsheet events [here](api/api_overview.md#spreadsheet-events). -You can attach several handlers to the same event and all of them will be executed. If some of handlers return *false*, the related operations will be blocked. Event handlers are processed in the same order that they are attached. +You can attach several handlers to the same event and all of them are executed. If some handlers return `false`, the related operations are blocked. Event handlers are processed in the same order that they are attached. ::: -**Related articles:** [Event Handling](handling_events.md) +**Related article:** [Event Handling](handling_events.md) **Related sample:** [Spreadsheet. Events](https://snippet.dhtmlx.com/2vkjyvsi) diff --git a/docs/api/export_json_method.md b/docs/api/export_json_method.md index 5f5cd307..32eb28ae 100644 --- a/docs/api/export_json_method.md +++ b/docs/api/export_json_method.md @@ -30,6 +30,6 @@ spreadsheet.export.json(); **Changelog:** Added in v4.3 -**Related articles:** [Data loading and export](loading_data.md) +**Related article:** [Data loading and export](loading_data.md) **Related sample:** [Spreadsheet. Export/import JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/docs/api/export_xlsx_method.md b/docs/api/export_xlsx_method.md index 8d5815de..b7ec5602 100644 --- a/docs/api/export_xlsx_method.md +++ b/docs/api/export_xlsx_method.md @@ -36,13 +36,13 @@ spreadsheet.export.xlsx("MyData"); ~~~ :::note -Please note that the component supports export to Excel files with the **.xlsx** extension only. +Note that the component supports export to Excel files with the `.xlsx` extension only. ::: :::info -DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for export of data to Excel. [Check the details](loading_data.md#exporting-data). +DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. [Check the details](loading_data.md#exporting-data). ::: -**Related articles:** [Data loading and export](loading_data.md) +**Related article:** [Data loading and export](loading_data.md) **Related sample:** [Spreadsheet. Export Xlsx](https://snippet.dhtmlx.com/btyo3j8s) diff --git a/docs/api/overview/actions_overview.md b/docs/api/overview/actions_overview.md index 6377e0d4..3a7d2d88 100644 --- a/docs/api/overview/actions_overview.md +++ b/docs/api/overview/actions_overview.md @@ -6,9 +6,9 @@ description: You can check an Actions overview of the DHTMLX JavaScript Spreadsh # Actions overview -This section is dedicated to a new conception of interaction with Spreadsheet events. +This section describes a new approach to interacting with Spreadsheet events. -Starting from v4.3, DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action has been performed. +Starting from v4.3, DHTMLX Spreadsheet includes a pair of [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md) events that make your code simpler and more concise. They fire right before an action is executed and indicate exactly which action was performed. ~~~jsx spreadsheet.events.on("beforeAction", (actionName, config) => { @@ -29,9 +29,9 @@ spreadsheet.events.on("afterAction", (actionName, config) => { [The full list of the available actions is given below.](#list-of-actions) ->It means, that you don't have to constantly add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events anymore to track and handle the actions which you execute when changing something in the spreadsheet. +>This means that you no longer have to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events to track and handle the actions you execute when changing something in the spreadsheet. ->But if needed you can use an **old approach** because all the existing events will continue work as before: +>But if needed, you can use the **old approach**, because all the existing events continue to work as before: ~~~jsx spreadsheet.events.on("afterColumnAdd", function(cell){ console.log("A new column is added", cell); @@ -61,7 +61,7 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){ | **deleteSheet** | The action is executed when removing a sheet | | **filter** | The action is executed when filtering data in a sheet | | **fitColumn** | The action is executed when auto-fitting the width of the column | -| **groupAction** | The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, clear cells' value or styles, etc.) | +| **groupAction** | The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, or clear cells' value or styles) | | **insertLink** | The action is executed when inserting a hyperlink in a cell | | **lockCell** | The action is executed when locking/unlocking a cell | | **merge** | The action is executed when merging a range of cells | diff --git a/docs/api/selection_getfocusedcell_method.md b/docs/api/selection_getfocusedcell_method.md index 7e7c91ef..1142c280 100644 --- a/docs/api/selection_getfocusedcell_method.md +++ b/docs/api/selection_getfocusedcell_method.md @@ -18,7 +18,7 @@ getFocusedCell(): string; ### Returns -The method returns an id of a focused cell +The method returns the id of the focused cell ### Example @@ -35,4 +35,4 @@ spreadsheet.selection.setFocusedCell("D4"); const focused = spreadsheet.selection.getFocusedCell(); // ->"D4" ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md) diff --git a/docs/api/selection_getselectedcell_method.md b/docs/api/selection_getselectedcell_method.md index 392a4262..7aa6e703 100644 --- a/docs/api/selection_getselectedcell_method.md +++ b/docs/api/selection_getselectedcell_method.md @@ -18,7 +18,7 @@ getSelectedCell(): string; ### Returns -The method returns an id(s) or a range of selected cell(s) +The method returns the id(s) or a range of selected cell(s) ### Example @@ -33,4 +33,4 @@ spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md) diff --git a/docs/api/selection_removeselectedcell_method.md b/docs/api/selection_removeselectedcell_method.md index 3244ec69..39ad2ff8 100644 --- a/docs/api/selection_removeselectedcell_method.md +++ b/docs/api/selection_removeselectedcell_method.md @@ -37,6 +37,6 @@ spreadsheet.selection.removeSelectedCell("A3:A6,C2"); **Change log:** Added in v4.2 -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md) **Related sample:** [Spreadsheet. Remove selection](https://snippet.dhtmlx.com/u4j76cuh) diff --git a/docs/api/selection_setfocusedcell_method.md b/docs/api/selection_setfocusedcell_method.md index 7f9e4291..acf06c9b 100644 --- a/docs/api/selection_setfocusedcell_method.md +++ b/docs/api/selection_setfocusedcell_method.md @@ -31,4 +31,4 @@ spreadsheet.parse(data); spreadsheet.selection.setFocusedCell("D4"); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md) diff --git a/docs/api/selection_setselectedcell_method.md b/docs/api/selection_setselectedcell_method.md index 7ca2efef..e23a855a 100644 --- a/docs/api/selection_setselectedcell_method.md +++ b/docs/api/selection_setselectedcell_method.md @@ -38,4 +38,4 @@ spreadsheet.selection.setSelectedCell("B1:B5"); spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md) diff --git a/docs/api/sheetmanager_add_method.md b/docs/api/sheetmanager_add_method.md index 3156c2ff..e41615c8 100644 --- a/docs/api/sheetmanager_add_method.md +++ b/docs/api/sheetmanager_add_method.md @@ -10,10 +10,10 @@ description: You can learn about the add method of the Sheet Manager in the docu @short: Adds a new empty sheet to the spreadsheet and returns the unique identifier of the newly created sheet -If no name is provided, a default name will be generated automatically (e.g. "Sheet 2", "Sheet 3", etc.). +If no name is provided, a default name is generated automatically (for example, "Sheet 2" or "Sheet 3"). :::info -To apply this method, you need to enable the [multiSheets](api/spreadsheet_multisheets_config.md) configuration option. +To apply this method, you need to enable the [`multiSheets`](api/spreadsheet_multisheets_config.md) configuration option. ::: ### Usage @@ -48,4 +48,4 @@ const anotherSheetId = spreadsheet.sheets.add(); **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_clear_method.md b/docs/api/sheetmanager_clear_method.md index f057d21b..a89819ae 100644 --- a/docs/api/sheetmanager_clear_method.md +++ b/docs/api/sheetmanager_clear_method.md @@ -39,4 +39,4 @@ spreadsheet.sheets.clear(); **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_get_method.md b/docs/api/sheetmanager_get_method.md index 634a7de8..a773cf8f 100644 --- a/docs/api/sheetmanager_get_method.md +++ b/docs/api/sheetmanager_get_method.md @@ -38,4 +38,4 @@ console.log(sheet.name); // "Sheet 1" **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_getactive_method.md b/docs/api/sheetmanager_getactive_method.md index 8728c176..48632989 100644 --- a/docs/api/sheetmanager_getactive_method.md +++ b/docs/api/sheetmanager_getactive_method.md @@ -35,4 +35,4 @@ console.log(active.id); // "sheet_1" **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_getall_method.md b/docs/api/sheetmanager_getall_method.md index a45438bb..ce20df82 100644 --- a/docs/api/sheetmanager_getall_method.md +++ b/docs/api/sheetmanager_getall_method.md @@ -42,4 +42,4 @@ console.log(allSheets); **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_remove_method.md b/docs/api/sheetmanager_remove_method.md index 499a03dc..49260aa0 100644 --- a/docs/api/sheetmanager_remove_method.md +++ b/docs/api/sheetmanager_remove_method.md @@ -10,12 +10,12 @@ description: You can learn about the remove method of the Sheet Manager in the d @short: Removes a sheet from the spreadsheet by its identifier -If the removed sheet was active, the spreadsheet will automatically switch to another available sheet. +If the removed sheet was active, the spreadsheet automatically switches to another available sheet. :::info -To apply this method, you need to enable the [multiSheets](api/spreadsheet_multisheets_config.md) configuration option. +To apply this method, you need to enable the [`multiSheets`](api/spreadsheet_multisheets_config.md) configuration option. -Also note, that a sheet won't be deleted if the number of sheets in the spreadsheet is less than 2. +Also note that a sheet is not deleted if the spreadsheet has fewer than 2 sheets. ::: ### Usage @@ -42,4 +42,4 @@ spreadsheet.sheets.remove("sheet_2"); **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/sheetmanager_setactive_method.md b/docs/api/sheetmanager_setactive_method.md index 0136af7b..3e4cab4f 100644 --- a/docs/api/sheetmanager_setactive_method.md +++ b/docs/api/sheetmanager_setactive_method.md @@ -10,7 +10,7 @@ description: You can learn about the setActive method of the Sheet Manager in th @short: Switches the active (visible) sheet to the one specified by its identifier -The spreadsheet UI will re-render to display the target sheet's contents. +The spreadsheet UI re-renders to display the target sheet's contents. ### Usage @@ -40,4 +40,4 @@ console.log(active.name); // "Sheet 2" **Change log:** Added in v6.0 -**Related articles:** [Working with sheets](working_with_sheets.md) +**Related article:** [Working with sheets](working_with_sheets.md) diff --git a/docs/api/spreadsheet_addcolumn_method.md b/docs/api/spreadsheet_addcolumn_method.md index e376e968..a05703ea 100644 --- a/docs/api/spreadsheet_addcolumn_method.md +++ b/docs/api/spreadsheet_addcolumn_method.md @@ -34,4 +34,4 @@ spreadsheet.parse(data); spreadsheet.addColumn("G1"); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_addformula_method.md b/docs/api/spreadsheet_addformula_method.md index b689c852..9c4375ef 100644 --- a/docs/api/spreadsheet_addformula_method.md +++ b/docs/api/spreadsheet_addformula_method.md @@ -10,7 +10,7 @@ description: You can learn about the addFormula method in the documentation of t @short: Registers a custom formula function that can be used in cell formulas -Once registered, the formula is available in any cell by its uppercase name (e.g. =MYFUNC(A1, B2)). +Once registered, the formula is available in any cell by its uppercase name (for example, `=MYFUNC(A1, B2)`). ### Usage @@ -52,4 +52,4 @@ spreadsheet.parse([ **Related sample:** [Spreadsheet. Add custom formula](https://snippet.dhtmlx.com/wvxdlahp) -**Related articles:** [Formulas and functions](functions.md#custom-formulas) +**Related article:** [Formulas and functions](functions.md#custom-formulas) diff --git a/docs/api/spreadsheet_addrow_method.md b/docs/api/spreadsheet_addrow_method.md index 36ffb38f..948a80a7 100644 --- a/docs/api/spreadsheet_addrow_method.md +++ b/docs/api/spreadsheet_addrow_method.md @@ -34,4 +34,4 @@ spreadsheet.parse(data); spreadsheet.addRow("G2"); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_afterclear_event.md b/docs/api/spreadsheet_afterclear_event.md index 3b01eac0..bf75b6b8 100644 --- a/docs/api/spreadsheet_afterclear_event.md +++ b/docs/api/spreadsheet_afterclear_event.md @@ -7,7 +7,7 @@ description: You can learn about the afterClear event in the documentation of th # afterClear :::caution -The **afterClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach: +The `afterClear` event was deprecated in v4.3. It still works, but you should apply the new approach: ~~~jsx spreadsheet.events.on("afterAction", (actionName, config) => { @@ -45,4 +45,4 @@ spreadsheet.events.on("afterClear", function(){ **Changelog:** Added in v4.2 -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_afterdataloaded_event.md b/docs/api/spreadsheet_afterdataloaded_event.md index a6e57142..f8138797 100644 --- a/docs/api/spreadsheet_afterdataloaded_event.md +++ b/docs/api/spreadsheet_afterdataloaded_event.md @@ -8,7 +8,7 @@ description: You can learn about the afterDataLoaded event in the documentation ### Description -@short: Fires after data loading has been completed +@short: Fires after data loading completes ### Usage @@ -34,7 +34,7 @@ spreadsheet.events.on("afterDataLoaded", () => { **Change log:** Added in v5.2 -**Related articles:** [Event handling](handling_events.md) +**Related article:** [Event handling](handling_events.md) **Related sample:** [Spreadsheet. Data loaded event](https://snippet.dhtmlx.com/vxr7amz6) diff --git a/docs/api/spreadsheet_aftereditend_event.md b/docs/api/spreadsheet_aftereditend_event.md index da040a5b..a88495b7 100644 --- a/docs/api/spreadsheet_aftereditend_event.md +++ b/docs/api/spreadsheet_aftereditend_event.md @@ -36,4 +36,4 @@ spreadsheet.events.on("afterEditEnd", function(cell, value){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_aftereditstart_event.md b/docs/api/spreadsheet_aftereditstart_event.md index d55ce6c5..4349bcc8 100644 --- a/docs/api/spreadsheet_aftereditstart_event.md +++ b/docs/api/spreadsheet_aftereditstart_event.md @@ -8,7 +8,7 @@ description: You can learn about the afterEditStart event in the documentation o ### Description -@short: Fires after editing of a cell has started +@short: Fires after editing of a cell starts ### Usage @@ -36,4 +36,4 @@ spreadsheet.events.on("afterEditStart", function(cell, value){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_afterfocusset_event.md b/docs/api/spreadsheet_afterfocusset_event.md index f859061e..e1601369 100644 --- a/docs/api/spreadsheet_afterfocusset_event.md +++ b/docs/api/spreadsheet_afterfocusset_event.md @@ -35,4 +35,4 @@ spreadsheet.events.on("afterFocusSet", function(cell){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_afterselectionset_event.md b/docs/api/spreadsheet_afterselectionset_event.md index e766fe3d..55eaa0f7 100644 --- a/docs/api/spreadsheet_afterselectionset_event.md +++ b/docs/api/spreadsheet_afterselectionset_event.md @@ -35,4 +35,4 @@ spreadsheet.events.on("afterSelectionSet", function(cell){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) +**Related article:** [Event handling](handling_events.md) diff --git a/docs/api/spreadsheet_aftersheetchange_event.md b/docs/api/spreadsheet_aftersheetchange_event.md index f6b0eba6..452a4538 100644 --- a/docs/api/spreadsheet_aftersheetchange_event.md +++ b/docs/api/spreadsheet_aftersheetchange_event.md @@ -37,4 +37,4 @@ spreadsheet.events.on("afterSheetChange", function(sheet) { **Changelog:** Added in v4.1 -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforeclear_event.md b/docs/api/spreadsheet_beforeclear_event.md index 56a1ef1a..19f84c14 100644 --- a/docs/api/spreadsheet_beforeclear_event.md +++ b/docs/api/spreadsheet_beforeclear_event.md @@ -7,7 +7,7 @@ description: You can learn about the beforeClear event in the documentation of t # beforeClear :::caution -The **beforeClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach: +The `beforeClear` event was deprecated in v4.3. It still works, but you should apply the new approach: ~~~jsx spreadsheet.events.on("beforeAction", (actionName, config) => { @@ -50,4 +50,4 @@ spreadsheet.events.on("beforeClear", function(){ **Changelog:** Added in v4.2 -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforeeditend_event.md b/docs/api/spreadsheet_beforeeditend_event.md index 7826c5e9..c0e1cad2 100644 --- a/docs/api/spreadsheet_beforeeditend_event.md +++ b/docs/api/spreadsheet_beforeeditend_event.md @@ -41,4 +41,4 @@ spreadsheet.events.on("beforeEditEnd", function(cell, value){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforeeditstart_event.md b/docs/api/spreadsheet_beforeeditstart_event.md index f23c5210..72baf292 100644 --- a/docs/api/spreadsheet_beforeeditstart_event.md +++ b/docs/api/spreadsheet_beforeeditstart_event.md @@ -8,7 +8,7 @@ description: You can learn about the beforeEditStart event in the documentation ### Description -@short: Fires before editing of a cell has started +@short: Fires before editing of a cell starts ### Usage @@ -41,4 +41,4 @@ spreadsheet.events.on("beforeEditStart", function(cell, value){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforefocusset_event.md b/docs/api/spreadsheet_beforefocusset_event.md index 132b7234..7506453a 100644 --- a/docs/api/spreadsheet_beforefocusset_event.md +++ b/docs/api/spreadsheet_beforefocusset_event.md @@ -40,4 +40,4 @@ spreadsheet.events.on("beforeFocusSet", function(cell){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforeselectionset_event.md b/docs/api/spreadsheet_beforeselectionset_event.md index bd7fb4d7..9bceb6c5 100644 --- a/docs/api/spreadsheet_beforeselectionset_event.md +++ b/docs/api/spreadsheet_beforeselectionset_event.md @@ -40,4 +40,4 @@ spreadsheet.events.on("beforeSelectionSet", function(cell){ }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_beforesheetchange_event.md b/docs/api/spreadsheet_beforesheetchange_event.md index f3110573..dcc4cdc9 100644 --- a/docs/api/spreadsheet_beforesheetchange_event.md +++ b/docs/api/spreadsheet_beforesheetchange_event.md @@ -42,4 +42,4 @@ spreadsheet.events.on("beforeSheetChange", function(sheet) { **Changelog:** Added in v4.1 -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_clear_method.md b/docs/api/spreadsheet_clear_method.md index f49a8fe6..7b5a0d65 100644 --- a/docs/api/spreadsheet_clear_method.md +++ b/docs/api/spreadsheet_clear_method.md @@ -28,6 +28,6 @@ spreadsheet.clear(); **Change log:** Added in v4.2 -**Related articles:** [Clearing spreadsheet](working_with_ssheet.md#clearing-spreadsheet) +**Related article:** [Clearing spreadsheet](working_with_ssheet.md#clearing-spreadsheet) **Related sample:** [Spreadsheet. Clear](https://snippet.dhtmlx.com/szmtjn72) diff --git a/docs/api/spreadsheet_colscount_config.md b/docs/api/spreadsheet_colscount_config.md index f006171a..af414287 100644 --- a/docs/api/spreadsheet_colscount_config.md +++ b/docs/api/spreadsheet_colscount_config.md @@ -8,7 +8,7 @@ description: You can learn about the colsCount config in the documentation of th ### Description -@short: Optional. Sets the number of columns a spreadsheet will have on initialization +@short: Optional. Sets the number of columns in a spreadsheet on initialization ### Usage @@ -25,6 +25,6 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { }); ~~~ -**Related articles:** [Configuration](configuration.md#number-of-rows-and-columns) +**Related article:** [Configuration](configuration.md#number-of-rows-and-columns) **Related sample:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/docs/api/spreadsheet_deletecolumn_method.md b/docs/api/spreadsheet_deletecolumn_method.md index c230d18b..6056d159 100644 --- a/docs/api/spreadsheet_deletecolumn_method.md +++ b/docs/api/spreadsheet_deletecolumn_method.md @@ -35,7 +35,7 @@ spreadsheet.deleteColumn("G2"); ~~~ :::note -You can delete several columns by providing a range of cells' ids as a parameter of the method, e.g.: "A1:C3". +You can delete several columns by providing a range of cells' ids as a parameter of the method, for example: "A1:C3". ::: -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_deleterow_method.md b/docs/api/spreadsheet_deleterow_method.md index 229eed9d..7e86ccd9 100644 --- a/docs/api/spreadsheet_deleterow_method.md +++ b/docs/api/spreadsheet_deleterow_method.md @@ -35,7 +35,7 @@ spreadsheet.deleteRow("G2"); ~~~ :::note -You can delete several rows by providing a range of cells' ids as a parameter of the method, e.g.: "A1:C3". +You can delete several rows by providing a range of cells' ids as a parameter of the method, for example: "A1:C3". ::: -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/docs/api/spreadsheet_eachcell_method.md b/docs/api/spreadsheet_eachcell_method.md index 133df676..d0f1f328 100644 --- a/docs/api/spreadsheet_eachcell_method.md +++ b/docs/api/spreadsheet_eachcell_method.md @@ -72,6 +72,6 @@ spreadsheet.menu.events.on("click", function (id) { }); ~~~ -**Related articles:** [Customization](customization.md#menu) +**Related article:** [Customization](customization.md#menu) **Related sample**: [Spreadsheet. Menu](https://snippet.dhtmlx.com/2mlv2qaz) diff --git a/docs/api/spreadsheet_editline_config.md b/docs/api/spreadsheet_editline_config.md index 74f3d66e..76109e7a 100644 --- a/docs/api/spreadsheet_editline_config.md +++ b/docs/api/spreadsheet_editline_config.md @@ -31,6 +31,6 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { }); ~~~ -**Related articles:** [Configuration](configuration.md#editing-bar) +**Related article:** [Configuration](configuration.md#editing-bar) **Related sample:** [Spreadsheet. Disabled Line](https://snippet.dhtmlx.com/unem2jkh) diff --git a/docs/api/spreadsheet_endedit_method.md b/docs/api/spreadsheet_endedit_method.md index afcbcec3..b4a202db 100644 --- a/docs/api/spreadsheet_endedit_method.md +++ b/docs/api/spreadsheet_endedit_method.md @@ -8,7 +8,7 @@ description: You can learn about the endEdit method in the documentation of the ### Description -@short: Finishes editing in the selected cell, closes editor and saves the entered value +@short: Finishes editing in the selected cell, closes the editor, and saves the entered value ### Usage @@ -26,4 +26,4 @@ spreadsheet.parse(data); spreadsheet.endEdit(); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_cells.md#editing-a-cell) +**Related article:** [Work with Spreadsheet](working_with_cells.md#editing-a-cell) diff --git a/docs/api/spreadsheet_exportmodulepath_config.md b/docs/api/spreadsheet_exportmodulepath_config.md index f339213d..fb967aca 100644 --- a/docs/api/spreadsheet_exportmodulepath_config.md +++ b/docs/api/spreadsheet_exportmodulepath_config.md @@ -28,16 +28,16 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Details :::note -DHTMLX Spreadsheet uses the WebAssembly-based library [JSON2Excel](https://github.com/dhtmlx/json2excel) for export of data into Excel. +DHTMLX Spreadsheet uses the WebAssembly-based library [JSON2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. ::: -To export files you need to set the path to the **worker.js** file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where export will be processed) via the **exportModulePath** option. By default, `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx` is used. +To export files, you need to set the path to the *worker.js* file of the [Json2Excel](https://github.com/dhtmlx/json2excel) library (where the export is processed) with the `exportModulePath` option. By default, `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx` is used. - if you use the public export server, you don't need to specify the link to it, since it is used by default - if you use your own export server, you need to: - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library - use `"../libs/json2excel/x.x/worker.js?vx"` for a specific version (replace `x.x` with the version deployed on your server) -**Related articles:** [Data loading and export](loading_data.md#exporting-data) +**Related article:** [Data loading and export](loading_data.md#exporting-data) **Related sample:** [Spreadsheet. Custom Import Export Path](https://snippet.dhtmlx.com/wykwzfhm) \ No newline at end of file diff --git a/docs/api/spreadsheet_fitcolumn_method.md b/docs/api/spreadsheet_fitcolumn_method.md index ba4d0d33..56d3cfa4 100644 --- a/docs/api/spreadsheet_fitcolumn_method.md +++ b/docs/api/spreadsheet_fitcolumn_method.md @@ -8,7 +8,7 @@ description: You can learn about the fitColumn method in the documentation of th ### Description -@short: adjusts the width of the column to match the longest value in the column +@short: Adjusts the width of the column to match its longest value ### Usage @@ -33,4 +33,4 @@ spreadsheet.fitColumn("G2"); **Change log:** Added in v5.0 -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#autofit-column-width) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#autofit-column-width) diff --git a/docs/api/spreadsheet_formats_config.md b/docs/api/spreadsheet_formats_config.md index 83098626..e1420a4c 100644 --- a/docs/api/spreadsheet_formats_config.md +++ b/docs/api/spreadsheet_formats_config.md @@ -18,12 +18,12 @@ formats?: array; ### Parameters -The **formats** property is an array of number format objects, each of which includes a set of properties: +The `formats` property is an array of number format objects, each of which includes a set of properties: -- **id** - the id of a format that is used to set format to a cell via the [](api/spreadsheet_setformat_method.md) method -- **mask** - a mask for a number format -- **name** - the name of a format displayed in the toolbar and menu drop-down lists -- **example** - an example that shows how a formatted number looks like. The number 2702.31 is used as a default value for format examples +- `id` - the id of a format used to set a format for a cell with the [](api/spreadsheet_setformat_method.md) method +- `mask` - a mask for a number format +- `name` - the name of a format displayed in the toolbar and menu drop-down lists +- `example` - an example that shows what a formatted number looks like. The number 2702.31 is used as a default value for format examples ### Default config diff --git a/docs/api/spreadsheet_freezecols_method.md b/docs/api/spreadsheet_freezecols_method.md index 7c34a912..2dc58aca 100644 --- a/docs/api/spreadsheet_freezecols_method.md +++ b/docs/api/spreadsheet_freezecols_method.md @@ -18,7 +18,7 @@ freezeCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example @@ -27,7 +27,7 @@ spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) **Related API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md) diff --git a/docs/api/spreadsheet_freezerows_method.md b/docs/api/spreadsheet_freezerows_method.md index a4ef9116..8da1f2a0 100644 --- a/docs/api/spreadsheet_freezerows_method.md +++ b/docs/api/spreadsheet_freezerows_method.md @@ -18,7 +18,7 @@ freezeRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example @@ -27,7 +27,7 @@ spreadsheet.freezeRows("B2"); // the rows up to the "2" row will be fixed spreadsheet.freezeRows("sheet2!B2"); // the rows up to the "2" row in "sheet2" will be fixed ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) **Related API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) diff --git a/docs/api/spreadsheet_getformat_method.md b/docs/api/spreadsheet_getformat_method.md index 81771683..044022bb 100644 --- a/docs/api/spreadsheet_getformat_method.md +++ b/docs/api/spreadsheet_getformat_method.md @@ -22,7 +22,7 @@ getFormat(cell: string): string | array; ### Returns -The method returns a format(s) applied to the value of the cell(s) +The method returns the format(s) applied to the value of the cell(s) ### Example @@ -42,9 +42,9 @@ Starting with v4.1, the reference to a cell can be specified in the following fo const cellFormat = spreadsheet.getFormat("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the format applied to the value of a cell from the tab that is currently active. +If the name of the tab isn't specified, the method returns the format applied to the value of a cell from the currently active tab. ::: -**Related articles:** [Number formatting](number_formatting.md) +**Related article:** [Number formatting](number_formatting.md) diff --git a/docs/api/spreadsheet_getformula_method.md b/docs/api/spreadsheet_getformula_method.md index c000f025..560eca9a 100644 --- a/docs/api/spreadsheet_getformula_method.md +++ b/docs/api/spreadsheet_getformula_method.md @@ -22,7 +22,7 @@ getFormula(cell: string): string | array; ### Returns -The method returns a formula of the cell +The method returns the formula of the cell ### Example @@ -42,9 +42,9 @@ The reference to a cell can be specified in the following format: const formula = spreadsheet.getFormula("sheet1!B2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the formula of the cell from the active tab. +If the name of the tab isn't specified, the method returns the formula of the cell from the active tab. ::: **Change log:** Added in v4.1 diff --git a/docs/api/spreadsheet_getstyle_method.md b/docs/api/spreadsheet_getstyle_method.md index e678e55d..37c5fd9a 100644 --- a/docs/api/spreadsheet_getstyle_method.md +++ b/docs/api/spreadsheet_getstyle_method.md @@ -42,7 +42,7 @@ const values = spreadsheet.getStyle("A1,B1,C1:C3"); ~~~ :::info -For multiple cells the method returns an array of objects with styles applied to a cell: +For multiple cells, the method returns an array of objects with the styles applied to each cell: ~~~jsx [ @@ -62,7 +62,7 @@ const style = spreadsheet.getStyle("sheet1!A2"); //-> {justify-content: "flex-end", text-align: "right"} ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the style(s) of the cell(s) from the active tab. +If the name of the tab isn't specified, the method returns the style(s) of the cell(s) from the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_getvalue_method.md b/docs/api/spreadsheet_getvalue_method.md index 9c6adcad..4ffa8863 100644 --- a/docs/api/spreadsheet_getvalue_method.md +++ b/docs/api/spreadsheet_getvalue_method.md @@ -22,7 +22,7 @@ getValue(cell: string): any | array; ### Returns -The method returns values of cells +The method returns the values of the cells ### Example @@ -48,7 +48,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000 ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will return the value(s) of the cell(s) from the active tab. +If the name of the tab isn't specified, the method returns the value(s) of the cell(s) from the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_groupfill_event.md b/docs/api/spreadsheet_groupfill_event.md index 87213521..06291fad 100644 --- a/docs/api/spreadsheet_groupfill_event.md +++ b/docs/api/spreadsheet_groupfill_event.md @@ -21,7 +21,7 @@ groupFill: (focusedCell: string, selectedCell: string) => void; The callback of the event takes the following parameters: - `focusedCell` - (required) the id of a cell in focus -- `selectedCell` - (required) the ids of a selected cells +- `selectedCell` - (required) the ids of the selected cells ### Example @@ -35,4 +35,4 @@ spreadsheet.events.on("groupFill", function (focusedCell, selectedCell) { }); ~~~ -**Related articles:** [Event handling](handling_events.md) \ No newline at end of file +**Related article:** [Event handling](handling_events.md) \ No newline at end of file diff --git a/docs/api/spreadsheet_hidecols_method.md b/docs/api/spreadsheet_hidecols_method.md index edf46cf4..00e54243 100644 --- a/docs/api/spreadsheet_hidecols_method.md +++ b/docs/api/spreadsheet_hidecols_method.md @@ -18,7 +18,7 @@ hideCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example @@ -29,7 +29,7 @@ spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`showCols()`](api/spreadsheet_showcols_method.md) diff --git a/docs/api/spreadsheet_hiderows_method.md b/docs/api/spreadsheet_hiderows_method.md index 62223315..c5b8db5b 100644 --- a/docs/api/spreadsheet_hiderows_method.md +++ b/docs/api/spreadsheet_hiderows_method.md @@ -18,7 +18,7 @@ hideRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example @@ -28,7 +28,7 @@ spreadsheet.hideRows("sheet2!B2"); // the "2" row in "sheet2" will be hidden spreadsheet.hideRows("B2:C4"); // the rows from "2" to "4" will be hidden ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`showRows()`](api/spreadsheet_showrows_method.md) diff --git a/docs/api/spreadsheet_hidesearch_method.md b/docs/api/spreadsheet_hidesearch_method.md index d319c859..de4bc8b7 100644 --- a/docs/api/spreadsheet_hidesearch_method.md +++ b/docs/api/spreadsheet_hidesearch_method.md @@ -8,7 +8,7 @@ description: You can learn about the hideSearch method in the documentation of t ### Description -@short: hides the search bar +@short: Hides the search bar ### Usage diff --git a/docs/api/spreadsheet_importmodulepath_config.md b/docs/api/spreadsheet_importmodulepath_config.md index 4324b338..53b40c24 100644 --- a/docs/api/spreadsheet_importmodulepath_config.md +++ b/docs/api/spreadsheet_importmodulepath_config.md @@ -28,18 +28,18 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Details :::note -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2json](https://github.com/DHTMLX/excel2json) for import of data from Excel. +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2json](https://github.com/DHTMLX/excel2json) to import data from Excel. ::: -To import files you need to: +To import files, you need to: - install the **Excel2json** library -- set the path to the **worker.js** file via the **importModulePath** option in one of the two ways: - - by providing a local path to the file on your computer, like: **"../libs/excel2json/1.0/worker.js"** - - by providing a link to the file from CDN: "**https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js**" +- set the path to the *worker.js* file with the `importModulePath` option in one of two ways: + - by providing a local path to the file on your computer, like: `"../libs/excel2json/1.0/worker.js"` + - by providing a link to the file from CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` -By default the link to CDN is used. +By default, the link to CDN is used. -**Related articles:** [Data loading and export](loading_data.md#loading-excel-file-xlsx) +**Related article:** [Data loading and export](loading_data.md#loading-excel-file-xlsx) **Related sample:** [Spreadsheet. Custom Import Export Path](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/docs/api/spreadsheet_insertlink_method.md b/docs/api/spreadsheet_insertlink_method.md index 86e9a942..33f05e4e 100644 --- a/docs/api/spreadsheet_insertlink_method.md +++ b/docs/api/spreadsheet_insertlink_method.md @@ -8,7 +8,7 @@ description: You can learn about the insertLink method in the documentation of t ### Description -@short: inserts/removes a hyperlink in a cell +@short: Inserts/removes a hyperlink in a cell ### Usage diff --git a/docs/api/spreadsheet_islocked_method.md b/docs/api/spreadsheet_islocked_method.md index a4bd14d6..7348ae94 100644 --- a/docs/api/spreadsheet_islocked_method.md +++ b/docs/api/spreadsheet_islocked_method.md @@ -22,7 +22,7 @@ isLocked(cell: string): boolean; ### Returns -The method returns `true`, if the cell is locked, and `false` if it's unlocked +The method returns `true` if the cell is locked and `false` if it's unlocked ### Example @@ -41,7 +41,7 @@ const cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); ~~~ :::info -If several cells are checked at once, the method will return *true*, if there is at least one locked cell among the specified cells. +If several cells are checked at once, the method returns `true` if there is at least one locked cell among the specified cells. ::: :::info @@ -51,7 +51,7 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified const cellsLocked = spreadsheet.isLocked("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will check the cell(s) of the active tab. +If the name of the tab isn't specified, the method checks the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_load_method.md b/docs/api/spreadsheet_load_method.md index 2b59ea65..a78b460e 100644 --- a/docs/api/spreadsheet_load_method.md +++ b/docs/api/spreadsheet_load_method.md @@ -49,7 +49,7 @@ spreadsheet.load("../common/data.xlsx", "xlsx"); - [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828) :::info -The component will make an AJAX call and expect the remote URL to provide valid data. +The component makes an AJAX call and expects the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: @@ -63,14 +63,14 @@ spreadsheet.load("../some/data.json").then(function(){ ### Loading Excel data :::note -Please note that the component supports import from Excel files with the **.xlsx** extension only. +Note that the component supports import from Excel files with the `.xlsx` extension only. ::: -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) for import of data from Excel. [Check the details](loading_data.md#loading-excel-file-xlsx). +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) to import data from Excel. [Check the details](loading_data.md#loading-excel-file-xlsx). ### Loading JSON files -It is possible to allow end users to load a JSON file into the spreadsheet via the File Explorer. To do that: +You can let users load a JSON file into the spreadsheet through the File Explorer. To do that: - Specify a button to open the File Explorer where ".json" files can be selected: @@ -81,7 +81,7 @@ It is possible to allow end users to load a JSON file into the spreadsheet via t ~~~ -- Call the **load()** method with two parameters: an empty string as an URL and the type of data to load ("json"): +- Call the `load()` method with two parameters: an empty string as a URL and the type of data to load ("json"): ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet", { @@ -99,4 +99,4 @@ Check the [example](https://snippet.dhtmlx.com/e3xct53l). **Changelog:** The ability to load a JSON file via the File Explorer was added in v4.3 -**Related articles:** [Data loading and export](loading_data.md) +**Related article:** [Data loading and export](loading_data.md) diff --git a/docs/api/spreadsheet_localization_config.md b/docs/api/spreadsheet_localization_config.md index 8a2c811d..7b43b1f2 100644 --- a/docs/api/spreadsheet_localization_config.md +++ b/docs/api/spreadsheet_localization_config.md @@ -18,13 +18,13 @@ localization?: object; ### Parameters -The **localization** object may contain the following properties: +The `localization` object may contain the following properties: -- **decimal** - (optional) the symbol used as a decimal separator, **"."** by default.
Possible values are `"." | ","` -- **thousands** - (optional) the symbol used as a thousands separator, **","** by default.
Possible values are `"." | "," | " " | ""` -- **currency** - (optional) the currency sign, **"$"** by default -- **dateFormat** - (optional) the format of displaying dates set as a string. The default format is **"%d/%m/%Y"**. Check details [below](#characters-for-setting-date-format) -- **timeFormat** - (optional) the format of displaying time set as either *12* or *24*. The default format is **12** +- `decimal` - (optional) the symbol used as a decimal separator, `"."` by default.
Possible values are `"." | ","` +- `thousands` - (optional) the symbol used as a thousands separator, `","` by default.
Possible values are `"." | "," | " " | ""` +- `currency` - (optional) the currency sign, `"$"` by default +- `dateFormat` - (optional) the format of displaying dates set as a string. The default format is `"%d/%m/%Y"`. Check details [below](#characters-for-setting-date-format) +- `timeFormat` - (optional) the format of displaying time set as either `12` or `24`. The default format is `12` ### Default config diff --git a/docs/api/spreadsheet_lock_method.md b/docs/api/spreadsheet_lock_method.md index d32f7dd0..a4a80df4 100644 --- a/docs/api/spreadsheet_lock_method.md +++ b/docs/api/spreadsheet_lock_method.md @@ -43,9 +43,9 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified spreadsheet.lock("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will lock the cell(s) of the active tab. +If the name of the tab isn't specified, the method locks the cell(s) of the active tab. ::: **Related sample**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8) \ No newline at end of file diff --git a/docs/api/spreadsheet_menu_config.md b/docs/api/spreadsheet_menu_config.md index 1ac03ec3..9fe6b00b 100644 --- a/docs/api/spreadsheet_menu_config.md +++ b/docs/api/spreadsheet_menu_config.md @@ -31,6 +31,6 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { }); ~~~ -**Related articles:** [Configuration](configuration.md#menu) +**Related article:** [Configuration](configuration.md#menu) **Related sample:** [Spreadsheet. Menu](https://snippet.dhtmlx.com/uulux27v) diff --git a/docs/api/spreadsheet_mergecells_method.md b/docs/api/spreadsheet_mergecells_method.md index 886bbe92..f41e5f62 100644 --- a/docs/api/spreadsheet_mergecells_method.md +++ b/docs/api/spreadsheet_mergecells_method.md @@ -8,7 +8,7 @@ description: You can learn about the mergeCells method in the documentation of t ### Description -@short: merges a range of cells into one or splits merged cells +@short: Merges a range of cells into one or splits merged cells ### Usage diff --git a/docs/api/spreadsheet_multisheets_config.md b/docs/api/spreadsheet_multisheets_config.md index 9113c66e..3fad9e53 100644 --- a/docs/api/spreadsheet_multisheets_config.md +++ b/docs/api/spreadsheet_multisheets_config.md @@ -32,7 +32,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ~~~ :::info -Setting the property to ***false*** will hide the bottom tabbar with sheet tabs. +Setting the property to `false` hides the bottom tabbar with sheet tabs. ::: **Change log:** Added in v4.1 diff --git a/docs/api/spreadsheet_parse_method.md b/docs/api/spreadsheet_parse_method.md index d444f980..8ea7e1d2 100644 --- a/docs/api/spreadsheet_parse_method.md +++ b/docs/api/spreadsheet_parse_method.md @@ -92,14 +92,14 @@ parse({ If you need to create a data set *for one sheet* only, specify data as an **array of cell objects**. For each **cell** object you can specify the following parameters: -- `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. A1 +- `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", for example, A1 - `value` - (required) the value of a cell - `css` - (optional) the name of the CSS class - `format` - (optional) the name of the [default number format](number_formatting.md#default-number-formats) or of a [custom format](number_formatting.md#formats-customization) that you've added to apply to the cell value - `editor` - (optional) an object with configuration settings for the editor of a cell: - `type` - (required) the type of the cell editor: "select" - `options` - (required) either a range of cells ("A1:B8") or an array of string values -- `locked` - (optional) defines whether a cell is locked, *false* by default +- `locked` - (optional) defines whether a cell is locked, `false` by default - `link` - (optional) an object with configuration settings for the link added into a cell: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -112,20 +112,20 @@ If you need to create a data set *for several sheets* at once, specify data as a - `name` - (optional) the sheet name - `id` - (optional) the sheet id - `rows` - (optional) an array of objects with rows configurations. Each object may contain the following properties: - - `height` - (optional) the row height. If not specified, rows will have the height of 32px + - `height` - (optional) the row height. If not specified, rows have a height of 32px - `hidden` - (optional) defines the visibility of a row - `cols` - (optional) an array of objects with columns configurations. Each object may contain the following properties: - - `width` - (optional) the column width. If not specified, columns will have the width of 120px + - `width` - (optional) the column width. If not specified, columns have a width of 120px - `hidden` - (optional) defines the visibility of a column - `data` - (required) an array of **cell** objects. Each object has the following properties: - - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. A1 + - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", for example, A1 - `value` - (required) the value of a cell - `css` - (optional) the name of the CSS class - `format` - (optional) the name of the [default number format](number_formatting.md#default-number-formats) or of a [custom format](number_formatting.md#formats-customization) that you've added to apply to the cell value - `editor` - (optional) an object with configuration settings for the editor of a cell: - `type` - (required) the type of the cell editor: "select" - `options` - (required) either a range of cells ("A1:B8") or an array of string values - - `locked` - (optional) defines whether a cell is locked, *false* by default + - `locked` - (optional) defines whether a cell is locked, `false` by default - `link` - (optional) an object with configuration settings for the link added into a cell: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -137,11 +137,11 @@ If you need to create a data set *for several sheets* at once, specify data as a - `column` - the index of the column - `row` - the index of the row - `freeze` - (optional) an object that sets and adjusts fixed columns/rows for particular sheets. It may contain the following properties: - - `col` - (optional) specifies the number of fixed columns (e.g. 2), *0* by default - - `row` - (optional) specifies the number of fixed rows, (e.g. 2), *0* by default + - `col` - (optional) specifies the number of fixed columns (for example, 2), `0` by default + - `row` - (optional) specifies the number of fixed rows (for example, 2), `0` by default :::info -In case the [`multisheets`](api/spreadsheet_multisheets_config.md) configuration option is set to *false*, only one sheet will be created. +If the [`multisheets`](api/spreadsheet_multisheets_config.md) configuration option is set to `false`, only one sheet is created. ::: ### Example @@ -218,7 +218,7 @@ spreadsheet.parse(data); ## Parsing styled data -You may also add specific styles for cells while preparing a data set. For that, you need to define data as an object which will include two parameters: +You can also add specific styles for cells while preparing a data set. To do this, define data as an object with two parameters: - `styles` - (required) an object with CSS classes to be applied to particular cells. [Check the details below](#list-of-properties) - `data` - (required) the data to load @@ -251,44 +251,44 @@ spreadsheet.parse(styledData); ~~~ :::info -A CSS class is set for a cell via the **css** property. +Set a CSS class for a cell with the `css` property. ::: ### List of properties -The list of properties you can specify in the **styles** object: +The list of properties you can specify in the `styles` object: -- *background* -- *color* -- *textAlign* -- *verticalAlign* -- *textDecoration* -- *fontWeight* -- *fontStyle* -- *multiline: "wrap"* (from v5.0.3) -- *border*, *border-right*, *border-left*, *border-top*, *border-bottom* (from v5.2) +- `background` +- `color` +- `textAlign` +- `verticalAlign` +- `textDecoration` +- `fontWeight` +- `fontStyle` +- `multiline: "wrap"` (from v5.0.3) +- `border`, `border-right`, `border-left`, `border-top`, `border-bottom` (from v5.2) :::note You may also use the following properties if needed: -- *fontSize* -- *font* -- *fontFamily* -- *textShadow* +- `fontSize` +- `font` +- `fontFamily` +- `textShadow` -but in some cases they may not work in the way you expect (for example, when applying *position:absolute*, *display: box*, etc. ) +but in some cases they may not work as you expect (for example, when applying `position: absolute` or `display: box`) ::: **Change log:** -- The **freeze** property and the **hidden** parameter for the **rows** and **cols** properties of the **sheets** object were added in v5.2 -- The **locked** and **link** properties of the **cell** object were added in v5.1 -- The **merged** property of the **sheets** object was added in v5.0 -- The **editor** property of the **cell** object was added in v4.3 -- The **rows** and **cols** properties of the **sheets** object were added in v4.2 +- The `freeze` property and the `hidden` parameter for the `rows` and `cols` properties of the `sheets` object were added in v5.2 +- The `locked` and `link` properties of the `cell` object were added in v5.1 +- The `merged` property of the `sheets` object was added in v5.0 +- The `editor` property of the `cell` object was added in v4.3 +- The `rows` and `cols` properties of the `sheets` object were added in v4.2 - The ability to prepare data for several sheets was added in v4.1 -**Related articles:** [Data loading and export](loading_data.md) +**Related article:** [Data loading and export](loading_data.md) **Related samples**: diff --git a/docs/api/spreadsheet_readonly_config.md b/docs/api/spreadsheet_readonly_config.md index 36315504..ac4039d4 100644 --- a/docs/api/spreadsheet_readonly_config.md +++ b/docs/api/spreadsheet_readonly_config.md @@ -8,7 +8,7 @@ description: You can learn about the readonly config in the documentation of the ### Description -@short: Optional. Enables/disables the readonly mode +@short: Optional. Enables/disables the read-only mode ### Usage diff --git a/docs/api/spreadsheet_rowscount_config.md b/docs/api/spreadsheet_rowscount_config.md index c21cb7a0..618714bf 100644 --- a/docs/api/spreadsheet_rowscount_config.md +++ b/docs/api/spreadsheet_rowscount_config.md @@ -8,7 +8,7 @@ description: You can learn about the rowsCount config in the documentation of th ### Description -@short: Optional. Sets the number of rows a spreadsheet will have on initialization +@short: Optional. Sets the number of rows in a spreadsheet on initialization ### Usage @@ -25,6 +25,6 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { }); ~~~ -**Related articles:** [Configuration](configuration.md#number-of-rows-and-columns) +**Related article:** [Configuration](configuration.md#number-of-rows-and-columns) **Related sample:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/docs/api/spreadsheet_search_method.md b/docs/api/spreadsheet_search_method.md index ad16565d..96003a21 100644 --- a/docs/api/spreadsheet_search_method.md +++ b/docs/api/spreadsheet_search_method.md @@ -8,7 +8,7 @@ description: You can learn about the search method in the documentation of the D ### Description -@short: searches for cells by the specified parameters +@short: Searches for cells by the specified parameters The method can also open a search box in the top right corner of the spreadsheet and highlight the matched results @@ -24,7 +24,7 @@ search( ### Parameters -- `text` - (optional) the value to search +- `text` - (optional) the value to search for - `openSearch` - (optional) if `true`, opens a search box and highlights cells with the matched results; `false` by default - `sheetId` - (optional) the ID of the sheet. By default, the method searches for cells on the currently active sheet diff --git a/docs/api/spreadsheet_serialize_method.md b/docs/api/spreadsheet_serialize_method.md index 6736dfed..4759b1f6 100644 --- a/docs/api/spreadsheet_serialize_method.md +++ b/docs/api/spreadsheet_serialize_method.md @@ -8,7 +8,7 @@ description: You can learn about the serialize method in the documentation of th ### Description -@short: Serializes data of spreadsheet into a JSON object +@short: Serializes the spreadsheet data into a JSON object ### Usage @@ -20,15 +20,15 @@ serialize(): object; The method returns a serialized JSON object -Serialized data presents an object with the following attributes: +The serialized data is an object with the following attributes: -- **formats** - an array of objects with number formats -- **styles** - an object with the applied CSS classes -- **sheets** - an array of sheet objects. Each object contains the following attributes: - - **name** - the sheet name - - **data** - an array of data objects - - **rows** - an array of height objects - - **cols** - an array of width objects +- `formats` - an array of objects with number formats +- `styles` - an object with the applied CSS classes +- `sheets` - an array of sheet objects. Each object contains the following attributes: + - `name` - the sheet name + - `data` - an array of data objects + - `rows` - an array of height objects + - `cols` - an array of width objects ### Example @@ -39,4 +39,4 @@ spreadsheet.parse(data); const data = spreadsheet.serialize(); ~~~ -**Related articles:** [Data loading and export](loading_data.md#saving-and-restoring-state) +**Related article:** [Data loading and export](loading_data.md#saving-and-restoring-state) diff --git a/docs/api/spreadsheet_setfilter_method.md b/docs/api/spreadsheet_setfilter_method.md index 5d2a66c1..d701c06c 100644 --- a/docs/api/spreadsheet_setfilter_method.md +++ b/docs/api/spreadsheet_setfilter_method.md @@ -30,12 +30,12 @@ setFilter( ### Parameters -- `cell` - (optional) the id of a cell (or a range of cells) that contains the id of a column the values of which will be filtered (e.g., "A1", "A1:C10", "sheet2!A1" ) +- `cell` - (optional) the id of a cell (or a range of cells) that contains the id of a column whose values are filtered (for example, "A1", "A1:C10", or "sheet2!A1") - `rules` - (optional) an array of objects with rules for filtering. Each object can include the following parameters: - `condition` - (optional) an object with parameters for conditional filtering of a sheet: - - `factor` - (required) a string value which defines a comparison expression for filtering. See the list of available values [below](#list-of-factors) + - `factor` - (required) a string value that defines a comparison expression for filtering. See the list of available values [below](#list-of-factors) - `value` - (required) the value(s) to be used for filtering by the specified factor - - `exclude` - (optional) an array of data points which must be excluded from the sheet + - `exclude` - (optional) an array of data points that must be excluded from the sheet :::note To reset filtering, call the method without parameters or pass only the `cell` parameter to the method. diff --git a/docs/api/spreadsheet_setformat_method.md b/docs/api/spreadsheet_setformat_method.md index 74d4840c..6e9e344c 100644 --- a/docs/api/spreadsheet_setformat_method.md +++ b/docs/api/spreadsheet_setformat_method.md @@ -19,7 +19,7 @@ setFormat(cell: string, format: string | array): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `format` - (required) the name(s) of the number format to apply to cells value +- `format` - (required) the name(s) of the number format to apply to the cell value ### Example @@ -38,9 +38,9 @@ Starting with v4.1, the reference to a cell can be specified in the following fo spreadsheet.setFormat("sheet1!A2", "number"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will set the format to the value of a cell of the active tab. +If the name of the tab isn't specified, the method sets the format to the value of a cell of the active tab. ::: -**Related articles:** [Number formatting](number_formatting.md) +**Related article:** [Number formatting](number_formatting.md) diff --git a/docs/api/spreadsheet_setstyle_method.md b/docs/api/spreadsheet_setstyle_method.md index 107ff591..deca0e98 100644 --- a/docs/api/spreadsheet_setstyle_method.md +++ b/docs/api/spreadsheet_setstyle_method.md @@ -11,7 +11,7 @@ description: You can learn about the setStyle method in the documentation of the @short: Sets style to a cell(s) :::info -The method allows setting the same style for the specified cells. In case you want to apply different cells to spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method. +The method sets the same style for the specified cells. If you want to apply different styles to spreadsheet cells, use the [](api/spreadsheet_parse_method.md) method. ::: ### Usage @@ -23,7 +23,7 @@ setStyle(cell: string, styles: array | object): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `styles` - (required) styles that should be applied to cells. [Check the list of properties which you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) +- `styles` - (required) the styles to apply to cells. [Check the list of properties that you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) ### Example @@ -53,7 +53,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i spreadsheet.setStyle("sheet1!A2", {background: "red"}); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will apply the style to the cell(s) of the active tab. +If the name of the tab isn't specified, the method applies the style to the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_setvalidation_method.md b/docs/api/spreadsheet_setvalidation_method.md index 5e2826b5..a9b6401d 100644 --- a/docs/api/spreadsheet_setvalidation_method.md +++ b/docs/api/spreadsheet_setvalidation_method.md @@ -8,7 +8,7 @@ description: You can learn about the setValidation method in the documentation o ### Description -@short: Sets validation for cells via adding drop-down lists into the cells +@short: Sets validation for cells by adding drop-down lists to the cells The method can also remove data validation from a cell(s). @@ -24,7 +24,7 @@ setValidation( ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `options` - (required) either a string with a range of cells ("C1: C3") or an array of string values +- `options` - (required) either a string with a range of cells ("C1:C3") or an array of string values ### Example @@ -41,7 +41,7 @@ spreadsheet.setValidation("B10", ["Apple", "Mango", "Avocado"]); ### Details -If you need to remove validation from a cell(s), instead of the list of options, pass *null* / *0* / *false* / *undefined* as a second parameter to the method: +If you need to remove validation from a cell(s), instead of the list of options, pass `null`, `0`, `false`, or `undefined` as the second parameter to the method: ~~~jsx spreadsheet.setValidation("B15"); @@ -55,5 +55,5 @@ spreadsheet.setValidation("B15", false); **Change log:** Added in v4.3 -**Related articles:** [Validating cells](working_with_cells.md#validating-cells) +**Related article:** [Validating cells](working_with_cells.md#validating-cells) diff --git a/docs/api/spreadsheet_setvalue_method.md b/docs/api/spreadsheet_setvalue_method.md index 454d87b5..7bbdec95 100644 --- a/docs/api/spreadsheet_setvalue_method.md +++ b/docs/api/spreadsheet_setvalue_method.md @@ -11,7 +11,7 @@ description: You can learn about the setValue method in the documentation of the @short: Sets a value for a cell :::info -The method allows setting the same/repeated value(s) for the specified cells. In case you want to add different values into spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method. +The method sets the same (repeated) value(s) for the specified cells. If you want to add different values to spreadsheet cells, use the [](api/spreadsheet_parse_method.md) method. ::: ### Usage @@ -23,7 +23,7 @@ setValue(cell: string, value: string | number | array): void; ### Parameters - `cell` - (required) the id(s) of a cell(s) or a range of cells -- `value` - (required) the value(s) to be set for cells +- `value` - (required) the value(s) to set for cells ### Example @@ -53,7 +53,7 @@ Starting with v4.1, the reference to a cell or range of cells can be specified i spreadsheet.setValue("sheet1!A1",5); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will set the value(s) for the cell(s) of the active tab. +If the name of the tab isn't specified, the method sets the value(s) for the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/api/spreadsheet_showcols_method.md b/docs/api/spreadsheet_showcols_method.md index 9828ff07..110f5e11 100644 --- a/docs/api/spreadsheet_showcols_method.md +++ b/docs/api/spreadsheet_showcols_method.md @@ -18,7 +18,7 @@ showCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example @@ -28,7 +28,7 @@ spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become vis spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`hideCols()`](api/spreadsheet_hidecols_method.md) diff --git a/docs/api/spreadsheet_showrows_method.md b/docs/api/spreadsheet_showrows_method.md index 172c6d24..1f5f62fd 100644 --- a/docs/api/spreadsheet_showrows_method.md +++ b/docs/api/spreadsheet_showrows_method.md @@ -18,7 +18,7 @@ showRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example @@ -28,7 +28,7 @@ spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visibl spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) **Related API:** [`hideRows()`](api/spreadsheet_hiderows_method.md) diff --git a/docs/api/spreadsheet_sortcells_method.md b/docs/api/spreadsheet_sortcells_method.md index 924eef0c..0fd1db6a 100644 --- a/docs/api/spreadsheet_sortcells_method.md +++ b/docs/api/spreadsheet_sortcells_method.md @@ -41,4 +41,4 @@ spreadsheet.sortCells("Income!B2:B11, Report!B2:B11, Expenses!C2:C11", 1); **Related sample:** [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) -**Related articles:** [Sorting data](working_with_ssheet.md#sorting-data) \ No newline at end of file +**Related article:** [Sorting data](working_with_ssheet.md#sorting-data) \ No newline at end of file diff --git a/docs/api/spreadsheet_startedit_method.md b/docs/api/spreadsheet_startedit_method.md index ef5d4f1d..033f570f 100644 --- a/docs/api/spreadsheet_startedit_method.md +++ b/docs/api/spreadsheet_startedit_method.md @@ -11,7 +11,7 @@ description: You can learn about the startEdit method in the documentation of th @short: Starts editing in the selected cell :::info -If the id of a cell isn't passed, editing will start in the currently selected cell. +If the id of a cell isn't passed, editing starts in the currently selected cell. ::: ### Usage @@ -35,4 +35,4 @@ spreadsheet.parse(data); spreadsheet.startEdit(); ~~~ -**Related articles:** [Work with Spreadsheet](working_with_cells.md#editing-a-cell) +**Related article:** [Work with Spreadsheet](working_with_cells.md#editing-a-cell) diff --git a/docs/api/spreadsheet_toolbarblocks_config.md b/docs/api/spreadsheet_toolbarblocks_config.md index f23824c9..313eba1e 100644 --- a/docs/api/spreadsheet_toolbarblocks_config.md +++ b/docs/api/spreadsheet_toolbarblocks_config.md @@ -8,7 +8,7 @@ description: You can learn about the toolbarBlocks config in the documentation o ### Description -@short: Optional. Specifies blocks of buttons that will be shown in the toolbar of spreadsheet +@short: Optional. Specifies blocks of buttons shown in the spreadsheet toolbar ### Usage @@ -60,9 +60,9 @@ Check how you can [customize the toolbar](customization.md#toolbar). **Change log:** -- The *"font"* block was added in v6.0 -- The *"cell"* block was added in v5.2 -- The *"actions"* block was added in v5.0 +- The `"font"` block was added in v6.0 +- The `"cell"` block was added in v5.2 +- The `"actions"` block was added in v5.0 **Related articles:** - [Configuration](configuration.md#toolbar) diff --git a/docs/api/spreadsheet_unfreezecols_method.md b/docs/api/spreadsheet_unfreezecols_method.md index 613a5cd3..f9fca1fe 100644 --- a/docs/api/spreadsheet_unfreezecols_method.md +++ b/docs/api/spreadsheet_unfreezecols_method.md @@ -18,7 +18,7 @@ unfreezeCols(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell is used ### Example @@ -27,7 +27,7 @@ spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfroz spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) **Related API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md) diff --git a/docs/api/spreadsheet_unfreezerows_method.md b/docs/api/spreadsheet_unfreezerows_method.md index fd63351b..130b083c 100644 --- a/docs/api/spreadsheet_unfreezerows_method.md +++ b/docs/api/spreadsheet_unfreezerows_method.md @@ -18,7 +18,7 @@ unfreezeRows(cell?: string): void; ### Parameters -- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used +- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell is used ### Example @@ -27,7 +27,7 @@ spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen ~~~ -**Related articles:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) +**Related article:** [Work with Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) **Related API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md) diff --git a/docs/api/spreadsheet_unlock_method.md b/docs/api/spreadsheet_unlock_method.md index a5d621e2..606d7979 100644 --- a/docs/api/spreadsheet_unlock_method.md +++ b/docs/api/spreadsheet_unlock_method.md @@ -43,7 +43,7 @@ Starting with v4.1, the reference to a cell or a range of cells can be specified spreadsheet.unlock("sheet1!A2"); ~~~ -where *sheet1* is the name of the tab. +where `sheet1` is the name of the tab. -In case the name of the tab isn't specified, the method will unlock the cell(s) of the active tab. +If the name of the tab isn't specified, the method unlocks the cell(s) of the active tab. ::: \ No newline at end of file diff --git a/docs/awaitredraw.md b/docs/awaitredraw.md index e51c9452..383ee873 100644 --- a/docs/awaitredraw.md +++ b/docs/awaitredraw.md @@ -8,7 +8,7 @@ description: You can explore the AwaitRedraw helper in the documentation of the Some API methods of DHTMLX Spreadsheet take effect only after the component is rendered on the page. In some cases this can take a moment, so you need to wait until the browser completes rendering before running the next piece of code. -For such cases, you can use the **dhx.awaitRedraw** helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. +For such cases, you can use the `dhx.awaitRedraw` helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering. ~~~js dhx.awaitRedraw().then(() => { diff --git a/docs/configuration.md b/docs/configuration.md index 03892a61..ad419a74 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -6,7 +6,7 @@ description: You can learn about the configuration of the DHTMLX JavaScript Spre # Configuration -You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in the readonly mode, if needed. +You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in read-only mode, if needed. ## Toolbar @@ -14,7 +14,7 @@ The toolbar of the Spreadsheet consists of several blocks of controls that can b -The structure of toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. +The structure of the toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls. You can also specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example: `"colors"`, `"align"`, `"cell"`, `"decoration"`, `"lock"`, `"clear"`. @@ -24,7 +24,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { }); ~~~ -Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. +The toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack. ## Editing bar @@ -35,7 +35,7 @@ the editing bar. ## Number of rows and columns -When Spreadsheet is initialized, it has the initial configuration of grid which consists of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose. +When Spreadsheet is initialized, it starts with a grid of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose. @@ -47,15 +47,15 @@ The menu of the Spreadsheet is hidden by default. You can switch it on/off via t ## Read-only mode -It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option. +You can also enable read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option. -You can also [customize the readonly behavior of Spreadsheet](customization.md#custom-read-only-mode). +You can also [customize the read-only behavior of Spreadsheet](customization.md#custom-read-only-mode). ## Custom number formats for cells -There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". +You can apply 7 default formats to cell values: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". You can redefine configuration of default formats or specify your own number format via the [`formats`](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article. @@ -63,9 +63,9 @@ You can redefine configuration of default formats or specify your own number for ## Path to export/import modules -DHTMLX Spreadsheet provides the possibility to import/export data in the Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data. +DHTMLX Spreadsheet can import and export data in Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data. -After installing the necessary library, you need to set path to the **worker.js** file (either local or at CDN) +After installing the necessary library, you need to set the path to the *worker.js* file (either local or at CDN) via the corresponding configuration option: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) or [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). All the details are given in the [Data Loading and Export](loading_data.md) article. diff --git a/docs/customization.md b/docs/customization.md index 627615db..ccd7f589 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -6,7 +6,7 @@ description: You can learn about the customization of the DHTMLX JavaScript Spre # Customization -You can customize the appearance, structure and functionality of toolbar, menu and context menu and define custom read-only behavior for Spreadsheet. +You can customize the appearance, structure and functionality of the toolbar, menu, and context menu and define custom read-only behavior for Spreadsheet. ## Default and custom icons @@ -23,44 +23,43 @@ For example, you can use the [Font Awesome](https://fontawesome.com/) icon pack crossorigin="anonymous"> ~~~ -Then you can use the name of the icon as the value of the **icon** property in the object with the control parameters for toolbar, menu or context menu. See details below. +Then you can use the name of the icon as the value of the `icon` property in the object with the control parameters for toolbar, menu or context menu. See details below. ## Controls types and operations ### Types -There are the following types of controls you can add: *button*, *menuItem*, *separator* and *spacer*. +You can add the following types of controls: `button`, `menuItem`, `separator`, and `spacer`. -The **button** object has the following properties: +The `button` object has the following properties: -- **type** - the type of a button, set it to "button" -- **id** - the id of a button -- **icon** - the name of an icon from the used icon font -- **hotkey** - the name of the hot key for a button -- **value** - the value of a button -- **tooltip** - the tooltip of a button -- **twoState** - the flag that defines whether a button can be used in two states -- **active** - the state of a button: *true* - active, *false* - inactive +- `type` - the type of a button, set it to "button" +- `id` - the id of a button +- `icon` - the name of an icon from the used icon font +- `hotkey` - the name of the hot key for a button +- `value` - the value of a button +- `tooltip` - the tooltip of a button +- `twoState` - the flag that defines whether a button can be used in two states +- `active` - the state of a button: `true` - active, `false` - inactive -The **menuItem** object has the properties below: +The `menuItem` object has the properties below: -- **type** - the type of a menu item, set it to "menuItem" -- **id** - the id of a menu item -- **icon** - the name of an icon from the used icon font -- **hotkey** - the name of the hot key for a menu item -- **value** - the value of a menu item -- **childs** - an array of children controls (note that all the children should have the type **menuItem**) +- `type` - the type of a menu item, set it to "menuItem" +- `id` - the id of a menu item +- `icon` - the name of an icon from the used icon font +- `hotkey` - the name of the hot key for a menu item +- `value` - the value of a menu item +- `childs` - an array of children controls (note that all the children should have the type `menuItem`) -The data collection API of the **toolbar**, **menu** and **context menu** allows you to manipulate the controls, namely to add custom controls, remove the controls you don't need, or update the controls, -e.g. change their icons. +The data collection API of the **toolbar**, **menu**, and **context menu** lets you manage controls: add custom ones, remove those you don't need, or update them — for example, change their icons. ### Adding controls To add a new control, apply the `spreadsheet.{name}.data.add()` method. It takes the parameters below: -- **config** - (*object*) an object with the control config -- **index** - (*number*) the index of the position to place the control into -- **parent** - (*string*) the id of a parent control (for the *menuItem* type) +- `config` - (*object*) an object with the control config +- `index` - (*number*) the index of the position to place the control into +- `parent` - (*string*) the id of a parent control (for the `menuItem` type) For a button: @@ -435,7 +434,7 @@ spreadsheet.contextMenu.data.remove("lock"); ## Custom read-only mode -Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block certain operations via the events the name of which starts with **before**, e.g.: +Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block specific operations with the events whose names start with `before`, for example: - [](api/spreadsheet_beforeeditstart_event.md) - [](api/spreadsheet_beforeaction_event.md) diff --git a/docs/data_formatting.md b/docs/data_formatting.md index 8d1fd75f..607b5dbf 100644 --- a/docs/data_formatting.md +++ b/docs/data_formatting.md @@ -14,8 +14,8 @@ The toolbar of DHTMLX Spreadsheet contains several sections with buttons for mod What you can do: -- change the color of a text and its background via color picker linked to the **Text color** button -- change the color of text background via color picker linked to the **Background color** button +- change **text color** with the color picker of the **Text color** button +- change **background color** with the color picker of the **Background color** button - apply *Bold*, *Italic* and *Underline* styles to a text - apply *Strikethrough* formatting to a text @@ -75,7 +75,7 @@ When you change the width of the column, text wrapping adjusts automatically. ## Removing styles and values -To clear styles applied to data in a cell, or values entered into cells, or remove both data and formatting, you can choose one of the two ways: +You can clear cell values, cell styles, or both. Choose one of two ways: 1\. via the toolbar button: @@ -95,16 +95,16 @@ To clear styles applied to data in a cell, or values entered into cells, or remo ## Styled borders for cells -You can add a styled border(s) for a cell or a group of cells. +You can add styled borders for a cell or a group of cells. ### Setting styled borders -- Select the necessary cell or a group of cells to set a styled border(s) for +- Select the necessary cell or a group of cells to set styled borders for - Click the **Border** button in the toolbar and choose the desired type of the border, its color and style ![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) -### Removing styled borders +### Removing styled borders - Select the necessary cell or a group of cells from which you want to remove styled borders - Click the **Border** button in the toolbar and choose the *Clear borders* option diff --git a/docs/excel_import_export.md b/docs/excel_import_export.md index c844a5a4..39a67c92 100644 --- a/docs/excel_import_export.md +++ b/docs/excel_import_export.md @@ -8,7 +8,7 @@ description: You can learn about the excel import and export in the documentatio ## Import from Excel -You can load data from an Excel file into Spreadsheet. There is quite a simple way to do this: +You can load data from an Excel file into Spreadsheet. To do this: 1\. Click the **Import** button in the toolbar and select *Microsoft Excel (.xlsx)* @@ -20,11 +20,11 @@ Go to: *File -> Import As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) -2\. Select an Excel file on your computer and its content will be imported into an opened sheet. +2\. Select an Excel file on your computer, and its content is imported into the open sheet. ## Export to Excel -The data you've entered into Spreadsheet can be exported to an Excel file. Complete the steps below: +You can export the data you've entered into Spreadsheet to an Excel file. Complete the steps below: 1\. Click the **Export** button in the toolbar: @@ -36,4 +36,4 @@ Go to: *File -> Download As... -> Microsoft Excel (.xlsx)* in the menu ![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) -2\. Check the directory with downloaded files on your computer to find a downloaded Excel file with data from Spreadsheet. +2\. Check your downloads directory to find the Excel file with data from Spreadsheet. diff --git a/docs/filtering_data.md b/docs/filtering_data.md index 18a5ab66..cbaae6fb 100644 --- a/docs/filtering_data.md +++ b/docs/filtering_data.md @@ -6,9 +6,9 @@ description: You can learn about data filtering in the documentation of the DHTM # Filtering data -You may filter data in the spreadsheet to show only the records that meet the criteria you specify. +You can filter data in the spreadsheet to show only the records that meet the criteria you specify. -To activate the filtering functionality, you can use either of two ways: +To activate filtering, use one of two ways: - Set focus on a cell or select a range of cells and click the **Filter** button in the toolbar @@ -18,7 +18,7 @@ To activate the filtering functionality, you can use either of two ways: ![DHTMLX Spreadsheet Data menu with the Filter option for activating column filters](/img/filter_menu.png) -After that, a **filter** icon appears on the right side of the header of each column in the range. +After that, a **filter** icon appears on the right of each column header in the range. ## Filtering by condition @@ -54,9 +54,9 @@ To clear a filter, click the **filter** icon in the column header, click the **S ## Removing filters -To disable the filtering functionality, do one of the following: +To disable filtering, do one of the following: - click the **Filter** button in the toolbar - or go to: *Data -> Filter* in the menu -The **filter** icons will disappear from the column headers and all hidden records will be displayed. \ No newline at end of file +The **filter** icons disappear from the column headers, and all hidden records reappear. \ No newline at end of file diff --git a/docs/functions.md b/docs/functions.md index 2baecfb5..749c9ab4 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -6,7 +6,7 @@ description: You can learn about the formulas and functions of the DHTMLX JavaSc # Formulas and functions -Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas that can be used for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. +Starting from v4.0, the package of DHTMLX Spreadsheet includes a set of predefined formulas for different types of calculations of strings and numbers. The formulas are compatible with Excel and Google Sheets. :::note Lowercase letters in formulas are automatically converted to upper case. @@ -20,7 +20,7 @@ Here's a list of all the available functions with detailed descriptions. ### Boolean operators -You can compare two values via using logical expressions that in any given case will only return either TRUE or FALSE. +You can compare two values with logical expressions that return either TRUE or FALSE. | Operator | Example | Description | | :------- | :------------ | :------------------------------------------------------------------------------------------------------- | @@ -1435,7 +1435,7 @@ Check the example in our [snippet tool](https://snippet.dhtmlx.com/wux2b35b). ## Getting cell formula -Starting with v4.1, you can get the formula applied to a cell via the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: +Starting with v4.1, you can retrieve the formula applied to a cell with the [`getFormula()`](api/spreadsheet_getformula_method.md) method. The method takes the id of the cell as a parameter: ~~~js var formula = spreadsheet.getFormula("B2"); @@ -1444,7 +1444,7 @@ var formula = spreadsheet.getFormula("B2"); ## Popup with formula description -When you enter a formula, a popup with description of the function and its parameters appears. +When you enter a formula, a popup with a description of the function and its parameters appears. ![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) @@ -1454,7 +1454,7 @@ You can modify the default locale for the popup with formula parameters and add ## Custom formulas -Starting with v6.0, you can register custom formula functions via the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. +Starting with v6.0, you can register custom formula functions with the [`addFormula()`](api/spreadsheet_addformula_method.md) method. Once registered, the formula is available in any cell by its uppercase name. The method takes two parameters: the formula name and a synchronous handler function that receives the resolved cell values as arguments and returns the result: @@ -1464,7 +1464,7 @@ spreadsheet.addFormula("DOUBLE", (value) => { }); ~~~ -After that, the formula can be used in cells just like any built-in function: +After that, you can use the formula in cells just like any built-in function: ~~~js spreadsheet.parse([ diff --git a/docs/guides.md b/docs/guides.md index b921481e..97f6411f 100644 --- a/docs/guides.md +++ b/docs/guides.md @@ -6,7 +6,7 @@ description: You can study developer and user guides in the documentation of the # Guides -DHTMLX Spreadsheet provides a range of great features to build a perfect application that include: support for import/export of data in different formats, handy work with content and style of data, adaptable structure of a spreadsheet, readonly mode, wide possibilities for look and feel customization, integration with famous frameworks, etc. +DHTMLX Spreadsheet includes a wide range of features: import and export of data in different formats, convenient work with cell content and styles, an adaptable spreadsheet structure, a read-only mode, extensive look-and-feel customization, and integration with popular frameworks. ## Developer guides @@ -20,7 +20,7 @@ Discusses the main stages of installing and creating Spreadsheet on a page, adju ### Exploring Spreadsheet features -Shows the ways of loading data into Spreadsheet, handling events and using main functionality. It also dwells on the ways of customizing the main parts of Spreadsheet. +Shows how to load data into Spreadsheet, handle events, and use the main functionality. It also covers customizing the main parts of Spreadsheet. - [Data loading and export](loading_data.md) - [Work with Spreadsheet](working_with_ssheet.md) @@ -40,7 +40,7 @@ Shows the ways of loading data into Spreadsheet, handling events and using main ## User guides -The User guides are provided to make work with Spreadsheet easy for your end users. +The user guides make working with Spreadsheet easy for your users. - [Hot keys list](hotkeys.md) - [Work with sheets](work_with_sheets.md) diff --git a/docs/handling_events.md b/docs/handling_events.md index ea4512c4..a8c2b8d0 100644 --- a/docs/handling_events.md +++ b/docs/handling_events.md @@ -10,7 +10,7 @@ description: You can learn about event handling in the DHTMLX JavaScript Spreads ## Attaching event listeners -You can attach event listeners with the [spreadsheet.events.on()](api/eventsbus_on_method.md) method: +You can attach event listeners with the [`spreadsheet.events.on()`](api/eventsbus_on_method.md) method: ~~~jsx spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -20,7 +20,7 @@ spreadsheet.events.on("AfterColumnAdd", function(cells){ ## Detaching event listeners -To detach events, use [spreadsheet.events.detach()](api/eventsbus_detach_method.md): +To detach events, use [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md): ~~~jsx var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ @@ -31,7 +31,7 @@ spreadsheet.events.detach(addcolumn); ## Calling events -To call events, use [spreadsheet.events.fire()](api/eventsbus_fire_method.md): +To call events, use [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md): ~~~jsx spreadsheet.events.fire("name",args); diff --git a/docs/how_to_start.md b/docs/how_to_start.md index a84a258a..0b5f5584 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -6,13 +6,13 @@ description: You can learn how to start with the DHTMLX JavaScript Spreadsheet l # How to start -This clear and comprehensive tutorial will guide your through the steps you need to complete in order to get a full-functional DHTMLX Spreadsheet on a page. The component will be especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. +This tutorial guides you through the steps to get a fully functional DHTMLX Spreadsheet on a page. The component is especially effective for managing large amounts of data when you need to save the results of calculations and reproduce them. ![DHTMLX Spreadsheet initialized with a sample data table in a browser window](/img/how_to_start.png) ## Step 1. Including source files -Start from creating an HTML file and call it *index.html*. Then proceed to include Spreadsheet source files into the created file. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). +Start by creating an HTML file named *index.html*. Then include Spreadsheet source files in it. [The detailed description of the DHTMLX Spreadsheet package is given here](initialization.md#including-source-files). There are two necessary files: @@ -48,20 +48,20 @@ You can import JavaScript Spreadsheet into your project using the `yarn` or `npm #### Installing trial Spreadsheet via npm or yarn :::info -If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps mentioned in the *README* file. Note that the trial Spreadsheet is available 30 days only. +If you want to use the trial version of Spreadsheet, download the [**trial Spreadsheet package**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) and follow the steps in the *README* file. Note that the trial Spreadsheet is available for 30 days only. ::: #### Installing PRO Spreadsheet via npm or yarn :::info -You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. +You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Note that access to the private **npm** is available only while your proprietary Spreadsheet license is active. ::: ## Step 2. Creating Spreadsheet -Now you are ready to add Spreadsheet to the page. First, let's create a DIV container and then place DHTMLX Spreadsheet into it. So, your steps will be: +Now you are ready to add Spreadsheet to the page. First, create a DIV container and place DHTMLX Spreadsheet into it. Your steps are: -- to specify a DIV container in the **index.html** file +- to specify a DIV container in the *index.html* file - to initialize DHTMLX Spreadsheet using the `dhx.Spreadsheet` constructor As parameters, the constructor function takes the HTML container to place Spreadsheet into and the Spreadsheet configuration object. @@ -91,7 +91,7 @@ As parameters, the constructor function takes the HTML container to place Spread Next you can specify additional configuration options you want the Spreadsheet component to have when initialized besides the default ones. -There are several options you can use to adjust the look and feel of Spreadsheet to your needs, e.g.: **toolbarBlocks**, **rowsCount** and **colsCount**. [Check the details](configuration.md). +You can adjust the look and feel of Spreadsheet with several options, for example: `toolbarBlocks`, `rowsCount`, and `colsCount`. [Check the details](configuration.md). ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet", { @@ -105,7 +105,7 @@ The configuration of DHTMLX Spreadsheet is quite flexible, so you can change it ## Step 4. Loading data into Spreadsheet -The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the **parse()** method and pass an object with data to it as in the example below: +The last step is to populate Spreadsheet with data. DHTMLX Spreadsheet takes data in JSON format. Besides data you can pass necessary styles in a dataset. While loading inline data, you need to use the `parse()` method and pass an object with data to it as in the example below: ~~~jsx title="data.json" const data = [ @@ -140,7 +140,7 @@ spreadsheet.parse(data); ## What's next -That's all. Just four simple steps and you have a handy tool for work with data in the tabular form. Now you can start working with your data or keep exploring the inner world of DHTMLX Spreadsheet. +That's all. In four steps you get a handy tool for working with tabular data. Now you can start working with your data or keep exploring DHTMLX Spreadsheet. - [Spreadsheet overview](/) - [](guides.md) diff --git a/docs/index.md b/docs/index.md index 5f8699ec..d70677e2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,10 +7,10 @@ description: You can have an overview of the JavaScript Spreadsheet library in t # DHTMLX Spreadsheet overview -DHTMLX Spreadsheet is a client-side JavaScript component that allows editing and formatting data in spreadsheets online. It includes a configurable toolbar, handy menu and context menu, and adjustable grid, supports hot keys navigation, loads data both from external and local sources, provides the ability to localize interface into the desired language. +DHTMLX Spreadsheet is a client-side JavaScript component for editing and formatting spreadsheet data online. It includes a configurable toolbar, handy menu and context menu, and an adjustable grid, supports hotkey navigation, loads data from external and local sources, and can localize the interface into the desired language. :::tip -There is a [User Guide](guides.md#user-guides) provided to make work with Spreadsheet easy for your end users +The [User Guide](guides.md#user-guides) makes working with Spreadsheet easy for your users. ::: ## Spreadsheet structure @@ -21,28 +21,28 @@ The **Toolbar** section is rather flexible. It contains several default blocks o ![DHTMLX Spreadsheet toolbar with undo, color, decoration, align, cell, format, and action controls](/img/overview_toolbar.png) -It is also possible to [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. +You can also [customize the toolbar](customization.md#toolbar) by adding your own controls and updating the controls' configuration. ### Editing line -The **editing line** can be used for two purposes: +The **editing line** serves two purposes: - to edit the content of the selected cell - to control changes made in the currently edited cell ![DHTMLX Spreadsheet editing line for editing cell content and tracking changes](/img/overview_editline.png) -You can switch the editing line off, if necessary via the corresponding [configuration option](configuration.md#editing-bar). +If necessary, you can switch the editing line off via the corresponding [configuration option](configuration.md#editing-bar). ### Grid -**Grid** represents a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, e.g. C3. +The **Grid** is a table with columns defined by letters and rows defined by numbers. Thus, a cell of the grid is defined by the column's letter and the row's number, for example, C3. ![DHTMLX Spreadsheet grid with columns labeled by letters and numbered rows](/img/spreadsheet_init.png) ### Context menu -The **Context menu** section includes 5 items **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** with sub-items. +The **Context menu** section includes 6 items — **Lock**, **Clear**, **Columns**, **Rows**, **Sort**, and **Insert link** — with sub-items. ![DHTMLX Spreadsheet context menu with Lock, Clear, Columns, Rows, Sort, and Insert link options](/img/overview_contextmenu.png) @@ -50,7 +50,7 @@ The [structure of Context menu is customizable](customization.md#context-menu) a ### Menu -The **Menu** section contains several blocks that combine most frequently used options from the Toolbar and Context Menu to provide quick and handy access to them. +The **Menu** section contains several blocks that combine the most frequently used options from the Toolbar and Context menu for quick access. By default the **Menu** section is hidden, but you can switch it on via the related [configuration option](configuration.md#menu). @@ -62,7 +62,7 @@ You can [modify the structure of the menu](customization.md#menu) by using custo Now you can get down to using DHTMLX Spreadsheet in your application. Follow the directions of the [How to Start](how_to_start.md) tutorial for guidance. -To dive deeper into the specificity of DHTMLX Spreadsheet, go into more profound manuals: +To learn more about DHTMLX Spreadsheet, see these guides: - [API overview](api/api_overview.md) - [Guides](guides.md) diff --git a/docs/initialization.md b/docs/initialization.md index 9c3879b4..1490adc7 100644 --- a/docs/initialization.md +++ b/docs/initialization.md @@ -6,7 +6,7 @@ description: You can learn about the initialization of the DHTMLX JavaScript Spr # Initialization -This guide will give you detailed instructions on how to create DHTMLX Spreadsheet on a page to enrich your application with features of a mighty worksheet. Follow the steps below to get a ready-to-use component: +This guide describes how to create DHTMLX Spreadsheet on a page and add a full-featured worksheet to your application. Follow the steps below to get a ready-to-use component: 1. [Include the DHTMLX Spreadsheet source files on a page](#including-source-files). 2. [Create a container for DHTMLX Spreadsheet](#creating-container). @@ -32,10 +32,10 @@ Make sure that you set correct relative paths to these files: The structure of the Spreadsheet pack is the following: -- **sources** - the source code files of the library; they are easy-to-read and are mostly intended for debugging; -- **codebase** - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; -- **samples** - the code samples; -- **docs** - the full documentation of the component. +- *sources* - the source code files of the library; they are easy-to-read and are mostly intended for debugging; +- *codebase* - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**; +- *samples* - the code samples; +- *docs* - the full documentation of the component. ## Creating container @@ -61,7 +61,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { ### Configuration properties -See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object in the [Spreadsheet API overview](api/api_overview.md#spreadsheet-properties) article. +See the full list of [properties](api/api_overview.md#spreadsheet-properties) that you can specify in the Spreadsheet configuration object. You can set configuration options during initialization as the second parameter of the constructor: diff --git a/docs/loading_data.md b/docs/loading_data.md index b3a04f51..a471319b 100644 --- a/docs/loading_data.md +++ b/docs/loading_data.md @@ -6,7 +6,7 @@ description: You can learn about loading data in the DHTMLX JavaScript Spreadshe # Data loading and export -You can populate DHTMLX Spreadsheet with a ready dataset that may include the data itself and styling for cells. The component supports two ways of data loading: +You can populate DHTMLX Spreadsheet with a prepared dataset that can include both cell data and styles. The component supports two ways to load data: - load from an external file - load from a local source @@ -15,7 +15,7 @@ The component also supports [export of data into an Excel file](#exporting-data) ## Preparing data -DHTMLX Spreadsheet expects data in the JSON format. +DHTMLX Spreadsheet expects data in JSON format. It can be a simple array with cell objects. Use this way if you need to create a data set for only one sheet. @@ -84,9 +84,9 @@ The ability to load merged cells is available only if you prepare data in a shee ### Setting styles for cells -You may need to define the cells styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. +You may need to define the cell styling in the data set. In this case the data should be an object with *separate properties* that describe data objects and CSS classes applied to particular cells. -A CSS class is set for a cell via the **css** property. +Set a CSS class for a cell with the `css` property. ~~~jsx const styledData = { @@ -118,7 +118,7 @@ const styledData = { ### Setting the locked state for a cell -If you want to specify locked cells in a data set, you can do it with the help of the **locked** property of a cell by setting it to *true*: +If you want to specify locked cells in a data set, use the `locked` property of a cell and set it to `true`: ~~~jsx const dataset = [ @@ -140,7 +140,7 @@ Check the full list of available cell properties in the [API reference](api/spre ### Adding a link into a cell -There is a possibility to specify a link for a cell right in a data set. For this, you need to set the **link** property as an object and provide the necessary settings: +You can specify a link for a cell right in a data set. To do this, set the `link` property as an object and provide the necessary settings: - `text` - (optional) the text of a link - `href` - (required) the URL that defines the link destination @@ -165,7 +165,7 @@ const dataset = [ ~~~ :::note -Note that you should not use the **value** property of the *cell* object and the **text** property of the *link* object at the same time, since they are mutually exclusive. +Note that you should not use the `value` property of the `cell` object and the `text` property of the `link` object at the same time, since they are mutually exclusive. ::: **Related sample**: [Spreadsheet. Import and export to JSON](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) @@ -185,12 +185,12 @@ spreadsheet.load("../common/data.json"); :::info -If you need to provide end users with the ability to import a JSON file into the spreadsheet via the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). +If you need to let users import a JSON file into the spreadsheet through the File Explorer, read [Loading JSON files](api/spreadsheet_load_method.md#loading-json-files). ::: ### Loading CSV data -You can also load data in the CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: +You can also load data in CSV format. For this, you need to call the [](api/spreadsheet_load_method.md) method and pass the name of the format ("csv") as the second parameter: ~~~jsx var spreadsheet = new dhx.Spreadsheet("spreadsheet"); @@ -201,7 +201,7 @@ spreadsheet.load("../common/data.csv", "csv"); ### Loading Excel file (.xlsx) -It is possible to load a file in the Excel format with the **.xlsx** extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: +You can load a file in Excel format with the `.xlsx` extension into a spreadsheet. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Import as..-> Microsoft Excel(.xlsx) @@ -213,12 +213,12 @@ It is possible to load a file in the Excel format with the **.xlsx** extension i #### How to import data -{{note Please note that the import feature won't work in the Internet Explorer browser.}} +{{note Note that the import feature does not work in Internet Explorer.}} -DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) for import of data from Excel. So, to enable the possibility to load data from Excel into Spreadsheet, you need to: +DHTMLX Spreadsheet uses the WebAssembly-based library [Excel2Json](https://github.com/dhtmlx/excel2json) to import data from Excel. To load Excel data into Spreadsheet, you need to: - install the **Excel2Json** library -- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file in one of the two ways: +- specify the [](api/spreadsheet_importmodulepath_config.md) option in the Spreadsheet configuration and set the path to the *worker.js* file in one of two ways: - by providing a local path to the file on your computer, like: `"../libs/excel2json/1.0/worker.js"` - by providing a link to the file from CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` @@ -237,7 +237,7 @@ To load data from an Excel file, pass a string with the type of the extension (" spreadsheet.load("../common/data.xlsx", "xlsx"); ~~~ -{{note Please note that the component supports import from Excel files with the **.xlsx** extension only.}} +{{note Note that the component supports import from Excel files with the `.xlsx` extension only.}} **Related sample**: [Spreadsheet. Import Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) @@ -245,7 +245,7 @@ You can also [export data from a spreadsheet into an Excel file](#exporting-data ### Processing after-loading code -The component will make an AJAX call and expect the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: +The component makes an AJAX call and expects the remote URL to provide valid data. Data loading is asynchronous, so you need to wrap any after-loading code into a promise: ~~~jsx spreadsheet.load("/some/data").then(function(){ @@ -288,7 +288,7 @@ spreadsheet2.parse(state); ### Export into Excel -DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: +DHTMLX Spreadsheet can export data from a spreadsheet into an Excel file. There are corresponding controls in the Toolbar and Menu in the user interface: - Menu: File -> Download as..-> Microsoft Excel(.xlsx) @@ -301,12 +301,12 @@ DHTMLX Spreadsheet provides the ability to export data from a spreadsheet into a #### How to export data :::note -Please note that the export feature won't work in the Internet Explorer browser. +Note that the export feature does not work in Internet Explorer. ::: -The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to enable the functionality of export to Excel. Export is processed at the **worker.js** file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). You can use either the public export server or a local export server. Thus, to have the possibility of exporting files you need to: +The library uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) to export data to Excel. Export is processed in the *worker.js* file of the **Json2Excel** library (the default link is `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). You can use either the public export server or a local export server. To export files, you need to: -- specify the [](api/spreadsheet_exportmodulepath_config.md) option in the Spreadsheet configuration and set the path to the **worker.js** file: +- specify the [](api/spreadsheet_exportmodulepath_config.md) option in the Spreadsheet configuration and set the path to the *worker.js* file: - if you use the public export server, you don't need to specify the link to it, since it is used by default - if you use your own export server, you need to: - install the [**Json2Excel**](https://github.com/dhtmlx/json2excel) library @@ -346,7 +346,7 @@ Check the steps of [importing data from an Excel file into Spreadsheet](#loading ### Export into JSON -From v4.3, the library also includes the ability to export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: +From v4.3, the library can also export data from a spreadsheet into a JSON file. Use the [json()](api/export_json_method.md) method of the Export object for this purpose: ~~~jsx spreadsheet.export.json(); diff --git a/docs/localization.md b/docs/localization.md index ad7f9c20..7454f90f 100644 --- a/docs/localization.md +++ b/docs/localization.md @@ -6,7 +6,7 @@ description: You can learn about the localization of the DHTMLX JavaScript Sprea # Localization -You can localize labels in the interface of DHTMLX Spreadsheet and present it in any necessary language. You just need to provide localized strings for labels and apply your locale to the component. +You can localize the labels in the DHTMLX Spreadsheet interface and present the interface in any language. To do this, provide localized strings for the labels and apply your locale to the component. @@ -182,9 +182,9 @@ const en = { ## Custom locale -To apply a different locale you need to: +To apply a different locale, you need to: -- provide translations for all text labels in Spreadsheet, e.g. for the Russian locale: +- provide translations for all text labels in Spreadsheet, for example, for the Russian locale: ~~~jsx const ru = { @@ -201,7 +201,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); ## Default locale for formulas -The i18n locale for the Spreadsheet popup with descriptions for formulas is contained in the `dhx.i18n.formulas` object. The default locale for formulas is the following: +The `dhx.i18n.formulas` object contains the i18n locale for the Spreadsheet formula popup. The default locale for formulas is the following: ~~~jsx const en = { diff --git a/docs/merge_cells.md b/docs/merge_cells.md index 0262d96c..8b1dbdfa 100644 --- a/docs/merge_cells.md +++ b/docs/merge_cells.md @@ -25,7 +25,7 @@ or ![DHTMLX Spreadsheet Format menu with the Merge option for cell merging](/img/merge_cells_via_menu.png) :::info -The merged cell will display the content of the upper-left cell of the selected range. +The merged cell displays the content of the upper-left cell of the selected range. ::: ## Split cells diff --git a/docs/migration.md b/docs/migration.md index 5d120eb5..27c718b3 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -12,9 +12,9 @@ description: You can learn about migration in the documentation of the DHTMLX Ja The following properties of `ISpreadsheetConfig` are deprecated and removed. Check the current usage below: -- `dateFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `dateFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { dateFormat: "%d/%m/%Y" } }` -- `timeFormat` configuration property. Set it in the [**localization**](api/spreadsheet_localization_config.md) configuration object as: +- `timeFormat` configuration property. Set it in the [`localization`](api/spreadsheet_localization_config.md) configuration object as: - `{ localization: { timeFormat: 12 } }` ### Deprecated methods @@ -144,7 +144,7 @@ spreadsheet.parse(data); ## 4.3 -> 5.0 -In v5.0, the *"help"* option of the [toolbarBlocks](api/spreadsheet_toolbarblocks_config.md) property is renamed to *"helpers"*. Besides, the default set of options is extended by the new *"actions"* option. +In v5.0, the `"help"` option of the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) property is renamed to `"helpers"`. In addition, the default set of options now includes the new `"actions"` option. ~~~jsx title="Before v5.0" {8} // default configuration @@ -178,9 +178,9 @@ toolbarBlocks: [ Version 4.3 is the last version which provides IE support ::: -Version 4.3 brings a new conception of tracking and handling the actions which are performed when you change something in the spreadsheet. +Version 4.3 introduces a new approach to tracking and handling the actions performed when you change something in the spreadsheet. -The new [beforeAction](api/spreadsheet_beforeaction_event.md) and [afterAction](api/spreadsheet_afteraction_event.md) events will fire right before / after an action is executed and indicate which action has been performed. Thus, the new approach allows you to add the necessary logic for several actions at once via using only these two events. For instance: +The new [`beforeAction`](api/spreadsheet_beforeaction_event.md) and [`afterAction`](api/spreadsheet_afteraction_event.md) events fire right before/after an action is executed and indicate which action was performed. This approach lets you add the necessary logic for several actions at once using only these two events. For instance: ~~~jsx spreadsheet.events.on("BeforeAction", (actionName, config) => { @@ -206,7 +206,7 @@ spreadsheet.events.on("AfterAction", (actionName, config) => { }); ~~~ -This way will reduce the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. +This approach reduces the size of your code because you won't need to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events for each separate action. Still, the old approach continues working as before. For more details, check [Spreadsheet actions](api/overview/actions_overview.md). @@ -265,7 +265,7 @@ const locale = { ## 2.1 -> 3.0 -This list of changes will help you to migrate from the previous version 2.1 where DHTMLX Spreadsheet was PHP-based to the totally renewed version 3.0 in which the component is totally built on JavaScript. Check the list below to explore all the changes. +This list of changes helps you migrate from version 2.1, where DHTMLX Spreadsheet was PHP-based, to the fully rebuilt version 3.0, which is built entirely in JavaScript. Check the list below to explore all the changes. :::info The **API of version 2.1** is still available, but it is incompatible with the [**API starting from version 3.0**](api/api_overview.md). If you require the documentation for version 2.1, please [contact us](https://dhtmlx.com/docs/contact.shtml), and we will send it to you. diff --git a/docs/number_formatting.md b/docs/number_formatting.md index 43a5c321..c3802073 100644 --- a/docs/number_formatting.md +++ b/docs/number_formatting.md @@ -6,22 +6,22 @@ description: You can study the developer guide about number formatting in the do # Number formatting -DHTMLX Spreadsheet supports number formatting that you can apply for numeric values in cells. +DHTMLX Spreadsheet supports number formatting that you can apply to numeric values in cells. ![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) :::note -There is a [User Guide](number_formatting_guide.md) provided to make work with Spreadsheet easy for your end users. +The [User Guide](number_formatting_guide.md) makes working with Spreadsheet easy for your users. ::: ## Default number formats A number format is an object that includes a set of properties: -- **id** - the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - the name of a format displayed in the toolbar and menu drop-down lists -- **example** - an example that shows how a formatted number looks like. The number 2702.31 is used as a default value for format examples +- `id` - the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - the name of a format displayed in the toolbar and menu drop-down lists +- `example` - an example that shows what a formatted number looks like. The number 2702.31 is used as a default value for format examples The default number formats are the following: @@ -43,13 +43,13 @@ defaultFormats = [ ]; ~~~ -This is how a spreadsheet with data in various number formats looks like: +This is what a spreadsheet with data in various number formats looks like: ## Date format -You can define the format for dates displayed in the spreadsheet via the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". +You can define the format for dates displayed in the spreadsheet with the `dateFormat` option of the [`localization`](api/spreadsheet_localization_config.md) property. The default format is "%d/%m/%Y". ~~~jsx const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { @@ -98,11 +98,11 @@ spreadsheet.parse({ With Spreadsheet configuration options, you can localize time and date, specify the necessary currency sign and provide the desired decimal and thousands separators. All these settings are available in the [`localization`](api/spreadsheet_localization_config.md) property. It is an object with the following properties: -- **decimal** - (optional) the symbol used as a decimal separator, **"."** (a period) by default
Possible values are `"." | ","` -- **thousands** - (optional) the symbol used as a thousands separator, **","** (a comma) by default
Possible values are `"." | "," | " " | ""` -- **currency** - (optional) the currency sign, **"$"** by default -- **dateFormat** - (optional) the format of displaying dates set as a string, **"%d/%m/%Y"** by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page -- **timeFormat** - (optional) the format of displaying time set as either *12* or *24*, **12** by default +- `decimal` - (optional) the symbol used as a decimal separator, `"."` (a period) by default
Possible values are `"." | ","` +- `thousands` - (optional) the symbol used as a thousands separator, `","` (a comma) by default
Possible values are `"." | "," | " " | ""` +- `currency` - (optional) the currency sign, `"$"` by default +- `dateFormat` - (optional) the format of displaying dates set as a string, `"%d/%m/%Y"` by default. Check the details at the [`localization`](api/spreadsheet_localization_config.md) API page +- `timeFormat` - (optional) the format of displaying time set as either `12` or `24`, `12` by default For example, you can change the default localization settings as shown below: @@ -120,7 +120,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet", { spreadsheet.parse(dataset); ~~~ -Here is the result of configuring the **localization** object for Spreadsheet: +Here is the result of configuring the `localization` object for Spreadsheet: @@ -146,27 +146,27 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { ## Formats customization -You are not limited by [default number formats](#default-number-formats) only. There are two options of formats customization available: +You are not limited to the [default number formats](#default-number-formats). You can customize formats in two ways: - changing the settings of default number formats - adding custom number formats into spreadsheet -All such modifications can be implemented via the [`formats`](api/spreadsheet_formats_config.md) configuration option. It represents an array of format objects each of which contains a set of properties: +You can make all these modifications with the [`formats`](api/spreadsheet_formats_config.md) configuration option. It is an array of format objects, each of which contains a set of properties: -- **id** - (*string*) mandatory, the id of a format that is used to set format to a cell via the [`setFormat()`](api/spreadsheet_setformat_method.md) method -- **mask** - (*string*) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) -- **name** - (*string*) optional, the name of a format that will be displayed in the toolbar and menu drop-down lists -- **example** - (*string*) optional, an example that shows how a formatted number will look like +- `id` - (*string*) mandatory, the id of a format used to set a format for a cell with the [`setFormat()`](api/spreadsheet_setformat_method.md) method +- `mask` - (*string*) mandatory, a mask for a number format. Check the list of characters available in a mask [below](#the-structure-of-a-mask) +- `name` - (*string*) optional, the name of a format displayed in the toolbar and menu drop-down lists +- `example` - (*string*) optional, an example that shows what a formatted number looks like ### The structure of a mask A mask may contain a set of common syntax characters that include digit placeholders, separators, percent and currency signs, valid characters: - **0** - a digit in the number. Used to display insignificant zeros, if a number has fewer digits than there are zeros in the format. For example, to display 2 as 2.0, use the format 0.0. -- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be ommitted, if a number has fewer digits than there are # symbols in the format). -- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00 ,e.g. [$ €]#,##0.00. +- **#** - a digit in the number. Used to display only significant numbers (insignificant zeros will be omitted, if a number has fewer digits than there are # symbols in the format). +- **$** - formats numbers as a dollar value. To use a different currency sign, you need to define it in a mask as **[$ your_currency_sign]**#,##0.00, for example, [$ €]#,##0.00. {{note Note that all characters between [$ and ] will be interpreted as a currency sign.}} - **.(period)** - applies a decimal point to numbers. - **,(comma)** - applies a thousands separator to numbers. @@ -175,21 +175,21 @@ A mask may contain a set of common syntax characters that include digit placehol ## Setting format -In order to apply the necessary format to a numeric value, make use of the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: +To apply the necessary format to a numeric value, use the [`setFormat()`](api/spreadsheet_setformat_method.md) method. It takes two parameters: -- **cell** - (*string*) the id of a cell the value of which should be formatted -- **format** - (*string*) the name of the [default number format](#default-number-formats) to apply to the cell value +- `cell` - (*string*) the id of the cell whose value should be formatted +- `format` - (*string*) the name of the [default number format](#default-number-formats) to apply to the cell value For example: ~~~jsx -// applies the currency format to the cell A1 +// applies the percent format to cell A1 spreadsheet.setFormat("A1","percent"); ~~~ ## Getting format -You can get the number format applied to the value of a cell with the help of the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. +You can retrieve the number format applied to a cell's value with the [`getFormat()`](api/spreadsheet_getformat_method.md) method. The method takes the id of a cell as a parameter. ~~~jsx var format = spreadsheet.getFormat("A1"); @@ -198,7 +198,7 @@ var format = spreadsheet.getFormat("A1"); ## Events -There is a pair of events you can use to control the process of cell's format changing. They are: +You can use a pair of events to control cell format changes: - [`beforeAction`](api/spreadsheet_beforeaction_event.md) - fires before the `setCellFormat` action is executed - [`afterAction`](api/spreadsheet_afteraction_event.md) - fires after the `setCellFormat` action is executed \ No newline at end of file diff --git a/docs/number_formatting_guide.md b/docs/number_formatting_guide.md index 1b7b307d..ce1fbbdf 100644 --- a/docs/number_formatting_guide.md +++ b/docs/number_formatting_guide.md @@ -8,7 +8,7 @@ description: You can study the user guide about number formatting in the documen ## Supported number formats -There are several number formats you can apply to format numeric values of cells: +You can apply several number formats to cell values: diff --git a/docs/react/events.md b/docs/react/events.md index 8b2c5893..783a2ee6 100644 --- a/docs/react/events.md +++ b/docs/react/events.md @@ -9,12 +9,12 @@ description: "Event callback props for ReactSpreadsheet: actions, selection, edi All event callbacks are optional props. "Before" callbacks can return `false` to cancel the operation. :::note -The React wrapper uses `onCamelCase` prop names (e.g. `onAfterAction`) while the JS Spreadsheet API uses `camelCase` event names on the event bus (e.g. `afterAction`). See the [JS API Events Reference](api/overview/events_overview.md) for the imperative API. +The React wrapper uses `onCamelCase` prop names (for example, `onAfterAction`) while the JS Spreadsheet API uses `camelCase` event names on the event bus (for example, `afterAction`). See the [JS API Events Reference](api/overview/events_overview.md) for the imperative API. ::: ## Action events -Fired for any user action (cell edits, formatting, structural changes, etc.). +Fired for any user action, such as cell edits, formatting, or structural changes. | Prop | Cancellable | Description | |------|:-----------:|-------------| diff --git a/docs/react/index.md b/docs/react/index.md index c435d5b5..429bedc1 100644 --- a/docs/react/index.md +++ b/docs/react/index.md @@ -6,7 +6,7 @@ description: "Install, configure, and use DHTMLX Spreadsheet in React with the o # React Spreadsheet -The official declarative React wrapper for DHTMLX Spreadsheet. Build spreadsheet UIs with a component-based API: pass data as props, respond to changes via event callbacks, and access the underlying widget through a ref when needed. +The official declarative React wrapper for DHTMLX Spreadsheet. Build spreadsheet UIs with a component-based API: pass data as props, respond to changes through event callbacks, and access the underlying widget through a ref when needed. ## Get started diff --git a/docs/react/localization.md b/docs/react/localization.md index 1a5de5e8..43f1eb94 100644 --- a/docs/react/localization.md +++ b/docs/react/localization.md @@ -6,7 +6,7 @@ description: "Localize UI labels, formula names, and number/date formatting in R # React Spreadsheet localization -React Spreadsheet provides two separate localization mechanisms for different aspects of the UI. +React Spreadsheet has two separate localization mechanisms for different aspects of the UI. ## Two localization mechanisms @@ -52,7 +52,7 @@ const locale: SpreadsheetLocale = { ## Number/date formatting (localization) -The `localization` prop controls how numbers and dates are displayed: decimal separators, currency symbols, date patterns, etc. It uses the same format as the DHTMLX Spreadsheet [`localization`](api/spreadsheet_localization_config.md) configuration property. +The `localization` prop controls how numbers and dates are displayed: decimal separators, currency symbols, and date patterns. It uses the same format as the DHTMLX Spreadsheet [`localization`](api/spreadsheet_localization_config.md) configuration property. ~~~tsx { ~~~ :::warning -Avoid mixing imperative writes (e.g. `instance.setValue()`) with the declarative `sheets` prop. The wrapper may overwrite imperative changes on the next render cycle. Use the ref only for **reading** data and for operations like undo/redo, selection, and export. +Avoid mixing imperative writes (for example, `instance.setValue()`) with the declarative `sheets` prop. The wrapper may overwrite imperative changes on the next render cycle. Use the ref only for **reading** data and for operations like undo/redo, selection, and export. ::: ## Controlled search @@ -129,7 +129,7 @@ const [results, setResults] = useState([]); ## Undo / redo -Use `onStateChange` to track undo/redo availability, and call `undo()`/`redo()` via ref: +Use `onStateChange` to track undo/redo availability, and call `undo()`/`redo()` through the ref: ~~~tsx const ref = useRef(null); diff --git a/docs/react/types.md b/docs/react/types.md index 2f98706e..b4b5660d 100644 --- a/docs/react/types.md +++ b/docs/react/types.md @@ -20,7 +20,7 @@ A single cell's declarative state. All properties are optional; omitted properti |----------|------|-------------| | `value` | `string \| number` | Cell value: text, number, or formula string (prefixed with `=`). | | `css` | `string` | CSS class name(s) referencing keys in the top-level `styles` map. | -| `format` | `string` | Number format mask or alias (e.g. `"currency"`, `"#,##0.00"`). | +| `format` | `string` | Number format mask or alias (for example, `"currency"` or `"#,##0.00"`). | | `locked` | `boolean` | Whether the cell is locked (protected from editing). | | `validation` | `string \| string[]` | Data validation dropdown options. | @@ -76,7 +76,7 @@ Filter configuration for a column within a sheet. | Property | Type | Description | |----------|------|-------------| -| `cell` | `string` | Cell reference identifying the filtered column (e.g. `"A1"`). | +| `cell` | `string` | Cell reference identifying the filtered column (for example, `"A1"`). | | `rules` | `IFilterRules[]` | Filter rules to apply. Empty array clears the filter. | ## SheetSort @@ -85,7 +85,7 @@ Sort configuration for a column within a sheet. | Property | Type | Description | |----------|------|-------------| -| `cell` | `string` | Cell reference or range for the sort operation (e.g. `"B1"` or `"A1:E8"`). Use a range to sort multiple columns together while maintaining row integrity. | +| `cell` | `string` | Cell reference or range for the sort operation (for example, `"B1"` or `"A1:E8"`). Use a range to sort multiple columns together while maintaining row integrity. | | `dir` | `1 \| -1` | Sort direction: `1` = ascending, `-1` = descending. | ## SheetData @@ -96,7 +96,7 @@ Complete declarative state for a single spreadsheet sheet. |----------|------|:--------:|-------------| | `id` | `Id` | Yes | Unique sheet identifier. Must be stable across renders. | | `name` | `string` | Yes | Display name shown on the sheet tab. | -| `cells` | `Record` | Yes | Cell data keyed by cell reference (e.g. `"A1"`, `"B2"`). Only cells with non-default data need entries. | +| `cells` | `Record` | Yes | Cell data keyed by cell reference (for example, `"A1"` or `"B2"`). Only cells with non-default data need entries. | | `rows` | `Record` | No | Row configuration keyed by 0-indexed row number. | | `cols` | `Record` | No | Column configuration keyed by 0-indexed column number. | | `merged` | `MergedRange[]` | No | Merged cell ranges. | @@ -161,7 +161,7 @@ Action execution configuration passed to [`onBeforeAction`](react/events.md#acti | `prev` | `unknown` | Previous value. | | `action` | `Actions \| string` | Action identifier. | | `groupAction` | `Actions \| string` | Parent group action identifier. | -| `cell` | `string` | Cell reference (e.g. `"A1"`). | +| `cell` | `string` | Cell reference (for example, `"A1"`). | | `pageId` | `Id` | Target sheet id. | | `pageName` | `string` | Target sheet name. | | `[key: string]` | `unknown` | Additional action-specific properties. | @@ -270,7 +270,7 @@ These types are re-exported from `@dhx/ts-spreadsheet` for convenience: | `IStylesList` | Style definitions map. | | `IDataWithStyles` | Data structure with embedded styles (used by `serialize()`/`parse()`). | | `ICellInfo` | Cell information returned by widget methods. | -| `FileFormat` | File format for data loading (e.g. `"json"`, `"xlsx"`). | -| `ToolbarBlocks` | Toolbar block identifiers (e.g. `"default"`, `"undo"`, `"font"`). | +| `FileFormat` | File format for data loading (for example, `"json"` or `"xlsx"`). | +| `ToolbarBlocks` | Toolbar block identifiers (for example, `"default"`, `"undo"`, or `"font"`). | | `FilterConditions` | Enum of available filter condition types. | -| `Id` | Generic identifier type (`string \| number`). | +| `Id` | Generic identifier type (*string \| number*). | diff --git a/docs/sorting_data.md b/docs/sorting_data.md index 92190b73..2979d4f8 100644 --- a/docs/sorting_data.md +++ b/docs/sorting_data.md @@ -30,7 +30,7 @@ To sort spreadsheet data by a separate range, take the following steps: 1\. Select a range of cells in the column you want to sort the data by -2\. Choose one of the two actions: +2\. Choose one of two actions: - Right-click a cell in the selected range and choose *Sort* -> *Sort A to Z* or *Sort Z to A* diff --git a/docs/svelte_integration.md b/docs/svelte_integration.md index ac140103..90b54872 100644 --- a/docs/svelte_integration.md +++ b/docs/svelte_integration.md @@ -34,7 +34,7 @@ Go to the app directory: cd my-svelte-spreadsheet-app ~~~ -Then you need to install dependencies and run the app. For this, you need to make use of a package manager: +Then install dependencies and run the app. To do this, use a package manager: - if you use [**yarn**](https://yarnpkg.com/), you need to call the following commands: @@ -50,25 +50,25 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should run on localhost (for instance `http://localhost:3000`). ## Creating Spreadsheet -Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package. +Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package. ### Step 1. Package installation -Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only. +Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only. ### Step 2. Component creation -Now you need to create a Svelte component, to add Spreadsheet into the application. Let's create a new file in the ***src/*** directory and name it ***Spreadsheet.svelte***. +Now you need to create a Svelte component to add Spreadsheet into the application. Create a new file in the *src/* directory and name it *Spreadsheet.svelte*. #### Importing source files -Open the ***Spreadsheet.svelte*** file and import Spreadsheet source files. Note that: +Open the *Spreadsheet.svelte* file and import Spreadsheet source files. Note that: -- if you use PRO version and install the Spreadsheet package from a local folder, the import paths look like this: +- if you use the PRO version and install the Spreadsheet package from a local folder, the import paths look like this: ~~~html title="Spreadsheet.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -138,7 +138,7 @@ body, #### Loading data -To add data into the Spreadsheet, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. Create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -183,7 +183,7 @@ export function getData() { } ~~~ -Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: +Then open the *App.svelte* file, import data, and pass it into the newly created `` component as **props**: ~~~html {3,5,8} title="App.svelte" ~~~ -Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **spreadsheet.min.css**. +Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as *spreadsheet.min.css*. - if you use the trial version of Spreadsheet, specify the following paths: @@ -140,7 +140,7 @@ body, #### Loading data -To add data into the Spreadsheet, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data into Spreadsheet, you need to provide a data set. You can create the *data.js* file in the *src/* directory and add some data into it: ~~~jsx title="data.js" export function getData() { @@ -185,7 +185,7 @@ export function getData() { } ~~~ -Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**: +Then open the *App.vue* file, import data, and initialize it with the inner `data()` method. After this you can pass data into the newly created `` component as **props**: ~~~html {3,7-9,14} title="App.vue" + + + +~~~ + +Anschließend können Sie den Namen des Icons als Wert der Eigenschaft `icon` im Objekt mit den Control-Parametern für Toolbar, Menü oder Kontextmenü verwenden. Weitere Details entnehmen Sie den folgenden Abschnitten. + +## Control-Typen und -Operationen {#controls-types-and-operations} + +### Typen {#types} + +Sie können die folgenden Control-Typen hinzufügen: `button`, `menuItem`, `separator` und `spacer`. + +Das `button`-Objekt hat folgende Eigenschaften: + +- `type` - der Typ eines Buttons, setzen Sie diesen auf "button" +- `id` - die ID eines Buttons +- `icon` - der Name eines Icons aus dem verwendeten Icon-Font +- `hotkey` - der Name des Hotkeys für einen Button +- `value` - der Wert eines Buttons +- `tooltip` - der Tooltip eines Buttons +- `twoState` - das Flag, das bestimmt, ob ein Button in zwei Zuständen verwendet werden kann +- `active` - der Zustand eines Buttons: `true` - aktiv, `false` - inaktiv + +Das `menuItem`-Objekt hat folgende Eigenschaften: + +- `type` - der Typ eines Menüeintrags, setzen Sie diesen auf "menuItem" +- `id` - die ID eines Menüeintrags +- `icon` - der Name eines Icons aus dem verwendeten Icon-Font +- `hotkey` - der Name des Hotkeys für einen Menüeintrag +- `value` - der Wert eines Menüeintrags +- `childs` - ein Array von untergeordneten Controls (beachten Sie, dass alle untergeordneten Elemente den Typ `menuItem` haben müssen) + +Die Datensammlungs-API der **Toolbar**, des **Menüs** und des **Kontextmenüs** ermöglicht Ihnen die Verwaltung von Controls: Sie können benutzerdefinierte Controls hinzufügen, nicht benötigte entfernen oder vorhandene aktualisieren - beispielsweise deren Icons ändern. + +### Controls hinzufügen {#adding-controls} + +Um ein neues Control hinzuzufügen, verwenden Sie die Methode `spreadsheet.{name}.data.add()`. Diese akzeptiert folgende Parameter: + +- `config` - (*object*) ein Objekt mit der Control-Konfiguration +- `index` - (*number*) der Index der Position, an der das Control eingefügt werden soll +- `parent` - (*string*) die ID eines übergeordneten Controls (für den Typ `menuItem`) + +Für einen Button: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "button", // "menuItem" + id: "button-id", + tooltip: "Some tooltip", + icon: "icon-name" +}, 2); +~~~ + +Für ein menuItem: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "menuitem-id", + value: "Some value", +}, -1, "parent-id"); +~~~ + +### Controls aktualisieren {#updating-controls} + +Sie können das Icon eines Controls und andere Konfigurationsoptionen über die Methode `spreadsheet.{name}.data.update()` ändern. Diese nimmt zwei Parameter entgegen: + +- die ID des Controls +- ein Objekt mit der neuen Konfiguration des Controls + +~~~jsx +// spreadsheet.menu.data.update / spreadsheet.contextMenu.data.update +spreadsheet.toolbar.data.update("add", { + icon: "icon_name" +}); +~~~ + +### Controls löschen {#deleting-controls} + +Um ein Control zu entfernen, verwenden Sie die Methode `spreadsheet.{name}.data.remove()`. Übergeben Sie der Methode die ID des zu entfernenden Controls: + +~~~jsx +// spreadsheet.menu.data.remove / spreadsheet.contextMenu.data.remove +spreadsheet.toolbar.data.remove("control-id"); +~~~ + +## Toolbar {#toolbar} + +### Standard-Controls {#default-controls} + +Die [Standard-Toolbar](/#toolbar) enthält folgende Control-Blöcke: + +- den **Rückgängig**-Block + - den *Rückgängig*-Button (id: "undo") + - den *Wiederholen*-Button (id: "redo") +- den **Farben**-Block + - den *Textfarbe*-Button (id: "color") + - den *Hintergrundfarbe*-Button (id: "background") +- den **Schrift**-Block + - die *Schriftgröße*-Combobox (id: "font-size") +- den **Dekoration**-Block + - den *Fett*-Button (id: "font-weight-bold") + - den *Kursiv*-Button (id: "font-style-italic") + - den *Unterstrichen*-Button (id: "text-decoration-underline") + - den *Durchgestrichen*-Button (id: "text-decoration-line-through") +- den **Ausrichten**-Block + - den **Horizontal ausrichten**-Unterblock + - den *Links*-Button (id: "halign-left") + - den *Mitte*-Button (id: "halign-center") + - den *Rechts*-Button (id: "halign-right") + - den **Vertikal ausrichten**-Unterblock + - den *Oben*-Button (id: "valign-top") + - den *Mitte*-Button (id: "valign-center") + - den *Unten*-Button (id: "valign-bottom") + - den **Textumbruch**-Unterblock + - den *Abschneiden*-Button (id: "multiline-clip") + - den *Umbrechen*-Button (id: "multiline-wrap") +- den **Zelle**-Block + - den *Rahmen*-Button (id: "border") + - den *Verbinden/Trennen*-Button (id: "merge") +- den **Format**-Block + - das *Format*-menuItem (id: "format") +- den **Aktionen**-Block + - den *Filter*-Button (id: "filter") + - den *Link einfügen*-Button (id: "link") + +Es ist auch möglich, folgende Blöcke hinzuzufügen: + +- den **Sperren**-Block + - den *Sperren*-Button (id: "lock") +- den **Leeren**-Block + - das *Gruppe leeren*-menuItem (id: "clear-group") + - das *Wert leeren*-menuItem (id: "clear-value") + - das *Stile leeren*-menuItem (id: "clear-styles") + - das *Alles leeren*-menuItem (id: "clear-all") +- den **Zeilen**-Block + - den *Zeile hinzufügen*-Button (id: "add-row") + - den *Zeile entfernen*-Button (id: "remove-row") + - den *Zeilen einblenden*-Button (id: "unfreeze-rows") + - den *Bis Zeile [id] fixieren*-Button (id: "freeze-rows") + - den *Zeile(n) [id] ausblenden*-Button (id: "hide-rows") +- den **Spalten**-Block + - den *Spalte hinzufügen*-Button (id: "add-col") + - den *Spalte entfernen*-Button (id: "remove-col") + - den *Spalten einblenden*-Button (id: "unfreeze-cols") + - den *Bis Spalte [id] fixieren*-Button (id: "freeze-cols") + - den *Spalte(n) [id] ausblenden*-Button (id: "hide-cols") +- den **Datei**-Block + - das *Exportieren*-menuItem (id: "export") + - das *"Microsoft Excel(.xlsx)"*-menuItem (id: "export-xlsx") + - das *Importieren*-menuItem (id: "import") + - das *"Microsoft Excel(.xlsx)"*-menuItem (id: "import-xlsx") +- den **Hilfe**-Block + - den *Hilfe*-Button (id: "help") + +### Controls hinzufügen {#adding-controls-1} + +Im folgenden Beispiel wird ein neuer Button zur Toolbar hinzugefügt: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "button", + icon: "dxi dxi-delete", + tooltip: "Remove all", + id: "remove-all" +}); +~~~ + +![DHTMLX Spreadsheet toolbar with a custom Remove all button added through customization](/img/custom_toolbar_button.png) + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierter Toolbar-Button](https://snippet.dhtmlx.com/qopk6lta) + +Im folgenden Beispiel wird eine neue menuItem-Option zum Control "clear-group" hinzugefügt: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2" +}, -1, "clear-group"); +~~~ + +Es gibt eine vereinfachte Schreibweise zum Hinzufügen eines menuItems, wenn die genaue Position des neuen Eintrags nicht relevant ist: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2", + parent: "clear-group" +}); +~~~ + +### Controls aktualisieren {#updating-controls-1} + +Im folgenden Beispiel werden die Standard-Icons der Toolbar-Buttons "Rückgängig"/"Wiederholen" durch Font-Awesome-Icons ersetzt: + +~~~jsx +spreadsheet.toolbar.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.toolbar.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![DHTMLX Spreadsheet toolbar with custom Undo and Redo icons from Font Awesome](/img/custom_toolbar_icons.png) + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierte Toolbar-Icons](https://snippet.dhtmlx.com/mvnx43o0) + +### Controls löschen {#deleting-controls-1} + +Im folgenden Beispiel wird der "Rückgängig"-Button aus der Toolbar entfernt: + +~~~jsx +spreadsheet.toolbar.data.remove("undo"); +~~~ + +### Benutzerdefinierte Schriftgröße {#custom-font-size} + +Sie können die Liste der verfügbaren Schriftgrößen im **Schrift**-Toolbar-Block neu definieren, indem Sie die vorhandenen Einträge aus der `"font-size"`-Combobox entfernen und eigene hinzufügen: + +~~~jsx +const FONT_SIZES = [8, 10, 12, 14, 16, 20]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // Konfigurationsoptionen +}); + +spreadsheet.toolbar.data.removeAll("font-size"); +spreadsheet.toolbar.data.add( + FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })), + -1, + "font-size" +); + +spreadsheet.parse(dataset); +~~~ + +**Verwandtes Beispiel:** [Spreadsheet. Benutzerdefinierte Schriftgröße festlegen](https://snippet.dhtmlx.com/tffbf11g) + +## Menü {#menu} + +### Standard-Controls {#default-controls-1} + +Das [Standard-Menü](/#menu) hat folgende Struktur: + +- das **Datei**-menuItem (id: "edit") + - das *Importieren als...*-menuItem (id: "import") + - das *"Microsoft Excel(.xlsx)"*-menuItem (id: "import-xlsx") + - das *Herunterladen als...*-menuItem (id: "download") + - das *"Microsoft Excel(.xlsx)"*-menuItem (id: "export-xlsx") +- das **Bearbeiten**-menuItem (id: "edit") + - das *Rückgängig*-menuItem (id: "undo") + - das *Wiederholen*-menuItem (id: "redo") + - der Trenner + - das *Fixieren*-menuItem (id: "freeze") + - das *Spalten einblenden*-menuItem (id: "unfreeze-cols") + - das *Bis Spalte [id] fixieren*-menuItem (id: "freeze-cols") + - der Trenner (id: "freeze-sep") + - das *Zeilen einblenden*-menuItem (id: "unfreeze-rows") + - das *Bis Zeile [id] fixieren*-menuItem (id: "freeze-rows") + - das *Sperren*-menuItem (id: "lock") + - der Trenner + - das *Leeren*-menuItem (id: "clear") + - das *Wert leeren*-menuItem (id: "clear-value") + - das *Stile leeren*-menuItem (id: "clear-styles") + - das *Alles leeren*-menuItem (id: "clear-all") +- das **Einfügen**-menuItem (id: "insert") + - das *Spalten*-menuItem (id: "columns") + - das *Spalte hinzufügen*-menuItem (id: "add-col") + - das *Spalte entfernen*-menuItem (id: "remove-col") + - das *Zeilen*-menuItem (id: "rows") + - das *Zeile hinzufügen*-menuItem (id: "add-row") + - das *Zeile entfernen*-menuItem (id: "remove-row") + - das *Link einfügen*-menuItem (id: "link") +- das **Format**-menuItem (id: "configuration") + - das *Fett*-menuItem (id: "font-weight-bold") + - das *Kursiv*-menuItem (id: "font-style-italic") + - das *Unterstrichen*-menuItem (id: "text-decoration-underline") + - das *Durchgestrichen*-menuItem (id: "text-decoration-line-through") + - der Trenner + - das *Horizontal ausrichten*-menuItem (id: "halign") + - das *Links*-menuItem (id: "halign-left") + - das *Mitte*-menuItem (id: "halign-center") + - das *Rechts*-menuItem (id: "halign-right") + - das *Vertikal ausrichten*-menuItem (id: "valign") + - das *Oben*-menuItem (id: "valign-top") + - das *Mitte*-menuItem (id: "valign-center") + - das *Unten*-menuItem (id: "valign-bottom") + - das *Textumbruch*-menuItem (id: "multiline") + - das *Abschneiden*-menuItem (id: "multiline-clip") + - das *Umbrechen*-menuItem (id: "multiline-wrap") + - das *Format*-menuItem (id: "format") + - das *Verbinden/Trennen*-menuItem (id: "merge") +- das **Daten**-menuItem (id: "data") + - das *Datenvalidierung*-menuItem (id: "validation") + - das *Suchen*-menuItem (id: "search") + - das *Filter*-menuItem (id: "filter") + - das *Sortieren*-menuItem (id: "sort") + - das *A bis Z sortieren*-menuItem (id: "asc-sort") + - das *Z bis A sortieren*-menuItem (id: "desc-sort") +- das **Hilfe**-menuItem (id: "help") + +### Controls hinzufügen {#adding-controls-2} + +Im folgenden Beispiel wird ein neues menuItem zum Menü hinzugefügt: + +~~~jsx +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + childs: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); +~~~ + +![DHTMLX Spreadsheet menu with a custom Validate option for checking numbers](/img/custom_menuitem.png) + +**Verwandtes Beispiel**: [Spreadsheet. Menü-Daten](https://snippet.dhtmlx.com/2mlv2qaz) + +### Controls aktualisieren {#updating-controls-2} + +Im folgenden Beispiel werden die Standard-Icons der menuItems "Rückgängig"/"Wiederholen" durch Font-Awesome-Icons ersetzt: + +~~~jsx +spreadsheet.menu.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.menu.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![DHTMLX Spreadsheet menu with custom Undo and Redo icons from Font Awesome](/img/custom_menu_icons.png) + +### Controls löschen {#deleting-controls-2} + +Im folgenden Beispiel wird das menuItem "Rückgängig" aus dem Menü entfernt: + +~~~jsx +spreadsheet.menu.data.remove("undo"); +~~~ + +## Kontextmenü {#context-menu} + +### Standard-Controls {#default-controls-2} + +Das [Standard-Kontextmenü](/#context-menu) hat folgende Struktur: + +- das **Sperren**-menuItem (id: "lock") +- das **Leeren**-menuItem (id: "clear") + - das *Wert leeren*-menuItem (id: "clear-value") + - das *Stile leeren*-menuItem (id: "clear-styles") + - das *Alles leeren*-menuItem (id: "clear-all") +- das **Spalten**-menuItem (id: "columns") + - das *Spalte hinzufügen*-menuItem (id: "add-col") + - das *Spalte entfernen*-menuItem (id: "remove-col") + - das *An Daten anpassen*-menuItem (id: "fit-col") + - der Trenner + - das *Spalten einblenden*-menuItem (id: "unfreeze-cols") + - das *Bis Spalte [id] fixieren*-menuItem (id: "freeze-cols") + - das *Spalten anzeigen*-menuItem (id: "show-cols") + - das *Spalte(n) [id] ausblenden*-menuItem (id: "hide-cols") +- das **Zeilen**-menuItem (id: "rows") + - das *Zeile hinzufügen*-menuItem (id: "add-row") + - das *Zeile entfernen*-menuItem (id: "remove-row") + - der Trenner + - das *Zeilen einblenden*-menuItem (id: "unfreeze-rows") + - das *Bis Zeile [id] fixieren*-menuItem (id: "freeze-rows") + - das *Zeilen anzeigen*-menuItem (id: "show-rows") + - das *Zeile(n) [id] ausblenden*-menuItem (id: "hide-rows") +- das **Sortieren**-menuItem (id: "sort") + - das *A bis Z sortieren*-menuItem (id: "asc-sort") + - das *Z bis A sortieren*-menuItem (id: "desc-sort") +- das **Link einfügen**-menuItem (id: "link") + +### Controls hinzufügen {#adding-controls-3} + +Im folgenden Beispiel wird ein neues menuItem zum Kontextmenü hinzugefügt: + +~~~jsx +spreadsheet.contextMenu.data.add({ + icon: "mdi mdi-eyedropper-variant", + value: "Paint format", + id: "paint-format" +}); +~~~ + +![DHTMLX Spreadsheet context menu with a custom Paint format option](/img/custom_context_menuitem.png) + +**Verwandtes Beispiel**: [Spreadsheet. Kontextmenü](https://snippet.dhtmlx.com/atl9gd4h) + +### Controls aktualisieren {#updating-controls-3} + +Im folgenden Beispiel wird das Standard-Icon des menuItems "Sperren" durch ein Font-Awesome-Icon ersetzt: + +~~~jsx +spreadsheet.contextMenu.data.update("lock", { icon: "fa fa-key" }); +~~~ + +![DHTMLX Spreadsheet context menu with a custom Lock icon from Font Awesome](/img/custom_context_icon.png) + +### Controls löschen {#deleting-controls-3} + +Im folgenden Beispiel wird das menuItem "Sperren" aus dem Kontextmenü entfernt: + +~~~jsx +spreadsheet.contextMenu.data.remove("lock"); +~~~ + +## Benutzerdefinierter Nur-Lesen-Modus {#custom-read-only-mode} + +Neben der Anwendung des [Nur-Lesen-Modus](configuration.md#read-only-mode) auf die gesamte Spreadsheet-Komponente können Sie bestimmte Operationen mithilfe von Events blockieren, deren Namen mit `before` beginnen, zum Beispiel: + +- [](api/spreadsheet_beforeeditstart_event.md) +- [](api/spreadsheet_beforeaction_event.md) + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +spreadsheet.events.on("beforeEditStart", function(){ + return false; +}); + +spreadsheet.events.on("beforeAction", function(actionName){ + if (actionName === "setCellValue" || actionName === "setCellStyle") { + return false; + } +}); + +spreadsheet.parse(data); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierter Nur-Lesen-Modus](https://snippet.dhtmlx.com/8xcursbe) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/data_formatting.md b/i18n/de/docusaurus-plugin-content-docs/current/data_formatting.md new file mode 100644 index 00000000..47a4876e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/data_formatting.md @@ -0,0 +1,112 @@ +--- +sidebar_label: Datenformatierung +title: Datenformatierung +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie mehr über die Datenformatierung. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Datenformatierung {#data-formatting} + +## Farbe und Stil {#color-and-style} + +Die Symbolleiste von DHTMLX Spreadsheet enthält mehrere Abschnitte mit Schaltflächen zum Ändern des Stils von Daten in einer Zelle. + +![DHTMLX Spreadsheet toolbar color and text style buttons for text color, background, bold, and italic](/img/color.png) + +Was Sie tun können: + +- **Textfarbe** mit der Farbauswahl der Schaltfläche **Textfarbe** ändern +- **Hintergrundfarbe** mit der Farbauswahl der Schaltfläche **Hintergrundfarbe** ändern +- die Stile *Fett*, *Kursiv* und *Unterstrichen* auf Text anwenden +- die Formatierung *Durchgestrichen* auf Text anwenden + +## Ausrichtung {#alignment} + +### Horizontale Ausrichtung {#horizontal-alignment} + +Gehen Sie folgendermaßen vor, um Daten in einer Zelle horizontal auszurichten: + +1\. Wählen Sie eine oder mehrere Zellen aus, die ausgerichtet werden sollen + +2\. Wählen Sie eine der folgenden Aktionen: + +- Klicken Sie in der Symbolleiste auf die Schaltfläche "Horizontale Ausrichtung" und wählen Sie *Links*, *Zentriert* oder *Rechts* + +![DHTMLX Spreadsheet toolbar with the Horizontal align dropdown showing Left, Center, and Right](/img/align.png) + +- Oder gehen Sie zu: *Format* -> *Horizontale Ausrichtung* -> Wählen Sie *Links*, *Zentriert* oder *Rechts* im Menü + +![DHTMLX Spreadsheet Format menu with the Horizontal align submenu options](/img/horizontal_alignment.png) + +### Vertikale Ausrichtung {#vertical-alignment} + +Gehen Sie folgendermaßen vor, um Daten in einer Zelle vertikal auszurichten: + +1\. Wählen Sie eine oder mehrere Zellen aus, die ausgerichtet werden sollen + +2\. Wählen Sie eine der folgenden Aktionen: + +- Klicken Sie in der Symbolleiste auf die Schaltfläche "Vertikale Ausrichtung" und wählen Sie *Oben*, *Zentriert* oder *Unten* + +![DHTMLX Spreadsheet toolbar with the Vertical align dropdown showing Top, Center, and Bottom](/img/vertical_align.png) + +- Oder gehen Sie zu: *Format* -> *Vertikale Ausrichtung* -> Wählen Sie *Oben*, *Zentriert* oder *Unten* im Menü + +![DHTMLX Spreadsheet Format menu with the Vertical align submenu options](/img/vertical_alignment.png) + +### Text in einer Zelle umbrechen {#wrap-text-in-a-cell} + +Sie können Text in Zellen auf folgende Weise umbrechen: + +1\. Wählen Sie eine oder mehrere Zellen aus, die Sie formatieren möchten + +2\. Wählen Sie eine der folgenden Aktionen: + +- Klicken Sie in der Symbolleiste auf die Schaltfläche "Textumbruch" und wählen Sie *Beschneiden* oder *Umbrechen* + +![DHTMLX Spreadsheet toolbar with the Text wrapping dropdown showing Clip and Wrap](/img/wrap.png) + +- Oder gehen Sie zu: *Format* -> *Textumbruch* -> Wählen Sie *Beschneiden* oder *Umbrechen* im Menü + +![DHTMLX Spreadsheet Format menu with the Text wrapping submenu showing Clip and Wrap](/img/text_wrapping.png) + +:::tip +Wenn Sie die Spaltenbreite ändern, wird der Textumbruch automatisch angepasst. +::: + +## Stile und Werte entfernen {#removing-styles-and-values} + +Sie können Zellwerte, Zellstile oder beides löschen. Wählen Sie eine von zwei Möglichkeiten: + +1\. Über die Schaltfläche in der Symbolleiste: + +- Wählen Sie die gewünschte(n) Zelle(n) aus. +- Verwenden Sie die Schaltfläche **Löschen** in der Symbolleiste. +- Wählen Sie die gewünschte Option in der Dropdown-Liste: + +![DHTMLX Spreadsheet toolbar with the Clear button dropdown for clearing values or styles](/img/clear_button.png) + +2\. Über das Kontextmenü einer Zelle: + +- Wählen Sie die gewünschte(n) Zelle(n) aus. +- Klicken Sie mit der rechten Maustaste auf die Auswahl, um das Kontextmenü aufzurufen. +- Wählen Sie die Option **Löschen** und dann eine der Optionen in der Dropdown-Liste: + +![DHTMLX Spreadsheet context menu with the Clear option for clearing value, styles, or all](/img/clear_option.png) + +## Formatierte Rahmen für Zellen {#styled-borders-for-cells} + +Sie können formatierten Rahmen für eine Zelle oder eine Gruppe von Zellen hinzufügen. + +### Formatierte Rahmen setzen {#setting-styled-borders} + +- Wählen Sie die gewünschte Zelle oder eine Gruppe von Zellen aus, für die Sie formatierte Rahmen setzen möchten +- Klicken Sie in der Symbolleiste auf die Schaltfläche **Rahmen** und wählen Sie den gewünschten Rahmentyp sowie dessen Farbe und Stil + +![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) + +### Formatierte Rahmen entfernen {#removing-styled-borders} + +- Wählen Sie die gewünschte Zelle oder eine Gruppe von Zellen aus, von der Sie formatierte Rahmen entfernen möchten +- Klicken Sie in der Symbolleiste auf die Schaltfläche **Rahmen** und wählen Sie die Option *Rahmen löschen* + +![DHTMLX Spreadsheet Border toolbar button with the Clear borders option highlighted](/img/clear_cells_border.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/data_search.md b/i18n/de/docusaurus-plugin-content-docs/current/data_search.md new file mode 100644 index 00000000..acd44e24 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/data_search.md @@ -0,0 +1,14 @@ +--- +sidebar_label: Daten suchen +title: Daten suchen +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie alles über die Datensuche. Lesen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Daten suchen {#searching-for-data} + +Um die Suchleiste zu öffnen, haben Sie zwei Möglichkeiten: + +- Setzen Sie den Fokus auf eine beliebige Zelle und drücken Sie **Ctrl (Cmd) + F** +- Oder navigieren Sie zu: *Daten* -> *Suchen* + +![DHTMLX Spreadsheet-Suchleiste mit einem Texteingabefeld zum Suchen von Daten](/img/search_data.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/excel_import_export.md b/i18n/de/docusaurus-plugin-content-docs/current/excel_import_export.md new file mode 100644 index 00000000..6722d501 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/excel_import_export.md @@ -0,0 +1,39 @@ +--- +sidebar_label: Excel-Import/Export +title: Excel-Import und -Export +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie mehr über den Excel-Import und -Export. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Excel-Import/Export {#excel-importexport} + +## Import aus Excel {#import-from-excel} + +Sie können Daten aus einer Excel-Datei in Spreadsheet laden. Gehen Sie dazu wie folgt vor: + +1\. Klicken Sie in der Symbolleiste auf die Schaltfläche **Import** und wählen Sie *Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet toolbar with the Import button for Microsoft Excel XLSX files](/img/import_xlsx.png) + +oder: + +Gehen Sie zu: *Datei -> Importieren als... -> Microsoft Excel (.xlsx)* im Menü + +![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) + +2\. Wählen Sie eine Excel-Datei auf Ihrem Computer aus. Der Inhalt wird in das geöffnete Tabellenblatt importiert. + +## Export nach Excel {#export-to-excel} + +Sie können die in Spreadsheet eingegebenen Daten in eine Excel-Datei exportieren. Führen Sie die folgenden Schritte aus: + +1\. Klicken Sie in der Symbolleiste auf die Schaltfläche **Export**: + +![DHTMLX Spreadsheet toolbar with the Export button for saving to Microsoft Excel XLSX](/img/export_xlsx.png) + +oder: + +Gehen Sie zu: *Datei -> Herunterladen als... -> Microsoft Excel (.xlsx)* im Menü + +![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) + +2\. Überprüfen Sie Ihr Download-Verzeichnis, um die Excel-Datei mit den Daten aus Spreadsheet zu finden. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/filtering_data.md b/i18n/de/docusaurus-plugin-content-docs/current/filtering_data.md new file mode 100644 index 00000000..b297a39d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/filtering_data.md @@ -0,0 +1,62 @@ +--- +sidebar_label: Daten filtern +title: Daten filtern +description: Sie können mehr über das Filtern von Daten in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren. Lesen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Daten filtern {#filtering-data} + +Sie können Daten in der Tabelle filtern, um nur die Datensätze anzuzeigen, die den von Ihnen festgelegten Kriterien entsprechen. + +Um das Filtern zu aktivieren, verwenden Sie eine der folgenden Methoden: + +- Setzen Sie den Fokus auf eine Zelle oder wählen Sie einen Zellbereich aus und klicken Sie auf die Schaltfläche **Filter** in der Symbolleiste + +![DHTMLX Spreadsheet-Symbolleiste mit der Schaltfläche "Filter" zum Aktivieren der Datenfilterung](/img/filter_button.png) + +- Setzen Sie den Fokus auf eine Zelle oder wählen Sie einen Zellbereich aus und navigieren Sie zu: *Daten -> Filter* im Menü + +![DHTMLX Spreadsheet-Datenmenü mit der Option "Filter" zum Aktivieren von Spaltenfiltern](/img/filter_menu.png) + +Danach erscheint rechts neben jeder Spaltenüberschrift im Bereich ein **Filter**-Symbol. + +## Filtern nach Bedingung {#filtering-by-condition} + +- Klicken Sie auf das **Filter**-Symbol der gewünschten Spalte + +- Wählen Sie einen der integrierten Vergleichsoperatoren aus, zum Beispiel **Größer als** + +- Geben Sie das Filterkriterium an und klicken Sie auf **Übernehmen** + +![DHTMLX Spreadsheet-Spaltenfilter-Dropdown mit Vergleichsoperatoren wie "Größer als"](/img/filter_by_condition.png) + +### Filter löschen {#clearing-a-filter} + +Um einen Filter zu löschen, klicken Sie auf das **Filter**-Symbol in der Spaltenüberschrift, wählen Sie _Nach Bedingung: **Keine**_ aus und klicken Sie dann auf **Übernehmen**. + +![DHTMLX Spreadsheet-Filterdialog mit der Option "Nach Bedingung: Keine" zum Löschen von Filtern](/img/clear_filter_bycondition.png) + +## Filtern nach Werten {#filtering-by-values} + +- Klicken Sie auf das **Filter**-Symbol der gewünschten Spalte + +- Klicken Sie auf die Schaltfläche **Alle abwählen** + +![DHTMLX Spreadsheet-Spaltenfilter mit der Schaltfläche "Alle abwählen" und Wert-Kontrollkästchen](/img/unselect_all_button.png) + +- Aktivieren Sie die Kontrollkästchen für die Werte, die Sie anzeigen möchten, und klicken Sie auf **Übernehmen** + +### Filter löschen {#clearing-a-filter-1} + +Um einen Filter zu löschen, klicken Sie auf das **Filter**-Symbol in der Spaltenüberschrift, klicken Sie auf die Schaltfläche **Alle auswählen** und dann auf **Übernehmen**. + +![DHTMLX Spreadsheet-Spaltenfilter-Dialog mit der Schaltfläche "Alle auswählen" zum Löschen von Wertfiltern](/img/clear_filter_by_values.png) + +## Filter entfernen {#removing-filters} + +Um das Filtern zu deaktivieren, führen Sie einen der folgenden Schritte aus: + +- Klicken Sie auf die Schaltfläche **Filter** in der Symbolleiste +- oder navigieren Sie zu: *Daten -> Filter* im Menü + +Die **Filter**-Symbole verschwinden aus den Spaltenüberschriften, und alle ausgeblendeten Datensätze werden wieder angezeigt. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/formulas_locale.md b/i18n/de/docusaurus-plugin-content-docs/current/formulas_locale.md new file mode 100644 index 00000000..a9e7722f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/formulas_locale.md @@ -0,0 +1,1168 @@ +--- +sidebar_label: Standard-Locale fur Formeln +title: Standard-Locale fur Formeln +description: Die vollstandige Standard-Locale fur das DHTMLX Spreadsheet-Formel-Popup in Englisch, mit Parameternamen und Beschreibungen fur alle integrierten Formeln. +--- + +# Standard-Locale fur Formeln {#default-locale-for-formulas} + +Die i18n-Locale fur das Spreadsheet-Popup mit Beschreibungen fur Formeln finden Sie im Objekt `dhx.i18n.formulas`. Die vollstandige Standard-Locale in Englisch ist unten aufgefuhrt. + +Anweisungen zur Anwendung einer benutzerdefinierten Locale fur Formeln finden Sie in der Anleitung zur [Lokalisierung](localization.md#custom-locale-for-formulas). + +~~~jsx +const en = { + "SUM": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + "SUMIF": [ + ["Range", "Required. Range to apply criteria to."], + ["Criteria", "Required. Criteria to apply."], + ["Sum_range", "Optional. Range to sum. If omitted, cells in range are summed."] + ], + "SUMIFS": [ + ["Sum_range", "Required. The range to be summed."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "AVERAGE": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "AVERAGEA": [ + ["Value1", "Required. A value or reference to a value that can be evaluated as a number."], + ["Value2", "Optional. A value or reference to a value that can be evaluated as a number."] + ], + "AVERAGEIF": [ + ["Range", "Required. One or more cells, including numbers or names, arrays, or references."], + ["Criteria", "Required. A number, expression, cell reference, or text."], + ["Average_range", "Optional. The cells to average. When omitted, range is used."] + ], + "AVERAGEIFS": [ + ["Avg_rng", "Required. The range to average."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "COUNT": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTA": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTIF": [ + ["Range", "Required. The range of cells to count."], + ["Criteria", "Required. The criteria that controls which cells should be counted."] + ], + "COUNTIFS": [ + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MIN": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MINIFS": [ + ["Min_range", "Required. Range of values used to determine minimum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MAX": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MAXIFS": [ + ["Max_range", "Required. Range of values used to determine maximum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "SQRT": [ + ["Number", "Required. The number to get the square root of."] + ], + "POWER": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "LOG": [ + ["Number", "Required. Number for which you want the logarithm."], + ["Base", "Optional. Base of the logarithm. Defaults to 10."] + ], + "EXP": [ + ["Number", "Required. The power that e is raised to."] + ], + "PRODUCT": [ + ["Number1", "Required. The first number or range to multiply."], + ["Number2", "Optional. The second number or range to multiply."] + ], + "SUMPRODUCT": [ + ["Array1", "Required. The first array or range to multiply, then add."], + ["Array2", "Optional. The second array or range to multiply, then add."] + ], + "ABS": [ + ["Number", "Required. The number to get the absolute value of."] + ], + "RAND": [], + "RANDBETWEEN": [ + ["Bottom", "Required. An integer representing the lower value of the range."], + ["Top", "Required. An integer representing the upper value of the range."] + ], + "ROUND": [ + ["Number", "Required. The number to round."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDUP": [ + ["Number", "Required. The number to round up."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDDOWN": [ + ["Number", "Required. The number to round down."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "INT": [ + ["Number", "Required. The number from which you want an integer."] + ], + "CEILING": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "FLOOR": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "CONCATENATE": [ + ["Text1", "Required. The first text value to join together."], + ["Text2", "Required. The second text value to join together."], + ["Text3", "Optional. The third text value to join together."] + ], + "MID": [ + ["Text", "Required. The text to extract from."], + ["Start_num", "Required. The location of the first character to extract."], + ["Num_chars", "Required. The number of characters to extract."] + ], + "LEFT": [ + ["Text", "Required. The text from which to extract characters."], + ["Num_chars", "Optional. The number of characters to extract, starting on the left side of text. Default = 1."] + ], + "RIGHT": [ + ["Text", "Required. The text from which to extract characters on the right."], + ["Num_chars", "Optional. The number of characters to extract, starting on the right. Optional, default = 1."] + ], + "LOWER": [ + ["Text", "Required. The text that should be converted to lower case."] + ], + "UPPER": [ + ["Text", "Required. The text that should be converted to upper case."] + ], + "PROPER": [ + ["Text", "Required. The text that should be converted to proper case."] + ], + "TRIM": [ + ["Text", "Required. The text from which to remove extra space."] + ], + "LEN": [ + ["Text", "Required. The text for which to calculate length."] + ], + "SEARCH": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. Starting position. Optional, defaults to 1."] + ], + "FIND": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. The starting position in the text to search. Optional, defaults to 1."] + ], + "REPLACE": [ + ["Old_text", "Required. The text to replace."], + ["Start_num", "Required. The starting location in the text to search."], + ["Num_chars", "Required. The number of characters to replace."], + ["New_text", "Required. The text to replace old_text with."] + ], + "SUBSTITUTE": [ + ["Text", "Required. The text to change."], + ["Old_text", "Required. The text to replace."], + ["New_text", "Required. The text to replace with."], + ["Instance", "Optional. The instance to replace. If not supplied, all instances are replaced."] + ], + "NOW": [], + "DATE": [ + ["Year", "Required. Number for year."], + ["Month", "Required. Number for month."], + ["Day", "Required. Number for day."] + ], + "TIME": [ + ["Hour", "Required. The hour for the time you wish to create."], + ["Minute", "Required. The minute for the time you wish to create."], + ["Second", "Required. The second for the time you wish to create."] + ], + "YEAR": [ + ["Date", "Required. A valid Excel date."] + ], + "MONTH": [ + ["Serial_number", "Required. A valid Excel date."] + ], + "DAY": [ + ["Date", "Required. A valid Excel date."] + ], + "HOUR": [ + ["Serial_number", "Required. A valid Excel time."] + ], + "MINUTE": [ + ["Serial_number", "Required. A valid date or time."] + ], + "SECOND": [ + ["Serial_number", "Required. A valid time in a format Excel recognizes."] + ], + "DATEDIF": [ + ["Start_date", "Required. Start date in Excel date serial number format."], + ["End_date", "Required. End date in Excel date serial number format."], + ["Unit", "Required. The time unit to use (years, months, or days)."] + ], + "INDEX": [ + ["Array", "Required. A range of cells, or an array constant."], + ["Row_num", "Required. The row position in the reference or array."], + ["Col_num", "Optional. The column position in the reference or array."], + ["Area_num", "Optional. The range in reference that should be used."] + ], + "XMATCH": [ + ["Lookup_value", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "XLOOKUP": [ + ["Lookup", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Return_array", "Required. The array or range to return."], + ["Not_found", "Optional. Value to return if no match found."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "LOOKUP": [ + ["Lookup_value", "Required. The value to search for."], + ["Lookup_vector", "Required. The one-row, or one-column range to search."], + ["Result_vector", "Optional. The one-row, or one-column range of results."] + ], + "HLOOKUP": [ + ["Lookup_value", "Required. The value to look up."], + ["Table_array", "Required. The table from which to retrieve data."], + ["Row_index", "Required. The row number from which to retrieve data."], + ["Range_lookup", "Optional. A Boolean to indicate exact match or approximate match. Default = TRUE = approximate match."] + ], + "VLOOKUP": [ + ["Lookup_value", "Required. The value to look for in the first column of a table."], + ["Table_array", "Required. The table from which to retrieve a value."], + ["Column_index_num", "Required. The column in the table from which to retrieve a value."], + ["Range_lookup", "Optional. TRUE = approximate match (default). FALSE = exact match."] + ], + "MATCH": [ + ["Lookup_value", "Required. The value to match in lookup_array."], + ["Lookup_array", "Required. A range of cells or an array reference."], + ["Match_type", "Optional. 1 = exact or next smallest (default), 0 = exact match, -1 = exact or next largest."] + ], + "CHOOSE": [ + ["Index_num", "Required. The value to choose. A number between 1 and 254."], + ["Value1", "Required. The first value from which to choose."], + ["Value2", "Optional. The second value from which to choose."] + ], + "ISBLANK": [ + ["Value", "Required. The value to check."] + ], + "ISBINARY": [ + ["Value", "Required. The value to check."] + ], + "ISEVEN": [ + ["Value", "Required. The numeric value to check."] + ], + "ISODD": [ + ["Value", "Required. The numeric value to check."] + ], + "ISNONTEXT": [ + ["Value", "Required. The value to check."] + ], + "ISNUMBER": [ + ["Value", "Required. The value to check."] + ], + "ISTEXT": [ + ["Value", "Required. The value to check."] + ], + "N": [ + ["Value", "Required. The value to convert to a number."] + ], + "IF": [ + ["Logical_test", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."], + ["Value_if_true", "Optional. The value to return when logical_test evaluates to TRUE."], + ["Value_if_false", "Optional. The value to return when logical_test evaluates to FALSE."] + ], + "AND": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "NOT": [ + ["Logical", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."] + ], + "OR": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "FALSE": [], + "TRUE": [], + "ACOS": [ + ["Number", "Required. The value to get the inverse cosine of. The number must be between -1 and 1 inclusive."] + ], + "ACOSH": [ + ["Number", "Required. Any real number equal to or greater than 1."] + ], + "ACOT": [ + ["Number", "Required. Number is the cotangent of the angle you want. This must be a real number."] + ], + "ACOTH": [ + ["Number", "Required. The absolute value of Number must be greater than 1."] + ], + "ADD": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Required. The second value to sum."] + ], + "ARABIC": [ + ["Roman_text", "Required. The Roman numeral in text that you want to convert."] + ], + "ASIN": [ + ["Number", "Required. The value to get the inverse sine of. The number must be between -1 and 1 inclusive."] + ], + "ASINH": [ + ["Number", "Required. Any real number."] + ], + "ATAN": [ + ["Number", "Required. The value to get the inverse tangent of."] + ], + "ATAN2": [ + ["X_num", "Required. The x coordinate of the input point."], + ["Y_num", "Required. The y coordinate of the input point."] + ], + "ATANH": [ + ["Number", "Required. Any real number between 1 and -1."] + ], + "AVEDEV": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "BASE": [ + ["Number", "Required. The number to convert to a given base."], + ["Radix", "Required. The base to convert to."], + ["Min_length", "Optional. The minimum string length to return, achieved by padding with zeros."] + ], + "BINOMDIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BINOM.INV": [ + ["Trials", "Required. The number of Bernoulli trials."], + ["Probability_s", "Required. The probability of a success on each trial."], + ["Alpha", "Required. The criterion value."] + ], + "BINOM.DIST.RANGE": [ + ["Trials", "Required. The number of independent trials. Must be greater than or equal to 0."], + ["Probability_s", "Required. The probability of success in each trial. Must be greater than or equal to 0 and less than or equal to 1."], + ["Number_s", "Required. The number of successes in trials. Must be greater than or equal to 0 and less than or equal to Trials."], + ["Number_s2", "Optional. If provided, returns the probability that the number of successful trials will fall between Number_s and number_s2. Must be greater than or equal to Number_s and less than or equal to Trials."] + ], + "BINOM.DIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BITAND": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITLSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift, if negative shifts bits to the right instead."] + ], + "BITOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITRSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift to the right, if negative shifts bits to the left instead."] + ], + "BITXOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "COMBIN": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMBINA": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMPLEX": [ + ["Real_num", "Required. The real number."], + ["I_num", "Required. The imaginary number."], + ["Suffix", "Optional. The suffix, either \"i\" or \"j\"."] + ], + "CORREL": [ + ["Array1", "Required. A range of cell values."], + ["Array2", "Required. A second range of cell values."] + ], + "COS": [ + ["Number", "Required. The angle in radians for which you want the cosine."] + ], + "COSH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "COT": [ + ["Number", "Required. The angle provided in radians."] + ], + "COTH": [ + ["Number", "Required."] + ], + "COUNTBLANK": [ + ["Range", "Required. The range in which to count blank cells."] + ], + "COVAR": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.P": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.S": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "CSC": [ + ["Number", "Required. The angle provided in radians."] + ], + "CSCH": [ + ["Number", "Required."] + ], + "DEC2BIN": [ + ["Number", "Required. The decimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2HEX": [ + ["Number", "Required. The decimal number you want to convert to hexadecimal."], + ["Places", "Optional. Pads the resulting number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2OCT": [ + ["Number", "Required. The decimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting octal number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DECIMAL": [ + ["Number", "Required. A text string representing a number."], + ["Radix", "Required. The base of the number to be converted, an integer between 2-36."] + ], + "DEGREES": [ + ["Angle", "Required. Angle in radians that you want to convert to degrees."] + ], + "DELTA": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "DEVSQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "DIVIDE": [ + ["Number1", "Required. The number we are dividing."], + ["Number2", "Required. The number by which we divide."] + ], + "EQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "ERF": [ + ["Lower_limit", "Required. The lower bound for integrating ERF."], + ["Upper_limit", "Optional. The upper bound for integrating ERF. If omitted, ERF integrates between zero and lower_limit."] + ], + "ERFC": [ + ["X", "Required. The lower bound for integrating ERFC."] + ], + "EVEN": [ + ["Number", "Required. The number to round up to an even integer."] + ], + "FACT": [ + ["Number", "Required. The number to get the factorial of."] + ], + "FACTDOUBLE": [ + ["Number", "Required. A number greater than or equal to -1."] + ], + "FISHER": [ + ["X", "Required. A numeric value for which you want the transformation."] + ], + "FISHERINV": [ + ["Y", "Required. The value for which you want to perform the inverse of the transformation."] + ], + "GAMMA": [ + ["Number", "Required. Returns a number."] + ], + "GCD": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "GEOMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "GESTEP": [ + ["Number", "Required. The value to test against step."], + ["Step", "Optional. The threshold value. If you omit a value for step, GESTEP uses zero."] + ], + "GT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "GTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "HARMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "HEX2BIN": [ + ["Number", "Required. The hexadecimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "HEX2DEC": [ + ["Number", "Required. The hexadecimal number you want to convert to decimal."] + ], + "HEX2OCT": [ + ["Number", "Required. The hexadecimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "IMABS": [ + ["Inumber", "Required. A complex number."] + ], + "IMAGINARY": [ + ["Inumber", "Required. A complex number."] + ], + "IMCONJUGATE": [ + ["Inumber", "Required. A complex number for which you want the conjugate."] + ], + "IMCOS": [ + ["Inumber", "Required. A complex number for which you want the cosine."] + ], + "IMCOSH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosine."] + ], + "IMCOT": [], + "IMCSC": [ + ["Inumber", "Required. A complex number for which you want the cosecant."] + ], + "IMCSCH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosecant."] + ], + "IMDIV": [ + ["Inumber1", "Required. The complex numerator or dividend."], + ["Inumber2", "Required. The complex denominator or divisor."] + ], + "IMEXP": [ + ["Inumber", "Required. A complex number for which you want the exponential."] + ], + "IMLN": [ + ["Inumber", "Required. A complex number for which you want the natural logarithm."] + ], + "IMPOWER": [ + ["Inumber", "Required. A complex number."], + ["Number", "Required. Power to raise number."] + ], + "IMPRODUCT": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMREAL": [ + ["Inumber", "Required. A complex number."] + ], + "IMSEC": [ + ["Inumber", "Required. A complex number for which you want the secant."] + ], + "IMSECH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic secant."] + ], + "IMSIN": [ + ["Inumber", "Required. A complex number for which you want the sine."] + ], + "IMSINH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic sine."] + ], + "IMSQRT": [ + ["Inumber", "Required. A complex number for which you want the square root."] + ], + "IMSUB": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Required. Complex number 2."] + ], + "IMSUM": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMTAN": [ + ["Inumber", "Required. A complex number for which you want the tangent."] + ], + "LARGE": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the largest value."] + ], + "LN": [ + ["Number", "Required. A number to take the natural logarithm of."] + ], + "LOG10": [ + ["Number", "Required. Number for which you want the logarithm."] + ], + "LT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "LTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "MEDIAN": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "MINUS": [ + ["Number1", "Required. The number from which we subtract."], + ["Number2", "Required. The number by which we subtract."] + ], + "MOD": [ + ["Number", "Required. The number to be divided."], + ["Divisor", "Required. The number to divide with."] + ], + "MROUND": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "MULTINOMIAL": [ + ["Number1, number2, ...", "Required. Number1 is required, subsequent numbers are optional. 1 to 255 values for which you want the multinomial."] + ], + "MULTIPLY": [ + ["Number1", "Required. The number to multiply."], + ["Number2", "Required. The number to multiply by."] + ], + "NE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "OCT2BIN": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 characters. The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2BIN uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "OCT2DEC": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."] + ], + "OCT2HEX": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2HEX uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "ODD": [ + ["Number", "Required. The number to round up to an odd integer."] + ], + "PERCENTILE": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.INC": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.EXC": [ + ["Array", "Required. Data values."], + ["K", "Required. A value between 0 and 1 that represents the k:th percentile."] + ], + "PERMUT": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "PI": [], + "POW": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "QUARTILE": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.INC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.EXC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return, 1-3."] + ], + "QUOTIENT": [ + ["Numerator", "Required. The number to be divided."], + ["Denominator", "Required. The number to divide by."] + ], + "RADIANS": [ + ["Angle", "Required. Angle in degrees to convert to radians."] + ], + "ROMAN": [ + ["Number", "Required. Number (in Arabic numeral) you want to convert to Roman numeral."], + ["Form", "Optional. The type of Roman numeral you want."] + ], + "SEC": [ + ["Number", "Required. The angle in radians for which you want the secant."] + ], + "SECH": [], + "SIGN": [ + ["Number", "Required. The number to get the sign of."] + ], + "SIN": [ + ["Number", "Required. The angle in radians for which you want the sine."] + ], + "SINH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "SMALL": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the smallest value."] + ], + "SQRTPI": [ + ["Number", "Required. The number by which pi is multiplied."] + ], + "STDEV": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.S": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.P": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVP": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVPA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STEYX": [ + ["Known_y's", "Required. An array or range of dependent data points."], + ["Known_x's", "Required. An array or range of independent data points."] + ], + "SUBTOTAL": [ + ["Function_num", "Required. A number that specifies which function to use in calculating subtotals within a list. See table below for full list."], + ["Ref1", "Required. A named range or reference to subtotal."], + ["Ref2", "Optional. A named range or reference to subtotal."] + ], + "SUMSQ": [ + ["Number1", "Required. The first argument containing numeric values."], + ["Number2", "Optional. The second argument containing numeric values."] + ], + "SUMX2MY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMX2PY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMXMY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "TAN": [ + ["Number", "Required. The angle in radians for which you want the tangent."] + ], + "TANH": [ + ["Number", "Required. Any real number."] + ], + "TRUNC": [ + ["Number", "Required. The number to truncate."], + ["Num_digits", "Optional. The precision of the truncation (default is 0)."] + ], + "VAR": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.S": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.P": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARP": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARPA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "WEIBULL": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "WEIBULL.DIST": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "CHAR": [ + ["Number", "Required. A number between 1 and 255."] + ], + "CLEAN": [ + ["Text", "Required. The text to clean."] + ], + "CODE": [ + ["Text", "Required. The text for which you want a numeric code."] + ], + "EXACT": [ + ["Text1", "Required. The first text string to compare."], + ["Text2", "Required. The second text string to compare."] + ], + "FIXED": [ + ["Number", "Required. The number to round and format."], + ["Decimals", "Optional. Number of decimals to use. Default is 2."], + ["No_commas", "Optional. Suppress commas. TRUE = no commas, FALSE = commas. Default is FALSE."] + ], + "NUMBERVALUE": [ + ["Text", "Required. The text to convert to a number."], + ["Decimal_separator", "Optional. The character for decimal values."], + ["Group_separator", "Optional. The character for grouping by thousands."] + ], + "REGEXEXTRACT": [ + ["Text", "Required. The input text."], + ["Regular_expression", "Required. The first part of text that matches this expression will be returned."] + ], + "REGEXMATCH": [ + ["Text", "Required. The text to be tested against the regular expression."], + ["Regular_expression", "Required. The regular expression to test the text against."] + ], + "REGEXREPLACE": [ + ["Text", "Required. The text, a part of which will be replaced."], + ["Regular_expression", "Required. The regular expression. All matching instances in text will be replaced."], + ["Replacement", "Required. The text which will be inserted into the original text."] + ], + "REPT": [ + ["Text", "Required. The text to repeat."], + ["Number_times", "Required. The number of times to repeat text."] + ], + "T": [ + ["Value", "Required. The value to return as text."] + ], + "JOIN": [ + ["Text1, text2, ...", "Text values you want to combine."] + ], + "ARRAYTOTEXT": [ + ["Array", "Required. The array or range to convert to text."], + ["Format", "Optional. Output format. 0 = concise (default), and 1 = strict."] + ], + "DATEVALUE": [ + ["Date_text", "Required. A valid date in text format."] + ], + "DAYS": [ + ["End_date", "Required. The end date."], + ["Start_date", "Required. The start date."] + ], + "DAYS360": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Method", "Optional. Day count method. FALSE (default) = US method, TRUE = European method."] + ], + "EDATE": [ + ["Start_date", "Required. Start date as a valid Excel date."], + ["Months", "Required. Number of months before or after start_date."] + ], + "EOMONTH": [ + ["Start_date", "Required. A date that represents the start date in a valid Excel serial number format."], + ["Months", "Required. The number of months before or after start_date."] + ], + "ISOWEEKNUM": [ + ["Date", "Required. A valid Excel date in serial number format."] + ], + "NETWORKDAYS": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Holidays", "Optional. A list of non-work days as dates."] + ], + "NETWORKDAYS.INTL": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A reference to dates that should be considered non-work days."] + ], + "TIMEVALUE": [ + ["Time_text", "Required. A date and/or time in a text format recognized by Excel."] + ], + "WEEKNUM": [ + ["Serial_num", "Required. A valid Excel date in serial number format."], + ["Return_type", "Optional. The day the week begins. Default is 1."] + ], + "WEEKDAY": [ + ["Serial_number", "Required. The date for which you want to get the day of week."], + ["Return_type", "Optional. A number representing day of week mapping scheme. Default is 1."] + ], + "WORKDAY": [ + ["Start_date", "Required. The date from which to start."], + ["Days", "Required. The working days before or after start_date."], + ["Holidays", "Optional. A list dates that should be considered non-work days."] + ], + "WORKDAY.INTL": [ + ["Start_date", "Required. The start date."], + ["Days", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A list of one or more dates that should be considered non-work days."] + ], + "YEARFRAC": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Basis", "Optional. The type of day count basis to use (see below)."] + ], + "ACCRINT": [ + ["Id", "Required. Issue date of the security."], + ["Fd", "Required. First interest date of security."], + ["Sd", "Required. Settlement date of security."], + ["Rate", "Required. Interest rate of security."], + ["Par", "Required. Par value of security."], + ["Freq", "Required. Coupon payments per year (annual = 1, semiannual = 2; quarterly = 4)."], + ["Basis", "Optional. Day count basis (see below, default = 0)."], + ["Calc", "Optional. Calculation method (see below, default = TRUE)."] + ], + "PMT": [ + ["Rate", "Required. The interest rate for the loan."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all loan payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0 (zero)."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "FV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The total number of payment periods."], + ["Pmt", "Required. The payment made each period. Must be entered as a negative number."], + ["Pv", "Optional. The present value of future payments. If omitted, assumed to be zero. Must be entered as a negative number."], + ["Type", "Optional. When payments are due. 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "DB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Month", "Optional. Number of months in the first year. Defaults to 12."] + ], + "DDB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Factor", "Optional. Rate at which the balance declines. If omitted, defaults to 2."] + ], + "DOLLAR": [ + ["Number", "Required. The number to convert."], + ["Decimals", "Required. The number of digits to the right of the decimal point. Default is 2."] + ], + "DOLLARDE": [ + ["Fractional_dollar", "Required. Dollar component in special fractional notation."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "DOLLARFR": [ + ["Decimal_dollar", "Required. Pricing as a normal decimal number."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "EFFECT": [ + ["Nominal_rate", "Required. The nominal or stated interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "FVSCHEDULE": [ + ["Principal", "Required. The initial investment sum."], + ["Schedule", "Required. Schedule of interest rates, provided as range or array."] + ], + "IRR": [ + ["Values", "Required. Array or reference to cells that contain values."], + ["Guess", "Optional. An estimate for expected IRR. Default is .1 (10%)."] + ], + "IPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payment periods."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "ISPMT": [ + ["Rate", "Required. Interest rate."], + ["Per", "Required. Period (starts with zero, not 1)."], + ["Nper", "Required. Number of periods."], + ["Pv", "Required. Present value."] + ], + "NPV": [ + ["Rate", "Required. Discount rate over one period."], + ["Value1", "Required. First value(s) representing cash flows."], + ["Value2", "Optional. Second value(s) representing cash flows."] + ], + "NOMINAL": [ + ["Effect_rate", "Required. The effective annual interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "NPER": [ + ["Rate", "Required. The interest rate per period."], + ["Pmt", "Required. The payment made each period."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PDURATION": [ + ["Rate", "Required. Interest rate per period."], + ["Pv", "Required. Present value of the investment."], + ["Fv", "Required. Future value of the investment."] + ], + "PPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The number of payment periods."], + ["Pmt", "Required. The payment made each period."], + ["Fv", "Optional. Future value. If omitted, defaults to zero."], + ["Type", "Optional. Payment type, 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "SYD": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."] + ], + "TBILLPRICE": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Discount", "Required. The discount rate for the security."] + ], + "TBILLYIELD": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Price", "Required. Price per $100."] + ], + "UNIQUE": [ + ["Array", "Required. Range or array from which to extract unique values."], + ["By_col", "Optional. How to compare and extract. By row = FALSE (default); by column = TRUE."], + ["Exactly_once", "Optional. TRUE = values that occur once, FALSE = all unique values (default)."] + ], + "RANDARRAY": [ + ["Rows", "Optional. Row count. Default = 1."], + ["Columns", "Optional. Column count. Default = 1."], + ["Min", "Optional. Minimum value. Default = 0."], + ["Max", "Optional. Maximum value. Default = 1."], + ["Integer", "Optional. Whole numbers. Boolean, TRUE or FALSE. Default = FALSE."] + ], + "TOROW": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Control to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TOCOL": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Setting to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TEXTSPLIT": [ + ["Text", "Required. The text string to split."], + ["Col_delimiter", "Required. The character(s) to delimit columns."], + ["Row_delimiter", "Optional. The character(s) to delimit rows."], + ["Ignore_empty", "Optional. Ignore empty values. TRUE = ignore, FALSE = preserve. Default is FALSE."], + ["Match_mode", "Optional. Case-sensitivity. 0 = enabled, 1 = disabled. Default is 0."], + ["Pad_with", "Optional. Value to pad missing values in 2d arrays."] + ], + "WRAPROWS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each row."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "WRAPCOLS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each column."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "TAKE": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to return as an integer."], + ["Columns", "Optional. Number of columns to return as an integer."] + ], + "DROP": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to drop."], + ["Columns", "Optional. Number of columns to drop."] + ], + "SEQUENCE": [ + ["Rows", "Required. Number of rows to return."], + ["Columns", "Optional. Number of columns to return."], + ["Start", "Optional. Starting value (defaults to 1)."], + ["Step", "Optional. Increment between each value (defaults to 1)."] + ], + "CHOOSEROWS": [ + ["Array", "Required. The array to extract rows from."], + ["Row_num1", "Required. The numeric index of the first row to return."], + ["Row_num2", "Optional. The numeric index of the second row to return."] + ], + "CHOOSECOLS": [ + ["Array", "Required. The array to extract columns from."], + ["Col_num1", "Required. The numeric index of the first column to return."], + ["Col_num2", "Optional. The numeric index of the second column to return."] + ], + "EXPAND": [ + ["Array", "Required. The array to expand."], + ["Rows", "Optional. The final number of rows. Default is total rows."], + ["Columns", "Optional. The final number of columns. Default is total columns."], + ["Pad_with", "Optional. Value to use for new cells. Default is #N/A."] + ], + "SORT": [ + ["Array", "Required. Range or array to sort."], + ["Sort_index", "Optional. Column index to use for sorting. Default is 1."], + ["Sort_order", "Optional. 1 = Ascending, -1 = Descending. Default is ascending order."], + ["By_col", "Optional. TRUE = sort by column. FALSE = sort by row. Default is FALSE."] + ], + "SORTBY": [ + ["Array", "Required. Range or array to sort."], + ["By_array", "Required. Range or array to sort by."], + ["Sort_order", "Optional. Sort order. 1 = ascending (default), -1 = descending."], + ["Array/order", "Optional. Additional array and sort order pairs."] + ] +}; +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Lokalisierung](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/functions.md b/i18n/de/docusaurus-plugin-content-docs/current/functions.md new file mode 100644 index 00000000..42259011 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/functions.md @@ -0,0 +1,1475 @@ +--- +sidebar_label: Formeln und Funktionen +title: Formeln und Funktionen +description: In der Dokumentation erfahren Sie alles über die Formeln und Funktionen der DHTMLX JavaScript Spreadsheet-Bibliothek. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Spreadsheet herunter. +--- + +# Formeln und Funktionen {#formulas-and-functions} + +Ab v4.0 enthält das Paket von DHTMLX Spreadsheet eine Reihe vordefinierter Formeln für verschiedene Arten von Berechnungen mit Zeichenketten und Zahlen. Die Formeln sind kompatibel mit Excel und Google Sheets. + +:::note +Kleinbuchstaben in Formeln werden automatisch in Großbuchstaben umgewandelt. +::: + + + +## Funktionen {#functions} + +Nachfolgend finden Sie eine Liste aller verfügbaren Funktionen mit detaillierten Beschreibungen. + +### Boolesche Operatoren {#boolean-operators} + +Sie können zwei Werte mit logischen Ausdrücken vergleichen, die entweder TRUE oder FALSE zurückgeben. + +| Operator | Example | Description | +| :------- | :------------ | :------------------------------------------------------------------------------------------------------- | +| = | =A1=B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 gleich dem Wert in Zelle B1 ist; andernfalls FALSE. | +| <> | =A1<>B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 ungleich dem Wert in Zelle B1 ist; andernfalls FALSE. | +| > | =A1>B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 größer als der Wert in Zelle B1 ist; andernfalls FALSE. | +| < | =A1<B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 kleiner als der Wert in Zelle B1 ist; andernfalls FALSE. | +| >= | =A1>=B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 größer oder gleich dem Wert in Zelle B1 ist; andernfalls FALSE. | +| <= | =A1<=B1 | Gibt TRUE zurück, wenn der Wert in Zelle A1 kleiner oder gleich dem Wert in Zelle B1 ist; andernfalls FALSE. | + +Sehen Sie das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b). + +### Datumsfunktionen {#date-functions} + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionFormulaDescription
DATE=DATE(year,month,day)Kombiniert drei separate Werte (Jahr, Monat und Tag) und gibt ein Datum zurück.
DATEDIF=DATEDIF(start_date,end_date,unit)Gibt die Anzahl der Tage, Monate oder Jahre zwischen zwei Datumsangaben zurück.
Das Argument unit legt fest, welche Art von Information zurückgegeben werden soll.
DATEVALUE=DATEVALUE(date_text)Konvertiert ein als Text gespeichertes Datum in eine fortlaufende Zahl.
DAY=DAY(date)Gibt den Tag des Monats als Zahl zwischen 1 und 31 für ein angegebenes Datum zurück.
DAYS=DAYS(end_date, start_date)Gibt die Anzahl der Tage zwischen zwei Datumsangaben zurück.
DAYS360=DAYS360(start_date,end_date,[method]])Gibt die Anzahl der Tage zwischen 2 Datumsangaben zurück, basierend auf einem 360-Tage-Jahr (zwölf Monate à 30 Tage).
EDATE=EDATE(start_date, months)Gibt das Datum zurück, das n Monate in der Vergangenheit oder Zukunft liegt und dabei auf denselben Tag des Monats fällt.
EOMONTH=EOMONTH(start_date, months)Gibt das Datum des letzten Tages des Monats zurück, der n Monate vor oder nach dem angegebenen Startdatum liegt.
ISOWEEKNUM=ISOWEEKNUM(date)Gibt die ISO-Kalenderwochennummer des Jahres für das angegebene Datum zurück.
MONTH=MONTH(date)Gibt den Monat des Jahres für das angegebene Datum zurück.
NETWORKDAYS=NETWORKDAYS(start_date, end_date, [holidays])Gibt die Anzahl der vollständigen Arbeitstage zwischen zwei Datumsangaben zurück. Arbeitstage schließen Wochenenden und alle in holidays angegebenen Datumsangaben aus.
NETWORKDAYSINTL=NETWORKDAYSINTL(start_date, end_date, [weekend], [holidays])Gibt die Anzahl der vollständigen Arbeitstage zwischen zwei Datumsangaben zurück.
Der optionale Parameter weekend legt fest, welche Wochentage als Wochenende gelten.
Wochenendtage und Feiertage werden nicht als Arbeitstage gewertet.
NOW=NOW()Gibt das aktuelle Datum zurück.
TIMEVALUE
added in v4.3		=TIMEVALUE(time_text)Gibt die Dezimalzahl der durch eine Textzeichenkette dargestellten Uhrzeit zurück.
WEEKDAY=WEEKDAY(date,[return_type])Gibt den Wochentag für das angegebene Datum zurück.
Das Argument return_type legt fest, welcher Wochentag als erster Tag gilt.
WEEKNUM=WEEKNUM(date,[return_type])Gibt die Kalenderwochennummer für das angegebene Datum zurück.
Das Argument return_type legt fest, welcher Wochentag als erster Tag gilt.
WORKDAY=WORKDAY(start_date, days, [holidays])Gibt das Datum des nächstgelegenen Arbeitstags zurück, der n Tage in der Zukunft oder Vergangenheit liegt.
Arbeitstage schließen Wochenenden und alle in holidays angegebenen Datumsangaben aus.
WORKDAYINTL=WORKDAYINTL(start_date, days, [weekend], [holidays])Gibt das Datum des nächstgelegenen Arbeitstags zurück, der n Tage in der Zukunft oder Vergangenheit liegt.
Der optionale Parameter weekend legt fest, welche Wochentage als Wochenende gelten.
Wochenendtage und Feiertage werden nicht als Arbeitstage gewertet.
YEAR=YEAR(date)Gibt das Jahr des angegebenen Datums zurück.
YEARFRAC=YEARFRAC(start_date, end_date, [basis])Gibt den Jahresbruchteil zurück, der die Anzahl der ganzen Tage zwischen Startdatum und Enddatum darstellt.
Das optionale Argument basis legt den Typ der zu verwendenden Tageszählbasis fest.
+
+ +Sehen Sie das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b). +### Finanzfunktionen {#financial-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
ACCRINT =ACCRINT(issue, id, sd, rate, par, frequency, [basis], [calc_method]),

where:
  • issue - the issue date of the security;
  • id - the security's first interest date;
  • sd - the security's settlement date;
  • rate - the security's annual coupon rate;
  • par - the security's par value, $1,000 by default;
  • frequency - the number of coupon payments per year (1 for annual payments);
  • basis - optional, the type of day count basis to use;
  • calc_method - optional, the way to calculate the total accrued interest when the date of settlement is later than the date of first interest (0 or 1(default)).
Gibt die aufgelaufenen Zinsen fur ein Wertpapier zuruck, das periodische Zinsen zahlt.
BINOM.DIST
added in v4.3		=BINOM.DIST(number_s, trials, probability_s, cumulative),

where:
  • number_s - the number of successes in trials;
  • trials - the number of independent trials;
  • probability_s - the probability of success on each trial;
  • cumulative - if TRUE, then BINOM.DIST returns the cumulative distribution function; if FALSE (use 0), it returns the probability mass function.
Gibt die Wahrscheinlichkeit einer einzelnen Binomialverteilung zuruck.
BINOM.DIST.RANGE
added in v4.3		=BINOM.DIST.RANGE(trials, probability_s, number_s, [number_s2]),

where:
  • trials - the number of independent trials (must be ≥ 0);
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • number_s - the number of successes in trials (must be ≥ 0 and ≤ trials);
  • number_s2 - optional. If provided, returns the probability that the number of successful trials will fall between number_s and number_s2
    ([number_s2] must be ≥ number_s and ≤ trials).
Gibt die Wahrscheinlichkeit eines Versuchsergebnisses anhand einer Binomialverteilung zuruck.
BINOM.INV
added in v4.3		=BINOM.INV(trials, probability_s, alpha),

where:
  • trials - the number of Bernoulli trials;
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • alpha - the criterion value (must be ≥ 0 and ≤ 1);
Gibt den kleinsten Wert zuruck, fur den die kumulierte Binomialverteilung grosser oder gleich einem Kriteriumswert ist.
BITLSHIFT
added in v4.3		=BITLSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0
  • shift_amount - the amount of bits to shift, if negative, shifts bits to the right instead
Gibt eine Zahl zuruck, die um die angegebene Anzahl von Bits nach links verschoben wurde.
BITOR
added in v4.3		=BITOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
Gibt eine Dezimalzahl zuruck, die das bitweise ODER zweier Zahlen darstellt.
BITRSHIFT
added in v4.3		=BITRSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0);
  • shift_amount - the amount of bits to shift, if negative shifts bits to the left instead;
Gibt eine Zahl zuruck, die um die angegebene Anzahl von Bits nach rechts verschoben wurde.
BITXOR
added in v4.3		=BITXOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
Gibt eine Dezimalzahl zuruck, die das bitweise XOR zweier Zahlen darstellt.
COMPLEX
added in v4.3		=COMPLEX(real_num, i_num, [suffix]),

where:
  • real_num - the real coefficient of the complex number;
  • i_num - the imaginary coefficient of the complex number;
  • suffix - optional ("i" by default) - the suffix for the imaginary component of the complex number;
    (must be lowercase "i" or "j") .
Konvertiert Real- und Imaginärkoeffizienten in eine komplexe Zahl der Form x + yi oder x + yj.
CORREL
added in v4.3		=CORREL(array1, array2),

where:
  • array1 - a range of cell values;
  • array2 - a second range of cell values;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Gibt den Korrelationskoeffizienten zweier Zellbereiche zuruck.
COVAR
added in v4.3		=COVAR(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Gibt die Kovarianz zuruck, also den Durchschnitt der Produkte der Abweichungen fur jedes Datenpunktpaar in zwei Datensatzen.
COVARIANCE.P
added in v4.3		=COVARIANCE.P(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Gibt die Populationkovarianz zuruck, also den Durchschnitt der Produkte der Abweichungen fur jedes Datenpunktpaar in zwei Datensatzen.
COVARIANCE.S
added in v4.3		=COVARIANCE.S(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Gibt die Stichprobenkovarianz zuruck, also den Durchschnitt der Produkte der Abweichungen fur jedes Datenpunktpaar in zwei Datensatzen.
DB=DB(cost, salvage, life, period, [month]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • month - optional, the number of months in the first year, 12 by default.
Berechnet die Abschreibung eines Anlageguts fur einen bestimmten Zeitraum nach der geometrisch-degressiven Methode.
DDB=DDB(cost, salvage, life, period, [factor]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • factor - optional, the rate at which the balance declines, 2 (the double-declining balance method) by default
Berechnet die Abschreibung eines Anlageguts fur einen bestimmten Zeitraum nach der doppelt-degressiven Methode oder einer anderen von Ihnen angegebenen Methode.
DEC2BIN
added in v4.3		=DEC2BIN(number),

where:
  • number - the decimal integer you want to convert (must be greater than -512 but less than 511);
Konvertiert eine Dezimalzahl in eine Binardarstellung.
DEC2HEX
added in v4.3		=DEC2HEX(number),

where:
  • number - the decimal integer you want to convert (must be greater than -549755813888 but less than 549755813887);
Konvertiert eine Dezimalzahl in eine Hexadezimaldarstellung.
DEC2OCT
added in v4.3		=DEC2OCT(number),

where:
  • number - the decimal integer you want to convert (must be greater than -536870912 but less than 536870911);
Konvertiert eine Dezimalzahl in eine Oktaldarstellung.
DELTA
added in v4.3		=DELTA(number1, [number2]),

where:
  • number1 - the first number;
  • number2 - optional, the second number. If omitted, number2 is assumed to be zero.
Pruft zwei Zahlen auf Gleichheit. Gibt 1 zuruck, wenn number1 = number2; andernfalls 0.
DEVSQ
added in v4.3		=DEVSQ(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the sum of squared deviations;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Gibt die Summe der quadrierten Abweichungen der Datenpunkte von ihrem Stichprobenmittelwert zuruck.
DOLLARDE=DOLLARDE(fractional_dollar, fraction)Konvertiert einen Dollarpreis, der als Ganzzahlteil und Bruchanteil angegeben ist, in einen als Dezimalzahl dargestellten Dollarpreis.
DOLLARFR=DOLLARFR(decimal_dollar, fraction)Konvertiert eine Dezimalzahl in einen Dollarpreis als Bruch.
EFFECT=EFFECT(nominal_rate, npery)

nominal_rate must be >= 0, npery must be > 1.		Gibt den effektiven jahrlichen Zinssatz auf Basis des nominalen jahrlichen Zinssatzes und der Anzahl der Verzinsungsperioden pro Jahr zuruck.
Funktioniert mit numerischen Werten.
ERF
added in v4.3		=ERF(lower_limit, [upper_limit]),

where:
  • lower_limit - the lower bound for integrating ERF;
  • upper_limit - the upper bound for integrating ERF. If omitted, ERF integrates between 0 and lower_limit.
Gibt die Fehlerfunktion integriert zwischen lower_limit und upper_limit zuruck.
ERFC
added in v4.3		=ERFC(x),

where:
  • x - the lower bound for integrating ERFC
Gibt die komplementare ERF-Funktion integriert zwischen x und Unendlich zuruck.
EXP
added in v4.3		=EXP(number),

where:
  • number - the power that e is raised to
Gibt das Ergebnis der Konstanten e (gleich 2,71828182845904) potenziert mit einer Zahl zuruck.
FISHER
added in v4.3		=FISHER(x),

where:
  • x - the value for which you want to calculate the transformation
Berechnet die Fisher-Transformation fur einen angegebenen Wert.
FISHERINV
added in v4.3		=FISHERINV(y),

where:
  • y - the value for which you want to perform the inverse of the transformation
Berechnet die Umkehrung der Fisher-Transformation und gibt einen Wert zwischen -1 und +1 zuruck.
FV=FV(rate, nper, pmt, [pv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period;
  • pv - optional, the present value, or the lump-sum amount that a series of future payments is worth right now, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Berechnet den zukuftigen Wert einer Investition.
FVSCHEDULE=FVSCHEDULE(principal, schedule),

where:
  • principal - the present value;
  • schedule - an array of interest rates to apply. The values in the array can be numbers or blank cells; any other value produces the error value. Blank cells are taken as zeros.
Gibt den zukuftigen Wert eines anfanglichen Kapitals (= Barwert) nach Anwendung einer Reihe von Zinseszinssatzen zuruck.
GAMMA
added in v4.3		=GAMMA(number)

+ If Number is a negative integer or 0, GAMMA returns the #Error value.		Gibt den Wert der Gammafunktion zuruck.
GEOMEAN
added in v4.3		=GEOMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Gibt das geometrische Mittel eines Arrays oder Bereichs positiver Daten zuruck.
GESTEP
added in v4.3		=GESTEP(number, [step])

where:
  • number - the value to test against step;
  • step - optional, the threshold value. If you omit a value for step, GESTEP uses zero;
Gibt 1 zuruck, wenn number ≥ step; andernfalls 0 (null).
HARMEAN
added in v4.3		=HARMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Gibt das harmonische Mittel eines Datensatzes zuruck.
HEX2BIN
added in v4.3		=HEX2BIN(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Konvertiert eine Hexadezimalzahl in eine Binardarstellung.
HEX2DEC
added in v4.3		=HEX2DEC(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Konvertiert eine Hexadezimalzahl in eine Dezimaldarstellung.
HEX2OCT
added in v4.3		=HEX2OCT(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Konvertiert eine Hexadezimalzahl in eine Oktaldarstellung.
IMABS
added in v4.3		=IMABS(inumber)

where:
  • inumber - a complex number
Gibt den Absolutwert einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMAGINARY
added in v4.3		=IMAGINARY(inumber)

where:
  • inumber - a complex number
Gibt den Imaginärkoeffizienten einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCONJUGATE
added in v4.3		=IMCONJUGATE(inumber)

where:
  • inumber - a complex number
Gibt die konjugiert komplexe Zahl einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCOS
added in v4.3		=IMCOS(inumber)

where:
  • inumber - a complex number
Gibt den Kosinus einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCOSH
added in v4.3		=IMCOSH(inumber)

where:
  • inumber - a complex number
Gibt den hyperbolischen Kosinus einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCOT
added in v4.3		=IMCOT(inumber)

where:
  • inumber - a complex number
Gibt den Kotangens einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCSC
added in v4.3		=IMCSC(inumber)

where:
  • inumber - a complex number
Gibt den Kosekans einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMCSCH
added in v4.3		=IMCSCH(inumber)

where:
  • inumber - a complex number
Gibt den hyperbolischen Kosekans einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMDIV
added in v4.3		=IMDIV(inumber1, inumber2)

where:
  • inumber1 - the complex numerator or dividend
  • inumber2 - the complex denominator or divisor
Gibt den Quotienten zweier komplexer Zahlen im Format x + yi oder x + yj zuruck.
IMEXP
added in v4.3		=IMEXP(inumber)

where:
  • inumber - a complex number
Gibt den Exponentialwert einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMLN
added in v4.3		=IMLN(inumber)

where:
  • inumber - a complex number
Gibt den naturlichen Logarithmus einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMPOWER
added in v4.3		=IMPOWER(inumber, number)

where:
  • inumber - a complex number
  • number - the power to which you want to raise the complex number
Gibt eine komplexe Zahl im Textformat x + yi oder x + yj potenziert mit einer Zahl zuruck.
IMPRODUCT
added in v4.3		=IMPRODUCT(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to multiply
Gibt das Produkt von 1 bis 255 komplexen Zahlen im Format x + yi oder x + yj zuruck.
IMREAL
added in v4.3		=IMREAL(inumber)

where:
  • inumber - a complex number
Gibt den Realkoeffizienten einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSEC
added in v4.3		=IMSEC(inumber)

where:
  • inumber - a complex number
Gibt den Sekans einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSECH
added in v4.3		=IMSECH(inumber)

where:
  • inumber - a complex number
Gibt den hyperbolischen Sekans einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSIN
added in v4.3		=IMSIN(inumber)

where:
  • inumber - a complex number
Gibt den Sinus einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSINH
added in v4.3		=IMSINH(inumber)

where:
  • inumber - a complex number
Gibt den hyperbolischen Sinus einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSQRT
added in v4.3		=IMSQRT(inumber)

where:
  • inumber - a complex number
Gibt die Quadratwurzel einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IMSUB
added in v4.3		=IMSUB(inumber1, inumber2)

where:
  • inumber1 - a complex number from which to subtract inumber2;
  • inumber2 - the complex number to subtract from inumber1
Gibt die Differenz zweier komplexer Zahlen im Format x + yi oder x + yj zuruck.
IMSUM
added in v4.3		=IMSUB(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to add
Gibt die Summe von zwei oder mehr komplexen Zahlen im Format x + yi oder x + yj zuruck.
IMTAN
added in v4.3		=IMTAN(inumber)

where:
  • inumber - a complex number
Gibt den Tangens einer komplexen Zahl im Format x + yi oder x + yj zuruck.
IPMT=IPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Gibt die Zinszahlung fur einen bestimmten Zeitraum einer Investition auf Basis periodischer, gleichbleibender Zahlungen und eines konstanten Zinssatzes zuruck.
IRR=IRR(values, [guess]),

where:
  • values - an array or reference to cells that contain values. The array must contain at least one positive value and one negative value;
  • guess - optional, an estimate for expected IRR, .1 (=10%) by default.
Gibt den internen Zinsfuss (IRR) fur eine Reihe von Cashflows zuruck, die in regelmasigen Abstanden anfallen.
ISPMT=ISPMT(rate, per, nper, pv),

where:
  • rate - the interest rate for the investment. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods for the investment. For monthly payments, nper=nper*12;
  • pv - the present value of the investment. For a loan, pv is the loan amount.
Berechnet die gezahlten (oder erhaltenen) Zinsen fur den angegebenen Zeitraum eines Darlehens (oder einer Investition) mit gleichmasigen Tilgungszahlungen.
LARGE
added in v4.3		=LARGE(array, k),

where:
  • array - the array or range of data for which you want to determine the k-th largest value;
  • k - the position (from the largest) in the array or cell range of data to return.
Gibt den k-grossten Wert in einem Array zuruck.
MEDIAN
added in v4.3		=MEDIAN(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 numbers for which you want to calculate the median;
Gibt den Median der angegebenen Zahlen zuruck.
NOMINAL=NOMINAL(effect_rate, npery),

effect_rate must be >= 0, npery must be > 1. 		Gibt den nominalen jahrlichen Zinssatz auf Basis des effektiven Zinssatzes und der Anzahl der Verzinsungsperioden pro Jahr zuruck.
NPER=NPER(rate,pmt,pv,[fv],[type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pmt - the payment made each period;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Gibt die Anzahl der Perioden einer Investition auf Basis periodischer, gleichbleibender Zahlungen und eines konstanten Zinssatzes zuruck.
NPV=NPV(rate,value1,[value2],...),

where:
  • rate - the rate of discount over one year;
  • value1, value2,... - from 1 to 254 values representing cash flows (future payments and income).
    Empty cells, logical values, text, or error values are ignored.
Berechnet den Nettogegenwartswert einer Investition anhand eines Abzinsungssatzes sowie einer Reihe kunftiger Zahlungen (negative Werte) und Einnahmen (positive Werte).
OCT2BIN
added in v4.3		=OCT2BIN(number),

where:
  • number - the octal number you want to convert. It can't contain more than 10 characters;
Konvertiert eine Oktalzahl in eine Binardarstellung.
OCT2DEC
added in v4.3		=OCT2DEC(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
Konvertiert eine Oktalzahl in eine Dezimaldarstellung.
OCT2HEX
added in v4.3		=OCT2HEX(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
Konvertiert eine Oktalzahl in eine Hexadezimaldarstellung.
PDURATION=PDURATION(rate, pv, fv),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pv - the present value of the investment;
  • fv - the desired future value of the investment.

All arguments must be positive values.		Gibt die Anzahl der Perioden zuruck, die eine Investition benotigt, um einen bestimmten Wert zu erreichen.
PERCENTILE
added in v4.3		=PERCENTILE(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
Gibt das k-te Perzentil der Werte in einem Bereich zuruck.
PERCENTILE.EXC
added in v4.3		=PERCENTILE.EXC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, exclusive.
Gibt das k-te Perzentil der Werte in einem Bereich zuruck.
PERCENTILE.INC
added in v4.3		=PERCENTILE.INC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
Gibt das k-te Perzentil der Werte in einem Bereich zuruck.
PERMUT
added in v4.3		=PERMUT(number, number_chosen),

where:
  • number - the total number of items;
  • number_chosen - the number of items in each combination.
Gibt die Anzahl der Permutationen fur eine bestimmte Anzahl von Elementen zuruck.
PMT=PMT(rate, nper, pv, [fv], [type]),

where:
  • rate - the interest rate for the loan. For monthly payments, rate = rate/12;
  • nper - the total number of months of payments for the loan. For monthly payments, nper=nper*12;
  • pv - the present value (or the current total amount of loan);
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Berechnet die monatliche Zahlung fur ein Darlehen auf Basis gleichbleibender Zahlungen und eines konstanten Zinssatzes.
PPMT=PPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value - the total amount that a series of future payments is worth now;
  • fv - the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Gibt die Tilgungszahlung fur einen bestimmten Zeitraum einer Investition auf Basis periodischer, gleichbleibender Zahlungen und eines konstanten Zinssatzes zuruck.
PV=PV(rate, nper, pmt, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period. If pmt is omitted, you must include the fv argument;
  • fv - optional, the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Gibt den Barwert eines Darlehens oder einer Investition auf Basis eines konstanten Zinssatzes zuruck.
QUARTILE
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
Gibt das Quartil eines Datensatzes zuruck.
QUARTILE.EXC
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (1-3).
Gibt das Quartil des Datensatzes zuruck, basierend auf Perzentilwerten von 0..1 (exklusiv).
QUARTILE.INC
added in v4.3		=QUARTILE.INC(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
Gibt das Quartil eines Datensatzes zuruck, basierend auf Perzentilwerten von 0..1 (inklusiv).
SIGN
added in v4.3		=SIGN(number),

where:
  • number - any real number
Bestimmt das Vorzeichen einer Zahl. Gibt 1 zuruck, wenn die Zahl positiv ist, 0, wenn die Zahl 0 ist, und -1, wenn die Zahl negativ ist.
SMALL
added in v4.3		=SMALL(array, k),

where:
  • array - an array or range of numeric values;
  • k - the position (from 1 - the smallest value) in the data set.
Gibt den k-kleinsten Wert anhand seiner Position im Datensatz zuruck.
STEYX
added in v4.3		=STEYX(known_y's, known_x's),

where:
  • known_y's - an array or range of dependent data points;
  • known_x's - an array or range of independent data points.

Text, logical values, or empty cells are ignored. Zero values are included.		Gibt den Standardfehler des vorhergesagten y-Werts fur jeden x-Wert in der Regression zuruck.
SYD
added in v4.3		=SYD(cost, salvage, life, per),

where:
  • cost - the initial cost of the asset;
  • salvage - the asset value at the end of the depreciation;
  • life - the number of periods over which the asset is depreciated;
  • per - the period and must use the same units as life.
Gibt die Abschreibung eines Anlageguts fur einen bestimmten Zeitraum nach der Jahressummen-Methode zuruck.
TBILLPRICE
added in v4.3		=TBILLPRICE(settlement, maturity, discount),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • discount - the Treasury bill's percentage discount rate.
Gibt den Preis je $100 Nennwert fur einen Schatzwechsel zuruck.
TBILLYIELD
added in v4.3		=TBILLYIELD(settlement, maturity, pr),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • pr - the Treasury bill's price per $100 face value.
Gibt die Rendite eines Schatzwechsels zuruck.
WEIBULL
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
Gibt die Weibull-Verteilung zuruck.
WEIBULL.DIST
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
Gibt die Weibull-Verteilung zuruck.
+ +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. +### Informationsfunktionen {#information-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
ISBINARY=ISBINARY(value)Gibt TRUE zurück, wenn der Wert binär ist; andernfalls wird FALSE zurückgegeben.
ISBLANK=ISBLANK(A1)Gibt TRUE zurück, wenn eine Zelle leer ist; andernfalls wird FALSE zurückgegeben.
ISEVEN=ISEVEN(number)Gibt TRUE zurück, wenn eine Zahl gerade ist, oder FALSE, wenn die Zahl ungerade ist.
Funktioniert mit ganzen Zahlen.
ISNONTEXT=ISNONTEXT(value)Gibt TRUE zurück, wenn eine Zelle einen beliebigen Wert außer Text enthält; andernfalls wird FALSE zurückgegeben.
ISNUMBER=ISNUMBER(value)Gibt TRUE zurück, wenn eine Zelle eine Zahl enthält; andernfalls wird FALSE zurückgegeben.
ISODD=ISODD(number)Gibt TRUE zurück, wenn eine Zahl ungerade ist, oder FALSE, wenn die Zahl gerade ist.
Funktioniert mit ganzen Zahlen.
ISTEXT=ISTEXT(value)Gibt TRUE zurück, wenn ein Wert Text ist; andernfalls wird FALSE zurückgegeben.
N=N(value)Gibt einen in eine Zahl konvertierten Wert zurück.
+
+ +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. + +### Nachschlagefunktionen {#lookup-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
HLOOKUP
added in v4.3		=HLOOKUP(lookup_value, table_array, row_index, [range_lookup]),

where:
  • lookup_value - the value to search for;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the row number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
Sucht einen Wert in einer horizontalen Tabelle.
INDEX
added in v4.3		=INDEX(array, row_num, [column_num]),

where:
  • array - a range of cells or an array constant;
  • row_num - the row position in the reference or array;
  • column_num - optional, the column position in the reference or array.
Gibt den Wert an einer bestimmten Position in einem Bereich oder Array zurück.
LOOKUP
added in v4.3		=LOOKUP(lookup_value, lookup_vector, [result_vector]),

where:
  • lookup_value - the value to search for;
  • lookup_vector - the one-row, or one-column range to search;
  • result_vector - optional, the one-row, or one-column range of results.
Sucht einen Wert in einem einzeiligen oder einspaltigen Bereich und gibt einen Wert aus der gleichen Position in einem anderen einzeiligen oder einspaltigen Bereich zurück.
MATCH
added in v4.3		=MATCH(lookup_value, lookup_array, [match_type]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_type - optional (1 by default):
    1- finds the largest value that is less than or equal to lookup_value
    0 - finds the value that is exactly equal to lookup_value
    -1 - finds the smallest value that is greater than or equal to lookup_value
Sucht ein bestimmtes Element in einem Zellbereich und gibt die relative Position dieses Elements im Bereich zurück.
VLOOKUP
added in v4.3		=VLOOKUP(lookup_value, table_array, column_index_num, [range_lookup]),

where:
  • lookup_value - the value to search for in the first column of a table;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the column number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
Sucht einen Wert in einer vertikalen Tabelle anhand der ersten Spalte.
XLOOKUP
added in v4.3		=XLOOKUP(lookup_value, lookup_array, return_array, [if_not_found], [match_mode]),

where:
  • lookup_value - the value to search for;
  • lookup_array - the array or range to search;
  • return_array - the array or range to return;
  • if_not_found - optional, if a valid match is not found, returns the [if_not_found] text you supply;
  • match_mode - optional (0 by default):
    0 - Exact match
    -1 - Exact match. If not found, returns the next smaller item
    1 - Exact match. If not found, returns the next larger item
Durchsucht einen Bereich oder ein Array und gibt das Element zurück, das der ersten gefundenen Übereinstimmung entspricht. Wenn keine Übereinstimmung gefunden wird, kann XLOOKUP den nächstliegenden (ungefähren) Treffer zurückgeben.
XMATCH
added in v4.3		=XMATCH(lookup_value, lookup_array, [match_mode]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_mode - optional, 0 - exact match (default), -1 - exact match or next smallest, 1 - exact match or next larger
Führt eine Suche durch und gibt eine Position in vertikalen oder horizontalen Bereichen zurück.
+
+### Mathematische Funktionen {#math-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABSGibt den absoluten Wert einer Zahl zurück. Der absolute Wert einer Zahl ist immer positiv.
ACOSGibt den Arkuskosinus (inversen Kosinus) einer Zahl zurück. Der Arkuskosinus ist der Winkel, dessen Kosinus number ist. Die Zahl muss zwischen -1 und 1 (einschließlich) liegen. Der zurückgegebene Winkel wird in Radiant im Bereich von 0 (null) bis pi angegeben.
ACOSHGibt den inversen hyperbolischen Kosinus einer Zahl zurück. Die Zahl muss größer oder gleich 1 sein.
ACOTGibt den Hauptwert des Arkuskotangens (inversen Kotangens) einer Zahl zurück. Der zurückgegebene Winkel wird in Radiant im Bereich von 0 (null) bis pi angegeben.
ACOTHGibt den inversen hyperbolischen Kotangens einer Zahl zurück. Der absolute Wert der Zahl muss größer als 1 sein.
ADDGibt die Summe zweier Werte zurück.
Leere Zellen, logische Werte wie TRUE oder Text werden ignoriert.
ARABICKonvertiert eine römische Zahl in eine arabische Zahl.
ASINGibt den Arkussinus (inversen Sinus) einer Zahl zurück. Der Arkussinus ist der Winkel, dessen Sinus number ist. Die Zahl muss zwischen -1 und 1 (einschließlich) liegen. Der zurückgegebene Winkel wird in Radiant im Bereich von -pi/2 bis pi/2 angegeben.
ASINHGibt den inversen hyperbolischen Sinus einer Zahl zurück. Der inverse hyperbolische Sinus ist der Wert, dessen hyperbolischer Sinus number ist. Arbeitet mit reellen Zahlen.
ATANGibt den Arkustangens (inversen Tangens) einer Zahl zurück. Der Arkustangens ist der Winkel, dessen Tangens number ist. Der zurückgegebene Winkel wird in Radiant im Bereich von -pi/2 bis pi/2 angegeben. Arbeitet mit dem Tangens des gewünschten Winkels.
ATAN2Gibt den Arkustangens der (x,y)-Koordinaten zurück. Der Arkustangens wird in Radiant zwischen -pi und pi (ausschließlich -pi) zurückgegeben.
ATANHGibt den inversen hyperbolischen Tangens einer Zahl zurück. Die Zahl muss zwischen -1 und 1 liegen (ausschließlich -1 und 1). Arbeitet mit reellen Zahlen.
AVEDEV
added in v4.3		Gibt den Durchschnitt der absoluten Abweichungen der Datenpunkte von ihrem Mittelwert zurück.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert. Zellen mit dem Wert 0 werden einbezogen.
AVERAGEBerechnet den Durchschnitt (arithmetisches Mittel) einer Gruppe von Zahlen.
Logische Werte, leere Zellen und Zellen mit Text im Array oder Bezug werden ignoriert.
Zellen mit dem Wert null werden jedoch einbezogen.
AVERAGEA
added in v4.3		Berechnet den Durchschnitt (arithmetisches Mittel) der Werte in der Argumentliste.
Argumente können Folgendes sein: Zahlen; Namen, Arrays oder Bezüge, die Zahlen enthalten; Textdarstellungen von Zahlen oder logische Werte wie TRUE und FALSE in einem Bezug.
Leere Zellen und Textwerte im Array oder Bezug werden ignoriert.
AVERAGEIF
added in v6.0		Gibt den Durchschnitt (arithmetisches Mittel) aller Zellen in einem Bereich zurück, die eine bestimmte Bedingung erfüllen.
Erwartet zwei erforderliche Argumente (den auszuwertenden Bereich und das Kriterium) sowie ein optionales Argument (den zu mittelnden Zellbereich, sofern er vom ausgewerteten Bereich abweicht).
AVERAGEIFS
added in v6.0		Gibt den Durchschnitt (arithmetisches Mittel) aller Zellen zurück, die mehrere Bedingungen erfüllen.
Erwartet einen erforderlichen Mittelwertbereich, gefolgt von einem oder mehreren Paaren aus Bedingungsbereich und Kriteriumsargument.
BASEKonvertiert eine Zahl in die angegebene Basis (Radix).
Die Zahl muss eine ganze Zahl sein, die größer oder gleich 0 und kleiner als 2^53 ist.
Die Basisradix gibt an, in welche Basis die Zahl konvertiert werden soll. Sie muss eine ganze Zahl von 2 bis 36 (einschließlich) sein.
BITAND
added in v4.3		Gibt ein bitweises "AND" zweier Zahlen zurück.
Die Zahl muss eine ganze Zahl sein, die größer oder gleich 0 und kleiner als (2^48)-1 ist.
CEILINGGibt eine Zahl zurück, die auf die nächste ganze Zahl oder das nächste Vielfache der angegebenen Signifikanz aufgerundet wurde.
COMBINGibt die Anzahl der Kombinationen für zwei gegebene ganzzahlige Zahlen zurück: die Anzahl der Elemente (number) und die Anzahl der Elemente in jeder Kombination (number_chosen):
  • number muss größer oder gleich null sein; außerdem muss sie größer oder gleich number_chosen sein;
  • number_chosen muss größer oder gleich null sein.
COMBINAGibt die Anzahl der Kombinationen für zwei gegebene ganzzahlige Zahlen zurück und berücksichtigt dabei Wiederholungen. Die Zahlen sind: die Anzahl der Elemente (number) und die Anzahl der Elemente in jeder Kombination (number_chosen):
  • number muss größer oder gleich null sein; außerdem muss sie größer oder gleich number_chosen sein;
  • number_chosen muss größer oder gleich null sein.
COSGibt den Kosinus eines in Radiant angegebenen Winkels zurück.
COSHGibt den hyperbolischen Kosinus einer reellen Zahl zurück.
CSCGibt den Kosekans eines in Radiant angegebenen Winkels zurück.
CSCHGibt den hyperbolischen Kosekans eines in Radiant angegebenen Winkels zurück.
COTGibt den Kotangens eines in Radiant angegebenen Winkels zurück.
COTHGibt den hyperbolischen Kotangens eines hyperbolischen Winkels zurück.
COUNTZählt die Anzahl der Zellen, die Zahlen enthalten, sowie Zahlen in der Argumentliste.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden nicht gezählt.
COUNTAZählt die Anzahl der Zellen, die Zahlen, Text, logische Werte, Fehlerwerte und leeren Text ("") enthalten; Zellen mit dem Wert null werden ausgeschlossen.
Die Funktion zählt keine leeren Zellen.
COUNTBLANKGibt die Anzahl der leeren Zellen in einem angegebenen Bereich zurück.
Zellen mit dem Wert null werden nicht gezählt.
COUNTIF
added in v6.0		Zählt die Anzahl der Zellen in einem Bereich, die die angegebene Bedingung erfüllen.
Erwartet zwei Argumente: den auszuwertenden Zellbereich und das Kriterium, das festlegt, welche Zellen gezählt werden.
COUNTIFS
added in v6.0		Zählt die Anzahl der Zellen, die mehrere Bedingungen erfüllen.
Erwartet ein oder mehrere Paare aus Bereich und Kriteriumsargument; es werden nur Zellen gezählt, die alle Bedingungen erfüllen.
DECIMALKonvertiert eine Textdarstellung einer Zahl in einer gegebenen Basis (Radix) in eine Dezimalzahl.
Die Basisradix muss eine ganze Zahl von 2 bis 36 (einschließlich) sein.
DEGREESKonvertiert Radiant in Grad.
DIVIDEGibt das Ergebnis der Division einer Zahl durch eine andere zurück.
EQGibt TRUE zurück, wenn das erste Argument gleich dem zweiten ist; andernfalls FALSE.
EVENGibt eine Zahl zurück, die auf die nächste gerade ganze Zahl aufgerundet wurde.
FACTGibt die Fakultät einer Zahl zurück. Die Zahl muss von 1 bis n reichen. Ist die Zahl keine ganze Zahl, wird sie abgeschnitten.
FACTDOUBLEGibt die Doppelfakultät einer Zahl zurück. Die Zahl muss von 1 bis n reichen. Ist die Zahl keine ganze Zahl, wird sie abgeschnitten.
FLOORRundet eine Zahl auf das nächste Vielfache der angegebenen Signifikanz in Richtung null ab. Die Signifikanz muss von 1 bis n reichen.
Ist das Vorzeichen der Zahl positiv, wird der Wert in Richtung null abgerundet. Ist das Vorzeichen der Zahl negativ, wird der Wert von null weg abgerundet.
GCDGibt den größten gemeinsamen Teiler von zwei oder mehr ganzen Zahlen zurück. Die Funktion akzeptiert 1 bis 255 numerische Werte, bei denen es sich um ganze Zahlen handeln sollte. Ist ein Wert keine ganze Zahl, wird er abgeschnitten.
GTGibt TRUE zurück, wenn das erste Argument größer als das zweite ist; andernfalls FALSE.
GTEGibt TRUE zurück, wenn das erste Argument größer oder gleich dem zweiten ist; andernfalls FALSE.
INTGibt eine Zahl zurück, die auf die nächste ganze Zahl abgerundet wurde.
LNGibt den natürlichen Logarithmus einer positiven reellen Zahl zurück.
LOGGibt den Logarithmus einer positiven reellen Zahl zur angegebenen Basis zurück. Wird die Basis weggelassen, wird 10 angenommen.
LOG10Gibt den dekadischen Logarithmus (Basis 10) einer positiven reellen Zahl zurück.
LTGibt TRUE zurück, wenn das erste Argument kleiner als das zweite ist; andernfalls FALSE.
LTEGibt TRUE zurück, wenn das erste Argument kleiner oder gleich dem zweiten ist; andernfalls FALSE.
MAXGibt den größten Wert in einer Menge von Werten zurück.
Die Funktion ignoriert leere Zellen, die logischen Werte TRUE und FALSE sowie Textwerte. Enthalten die Argumente keine Zahlen, gibt MAX den Wert 0 (null) zurück.
MAXIFS
added in v6.0		Gibt den Maximalwert der Zellen zurück, die durch eine bestimmte Menge von Bedingungen angegeben werden.
Erwartet einen erforderlichen Maximalbereich, gefolgt von einem oder mehreren Paaren aus Bedingungsbereich und Kriteriumsargument.
MINGibt den kleinsten Wert in einer Menge von Werten zurück.
Leere Zellen, logische Werte oder Text im Array oder Bezug werden ignoriert. Enthalten die Argumente keine Zahlen, gibt MIN den Wert 0 (null) zurück.
MINIFS
added in v6.0		Gibt den Minimalwert der Zellen zurück, die durch eine bestimmte Menge von Bedingungen angegeben werden.
Erwartet einen erforderlichen Minimalbereich, gefolgt von einem oder mehreren Paaren aus Bedingungsbereich und Kriteriumsargument.
MINUSGibt die Differenz zweier Zahlen zurück.
MODGibt den Rest zurück, der nach der Division einer Zahl durch den Divisor verbleibt. Das Ergebnis hat dasselbe Vorzeichen wie der Divisor.
MROUNDGibt eine Zahl zurück, die auf das nächste Vielfache der angegebenen Signifikanz gerundet wurde. Die Werte von number und multiple müssen dasselbe Vorzeichen haben.
MULTINOMIALGibt das Verhältnis der Fakultät einer Summe von Werten zum Produkt der Fakultäten zurück. Die Funktion akzeptiert 1 bis 255 numerische Werte, die größer oder gleich 0 sein müssen.
MULTIPLYGibt das Ergebnis der Multiplikation zweier Zahlen zurück.
NEGibt TRUE zurück, wenn das erste Argument ungleich dem zweiten ist; andernfalls FALSE.
ODDGibt eine Zahl zurück, die auf die nächste ungerade ganze Zahl aufgerundet wurde.
PIGibt die Zahl 3,14159265358979 zurück (die mathematische Konstante Pi, genau auf 15 Stellen).
POWGibt das Ergebnis einer mit einer bestimmten Potenz potenzierten Zahl zurück.
Arbeitet mit reellen Zahlen.
POWERGibt das Ergebnis einer mit einer bestimmten Potenz potenzierten Zahl zurück.
Arbeitet mit reellen Zahlen.
PRODUCTMultipliziert alle als Argumente übergebenen Zahlen und gibt das Produkt zurück.
+Es werden nur Zahlen im Array oder Bezug multipliziert. Leere Zellen, logische Werte und Text im Array oder Bezug werden ignoriert.
QUOTIENTGibt das Ergebnis der ganzzahligen Division ohne Rest zurück.
Arbeitet mit reellen Zahlen.
RADIANSKonvertiert Grad in Radiant.
RANDGibt eine Zufallszahl zurück, die größer oder gleich 0 und kleiner als 1 ist.
Gibt bei jeder Neuberechnung der Tabelle eine neue Zufallszahl zurück.
RANDBETWEENGibt eine Zufallszahl zwischen zwei angegebenen Zahlen zurück.
Gibt bei jeder Neuberechnung der Tabelle eine neue Zufallszahl zurück.
ROMANKonvertiert eine arabische Zahl in eine römische Zahl.
ROUNDGibt eine Zahl zurück, die auf eine angegebene Anzahl von Stellen gerundet wurde.
ROUNDDOWNGibt eine Zahl zurück, die auf eine angegebene Anzahl von Stellen abgerundet wurde.
ROUNDUPGibt eine Zahl zurück, die auf eine angegebene Anzahl von Stellen aufgerundet wurde.
SECGibt den Sekans eines in Radiant angegebenen Winkels zurück.
Arbeitet mit numerischen Werten.
SECHGibt den hyperbolischen Sekans eines in Radiant angegebenen Winkels zurück.
Arbeitet mit numerischen Werten.
SINGibt den Sinus eines in Radiant angegebenen Winkels zurück.
SINHGibt den hyperbolischen Sinus einer reellen Zahl zurück.
SQRTGibt die positive Quadratwurzel einer Zahl zurück.
SQRTPIGibt die Quadratwurzel einer mit Pi multiplizierten Zahl zurück. Die Zahl muss größer oder gleich 0 sein.
STDEVBerechnet die Standardabweichung auf Grundlage von Daten, die eine Stichprobe der Grundgesamtheit darstellen.
Die Standardabweichung ist ein Maß dafür, wie weit die Werte um den Durchschnittswert (Mittelwert) gestreut sind.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
STDEVABerechnet die Standardabweichung auf Grundlage einer Stichprobe.
Die Standardabweichung ist ein Maß dafür, wie weit die Werte um den Durchschnittswert (Mittelwert) gestreut sind.
Leere Zellen und Textwerte im Array oder Bezug werden ignoriert.
STDEVPBerechnet die Standardabweichung auf Grundlage der gesamten Grundgesamtheit der Zahlen.
Die Standardabweichung ist ein Maß dafür, wie weit die Werte um den Durchschnittswert (Mittelwert) gestreut sind.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
STDEVPABerechnet die Standardabweichung auf Grundlage der gesamten als Argumente angegebenen Grundgesamtheit, einschließlich Text (wird als 0 ausgewertet) und logischer Werte (TRUE wird als 1, FALSE als 0 ausgewertet).
Die Standardabweichung ist ein Maß dafür, wie weit die Werte um den Durchschnittswert (Mittelwert) gestreut sind.
Ist ein Argument ein Array oder Bezug, werden nur Werte in diesem Array oder Bezug verwendet. Leere Zellen und Textwerte im Array oder Bezug werden ignoriert.
Fehlerwerte verursachen Fehler.
STDEV.S
added in v4.3		Schätzt die Standardabweichung auf Grundlage einer Stichprobe (logische Werte und Text in der Stichprobe werden ignoriert).
Die Standardabweichung ist ein Maß dafür, wie weit die Werte um den Durchschnittswert (Mittelwert) gestreut sind.
Ist ein Argument ein Array oder Bezug, werden nur Werte in diesem Array oder Bezug verwendet. Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
Fehlerwerte verursachen Fehler.
SUBTOTALGibt ein Teilergebnis in einer Liste oder Datenbank zurück.
SUMGibt die Summe der angegebenen Werte zurück.
Leere Zellen, logische Werte wie TRUE oder Text werden ignoriert.
SUMIF
added in v6.0		Addiert die Zellen in einem Bereich, die eine bestimmte Bedingung erfüllen.
Erwartet zwei erforderliche Argumente (den auszuwertenden Bereich und das Kriterium) sowie ein optionales Argument (den zu summierenden Zellbereich, sofern er vom ausgewerteten Bereich abweicht).
SUMIFS
added in v6.0		Addiert die Zellen in einem Bereich, die mehrere Bedingungen erfüllen.
Erwartet einen erforderlichen Summenbereich, gefolgt von einem oder mehreren Paaren aus Bedingungsbereich und Kriteriumsargument; in die Summe werden nur Zellen einbezogen, die alle Bedingungen erfüllen.
SUMPRODUCTMultipliziert Zellbereiche oder Arrays und gibt die Summe der Produkte zurück.
Für gültige Produkte werden nur Zahlen multipliziert.
Leere Zellen, logische Werte und Text werden ignoriert.
Array-Einträge, die nicht numerisch sind, werden als null behandelt.
SUMSQGibt die Summe der Quadrate der Argumente zurück.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
SUMX2MY2Gibt die Summe der Differenz der Quadrate entsprechender Werte in zwei Arrays zurück.
Die Argumente sollten entweder Zahlen oder Namen, Arrays oder Bezüge sein, die Zahlen enthalten.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert. Nullwerte werden einbezogen.
SUMX2PY2Gibt die Summe der Summe der Quadrate entsprechender Werte in zwei Arrays zurück.
Die Argumente sollten entweder Zahlen oder Namen, Arrays oder Bezüge sein, die Zahlen enthalten.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert. Nullwerte werden einbezogen.
SUMXMY2Gibt die Summe der Quadrate der Differenzen entsprechender Werte in zwei Arrays zurück.
Die Argumente sollten entweder Zahlen oder Namen, Arrays oder Bezüge sein, die Zahlen enthalten.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert. Nullwerte werden einbezogen.
TANGibt den Tangens eines in Radiant angegebenen Winkels zurück.
TANHGibt den hyperbolischen Tangens einer reellen Zahl zurück.
TRUNCSchneidet eine Zahl auf eine ganze Zahl ab, indem der Nachkommateil der Zahl entfernt wird.
VARGibt die Varianz auf Grundlage einer Stichprobe zurück.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
VARAGibt die Varianz auf Grundlage einer Stichprobe der Grundgesamtheit zurück, einschließlich Text (wird als 0 ausgewertet) und logischer Werte (TRUE wird als 1, FALSE als 0 ausgewertet).
Leere Zellen und Textwerte im Array oder Bezug werden ignoriert.
VARPGibt die Varianz einer Grundgesamtheit auf Grundlage der gesamten Grundgesamtheit der Zahlen zurück.
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
VARPAGibt die Varianz einer Grundgesamtheit auf Grundlage der gesamten Grundgesamtheit zurück, einschließlich Text (wird als 0 ausgewertet) und logischer Werte (TRUE wird als 1, FALSE als 0 ausgewertet).
Leere Zellen und Textwerte im Array oder Bezug werden ignoriert.
VAR.S
added in v4.3		Gibt die Varianz auf Grundlage einer Stichprobe zurück (logische Werte und Text in der Stichprobe werden ignoriert).
Leere Zellen, logische Werte, Text oder Fehlerwerte im Array oder Bezug werden ignoriert.
+
+ +Das Beispiel finden Sie in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b). +### Array-Funktionen {#array-functions} + +Die folgenden Array-Funktionen wurden in v6.0 hinzugefügt. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
CHOOSECOLS=CHOOSECOLS(array, col_num1, [col_num2], ...)Gibt die angegebenen Spalten aus einem Array oder Bereich zurück.
CHOOSEROWS=CHOOSEROWS(array, row_num1, [row_num2], ...)Gibt die angegebenen Zeilen aus einem Array oder Bereich zurück.
DROP=DROP(array, [rows], [columns])Entfernt eine bestimmte Anzahl von Zeilen oder Spalten vom Anfang oder Ende eines Arrays.
EXPAND=EXPAND(array, [rows], [columns], [pad_with])Erweitert oder füllt ein Array auf die angegebenen Zeilen- und Spaltendimensionen auf.
RANDARRAY=RANDARRAY([rows], [columns], [min], [max], [integer])Gibt standardmäßig ein Array mit Zufallszahlen zwischen 0 und 1 zurück. Sie können die Anzahl der zu füllenden Zeilen und Spalten, Minimal- und Maximalwerte sowie angeben, ob ganze Zahlen oder Dezimalwerte zurückgegeben werden sollen.
SEQUENCE=SEQUENCE(rows, [columns], [start], [step])Erzeugt eine Liste aufeinanderfolgender Zahlen in einem Array, z. B. 1, 2, 3, 4.
SORT=SORT(array, [sort_index], [sort_order], [by_col])Sortiert den Inhalt eines Bereichs oder Arrays. Standardmäßig wird nach der ersten Spalte in aufsteigender Reihenfolge sortiert.
SORTBY=SORTBY(array, by_array, [sort_order], ...)Sortiert den Inhalt eines Bereichs oder Arrays anhand der Werte in einem entsprechenden Bereich oder Array.
TAKE=TAKE(array, [rows], [columns])Gibt eine bestimmte Anzahl aufeinanderfolgender Zeilen oder Spalten vom Anfang oder Ende eines Arrays zurück.
TEXTSPLIT=TEXTSPLIT(text, col_delimiter, [row_delimiter], [ignore_empty], [match_mode], [pad_with])Teilt eine Textzeichenfolge anhand der angegebenen Trennzeichen in Zeilen und Spalten auf.
TOCOL=TOCOL(array, [ignore], [scan_by_column])Konvertiert ein Array oder einen Bereich in eine einzelne Spalte.
TOROW=TOROW(array, [ignore], [scan_by_column])Konvertiert ein Array oder einen Bereich in eine einzelne Zeile.
UNIQUE=UNIQUE(array, [by_col], [exactly_once])Gibt eine Liste eindeutiger Werte aus einem Bereich oder Array zurück.
WRAPCOLS=WRAPCOLS(vector, wrap_count, [pad_with])Bricht einen Zeilen- oder Spaltenvektor nach einer bestimmten Anzahl von Werten spaltenweise in ein 2D-Array um.
WRAPROWS=WRAPROWS(vector, wrap_count, [pad_with])Bricht einen Zeilen- oder Spaltenvektor nach einer bestimmten Anzahl von Werten zeilenweise in ein 2D-Array um.
+
+ +Das Beispiel finden Sie in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b). +### Regex-Funktionen {#regex-functions} + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
REGEXREPLACE=REGEXREPLACE(text, regular_expression, replacement)Ersetzt einen Teil einer Textzeichenfolge durch eine andere Zeichenfolge mithilfe regulärer Ausdrücke.
REGEXMATCH=REGEXMATCH(text, regular_expression)Gibt TRUE zurück, wenn eine Textzeichenfolge dem Muster des regulären Ausdrucks entspricht, andernfalls FALSE.
REGEXEXTRACT=REGEXEXTRACT(text, regular_expression)Gibt den Teil der Zeichenfolge zurück, der dem Muster des regulären Ausdrucks entspricht.
+
+ +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. + +### Zeichenfolgenfunktionen {#string-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionFormelBeschreibung
ARRAYTOTEXT
added in v4.3		=ARRAYTOTEXT(array, [format])Gibt ein Array von Textwerten aus einem beliebigen angegebenen Bereich zurück, basierend auf dem angegebenen Format (0 - kompakt (Standard) oder 1 - striktes Format).
CHAR=CHAR(number)Gibt das Zeichen zurück (aus dem von Ihrem Computer verwendeten Zeichensatz), das durch eine Zahl angegeben wird. Die Zahl muss zwischen 1 und 255 liegen.
CLEAN=CLEAN(text)Entfernt Zeichen aus dem Text, die beim Drucken nicht angezeigt werden.
CODE=CODE(text)Gibt einen numerischen Code für das erste Zeichen einer Textzeichenfolge zurück.
CONCATENATE=CONCATENATE(A1,"",B2:C3)Verknüpft zwei oder mehr Textzeichenfolgen zu einer einzigen Zeichenfolge.
DOLLAR=DOLLAR(number, decimals)Konvertiert eine Zahl in Text im Währungsformat, basierend auf der angegebenen Anzahl von Stellen rechts/links des Dezimalzeichens (standardmäßig 2).
EXACT=EXACT(text1, text2)Vergleicht zwei Zeichenfolgen und gibt TRUE zurück, wenn sie identisch sind; andernfalls wird FALSE zurückgegeben.
FIND=FIND(find_text, within_text, [start_num])Gibt die Position (als Zahl) einer Textzeichenfolge innerhalb einer anderen zurück, beginnend an der angegebenen Position (standardmäßig 1).
FIXED=FIXED(number, [decimals], [no_commas])Rundet eine Zahl auf die angegebene Anzahl von Dezimalstellen, formatiert sie im Dezimalformat mit Punkt und Kommas und konvertiert das Ergebnis in Text. Wenn no_commas auf 1 gesetzt ist, enthält der zurückgegebene Text keine Kommas.
JOIN=JOIN(separator, value1, value2,...)Verknüpft Werte mithilfe eines angegebenen Trennzeichens.
LEFT=LEFT(text, count)Gibt das erste Zeichen oder die ersten Zeichen einer Textzeichenfolge zurück,
basierend auf der angegebenen Zeichenanzahl.
LEN=LEN(text)Gibt die Länge der angegebenen Zeichenfolge zurück.
LOWER=LOWER(text)Konvertiert alle Buchstaben der angegebenen Zeichenfolge in Kleinbuchstaben.
MID=MID(text, start, count)Gibt eine bestimmte Anzahl von Zeichen aus einer Textzeichenfolge zurück,
beginnend an der angegebenen Position, basierend auf der
angegebenen Zeichenanzahl.
NUMBERVALUE=NUMBERVALUE (text, [decimal_separator], [group_separator])Konvertiert eine Zahl im Textformat mithilfe der angegebenen Dezimal- und Gruppentrennzeichen in einen numerischen Wert.
PROPER=PROPER(text)Setzt das erste Zeichen jedes Wortes auf Großbuchstaben
und konvertiert alle anderen Zeichen in Kleinbuchstaben.
REPLACE
added in v4.3		=REPLACE(old_text, start_num, num_chars, new_text),

where:
  • old_text - the text in which you want to replace some characters;
  • start_num - the position of the character in old_text that you want to replace with new_text;
  • num_chars - the number of characters to be replaced in old_text;
  • new_text - the text that will replace characters in old_text.
Ersetzt einen Teil einer Textzeichenfolge basierend auf der angegebenen Zeichenanzahl durch eine andere Textzeichenfolge.
REPT=REPT(text, number_times)Wiederholt Text eine angegebene Anzahl von Malen.
RIGHT=RIGHT(text, count)Gibt das letzte Zeichen oder die letzten Zeichen (ganz rechts) einer Textzeichenfolge zurück,
basierend auf der angegebenen Zeichenanzahl.
SEARCH=SEARCH(find_text, within_text, [start_num])Gibt die Position (als Zahl) des ersten Zeichens von find_text innerhalb von within_text zurück, beginnend an der angegebenen Position (standardmäßig 1).
SUBSTITUTE=SUBSTITUTE(text, old_text, new_text, [instance_num])Ersetzt alten Text durch neuen Text in einer Textzeichenfolge. Wenn instance_num angegeben wird, wird nur dieses Vorkommen von old_text ersetzt; andernfalls werden alle Vorkommen ersetzt.
T=T(value)Gibt Text zurück, wenn ein Textwert übergeben wird, und eine leere Zeichenfolge ("") für Zahlen, Datumsangaben sowie die logischen Werte TRUE/FALSE.
TRIM=TRIM(text)Entfernt alle Leerzeichen aus dem Text, mit Ausnahme einzelner Leerzeichen zwischen Wörtern.
UPPER=UPPER(text)Konvertiert Text in Großbuchstaben.
+
+ +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. + +### Weitere Funktionen {#other-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionBeispielBeschreibung
AND=AND(logical1, [logical2], ...)Gibt TRUE oder FALSE zurück, je nachdem,
ob mehrere Bedingungen erfüllt sind oder nicht.
CHOOSE=CHOOSE(index_num, value1, [value2], ...)Gibt einen Wert aus der Liste der Wertargumente basierend auf einer angegebenen Position oder einem Index zurück.
FALSE=FALSE()Gibt den logischen Wert FALSE zurück.
IF=IF(condition, [value_if_true], [value_if_false])Gibt einen Wert zurück, wenn eine Bedingung TRUE ist,
und einen anderen Wert, wenn sie FALSE ist.
NOT=NOT(logical)Gibt das Gegenteil eines logischen oder booleschen Wertes zurück.
OR=OR(logical1, [logical2], ...)Gibt TRUE zurück, wenn mindestens einer der logischen Ausdrücke TRUE ist; andernfalls FALSE.
TRUE=TRUE()Gibt den logischen Wert TRUE zurück.
+
+ +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. + +## Zellenformel abrufen {#getting-cell-formula} + +Ab v4.1 können Sie die auf eine Zelle angewendete Formel mit der Methode [`getFormula()`](api/spreadsheet_getformula_method.md) abrufen. Die Methode nimmt die ID der Zelle als Parameter entgegen: + +~~~js +var formula = spreadsheet.getFormula("B2"); +// -> "ABS(C2)" +~~~ + +## Popup mit Formelbeschreibung {#popup-with-formula-description} + +Wenn Sie eine Formel eingeben, wird ein Popup mit einer Beschreibung der Funktion und ihrer Parameter angezeigt. + +![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) + +Sehen Sie sich das Beispiel in unserem [Snippet-Tool](https://snippet.dhtmlx.com/wux2b35b) an. + +Sie können die Standard-Locale für das Popup mit Formelparametern anpassen und eine benutzerdefinierte Locale hinzufügen. Details finden Sie im Leitfaden zur [Lokalisierung](localization.md#default-locale-for-formulas). + +## Benutzerdefinierte Formeln {#custom-formulas} + +Ab v6.0 können Sie benutzerdefinierte Formelfunktionen mit der Methode [`addFormula()`](api/spreadsheet_addformula_method.md) registrieren. Nach der Registrierung ist die Formel in jeder Zelle unter ihrem Namen in Großbuchstaben verfügbar. + +Die Methode nimmt zwei Parameter entgegen: den Formelnamen und eine synchrone Handler-Funktion, die die aufgelösten Zellwerte als Argumente erhält und das Ergebnis zurückgibt: + +~~~js +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); +~~~ + +Anschließend können Sie die Formel in Zellen wie jede integrierte Funktion verwenden: + +~~~js +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +:::note +Die Handler-Funktion muss synchron sein. Die Verwendung von `Promise` oder `fetch` innerhalb der Funktion ist nicht zulässig. +::: + +**Verwandtes Beispiel:** [Spreadsheet. Benutzerdefinierte Formel hinzufügen](https://snippet.dhtmlx.com/wvxdlahp) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides.md b/i18n/de/docusaurus-plugin-content-docs/current/guides.md new file mode 100644 index 00000000..8998ad3a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides.md @@ -0,0 +1,52 @@ +--- +sidebar_label: Leitfaden-Übersicht +title: Entwickler- und Benutzerhandbücher +description: Entwickler- und Benutzerhandbücher finden Sie in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek. Durchsuchen Sie die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Leitfäden {#guides} + +DHTMLX Spreadsheet bietet ein breites Spektrum an Funktionen: Import und Export von Daten in verschiedenen Formaten, komfortables Arbeiten mit Zellinhalten und -stilen, eine flexible Tabellenstruktur, einen Nur-Lesen-Modus, umfangreiche Anpassungsmöglichkeiten für das Erscheinungsbild und Integration mit gängigen Frameworks. + +## Entwicklerhandbücher {#developer-guides} + +### Spreadsheet erstellen {#creating-spreadsheet} + +Beschreibt die wichtigsten Schritte zur Installation und Erstellung von Spreadsheet auf einer Seite, zur Anpassung der Konfiguration und zur Festlegung von Beschriftungen in der gewünschten Sprache. + +- [Initialisierung](initialization.md) +- [Konfiguration](configuration.md) +- [Lokalisierung](localization.md) + +### Spreadsheet-Funktionen erkunden {#exploring-spreadsheet-features} + +Zeigt, wie Sie Daten in Spreadsheet laden, Events verarbeiten und die wichtigsten Funktionen nutzen. Außerdem wird die Anpassung der Hauptbestandteile von Spreadsheet behandelt. + +- [Datenladen und -export](loading_data.md) +- [Arbeiten mit Spreadsheet](working_with_ssheet.md) +- [Arbeiten mit Tabellenblättern](working_with_sheets.md) +- [Arbeiten mit Zellen](category/work-with-cells.md) +- [Zahlenformatierung](number_formatting.md) +- [Formeln und Funktionen](functions.md) +- [Event-Handling](handling_events.md) +- [Anpassung](customization.md) + +### Frameworks & Integrationen {#frameworks--integrations} + +- [React Spreadsheet](react.md) - offizielle React-Komponente mit Props, Events und TypeScript-Unterstützung +- [Integration mit Angular](angular_integration.md) - GitHub-Demo zur Verwendung von Spreadsheet in einer Angular-App +- [Integration mit Svelte](svelte_integration.md) - GitHub-Demo zur Verwendung von Spreadsheet in einer Svelte-App +- [Integration mit Vue.js](vuejs_integration.md) - GitHub-Demo zur Verwendung von Spreadsheet in einer Vue-App + +## Benutzerhandbücher {#user-guides} + +Die Benutzerhandbücher erleichtern Ihren Nutzern die Arbeit mit Spreadsheet. + +- [Liste der Tastaturkürzel](hotkeys.md) +- [Arbeiten mit Tabellenblättern](work_with_sheets.md) +- [Arbeiten mit Zeilen und Spalten](work_with_rows_cols.md) +- [Arbeiten mit Zellen](work_with_cells.md) +- [Suchen nach Daten](data_search.md) +- [Daten sortieren](sorting_data.md) +- [Daten filtern](filtering_data.md) +- [Excel-Import/Export](excel_import_export.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/handling_events.md b/i18n/de/docusaurus-plugin-content-docs/current/handling_events.md new file mode 100644 index 00000000..a2b99c3a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/handling_events.md @@ -0,0 +1,43 @@ +--- +sidebar_label: Event-Handling +title: Event-Handling +description: In der Dokumentation zur DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie mehr über das Event-Handling. Lesen Sie Entwickleranleitungen und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Event-Handling {#event-handling} + + + +## Event-Listener hinzufügen {#attaching-event-listeners} + +Sie können Event-Listener mit der Methode [`spreadsheet.events.on()`](api/eventsbus_on_method.md) hinzufügen: + +~~~jsx +spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +~~~ + +## Event-Listener entfernen {#detaching-event-listeners} + +Um Events zu entfernen, verwenden Sie [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md): + +~~~jsx +var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +spreadsheet.events.detach(addcolumn); +~~~ + +## Events aufrufen {#calling-events} + +Um Events aufzurufen, verwenden Sie [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md): + +~~~jsx +spreadsheet.events.fire("name",args); +// wobei args ein Array von Argumenten ist +~~~ + +Die Liste der Events finden Sie im [API-Abschnitt](api/api_overview.md#spreadsheet-events). + +{{note Die Namen der Events sind nicht case-sensitive.}} diff --git a/i18n/de/docusaurus-plugin-content-docs/current/hotkeys.md b/i18n/de/docusaurus-plugin-content-docs/current/hotkeys.md new file mode 100644 index 00000000..69174ee9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/hotkeys.md @@ -0,0 +1,241 @@ +--- +sidebar_label: Liste der Tastenkombinationen +title: Tastenkombinationen +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie alles uber die Tastenkombinationen. Lesen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Spreadsheet herunter. +--- + +# Liste der Tastenkombinationen {#hot-keys-list} + +Hier finden Sie eine Übersicht der Tastenkombinationen, die Sie bei der Arbeit mit DHTMLX Spreadsheet verwenden können. + +## Bearbeitung {#editing} + + + + + + + + + + + + + + + + + + + + +
Enteraktiviert den Editor in einer Zelle
Ctrl (Cmd) + Enterbeendet die Bearbeitung der Zelle und behält die Auswahl auf der Zelle
F2öffnet den Editor in der ausgewählten Zelle
Escschließt den Editor in einer Zelle ohne die Änderungen zu speichern
+ +## Zellen formatieren {#formatting-cells} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Ckopiert den Wert einer Zelle
Ctrl (Cmd) + Vfügt den Wert in eine Zelle ein und ersetzt dabei den ausgewählten Inhalt
Ctrl (Cmd) + Xschneidet den Wert einer Zelle aus
Ctrl (Cmd) + Zmacht die letzte Aktion in einem Tabellenblatt rückgängig
Ctrl (Cmd) + Ywiederholt die letzte Aktion in einem Tabellenblatt
Ctrl (Cmd) + Shift + Zwiederholt die letzte Aktion in einem Tabellenblatt
Ctrl (Cmd) + Bformatiert den Wert einer Zelle fett
Ctrl (Cmd) + Iformatiert den Wert einer Zelle kursiv
Ctrl (Cmd) + Uformatiert den Wert einer Zelle mit Unterstreichung
Alt + Shift + 5 (Cmd + Shift + X)formatiert den Wert einer Zelle mit Durchstreichung
Ctrl (Cmd) + Shift + Ezentriert den Wert einer Zelle horizontal
Ctrl (Cmd) + Shift + Rrichtet den Wert einer Zelle rechtsbündig aus
Ctrl (Cmd) + Shift + Lrichtet den Wert einer Zelle linksbündig aus
Ctrl (Cmd) + Kfügt einen Hyperlink in eine Zelle ein
Deleteentfernt den Zellinhalt und behält dabei die angewendeten Stile
Backspaceentfernt den Zellinhalt und behält dabei die angewendeten Stile
+ +## Navigation {#navigation} + +{{note Die Navigation funktioniert nur, wenn keine Zelle bearbeitet wird.}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enteraktiviert den Editor in einer Zelle. Schließt den Editor und verschiebt die Auswahl um eine Zelle nach unten (in einer Spalte). Wenn ein Zellbereich ausgewählt ist, wird die Auswahl innerhalb des Bereichs um eine Zelle nach unten verschoben.
Shift + Enterverschiebt die Auswahl um eine Zelle nach oben (in einer Spalte). Wenn ein Zellbereich ausgewählt ist, wird die Auswahl innerhalb des Bereichs um eine Zelle nach oben verschoben. Deaktiviert, wenn die erste Zelle einer Spalte erreicht wird.
Tabverschiebt die Auswahl um eine Zelle nach rechts (in einer Zeile). Wenn ein Zellbereich ausgewählt ist, wird die Auswahl innerhalb des Bereichs um eine Zelle nach rechts verschoben. Deaktiviert, wenn die äußerste rechte Zelle einer Zeile erreicht wird.
Tab + Shiftverschiebt die Auswahl um eine Zelle nach links (in einer Zeile). Wenn ein Zellbereich ausgewählt ist, wird die Auswahl innerhalb des Bereichs um eine Zelle nach links verschoben. Deaktiviert, wenn die äußerste linke Zelle einer Zeile erreicht wird.
Pfeiltastenermöglichen die Navigation zwischen den Zellen in einem Tabellenblatt
Homeverschiebt die Auswahl zur ersten Zelle in der Zeile
Endverschiebt die Auswahl zur letzten Zelle in der Zeile
Ctrl (Cmd) + Linke Pfeiltasteverschiebt die Auswahl zur ersten Zelle in einer Zeile
Ctrl (Cmd) + Rechte Pfeiltasteverschiebt die Auswahl zur letzten Zelle in einer Zeile
Ctrl (Cmd) + Obere Pfeiltasteverschiebt die Auswahl zur ersten Zelle in einer Spalte
Ctrl (Cmd) + Untere Pfeiltasteverschiebt die Auswahl zur letzten Zelle in einer Spalte
Ctrl (Cmd) + Homeverschiebt die Auswahl zum Anfang des Tabellenblatts (obere linke Zelle)
Ctrl (Cmd) + Endverschiebt die Auswahl zum Ende des Tabellenblatts (untere rechte Zelle)
Shift + Obere/Untere/Linke/Rechte Pfeiltasteerweitert die Auswahl ausgehend von der ausgewählten Zelle
Page Upscrollt das Tabellenblatt um einen Bildschirm nach oben
Page Downscrollt das Tabellenblatt um einen Bildschirm nach unten
+ +## Suche {#search} + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Föffnet ein Suchfeld in der oberen rechten Ecke der Tabelle
Ctrl (Cmd) + Gverschiebt die Auswahl zum nächsten gefundenen Treffer
Ctrl (Cmd) + Shift + Gverschiebt die Auswahl zum vorherigen gefundenen Treffer
+ +## Auswahl {#selection} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Awählt alle Zellen in einem Tabellenblatt aus
Ctrl (Cmd) + Linksklickermöglicht die Auswahl mehrerer einzelner Zellen
Linke Shift-Taste + Linksklickermöglicht die Auswahl eines Zellbereichs, bei dem die ausgewählte Zelle die erste Zelle
des Bereichs und die angeklickte Zelle die letzte Zelle des Bereichs ist
Ctrl (Cmd) + Shift + Linksklickermöglicht die Auswahl mehrerer einzelner Zellbereiche
Ctrl (Cmd) + Spacewählt die gesamte Spalte aus
Shift + Spacewählt die gesamte Zeile aus
+ +## Arbeit mit Tabellenblättern {#work-with-sheets} + + + + + + + + + + + + +
Shift + F11fügt ein neues Tabellenblatt in die Tabelle ein
Alt + Pfeiltaste oben/untenwechselt zum nächsten/vorherigen Tabellenblatt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 00000000..d3837a35 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,147 @@ +--- +sidebar_label: Erste Schritte +title: Erste Schritte mit DHTMLX Spreadsheet +description: Sie können in der Dokumentation erfahren, wie Sie mit der DHTMLX JavaScript Spreadsheet-Bibliothek beginnen. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-tägige Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Erste Schritte {#how-to-start} + +Dieses Tutorial führt Sie durch die Schritte, um ein vollständig funktionsfähiges DHTMLX Spreadsheet auf einer Seite einzurichten. Die Komponente eignet sich besonders für die Verwaltung großer Datenmengen, wenn Sie die Ergebnisse von Berechnungen speichern und reproduzieren möchten. + +![DHTMLX Spreadsheet initialized with a sample data table in a browser window](/img/how_to_start.png) + +## Schritt 1. Quelldateien einbinden {#step-1-including-source-files} + +Erstellen Sie zunächst eine HTML-Datei mit dem Namen *index.html*. Binden Sie anschließend die Spreadsheet-Quelldateien darin ein. [Die detaillierte Beschreibung des DHTMLX Spreadsheet-Pakets finden Sie hier](initialization.md#including-source-files). + +Es sind zwei notwendige Dateien erforderlich: + +- die *JS*-Datei von DHTMLX Spreadsheet +- die *CSS*-Datei von DHTMLX Spreadsheet + +und + +- der Link zur Google Fonts-Quelldatei für die korrekte Darstellung von Schriftarten. + +~~~html {5-8} title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + + + + +~~~ + +### Spreadsheet über npm oder yarn installieren {#installing-spreadsheet-via-npm-or-yarn} + +Sie können JavaScript Spreadsheet mit dem Paketmanager `yarn` oder `npm` in Ihr Projekt importieren. + +#### Testversion von Spreadsheet über npm oder yarn installieren {#installing-trial-spreadsheet-via-npm-or-yarn} + +:::info +Wenn Sie die Testversion von Spreadsheet verwenden möchten, laden Sie das [**Spreadsheet-Testpaket**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) herunter und folgen Sie den Schritten in der *README*-Datei. Beachten Sie, dass die Testversion von Spreadsheet nur 30 Tage lang verfügbar ist. +::: + +#### PRO-Version von Spreadsheet über npm oder yarn installieren {#installing-pro-spreadsheet-via-npm-or-yarn} + +:::info +Sie können direkt im [Kundenbereich](https://dhtmlx.com/clients/) auf das private DHTMLX **npm** zugreifen, indem Sie Ihren Login und Ihr Passwort für **npm** generieren. Eine detaillierte Installationsanleitung ist dort ebenfalls verfügbar. Beachten Sie, dass der Zugriff auf das private **npm** nur verfügbar ist, solange Ihre proprietäre Spreadsheet-Lizenz aktiv ist. +::: + +## Schritt 2. Spreadsheet erstellen {#step-2-creating-spreadsheet} + +Jetzt können Sie Spreadsheet zur Seite hinzufügen. Erstellen Sie zunächst einen DIV-Container und platzieren Sie DHTMLX Spreadsheet darin. Ihre Schritte sind: + +- einen DIV-Container in der *index.html*-Datei angeben +- DHTMLX Spreadsheet mit dem `dhx.Spreadsheet`-Konstruktor initialisieren + +Als Parameter nimmt die Konstruktorfunktion den HTML-Container, in den Spreadsheet eingefügt werden soll, sowie das Spreadsheet-Konfigurationsobjekt entgegen. + +~~~html title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + +
+ + + +~~~ + +## Schritt 3. Spreadsheet konfigurieren {#step-3-setting-spreadsheet-configuration} + +Als Nächstes können Sie zusätzliche Konfigurationsoptionen festlegen, die die Spreadsheet-Komponente bei der Initialisierung neben den Standardoptionen haben soll. + +Sie können das Erscheinungsbild von Spreadsheet mit mehreren Optionen anpassen, zum Beispiel: `toolbarBlocks`, `rowsCount` und `colsCount`. [Weitere Details finden Sie hier](configuration.md). + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + toolbarBlocks: ["columns", "rows", "clear"], + rowsCount: 10, + colsCount: 10 +}); +~~~ + +Die Konfiguration von DHTMLX Spreadsheet ist sehr flexibel, sodass Sie sie jederzeit ändern können. [Lesen Sie die zugehörige Anleitung](configuration.md), um die Grundlagen der Spreadsheet-Konfiguration kennenzulernen. + +## Schritt 4. Daten in Spreadsheet laden {#step-4-loading-data-into-spreadsheet} + +Der letzte Schritt besteht darin, Spreadsheet mit Daten zu befüllen. DHTMLX Spreadsheet akzeptiert Daten im JSON-Format. Neben den Daten können Sie in einem Datensatz auch notwendige Styles übergeben. Beim Laden von Inline-Daten müssen Sie die Methode `parse()` verwenden und ihr ein Objekt mit den Daten übergeben, wie im folgenden Beispiel: + +~~~jsx title="data.json" +const data = [ + { "cell": "a1", "value": "Country" }, + { "cell": "b1", "value": "Product" }, + { "cell": "c1", "value": "Price" }, + { "cell": "d1", "value": "Amount" }, + { "cell": "e1", "value": "Total Price" }, + + { "cell": "a2", "value": "Ecuador" }, + { "cell": "b2", "value": "Banana" }, + { "cell": "c2", "value": 6.68 }, + { "cell": "d2", "value": 430 }, + { "cell": "e2", "value": 2872.4 }, + + { "cell": "a3", "value": "Belarus" }, + { "cell": "b3", "value": "Apple" }, + { "cell": "c3", "value": 3.75 }, + { "cell": "d3", "value": 600 }, + { "cell": "e3", "value": 2250 } +] + +// Spreadsheet initialisieren +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + //config +}); +// Daten in Spreadsheet laden +spreadsheet.parse(data); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierte Zellenanzahl](https://snippet.dhtmlx.com/vc3mstsw) + +## Wie geht es weiter {#whats-next} + +Das war alles. In vier Schritten erhalten Sie ein praktisches Werkzeug für die Arbeit mit tabellarischen Daten. Jetzt können Sie mit Ihren Daten arbeiten oder DHTMLX Spreadsheet weiter erkunden. + +- [Spreadsheet-Übersicht](/) +- [](guides.md) +- [](api/api_overview.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/index.md b/i18n/de/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 00000000..cb505584 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Spreadsheet-Übersicht +title: DHTMLX Spreadsheet Übersicht +slug: / +description: Sie finden eine Übersicht der JavaScript-Spreadsheet-Bibliothek in der DHTMLX-Dokumentation. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# DHTMLX Spreadsheet-Übersicht {#dhtmlx-spreadsheet-overview} + +DHTMLX Spreadsheet ist eine clientseitige JavaScript-Komponente zum Online-Bearbeiten und -Formatieren von Tabellendaten. Sie umfasst eine konfigurierbare Toolbar, ein praktisches Menü und Kontextmenü sowie ein anpassbares Grid, unterstützt die Hotkey-Navigation, lädt Daten aus externen und lokalen Quellen und kann die Oberfläche in die gewünschte Sprache lokalisieren. + +:::tip +Das [Benutzerhandbuch](guides.md#user-guides) erleichtert Ihren Benutzern die Arbeit mit Spreadsheet. +::: + +## Spreadsheet-Struktur {#spreadsheet-structure} + +### Toolbar {#toolbar} + +Der Abschnitt **Toolbar** ist sehr flexibel. Er enthält mehrere Standardblöcke mit Steuerelementen: "undo", "colors", "decoration", "align", "cell", "format", "actions". Sie können die [Toolbar-Struktur ändern](configuration.md#toolbar) und weitere Blöcke hinzufügen oder eine eigene Reihenfolge der Blöcke festlegen. + +![DHTMLX Spreadsheet toolbar with undo, color, decoration, align, cell, format, and action controls](/img/overview_toolbar.png) + +Sie können die [Toolbar auch anpassen](customization.md#toolbar), indem Sie eigene Steuerelemente hinzufügen und die Konfiguration der Steuerelemente aktualisieren. + +### Bearbeitungszeile {#editing-line} + +Die **Bearbeitungszeile** erfüllt zwei Zwecke: + +- den Inhalt der ausgewählten Zelle bearbeiten +- Änderungen in der aktuell bearbeiteten Zelle verfolgen + +![DHTMLX Spreadsheet editing line for editing cell content and tracking changes](/img/overview_editline.png) + +Bei Bedarf können Sie die Bearbeitungszeile über die entsprechende [Konfigurationsoption](configuration.md#editing-bar) deaktivieren. + +### Grid {#grid} + +Das **Grid** ist eine Tabelle, deren Spalten durch Buchstaben und deren Zeilen durch Zahlen definiert sind. Eine Zelle des Grids wird daher durch den Buchstaben der Spalte und die Nummer der Zeile bezeichnet, zum Beispiel C3. + +![DHTMLX Spreadsheet grid with columns labeled by letters and numbered rows](/img/spreadsheet_init.png) + +### Kontextmenü {#context-menu} + +Der Abschnitt **Kontextmenü** enthält 6 Einträge — **Lock**, **Clear**, **Columns**, **Rows**, **Sort** und **Insert link** — mit Untereinträgen. + +![DHTMLX Spreadsheet context menu with Lock, Clear, Columns, Rows, Sort, and Insert link options](/img/overview_contextmenu.png) + +Die [Struktur des Kontextmenüs ist ebenfalls anpassbar](customization.md#context-menu). Sie können benutzerdefinierte Steuerelemente hinzufügen, die Konfiguration der Steuerelemente aktualisieren und nicht benötigte Steuerelemente entfernen. + +### Menü {#menu} + +Der Abschnitt **Menü** enthält mehrere Blöcke, die die am häufigsten verwendeten Optionen aus Toolbar und Kontextmenü für den schnellen Zugriff zusammenfassen. + +Standardmäßig ist der Abschnitt **Menü** ausgeblendet, Sie können ihn jedoch über die entsprechende [Konfigurationsoption](configuration.md#menu) aktivieren. + +![DHTMLX Spreadsheet menu section combining frequently used toolbar and context menu options](/img/overview_menu.png) + +Sie können die [Struktur des Menüs ändern](customization.md#menu), indem Sie benutzerdefinierte Steuerelemente verwenden, die Konfiguration der Steuerelemente aktualisieren und nicht benötigte Steuerelemente entfernen. + +## Wie geht es weiter {#whats-next} + +Jetzt können Sie DHTMLX Spreadsheet in Ihrer Anwendung einsetzen. Folgen Sie den Anweisungen des Tutorials [Erste Schritte](how_to_start.md). + +Um mehr über DHTMLX Spreadsheet zu erfahren, lesen Sie folgende Anleitungen: + +- [API-Übersicht](api/api_overview.md) +- [Anleitungen](guides.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/initialization.md new file mode 100644 index 00000000..6234b261 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/initialization.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Initialisierung +title: Initialisierung +description: In der Dokumentation erfahren Sie, wie die DHTMLX JavaScript Spreadsheet-Bibliothek initialisiert wird. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Initialisierung {#initialization} + +Diese Anleitung beschreibt, wie Sie DHTMLX Spreadsheet auf einer Seite erstellen und Ihrer Anwendung ein voll funktionsfähiges Arbeitsblatt hinzufügen. Führen Sie die folgenden Schritte aus, um die Komponente einsatzbereit zu machen: + +1. [Binden Sie die DHTMLX Spreadsheet-Quelldateien auf einer Seite ein](#including-source-files). +2. [Erstellen Sie einen Container für DHTMLX Spreadsheet](#creating-container). +3. [Initialisieren Sie DHTMLX Spreadsheet mit dem Objekt-Konstruktor](#initializing-dhtmlx-spreadsheet). + + + +## Quelldateien einbinden {#including-source-files} + +[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts. + +Um DHTMLX Spreadsheet zu erstellen, müssen Sie 2 Quelldateien auf Ihrer Seite einbinden: + +- spreadsheet.js +- spreadsheet.css + +Stellen Sie sicher, dass Sie korrekte relative Pfade zu diesen Dateien setzen: + +~~~html title="index.html" + + +~~~ + +Die Struktur des Spreadsheet-Pakets ist wie folgt: + +- *sources* - die Quellcode-Dateien der Bibliothek; sie sind leicht lesbar und hauptsächlich für das Debugging gedacht; +- *codebase* - die obfuskierten Code-Dateien der Bibliothek; sie sind deutlich kleiner und für den Einsatz in der Produktion vorgesehen. **Binden Sie diese Dateien in Ihre Apps ein, wenn diese fertig sind**; +- *samples* - die Code-Beispiele; +- *docs* - die vollständige Dokumentation der Komponente. + +## Container erstellen {#creating-container} + +Fügen Sie einen Container für Spreadsheet hinzu und geben Sie ihm eine ID, zum Beispiel "spreadsheet": + +~~~html title="index.html" +
+~~~ + +## DHTMLX Spreadsheet initialisieren {#initializing-dhtmlx-spreadsheet} + +Initialisieren Sie DHTMLX Spreadsheet mit dem `dhx.Spreadsheet`-Objekt-Konstruktor. Der Konstruktor hat zwei Parameter: + +- den HTML-Container für Spreadsheet, +- ein Objekt mit Konfigurationseigenschaften. [Siehe die vollständige Liste unten](#configuration-properties). + +~~~jsx title="index.js" +// DHTMLX Spreadsheet erstellen +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // Konfigurationsoptionen +}); +~~~ + +### Konfigurationseigenschaften {#configuration-properties} + +Siehe die vollständige Liste der [Eigenschaften](api/api_overview.md#spreadsheet-properties), die Sie im Spreadsheet-Konfigurationsobjekt angeben können. + +Sie können Konfigurationsoptionen bei der Initialisierung als zweiten Parameter des Konstruktors festlegen: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/loading_data.md b/i18n/de/docusaurus-plugin-content-docs/current/loading_data.md new file mode 100644 index 00000000..ce2c0306 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/loading_data.md @@ -0,0 +1,355 @@ +--- +sidebar_label: Datenladen und -export +title: Daten laden +description: In dieser Dokumentation erfahren Sie, wie Sie Daten in der DHTMLX JavaScript Spreadsheet-Bibliothek laden. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Datenladen und -export {#data-loading-and-export} + +Sie können DHTMLX Spreadsheet mit einem vorbereiteten Datensatz befüllen, der sowohl Zelldaten als auch Stile enthalten kann. Die Komponente unterstützt zwei Möglichkeiten zum Laden von Daten: + +- Laden aus einer externen Datei +- Laden aus einer lokalen Quelle + +Die Komponente unterstützt auch den [Export von Daten in eine Excel-Datei](#exporting-data). + +## Daten vorbereiten {#preparing-data} + +DHTMLX Spreadsheet erwartet Daten im JSON-Format. + +Es kann ein einfaches Array mit Zell-Objekten sein. Verwenden Sie diese Methode, wenn Sie einen Datensatz für nur ein Tabellenblatt erstellen möchten. + +~~~jsx title="Daten für ein Tabellenblatt vorbereiten" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, format:"currency" }, + { cell: "D2", value: 430, format:"percent" }, + // "myFormat" ist die ID eines benutzerdefinierten Formats + { cell: "E2", value: 2872.4, format:"myFormat" }, + + // Dropdown-Listen zu Zellen hinzufügen + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // weitere Zell-Objekte +]; +~~~ + +Oder es kann ein Objekt mit Daten sein, die gleichzeitig in mehrere Tabellenblätter geladen werden. Zum Beispiel: + +~~~jsx title="Daten für mehrere Tabellenblätter vorbereiten" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // weitere Daten + ], + merged: [ + // Zellen A1 und B1 zusammenführen + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // Zellen A2, A3, A4 und A5 zusammenführen + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } }, + ] + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // weitere Daten + ] + }, + // weitere Tabellenblatt-Objekte + ] +}; +~~~ + +Die vollständigen Listen der verfügbaren Eigenschaften für diese beiden Methoden finden Sie in der [API-Referenz](api/spreadsheet_parse_method.md). + +:::tip +Die Möglichkeit, zusammengeführte Zellen zu laden, ist nur verfügbar, wenn Sie Daten in einem Tabellenblatt-Objekt vorbereiten. +::: + +### Stile für Zellen festlegen {#setting-styles-for-cells} + +Möglicherweise müssen Sie das Zell-Styling im Datensatz definieren. In diesem Fall sollte der Datensatz ein Objekt mit *separaten Eigenschaften* sein, die Datenobjekte und CSS-Klassen beschreiben, die auf bestimmte Zellen angewendet werden. + +Legen Sie eine CSS-Klasse für eine Zelle mit der `css`-Eigenschaft fest. + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430, css: "someclass" }, + { cell: "E2", value: 2872.4 } + ], +} +~~~ + +:::info +[Sehen Sie die Liste der Eigenschaften, die Sie für das Styling von Zellen verwenden können](api/spreadsheet_parse_method.md#list-of-properties) +::: + +### Gesperrten Zustand einer Zelle festlegen {#setting-the-locked-state-for-a-cell} + +Wenn Sie gesperrte Zellen in einem Datensatz angeben möchten, verwenden Sie die `locked`-Eigenschaft einer Zelle und setzen Sie sie auf `true`: + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country", locked: true }, // sperrt eine Zelle + { cell: "b1", value: "Product", locked: true }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + // weitere Zellen +]; +~~~ + +Die vollständige Liste der verfügbaren Zell-Eigenschaften finden Sie in der [API-Referenz](api/spreadsheet_parse_method.md#parameters). + +**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet) + +### Einen Link in eine Zelle einfügen {#adding-a-link-into-a-cell} + +Sie können einen Link für eine Zelle direkt im Datensatz angeben. Dazu setzen Sie die `link`-Eigenschaft als Objekt und geben die erforderlichen Einstellungen an: + +- `text` - (optional) der Text eines Links +- `href` - (erforderlich) die URL, die das Link-Ziel definiert + +So sieht es in einem Datensatz aus: + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country"}, // sperrt eine Zelle + { cell: "b1", value: "Product"}, + + { cell: "a2", value: "Ecuador"}, + { + cell: "b2", + value: "Banana", + link:{ + href:"http://localhost:8080/" + } + }, + // weitere Zellen +]; +~~~ + +:::note +Beachten Sie, dass Sie die `value`-Eigenschaft des `cell`-Objekts und die `text`-Eigenschaft des `link`-Objekts nicht gleichzeitig verwenden sollten, da sie sich gegenseitig ausschließen. +::: + +**Verwandtes Beispiel**: [Spreadsheet. Import und Export nach JSON](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) + +## Externes Datenladen {#external-data-loading} + +### JSON-Daten laden {#loading-json-data} + +Standardmäßig erwartet Spreadsheet Daten im JSON-Format. Um Daten aus einer externen Quelle zu laden, verwenden Sie die Methode [](api/spreadsheet_load_method.md). Sie nimmt die URL der Datei mit den Daten als Parameter entgegen: + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.json"); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Daten laden](https://snippet.dhtmlx.com/ih9zmc3e?tag=spreadsheet) + + +:::info +Wenn Sie es Benutzern ermöglichen möchten, eine JSON-Datei über den Datei-Explorer in das Spreadsheet zu importieren, lesen Sie [JSON-Dateien laden](api/spreadsheet_load_method.md#loading-json-files). +::: + +### CSV-Daten laden {#loading-csv-data} + +Sie können auch Daten im CSV-Format laden. Dazu müssen Sie die Methode [](api/spreadsheet_load_method.md) aufrufen und den Namen des Formats ("csv") als zweiten Parameter übergeben: + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.csv", "csv"); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. CSV laden](https://snippet.dhtmlx.com/1f87y71v?tag=spreadsheet) + +### Excel-Datei laden (.xlsx) {#loading-excel-file-xlsx} + +Sie können eine Datei im Excel-Format mit der Erweiterung `.xlsx` in ein Spreadsheet laden. In der Benutzeroberfläche gibt es entsprechende Steuerelemente in der Symbolleiste und im Menü: + +- Menü: Datei -> Importieren als..-> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet Dateimenü mit der Option "Importieren als" für Microsoft Excel XLSX-Dateien](/img/file_import.png) + +- Symbolleiste: Importieren -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet Symbolleiste mit der Importschaltfläche für Microsoft Excel XLSX-Dateien](/img/import_xlsx.png) + +#### So importieren Sie Daten {#how-to-import-data} + +{{note Beachten Sie, dass die Import-Funktion in Internet Explorer nicht funktioniert.}} + +DHTMLX Spreadsheet verwendet die WebAssembly-basierte Bibliothek [Excel2Json](https://github.com/dhtmlx/excel2json), um Daten aus Excel zu importieren. Um Excel-Daten in Spreadsheet zu laden, müssen Sie: + +- die Bibliothek **Excel2Json** installieren +- die Option [](api/spreadsheet_importmodulepath_config.md) in der Spreadsheet-Konfiguration angeben und den Pfad zur *worker.js*-Datei auf eine von zwei Arten festlegen: + - indem Sie einen lokalen Pfad zur Datei auf Ihrem Computer angeben, z. B.: `"../libs/excel2json/1.0/worker.js"` + - indem Sie einen Link zur Datei von CDN angeben: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + importModulePath: "../libs/excel2json/1.0/worker.js" +}); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierter Import-/Exportpfad](https://snippet.dhtmlx.com/wykwzfhm) + +Um Daten aus einer Excel-Datei zu laden, übergeben Sie einen String mit dem Erweiterungstyp ("xlsx") als zweiten Parameter der Methode [](api/spreadsheet_load_method.md): + +~~~jsx +// nur .xlsx +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +{{note Beachten Sie, dass die Komponente nur den Import aus Excel-Dateien mit der Erweiterung `.xlsx` unterstützt.}} + +**Verwandtes Beispiel**: [Spreadsheet. Xlsx importieren](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) + +Sie können bei Bedarf auch [Daten aus einem Spreadsheet in eine Excel-Datei exportieren](#exporting-data). + +### Nach dem Laden ausgeführten Code verarbeiten {#processing-after-loading-code} + +Die Komponente führt einen AJAX-Aufruf durch und erwartet, dass die Remote-URL gültige Daten liefert. Das Laden von Daten ist asynchron, daher müssen Sie jeden Code, der nach dem Laden ausgeführt werden soll, in ein Promise einschließen: + +~~~jsx +spreadsheet.load("/some/data").then(function(){ + // etwas tun +}); +~~~ + +## Laden aus einer lokalen Quelle {#loading-from-local-source} + +Um Daten aus einer lokalen Quelle zu laden, verwenden Sie die Methode [](api/spreadsheet_parse_method.md). Übergeben Sie einen [vorbereiteten Datensatz](#preparing-data) als Parameter dieser Methode: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.parse(data); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierte Zellenanzahl](https://snippet.dhtmlx.com/vc3mstsw) + +Einzelheiten zum Laden mehrerer Tabellenblätter in das Spreadsheet finden Sie im Artikel [Mit Tabellenblättern arbeiten](working_with_sheets.md#loading-multiple-sheets). + +## Zustand speichern und wiederherstellen {#saving-and-restoring-state} + +Um den aktuellen Zustand eines Spreadsheets zu speichern, verwenden Sie die Methode [](api/spreadsheet_serialize_method.md). Sie konvertiert Daten in ein Array von JSON-Objekten. Jedes JSON-Objekt enthält die Konfiguration einer Zelle. + +~~~jsx +// Zustand von spreadsheet1 speichern +var state = spreadsheet1.serialize(); +~~~ + +Anschließend können Sie die im gespeicherten Zustand-Array gespeicherten Daten in ein anderes Spreadsheet einlesen. Zum Beispiel: + +~~~jsx +// ein neues Spreadsheet erstellen +var spreadsheet2 = new dhx.Spreadsheet(document.body); +// den Zustand von spreadsheet1 in spreadsheet2 einlesen +spreadsheet2.parse(state); +~~~ + +## Daten exportieren {#exporting-data} + +### Export nach Excel {#export-into-excel} + +DHTMLX Spreadsheet kann Daten aus einem Spreadsheet in eine Excel-Datei exportieren. In der Benutzeroberfläche gibt es entsprechende Steuerelemente in der Symbolleiste und im Menü: + +- Menü: Datei -> Herunterladen als..-> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet Dateimenü mit der Option "Herunterladen als" für den Microsoft Excel XLSX-Export](/img/file_export.png) + +- Symbolleiste: Exportieren -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet Symbolleiste mit der Exportschaltfläche zum Speichern als Microsoft Excel XLSX](/img/export_xlsx.png) + +#### So exportieren Sie Daten {#how-to-export-data} + +:::note +Beachten Sie, dass die Export-Funktion in Internet Explorer nicht funktioniert. +::: + +Die Bibliothek verwendet die WebAssembly-basierte Bibliothek [Json2Excel](https://github.com/dhtmlx/json2excel), um Daten nach Excel zu exportieren. Der Export wird in der *worker.js*-Datei der Bibliothek **Json2Excel** verarbeitet (der Standard-Link ist `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). Sie können entweder den öffentlichen Export-Server oder einen lokalen Export-Server verwenden. Um Dateien zu exportieren, müssen Sie: + +- die Option [](api/spreadsheet_exportmodulepath_config.md) in der Spreadsheet-Konfiguration angeben und den Pfad zur *worker.js*-Datei festlegen: + - wenn Sie den öffentlichen Export-Server verwenden, müssen Sie den Link dazu nicht angeben, da er standardmäßig verwendet wird + - wenn Sie Ihren eigenen Export-Server verwenden, müssen Sie: + - die Bibliothek [**Json2Excel**](https://github.com/dhtmlx/json2excel) installieren + - `"../libs/json2excel/x.x/worker.js?vx"` für eine bestimmte Version verwenden (ersetzen Sie `x.x` durch die auf Ihrem Server bereitgestellte Version) + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // der Pfad zum Exportmodul, wenn ein lokaler Export-Server verwendet wird +}); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Benutzerdefinierter Import-/Exportpfad](https://snippet.dhtmlx.com/wykwzfhm) + +Sobald Sie die erforderlichen Quellen angepasst haben, können Sie die zugehörige API-Methode [](api/export_xlsx_method.md) des Export-Objekts verwenden, um die Daten der Komponente zu exportieren, wie folgt: + +~~~jsx +spreadsheet.export.xlsx(); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Xlsx exportieren](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +:::note +Bitte beachten Sie, dass die Komponente nur den Export in Excel-Dateien mit der Erweiterung `.xlsx` unterstützt. +::: + +#### So legen Sie einen benutzerdefinierten Namen für eine exportierte Datei fest {#how-to-set-a-custom-name-for-an-exported-file} + +Standardmäßig lautet der Name einer exportierten Datei "data". Sie können einen eigenen Namen für eine exportierte Datei angeben. Dazu müssen Sie einen benutzerdefinierten Namen als Parameter der Methode [](api/export_xlsx_method.md) übergeben: + +~~~jsx +spreadsheet.export.xlsx("MyData"); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Xlsx exportieren](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +Sehen Sie die Schritte zum [Importieren von Daten aus einer Excel-Datei in Spreadsheet](#loading-excel-file-xlsx). + +### Export nach JSON {#export-into-json} + +Ab v4.3 kann die Bibliothek auch Daten aus einem Spreadsheet in eine JSON-Datei exportieren. Verwenden Sie dazu die Methode [json()](api/export_json_method.md) des Export-Objekts: + +~~~jsx +spreadsheet.export.json(); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Export/Import JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/localization.md b/i18n/de/docusaurus-plugin-content-docs/current/localization.md new file mode 100644 index 00000000..980ddb54 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/localization.md @@ -0,0 +1,276 @@ +--- +sidebar_label: Lokalisierung +title: Lokalisierung +description: Sie können sich in der Dokumentation über die Lokalisierung der DHTMLX JavaScript Spreadsheet-Bibliothek informieren. Durchsuchen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Lokalisierung {#localization} + +Sie können die Beschriftungen in der DHTMLX Spreadsheet-Oberfläche lokalisieren und die Oberfläche in beliebiger Sprache darstellen. Stellen Sie dazu übersetzte Zeichenfolgen für die Beschriftungen bereit und wenden Sie Ihr Gebietsschema auf die Komponente an. + + + +## Standard-Gebietsschema {#default-locale} + +Standardmäßig wird das englische Gebietsschema verwendet: + +~~~jsx +const en = { + // Toolbar + undo: "Undo", + redo: "Redo", + + textColor: "Text color", + backgroundColor: "Background color", + + bold: "Bold", + italic: "Italic", + underline: "Underline", + strikethrough: "Strikethrough", + + link: "Link", + + halign: "Horizontal align", + valign: "Vertical align", + left: "Left", + right: "Right", + center: "Center", + top: "Top", + bottom: "Bottom", + multiline: "Text wrapping", + clip: "Clip", + wrap: "Wrap", + merge: "Merge", + unmerge: "Unmerge", + + lockCell: "Lock cell", + unlockCell: "Unlock cell", + + clear: "Clear", + clearValue: "Clear value", + clearStyles: "Clear styles", + clearAll: "Clear all", + + columns: "Columns", + rows: "Rows", + addColumn: "Add column left", + removeColumn: "Remove column {col}", + removeColumns: "Remove columns {col}", + fitToData: "Fit to data", + addRow: "Add row above", + removeRow: "Remove row {row}", + removeRows: "Remove rows {row}", + row: "row", + col: "col", + freeze: "Freeze", + freezeToCol: "Freeze up to column {col}", + freezeToRow: "Freeze up to row {row}", + unfreezeRows: "Unfreeze rows", + unfreezeCols: "Unfreeze columns", + hideCol: "Hide column {col}", + hideCols: "Hide columns {col}", + showCols: "Show columns", + hideRows: "Hide rows {row}", + hideRow: "Hide row {row}", + showRows: "Show rows", + + format: "Format", + common: "Common", + number: "Number", + currency: "Currency", + percent: "Percent", + text: "Text", + date: "Date", + time: "Time", + + filter: "Filter", + + help: "Help", + + custom: "Custom", + + border: "Border", + border_all: "All borders", + border_inner: "Inner borders", + border_horizontal: "Horizontal borders", + border_vertical: "Vertical borders", + border_outer: "Outer borders", + border_color: "Border color", + border_left: "Left border", + border_top: "Top border", + border_right: "Right border", + border_bottom: "Bottom border", + border_clear: "Clear borders", + border_style: "Border style", + + // Tabbar + deleteSheet: "Delete", + renameSheet: "Rename", + renameSheetAlert: "A sheet with the name $name already exists. Please enter another name. ", + + // Menu + file: "File", + import: "Import", + export: "Export", + downloadAs: "Download as...", + importAs: "Import as...", + + data: "Data", + validation: "Data validation", + search: "Search", + sort: "Sort", + ascSort: "Sort A to Z", + descSort: "Sort Z to A", + + //Actions + copy: "Copy", + edit: "Edit", + insert: "Insert", + remove: "Remove", + linkCopied: "Link copied to clipboard", + + + //filter + e: "Is empty", + ne: "Is not empty", + tc: "Text contains", + tdc: "Text doesn't contain", + ts: "Text starts with", + te: "Text ends with", + tex: "Text is exactly", + d: "Date is", + db: "Date is before", + da: "Date is after", + gt: "Greater than", + geq: "Greater or equal to", + lt: "Less than", + leq: "Less or equal to", + eq: "Is equal to", + neq: "Is not equal to", + ib: "Is between", + inb: "Is not between", + + none: "None", + value: "Value", + values: "By values", + condition: "By condition", + and: "And", + + blank: "(Blank)", + + // Buttons + cancel: "Cancel", + save: "Save", + removeValidation: "Remove validation", + selectAll: "Select all", + unselectAll: "Unselect all", + apply: "Apply", + ok: "Ok", + + // Messages + alertTitle: "There was a problem!", + mergeAlertMessage: "You can't $action a range containing merges!", + spanMergeAlert: "You can't merge frozen and non-frozen cells!", + dontShowAgain: "Don't show again", + spanPasteError: "You can't paste merges that cross the boundary of a frozen region", + spanMergeLockedError: "You can't merge locked cells!", + spanUnmergeLockedError: "You can't unmerge locked cells!", + spanOverFilteredRow: "You can't merge cells over a filtered row.", + removeAlert: "You can't remove last $name!", +}; +~~~ + +## Benutzerdefiniertes Gebietsschema {#custom-locale} + +Um ein anderes Gebietsschema anzuwenden, müssen Sie: + +- Übersetzungen für alle Textbeschriftungen in Spreadsheet bereitstellen, beispielsweise für das russische Gebietsschema: + +~~~jsx +const ru = { + // language settings +}; +~~~ + +- das neue Gebietsschema anwenden, indem Sie die Methode `dhx.i18n.setLocale()` vor der Initialisierung von Spreadsheet aufrufen: + +~~~jsx +dhx.i18n.setLocale("spreadsheet", ru); +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); +~~~ + +## Standard-Gebietsschema für Formeln {#default-locale-for-formulas} + +Das Objekt `dhx.i18n.formulas` enthält das i18n-Gebietsschema für das Spreadsheet-Formel-Popup. Das Standard-Gebietsschema für Formeln sieht wie folgt aus: + +~~~jsx +const en = { + SUM: [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + AVERAGE: [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + // more formulas' descriptions +}; +~~~ + +[Vollständiges Standard-Gebietsschema für Formeln ansehen](formulas_locale.md). + +**Verwandtes Beispiel**: [Spreadsheet. Lokalisierung](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) + +## Benutzerdefiniertes Gebietsschema für Formeln {#custom-locale-for-formulas} + +Um ein benutzerdefiniertes Gebietsschema für Spreadsheet-Formeln anzuwenden, müssen Sie die Methode `dhx.i18n.setLocale()` auf folgende Weise verwenden: + +~~~jsx +dhx.i18n.setLocale( + "formulas", + locale: { + // the structure of the formulas in the locale + name: [param: string, description: string][] + } +): void; +~~~ + +Sie müssen der Methode die folgenden Parameter übergeben: + + + + + + + + + + + + + + + + +
ParameterBeschreibung
"formulas"(*erforderlich*) der Name des Gebietsschemas für Formeln
locale(*erforderlich*) das Gebietsschema-Objekt, das die Beschreibungen der Formeln als key:value-Paare enthält, wobei:
  • der Schlüssel der Name der Funktion ist
  • der Wert ein Array der Parameter ist, die die Funktion entgegennimmt. Jeder Parameter der Funktion ist ein Array aus zwei Elementen, wobei:
    • das erste Element der Name des Parameters ist
    • das zweite Element die Beschreibung des Parameters ist
+ +Sehen Sie sich das folgende Beispiel an: + +~~~jsx +const de = { + AVERAGE: [ + ["Zahl1", "Erforderlich. Eine Zahl oder Zellreferenz, die sich auf numerische Werte bezieht."], + ["Zahl2", "Optional. Eine Zahl oder Zellreferenz, die auf numerische Werte verweist."] + ], + // other formulas' descriptions +}; + +dhx.i18n.setLocale("formulas", de); +~~~ + +## Beispiel {#example} + +In diesem Snippet sehen Sie, wie Sie zwischen Gebietsschemas wechseln können: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/merge_cells.md b/i18n/de/docusaurus-plugin-content-docs/current/merge_cells.md new file mode 100644 index 00000000..d251c8a0 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/merge_cells.md @@ -0,0 +1,47 @@ +--- +sidebar_label: Zellen zusammenführen +title: Zellen zusammenführen +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie Zellen zusammenführen. Lesen Sie Entwicklerhandbücher und API-Referenzen, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Zellen zusammenführen {#merging-cells} + +## Zellen zusammenführen {#merge-cells} + +Gehen Sie wie folgt vor, um Zellen zusammenzuführen: + +1\. Wählen Sie einen Zellbereich aus, den Sie zusammenführen möchten + +2\. Klicken Sie in der Symbolleiste auf die Schaltfläche **Merge** + +![DHTMLX Spreadsheet-Symbolleiste mit der Schaltfläche „Merge" zum Zusammenführen eines Zellbereichs](/img/merge_cells.png) + +oder + +1\. Wählen Sie einen Zellbereich aus, den Sie zusammenführen möchten + +2\. Navigieren Sie zu: *Format -> Merge* im Menü + +![DHTMLX Spreadsheet-Menü „Format" mit der Option „Merge" zum Zusammenführen von Zellen](/img/merge_cells_via_menu.png) + +:::info +Die zusammengeführte Zelle zeigt den Inhalt der oberen linken Zelle des ausgewählten Bereichs an. +::: + +## Zellen aufteilen {#split-cells} + +Gehen Sie wie folgt vor, um eine zusammengeführte Zelle aufzuteilen: + +1\. Wählen Sie die zusammengeführte Zelle aus + +2\. Klicken Sie in der Symbolleiste auf die Schaltfläche **Unmerge** + +![DHTMLX Spreadsheet-Symbolleiste mit der Schaltfläche „Unmerge" zum Aufteilen zusammengeführter Zellen](/img/unmerge_cells.png) + +oder + +1\. Wählen Sie die zusammengeführte Zelle aus + +2\. Navigieren Sie zu: *Format -> Unmerge* im Menü + +![DHTMLX Spreadsheet-Menü „Format" mit der Option „Unmerge" zum Aufteilen zusammengeführter Zellen](/img/unmerge_cells_via_menu.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/migration.md b/i18n/de/docusaurus-plugin-content-docs/current/migration.md new file mode 100644 index 00000000..923aecb3 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/migration.md @@ -0,0 +1,335 @@ +--- +sidebar_label: Migration zu neueren Versionen +title: Migration +description: Sie finden Informationen zur Migration in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Migration zu neueren Versionen {#migration-to-newer-versions} + +## 5.2 -> 6.0 {#52---60} + +### Veraltete Eigenschaften {#deprecated-properties} + +Die folgenden Eigenschaften von `ISpreadsheetConfig` sind veraltet und wurden entfernt. Lesen Sie die aktuelle Verwendung unten: + +- `dateFormat` Konfigurationseigenschaft. Legen Sie diese im Konfigurationsobjekt [`localization`](api/spreadsheet_localization_config.md) fest als: + - `{ localization: { dateFormat: "%d/%m/%Y" } }` +- `timeFormat` Konfigurationseigenschaft. Legen Sie diese im Konfigurationsobjekt [`localization`](api/spreadsheet_localization_config.md) fest als: + - `{ localization: { timeFormat: 12 } }` + +### Veraltete Methoden {#deprecated-methods} + +Die folgenden Methoden der `ISpreadsheet`-Instanz sind veraltet und wurden entfernt. + +Verwenden Sie stattdessen das neue [`sheets`-Modul (Sheet Manager) API](api/overview/sheetmanager_overview.md): + +
+ +| Veraltete Methode | Signatur | Neue Verwendung | Neue Signatur | +| --- | --- | --- | --- | +| `clearSheet(id?)` | `(id?: string) => void` | [`sheets.clear(id?)`](api/sheetmanager_clear_method.md) | `(id?: Id) => void` | +| `removeSheet(id)` | `(id: string) => void` | [`sheets.remove(id)`](api/sheetmanager_remove_method.md) | `(id: Id) => void` | +| `addSheet(name?)` | `(name?: string) => string` | [`sheets.add(name?)`](api/sheetmanager_add_method.md) | `(name?: string) => Id` | +| `getSheets()` | `() => ISheet[]` | [`sheets.getAll()`](api/sheetmanager_getall_method.md) | `() => ISheet[]` | +| `getActiveSheet()` | `() => ISheet` | [`sheets.getActive()`](api/sheetmanager_getactive_method.md) | `() => ISheet` | +| `setActiveSheet(id)` | `(id: Id) => void` | [`sheets.setActive(id)`](api/sheetmanager_setactive_method.md) | `(id: Id) => void` | + +
+ +### Veraltete Events {#deprecated-events} + +Die folgenden Events sind veraltet und wurden entfernt. Verwenden Sie stattdessen das generische Event-Paar [`beforeAction`](api/spreadsheet_beforeaction_event.md) / [`afterAction`](api/spreadsheet_afteraction_event.md). + +
+ +| Veraltetes Event | Callback-Signatur | Neue Verwendung | +| --- | --- | --- | +| `beforeValueChange` | `(cell: string, value: string) => void \| boolean` | `beforeAction` mit Action `"setCellValue"` | +| `afterValueChange` | `(cell: string, value: string) => void` | `afterAction` mit Action `"setCellValue"` | +| `beforeStyleChange` | `(cell: string, style: ...) => void \| boolean` | `beforeAction` mit Action `"setCellStyle"` | +| `afterStyleChange` | `(cell: string, style: ...) => void` | `afterAction` mit Action `"setCellStyle"` | +| `beforeFormatChange` | `(cell: string, format: string) => void \| boolean` | `beforeAction` mit Action `"setCellFormat"` | +| `afterFormatChange` | `(cell: string, format: string) => void` | `afterAction` mit Action `"setCellFormat"` | +| `beforeRowAdd` | `(cell: string) => void \| boolean` | `beforeAction` mit Action `"addRow"` | +| `afterRowAdd` | `(cell: string) => void` | `afterAction` mit Action `"addRow"` | +| `beforeRowDelete` | `(cell: string) => void \| boolean` | `beforeAction` mit Action `"deleteRow"` | +| `afterRowDelete` | `(cell: string) => void` | `afterAction` mit Action `"deleteRow"` | +| `beforeColumnAdd` | `(cell: string) => void \| boolean` | `beforeAction` mit Action `"addColumn"` | +| `afterColumnAdd` | `(cell: string) => void` | `afterAction` mit Action `"addColumn"` | +| `beforeColumnDelete` | `(cell: string) => void \| boolean` | `beforeAction` mit Action `"deleteColumn"` | +| `afterColumnDelete` | `(cell: string) => void` | `afterAction` mit Action `"deleteColumn"` | +| `beforeSheetAdd` | `(name: string) => void \| boolean` | `beforeAction` mit Action `"addSheet"` | +| `afterSheetAdd` | `(sheet: ISheet) => void` | `afterAction` mit Action `"addSheet"` | +| `beforeSheetRemove` | `(sheet: ISheet) => void \| boolean` | `beforeAction` mit Action `"deleteSheet"` | +| `afterSheetRemove` | `(sheet: ISheet) => void` | `afterAction` mit Action `"deleteSheet"` | +| `beforeSheetRename` | `(sheet: ISheet, value: string) => void \| boolean` | `beforeAction` mit Action `"renameSheet"` | +| `afterSheetRename` | `(sheet: ISheet) => void` | `afterAction` mit Action `"renameSheet"` | +| `beforeSheetClear` | `(sheet: ISheet) => void \| boolean` | `beforeAction` mit Action `"clearSheet"` | +| `afterSheetClear` | `() => void` | `afterAction` mit Action `"clearSheet"` | + +
+ +## 5.1 -> 5.2 {#51---52} + +### Einfrieren/Auftauen von Spalten und Zeilen {#freezingunfreezing-functionality} + +In v5.2 wurde die Art und Weise, wie Spalten und Zeilen eingefroren/aufgetaut werden, geandert: + +- die Konfigurationseigenschaften `leftSplit` und `topSplit`, die zum Fixieren von Spalten und Zeilen verwendet wurden, sind veraltet und wurden entfernt + +~~~jsx title="Vor v5.2" +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + topSplit: 1, // die Anzahl der einzufrierende Zeilen + leftSplit: 1 // die Anzahl der einzufrierende Spalten +}); +~~~ + +- neue API-Methoden wurden eingefuhrt: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +~~~jsx title="Ab v5.2" +// fur Zeilen +spreadsheet.freezeRows("B2"); // die Zeilen bis zur zweiten Zeile werden fixiert +spreadsheet.freezeRows("sheet2!B2"); // die Zeilen bis zur zweiten Zeile in "sheet2" werden fixiert +spreadsheet.unfreezeRows(); // fixierte Zeilen im aktuellen Sheet werden aufgetaut +spreadsheet.unfreezeRows("sheet2!A1"); // fixierte Zeilen in "sheet2" werden aufgetaut + +// fur Spalten +spreadsheet.freezeCols("B2"); // die Spalten bis zur Spalte "B" werden fixiert +spreadsheet.freezeCols("sheet2!B2"); // die Spalten bis zur Spalte "B" in "sheet2" werden fixiert +spreadsheet.unfreezeCols(); // fixierte Spalten im aktuellen Sheet werden aufgetaut +spreadsheet.unfreezeCols("sheet2!A1"); // fixierte Spalten in "sheet2" werden aufgetaut +~~~ + +- neue Action wurde hinzugefugt: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + +~~~jsx title="Ab v5.2" +// Verwendung der `toggleFreeze`-Action mit den beforeAction/afterAction-Events +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); +~~~ + +- neue `freeze`-Eigenschaft fur das *sheets*-Objekt der Methode [`parse()`](api/spreadsheet_parse_method.md) wurde hinzugefugt. Sie ermoglicht das Fixieren von Zeilen und Spalten fur bestimmte Sheets im Datensatz beim Einlesen von Daten in Spreadsheet: + +~~~jsx {10-13} title="Ab v5.2" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // weitere "sheet_1"-Einstellungen + }, + // weitere Sheet-Konfigurationsobjekte + ] +}; + +spreadsheet.parse(data); +~~~ + +## 4.3 -> 5.0 {#43---50} + +In v5.0 wurde die Option `"help"` der Eigenschaft [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) in `"helpers"` umbenannt. Ausserdem enthalt der Standardsatz von Optionen nun die neue Option `"actions"`. + +~~~jsx title="Vor v5.0" {8} +// Standardkonfiguration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "help" +] +~~~ + +~~~jsx title="Ab v5.0" {8,9} +// Standardkonfiguration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "actions", + "helpers" +] +~~~ + + +## 4.2 -> 4.3 {#42---43} + +:::info +Version 4.3 ist die letzte Version mit IE-Unterstutzung +::: + +Version 4.3 fuhrt einen neuen Ansatz zum Nachverfolgen und Behandeln von Actions ein, die beim Andern von Daten in der Tabelle ausgefuhrt werden. + +Die neuen Events [`beforeAction`](api/spreadsheet_beforeaction_event.md) und [`afterAction`](api/spreadsheet_afteraction_event.md) werden unmittelbar vor bzw. nach der Ausfuhrung einer Action ausgelost und geben an, welche Action ausgefuhrt wurde. Dieser Ansatz ermoglicht es Ihnen, mit nur diesen zwei Events die notige Logik fur mehrere Actions gleichzeitig hinzuzufugen. Zum Beispiel: + +~~~jsx +spreadsheet.events.on("BeforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return true; + } + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + ... +}); + +spreadsheet.events.on("AfterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config) + } + if (actionName === "addColumn") { + console.log(actionName, config); + }, + ... +}); +~~~ + +Dieser Ansatz reduziert den Umfang Ihres Codes, da Sie nicht mehr fur jede einzelne Action Sets von gepaarten [**before-** und **after-**](api/overview/events_overview.md) Events hinzufugen mussen. + +Der alte Ansatz funktioniert nach wie vor wie zuvor. Weitere Details finden Sie unter [Spreadsheet-Actions](api/overview/actions_overview.md). + +:::info +Derzeit gibt es eine Reihe von Events, die auf die alte Weise verwendet werden mussen, da sie nicht durch Actions ersetzt werden konnen: *beforeEditEnd, afterEditEnd, beforeEditStart, afterEditStart, beforeFocusSet, afterFocusSet, beforeSheetChange, afterSheetChange, groupFill*. +::: + +## 4.1 -> 4.2 {#41---42} + +In v4.2 wurde der [Ausrichten](customization.md#default-controls)-Block der Spreadsheet-Toolbar in zwei Unterblocks aufgeteilt: Horizontales Ausrichten und Vertikales Ausrichten. Dadurch wurde die Liste der IDs der Standard-Controls des Ausrichten-Blocks geandert und erweitert: + +`Vor v4.2`: + +Der **Ausrichten**-Block: + +- die Schaltflache *Linksbundig* (id: "align-left") +- die Schaltflache *Zentrieren* (id: "align-center") +- die Schaltflache *Rechtsbundig* (id: "align-right") + +`Ab v4.2`: + +Der Unterblock **Horizontales Ausrichten** des **Ausrichten**-Blocks: + +- die Schaltflache *Links* (id: "halign-left") +- die Schaltflache *Mitte* (id: "halign-center") +- die Schaltflache *Rechts* (id: "halign-right") + +Der Unterblock **Vertikales Ausrichten** des **Ausrichten**-Blocks: + +- die Schaltflache *Oben* (id: "valign-top") +- die Schaltflache *Mitte* (id: "valign-center") +- die Schaltflache *Unten* (id: "valign-bottom") + +### Lokalisierung {#localization} + +Beachten Sie, dass die [Lokalisierungsoptionen](localization.md) fur den **Ausrichten**-Block ebenfalls aktualisiert wurden: + +`Vor v4.2`: + +~~~jsx +const locale = { + align: "Align", + ... +} +~~~ + +`Ab v4.2`: + +~~~jsx +const locale = { + halign: "Horizontal align", + valign: "Vertical align", + ... +} +~~~ + +## 2.1 -> 3.0 {#21---30} + +Diese Liste von Anderungen hilft Ihnen bei der Migration von Version 2.1, in der DHTMLX Spreadsheet PHP-basiert war, zur vollstandig neu entwickelten Version 3.0, die vollstandig in JavaScript aufgebaut ist. Lesen Sie die folgende Liste, um alle Anderungen zu erfahren. + +:::info +Die **API von Version 2.1** ist weiterhin verfugbar, ist jedoch nicht kompatibel mit der [**API ab Version 3.0**](api/api_overview.md). Falls Sie die Dokumentation fur Version 2.1 benotigen, [kontaktieren Sie uns](https://dhtmlx.com/docs/contact.shtml) bitte, und wir senden sie Ihnen zu. +::: + +### Geanderte API {#changed-api} + +- getStyle -> [spreadsheet.getStyle](api/spreadsheet_getstyle_method.md) - gibt die auf eine oder mehrere Zellen angewendeten Styles zuruck +- getValue -> [spreadsheet.getValue](api/spreadsheet_getvalue_method.md) - gibt ein Objekt mit dem Wert oder den Werten einer oder mehrerer Zellen zuruck +- setStyle -> [spreadsheet.setStyle](api/spreadsheet_setstyle_method.md) - legt den Style fur eine Zelle oder einen Zellbereich fest +- setValue -> [spreadsheet.setValue](api/spreadsheet_setvalue_method.md) - legt den Wert fur eine Zelle oder einen Zellbereich fest +- lock -> [spreadsheet.lock](api/spreadsheet_lock_method.md) - sperrt eine Zelle oder einen Zellbereich +- unlock -> [spreadsheet.unlock](api/spreadsheet_unlock_method.md) - entsperrt eine gesperrte Zelle oder einen gesperrten Zellbereich + +### Entfernte API {#removed-api} + +#### Spreadsheet-Klasse {#spreadsheet-class} + +- getCell +- getCells +- isCell +- setSheetId + +#### SpreadsheetCell {#spreadsheetcell} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/number_formatting.md b/i18n/de/docusaurus-plugin-content-docs/current/number_formatting.md new file mode 100644 index 00000000..445f5a6a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/number_formatting.md @@ -0,0 +1,204 @@ +--- +sidebar_label: Zahlenformatierung +title: Zahlenformatierung +description: Sie können den Entwicklerleitfaden zur Zahlenformatierung in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek lesen. Durchsuchen Sie Entwicklerleitfäden und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Zahlenformatierung {#number-formatting} + +DHTMLX Spreadsheet unterstützt die Zahlenformatierung, die Sie auf numerische Werte in Zellen anwenden können. + +![DHTMLX Spreadsheet Zahlenformat-Dropdown mit den Optionen "Common", "Number", "Currency", "Percent", "Date", "Time" und "Text"](/img/number_format_options.png) + +:::note +Der [Benutzerleitfaden](number_formatting_guide.md) erleichtert Ihren Benutzern die Arbeit mit Spreadsheet. +::: + +## Standardzahlenformate {#default-number-formats} + +Ein Zahlenformat ist ein Objekt, das eine Reihe von Eigenschaften enthält: + +- `id` - die ID eines Formats, das verwendet wird, um ein Format für eine Zelle mit der [`setFormat()`](api/spreadsheet_setformat_method.md)-Methode festzulegen +- `mask` - eine Maske für ein Zahlenformat. Sehen Sie sich die Liste der in einer Maske verfügbaren Zeichen [unten](#the-structure-of-a-mask) an +- `name` - der Name eines Formats, der in den Dropdown-Listen der Symbolleiste und des Menüs angezeigt wird +- `example` - ein Beispiel, das zeigt, wie eine formatierte Zahl aussieht. Die Zahl 2702.31 wird als Standardwert für Formatbeispiele verwendet + +Die Standard-Zahlenformate sind die folgenden: + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // abhängig von der localization.timeFormat-Konfiguration + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" }, + { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" } +]; +~~~ + +So sieht eine Tabelle mit Daten in verschiedenen Zahlenformaten aus: + + + +## Datumsformat {#date-format} + +Sie können das Format für Datumsangaben, die in der Tabelle angezeigt werden, mit der Option `dateFormat` der Eigenschaft [`localization`](api/spreadsheet_localization_config.md) definieren. Das Standardformat ist "%d/%m/%Y". + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + dateFormat: "%D/%M/%Y", + } +}); + +spreadsheet.parse({ + styles: { + // eine Reihe von Stilen + }, + data: [ + {cell: "B1", value: "03/10/2022", format: "date"}, + {cell: "B2", value: new Date(), format: "date"}, + ] +}); +~~~ + +Sehen Sie sich die [vollständige Liste der verfügbaren Zeichen für die Erstellung von Formaten](api/spreadsheet_localization_config.md#characters-for-setting-date-format) an. + +## Zeitformat {#time-format} + +Um das Format festzulegen, in dem die Uhrzeit in den Tabellenzellen angezeigt werden soll, verwenden Sie die Option `timeFormat` der Eigenschaft [`localization`](api/spreadsheet_localization_config.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + timeFormat: 24, + } +}); + +spreadsheet.parse({ + styles: { + // eine Reihe von Stilen + }, + data: [ + { cell: "A1", value: "18:30", format: "time" }, + { cell: "A2", value: 44550.5625, format: "time" }, + { cell: "A3", value: new Date(), format: "time" }, + ] +}); +~~~ + +## Lokalisierung von Zahlen, Datum, Uhrzeit und Währung {#number-date-time-currency-localization} + +Mit den Konfigurationsoptionen von Spreadsheet können Sie Uhrzeit und Datum lokalisieren, das gewünschte Währungszeichen angeben sowie die gewünschten Dezimal- und Tausendertrennzeichen festlegen. Alle diese Einstellungen sind in der Eigenschaft [`localization`](api/spreadsheet_localization_config.md) verfügbar. Es handelt sich um ein Objekt mit den folgenden Eigenschaften: + +- `decimal` - (optional) das Symbol, das als Dezimaltrennzeichen verwendet wird, standardmäßig `"."` (ein Punkt)
Mögliche Werte sind `"." | ","` +- `thousands` - (optional) das Symbol, das als Tausendertrennzeichen verwendet wird, standardmäßig `","` (ein Komma)
Mögliche Werte sind `"." | "," | " " | ""` +- `currency` - (optional) das Währungszeichen, standardmäßig `"$"` +- `dateFormat` - (optional) das Format der Datumsanzeige als Zeichenkette, standardmäßig `"%d/%m/%Y"`. Details finden Sie auf der API-Seite zu [`localization`](api/spreadsheet_localization_config.md) +- `timeFormat` - (optional) das Format der Zeitanzeige als `12` oder `24`, standardmäßig `12` + +Sie können beispielsweise die Standard-Lokalisierungseinstellungen wie folgt ändern: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +Hier ist das Ergebnis der Konfiguration des `localization`-Objekts für Spreadsheet: + + + +## Wissenschaftliches Zahlenformat {#scientific-number-format} + +Die wissenschaftliche (exponentielle) Schreibweise ist als Standardformat verfügbar und eignet sich gut zur kompakten Darstellung sehr großer oder sehr kleiner Zahlen. Das eingebaute Format `"scientific"` verwendet die Maske `0.00E+00`, die beispielsweise 1500.31 als `1.50E+03` darstellt. + +Um es auf eine Zelle anzuwenden, verwenden Sie die Methode [`setFormat()`](api/spreadsheet_setformat_method.md): + +~~~jsx +spreadsheet.setFormat("A1", "scientific"); +~~~ + +Sie können auch ein benutzerdefiniertes wissenschaftliches Format mit einer anderen Maske über die Konfigurationsoption [`formats`](api/spreadsheet_formats_config.md) definieren. Beispielsweise erzeugt `0.###E+0` eine kompaktere Ausgabe: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + formats: [ + { id: "scientific_compact", mask: "0.###E+0", name: "Scientific (compact)", example: "1.5E+3" } + ] +}); +~~~ + +## Formate anpassen {#formats-customization} + +Sie sind nicht auf die [Standard-Zahlenformate](#default-number-formats) beschränkt. Sie können Formate auf zwei Arten anpassen: + +- Ändern der Einstellungen der Standard-Zahlenformate +- Hinzufügen benutzerdefinierter Zahlenformate zur Tabelle + + + +Alle diese Änderungen können Sie mit der Konfigurationsoption [`formats`](api/spreadsheet_formats_config.md) vornehmen. Es handelt sich um ein Array von Format-Objekten, von denen jedes eine Reihe von Eigenschaften enthält: + +- `id` - (*string*) obligatorisch, die ID eines Formats, das verwendet wird, um ein Format für eine Zelle mit der [`setFormat()`](api/spreadsheet_setformat_method.md)-Methode festzulegen +- `mask` - (*string*) obligatorisch, eine Maske für ein Zahlenformat. Sehen Sie sich die Liste der in einer Maske verfügbaren Zeichen [unten](#the-structure-of-a-mask) an +- `name` - (*string*) optional, der Name eines Formats, der in den Dropdown-Listen der Symbolleiste und des Menüs angezeigt wird +- `example` - (*string*) optional, ein Beispiel, das zeigt, wie eine formatierte Zahl aussieht + +### Die Struktur einer Maske {#the-structure-of-a-mask} + +Eine Maske kann eine Reihe allgemeiner Syntaxzeichen enthalten, darunter Ziffernplatzhalter, Trennzeichen, Prozent- und Währungszeichen sowie gültige Zeichen: + +- **0** - eine Ziffer in der Zahl. Wird verwendet, um nicht signifikante Nullen anzuzeigen, wenn eine Zahl weniger Stellen hat als Nullen im Format vorhanden sind. Um beispielsweise 2 als 2.0 anzuzeigen, verwenden Sie das Format 0.0. +- **#** - eine Ziffer in der Zahl. Wird verwendet, um nur signifikante Zahlen anzuzeigen (nicht signifikante Nullen werden weggelassen, wenn eine Zahl weniger Stellen hat als #-Symbole im Format vorhanden sind). +- **$** - formatiert Zahlen als Dollarbetrag. Um ein anderes Währungszeichen zu verwenden, müssen Sie es in einer Maske als **[$ ihr_währungszeichen]**#,##0.00 definieren, zum Beispiel [$ €]#,##0.00. +{{note Beachten Sie, dass alle Zeichen zwischen [$ und ] als Währungszeichen interpretiert werden.}} +- **.(Punkt)** - wendet ein Dezimaltrennzeichen auf Zahlen an. +- **,(Komma)** - wendet ein Tausendertrennzeichen auf Zahlen an. +- **[Zeichen zur Festlegung eines Datumsformats](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/)** - werden verwendet, um eine Maske für Datum und Uhrzeit zu erstellen. Um beispielsweise 27.09.2023 als 27, Sep 2023 anzuzeigen, verwenden Sie das Format "%d, %M %Y". +- **E+ / E-** - formatiert Zahlen in wissenschaftlicher (exponentieller) Schreibweise. Die Ziffern nach `E` legen die Mindestanzahl der Exponentenstellen fest. `E+` zeigt das Exponentenzeichen immer an; `E-` zeigt es nur bei negativen Exponenten. Die Maske `0.00E+00` zeigt beispielsweise 1500.31 als `1.50E+03` an. + +## Format festlegen {#setting-format} + +Um das gewünschte Format auf einen numerischen Wert anzuwenden, verwenden Sie die Methode [`setFormat()`](api/spreadsheet_setformat_method.md). Sie akzeptiert zwei Parameter: + +- `cell` - (*string*) die ID der Zelle, deren Wert formatiert werden soll +- `format` - (*string*) der Name des [Standard-Zahlenformats](#default-number-formats), das auf den Zellwert angewendet werden soll + +Zum Beispiel: + +~~~jsx +// wendet das Prozentformat auf Zelle A1 an +spreadsheet.setFormat("A1","percent"); +~~~ + +## Format abrufen {#getting-format} + +Sie können das auf den Wert einer Zelle angewendete Zahlenformat mit der Methode [`getFormat()`](api/spreadsheet_getformat_method.md) abrufen. Die Methode akzeptiert die ID einer Zelle als Parameter. + +~~~jsx +var format = spreadsheet.getFormat("A1"); +// ->"percent" +~~~ + +## Events {#events} + +Sie können ein Paar von Events verwenden, um Änderungen am Zellformat zu steuern: + +- [`beforeAction`](api/spreadsheet_beforeaction_event.md) - wird ausgelöst, bevor die Aktion `setCellFormat` ausgeführt wird +- [`afterAction`](api/spreadsheet_afteraction_event.md) - wird ausgelöst, nachdem die Aktion `setCellFormat` ausgeführt wurde diff --git a/i18n/de/docusaurus-plugin-content-docs/current/number_formatting_guide.md b/i18n/de/docusaurus-plugin-content-docs/current/number_formatting_guide.md new file mode 100644 index 00000000..4b383e07 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/number_formatting_guide.md @@ -0,0 +1,61 @@ +--- +sidebar_label: Zahlenformatierung +title: Leitfaden zur Zahlenformatierung +description: Sie können den Benutzerhandbuch zur Zahlenformatierung in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek nachlesen. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Zahlenformatierung {#number-formatting} + +## Unterstützte Zahlenformate {#supported-number-formats} + +Sie können mehrere Zahlenformate auf Zellwerte anwenden: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommonZahlen werden so angezeigt, wie sie sind, ohne angewandte Formatierung
NumberZahlen werden mit Zehnern, Hunderten und Tausendern angezeigt, die durch festgelegte Trennzeichen getrennt sind
CurrencyZahlen werden mit dem Währungszeichen ($) angezeigt
PercentZahlen werden mit dem Prozentzeichen (%) angezeigt
DateZahlen werden als Datumsangaben im angegebenen Format angezeigt
TimeZahlen werden als Uhrzeiten im 12- oder 24-Stunden-Format angezeigt
TextZahlen werden als Text und genau so angezeigt, wie Sie sie eingeben
ScientificZahlen werden in Exponentialschreibweise angezeigt (zum Beispiel 1.50E+03 für 1500.31); nützlich für sehr große oder sehr kleine Zahlen
+ +## Format festlegen {#how-to-set-format} + +Führen Sie die folgenden Schritte aus, um ein bestimmtes Zahlenformat auf Spreadsheet-Daten über die Symbolleiste anzuwenden: + +- Wählen Sie eine Zelle oder mehrere Zellen aus, die Sie formatieren möchten. +- Klicken Sie auf die Schaltfläche **Zahlenformat**: + +![DHTMLX Spreadsheet toolbar with the Number format button for applying numeric formatting](/img/number_format_button.png) + +- Wählen Sie das gewünschte Format aus den vorgeschlagenen Optionen aus: + +![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/events.md b/i18n/de/docusaurus-plugin-content-docs/current/react/events.md new file mode 100644 index 00000000..af6fdb4e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/events.md @@ -0,0 +1,219 @@ +--- +sidebar_label: Events +title: Events-Referenz +description: "Event-Callback-Props für ReactSpreadsheet: Aktionen, Auswahl, Bearbeitung, Tabellenblätter und abgeleiteter Zustand." +--- + +# Events-Referenz {#events-reference} + +Alle Event-Callbacks sind optionale Props. "Before"-Callbacks können `false` zurückgeben, um die Operation abzubrechen. + +:::note +Der React-Wrapper verwendet `onCamelCase`-Prop-Namen (z. B. `onAfterAction`), während die JS Spreadsheet-API `camelCase`-Eventnamen auf dem Event-Bus verwendet (z. B. `afterAction`). Weitere Informationen zur imperativen API finden Sie in der [JS-API Events-Referenz](api/overview/events_overview.md). +::: + +## Aktions-Events {#action-events} + +Werden bei jeder Benutzeraktion ausgelöst, z. B. bei Zellenbearbeitung, Formatierung oder strukturellen Änderungen. + +| Prop | Abbrechbar | Beschreibung | +|------|:-----------:|-------------| +| `onBeforeAction` | Ja | Wird ausgelöst, bevor eine Benutzeraktion ausgeführt wird. Gibt `false` zurück, um abzubrechen. Handler: [`BeforeActionHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeAction`](api/spreadsheet_beforeaction_event.md). | +| `onAfterAction` | Nein | Wird ausgelöst, nachdem eine Benutzeraktion abgeschlossen ist. Handler: [`AfterActionHandler`](react/types.md#handler-type-aliases). JS-API: [`afterAction`](api/spreadsheet_afteraction_event.md). | + +**Beispiel: Zeilenlöschung blockieren** + +~~~tsx +import { Actions } from "@dhtmlx/trial-react-spreadsheet"; + + { + if (action === Actions.deleteRow) return false; + }} +/> +~~~ + +**Beispiel: Alle Benutzeraktionen protokollieren** + +~~~tsx + { + console.log("Action:", action, "Cell:", config.cell); + }} +/> +~~~ + +## Auswahl-Events {#selection-events} + +Werden ausgelöst, wenn sich die Zellenauswahl oder der Fokus ändert. + +| Prop | Abbrechbar | Beschreibung | +|------|:-----------:|-------------| +| `onBeforeSelectionSet` | Ja | Wird ausgelöst, bevor eine Zelle zur Auswahl hinzugefügt wird. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeSelectionSet`](api/spreadsheet_beforeselectionset_event.md). | +| `onAfterSelectionSet` | Nein | Wird ausgelöst, nachdem eine Zelle zur Auswahl hinzugefügt wurde. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS-API: [`afterSelectionSet`](api/spreadsheet_afterselectionset_event.md). | +| `onBeforeSelectionRemove` | Ja | Wird ausgelöst, bevor eine Zelle aus der Auswahl entfernt wird. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). | +| `onAfterSelectionRemove` | Nein | Wird ausgelöst, nachdem eine Zelle aus der Auswahl entfernt wurde. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). | +| `onBeforeFocusSet` | Ja | Wird ausgelöst, bevor sich die fokussierte Zelle ändert. Handler: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeFocusSet`](api/spreadsheet_beforefocusset_event.md). | +| `onAfterFocusSet` | Nein | Wird ausgelöst, nachdem sich die fokussierte Zelle geändert hat. Handler: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS-API: [`afterFocusSet`](api/spreadsheet_afterfocusset_event.md). | + +**Beispiel: Ausgewählte Zelle verfolgen** + +~~~tsx +const [selectedCell, setSelectedCell] = useState(""); + + setSelectedCell(cell)} +/> + +

Current cell: {selectedCell}

+~~~ + +## Bearbeitungs-Events {#edit-events} + +Werden ausgelöst, wenn die Zellenbearbeitung beginnt oder endet. + +| Prop | Abbrechbar | Beschreibung | +|------|:-----------:|-------------| +| `onBeforeEditStart` | Ja | Wird ausgelöst, bevor die Zellenbearbeitung beginnt. Handler: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeEditStart`](api/spreadsheet_beforeeditstart_event.md). | +| `onAfterEditStart` | Nein | Wird ausgelöst, nachdem die Zellenbearbeitung begonnen hat. Handler: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS-API: [`afterEditStart`](api/spreadsheet_aftereditstart_event.md). | +| `onBeforeEditEnd` | Ja | Wird ausgelöst, bevor die Zellenbearbeitung endet. Gibt `false` zurück, um abzubrechen und die Bearbeitung fortzusetzen. Handler: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeEditEnd`](api/spreadsheet_beforeeditend_event.md). | +| `onAfterEditEnd` | Nein | Wird ausgelöst, nachdem die Zellenbearbeitung beendet und der Wert gespeichert wurde. Handler: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS-API: [`afterEditEnd`](api/spreadsheet_aftereditend_event.md). | + +**Beispiel: Vor dem Speichern validieren** + +~~~tsx + { + if (cell.startsWith("B") && isNaN(Number(value))) { + return false; // Abbrechen: Spalte B muss numerisch sein + } + }} +/> +~~~ + +## Tabellenblatt-Events {#sheet-events} + +Werden ausgelöst, wenn das aktive Tabellenblatt wechselt. + +| Prop | Abbrechbar | Beschreibung | +|------|:-----------:|-------------| +| `onBeforeSheetChange` | Ja | Wird ausgelöst, bevor das aktive Tabellenblatt wechselt. Handler: [`BeforeSheetHandler`](react/types.md#handler-type-aliases). JS-API: [`beforeSheetChange`](api/spreadsheet_beforesheetchange_event.md). | +| `onAfterSheetChange` | Nein | Wird ausgelöst, nachdem das aktive Tabellenblatt gewechselt hat. Handler: [`AfterSheetHandler`](react/types.md#handler-type-aliases). JS-API: [`afterSheetChange`](api/spreadsheet_aftersheetchange_event.md). | + +**Beispiel: Aktives Tabellenblatt verfolgen** + +~~~tsx + { + console.log("Switched to sheet:", sheet.name); + }} +/> +~~~ + +## Daten-Events {#data-events} + +Werden ausgelöst, wenn Tabellendaten geladen werden. + +| Prop | Beschreibung | +|------|-------------| +| `onAfterDataLoaded` | Wird ausgelöst, nachdem das Laden der Daten abgeschlossen ist (über `sheets` oder `loadUrl`). JS-API: [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md). | + +**Beispiel: Ladezustand anzeigen** + +~~~tsx +const [loading, setLoading] = useState(true); + + setLoading(false)} +/> +~~~ + +## Eingabe-Events {#input-events} + +Werden während der Benutzereingabe in Zellen oder der Formelleiste ausgelöst. + +| Prop | Beschreibung | +|------|-------------| +| `onGroupFill` | Wird während Auto-Fill-Operationen (Zieh-Füllung) ausgelöst. Handler: `(focusedCell: string, selectedCell: string) => void`. JS-API: [`groupFill`](api/spreadsheet_groupfill_event.md). | +| `onEditLineInput` | Wird bei Eingabe in der Formel-/Bearbeitungsleiste ausgelöst. Handler: `(value: string) => void`. | +| `onCellInput` | Wird bei Eingabe in einer Zelle während der Bearbeitung ausgelöst. Handler: `(cell: string, value: string) => void`. | + +## Callbacks für abgeleiteten Zustand {#derived-state-callbacks} + +Diese Callbacks benachrichtigen über Änderungen des berechneten Zustands und nicht über direkte Benutzeraktionen. + +| Prop | Beschreibung | +|------|-------------| +| `onStateChange` | Benachrichtigt, wenn sich die Verfügbarkeit von Rückgängig/Wiederherstellen ändert. Handler: `(state: { canUndo: boolean; canRedo: boolean }) => void`. | +| `onSearchResults` | Benachrichtigt mit passenden Zellreferenzen, wenn die `search`-Prop aktiv ist. Handler: `(cells: string[]) => void`. | +| `onFilterChange` | Benachrichtigt, wenn der Benutzer Filter über die Benutzeroberfläche ändert. Handler: `(filter: SheetFilter) => void`. | + +**Beispiel: Rückgängig/Wiederherstellen-Schaltflächen** + +~~~tsx +import { useRef, useState } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + return ( + <> + + + + + ); +} +~~~ + +**Beispiel: Kontrollierte Suche mit Ergebnissen** + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +**Beispiel: Filterzustand synchronisieren** + +~~~tsx +const [activeFilter, setActiveFilter] = useState(null); + + setActiveFilter(filter)} +/> +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/index.md b/i18n/de/docusaurus-plugin-content-docs/current/react/index.md new file mode 100644 index 00000000..417c5ae8 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/index.md @@ -0,0 +1,45 @@ +--- +sidebar_label: React Spreadsheet +title: React Spreadsheet +description: "DHTMLX Spreadsheet in React installieren, konfigurieren und verwenden - mit dem offiziellen deklarativen Wrapper." +--- + +# React Spreadsheet {#react-spreadsheet} + +Der offizielle deklarative React-Wrapper für DHTMLX Spreadsheet. Erstellen Sie Tabellen-UIs mit einer komponentenbasierten API: Übergeben Sie Daten als Props, reagieren Sie auf Änderungen über Event-Callbacks und greifen Sie bei Bedarf über eine Ref auf das zugrundeliegende Widget zu. + +## Erste Schritte {#get-started} + +- [Installation](react/installation.md) - Evaluierungs- oder kommerzielles Paket installieren +- [Schnellstart](react/quick-start.md) - Ihre erste Tabellenanwendung Schritt für Schritt erstellen +- [Online-Beispiele](https://dhtmlx.com/react/demos/spreadsheet/) - Live-Demos der React Spreadsheet-Funktionen ansehen + +:::info +Sie können auch das [GitHub-Demo-Repository](https://github.com/DHTMLX/react-spreadsheet-examples) für ein vollständiges funktionsfähiges Beispiel erkunden. +::: + +## API-Referenz {#api-reference} + +- [Props-Referenz](react/props.md) - alle Komponenten-Props mit Typen und Standardwerten +- [Events-Referenz](react/events.md) - Event-Callback-Props nach Kategorie gruppiert +- [Typen-Referenz](react/types.md) - TypeScript-Interfaces, Enums und Typ-Aliase + +## Datenmodell {#data-model} + +Die [`sheets`](react/props.md#data-props)-Prop ist die einzige Datenquelle für alle Tabellendaten. Jedes Tabellenblatt ist ein [`SheetData`](react/types.md#sheetdata)-Objekt, das Zellen, Zeilen-/Spaltenkonfiguration, verbundene Bereiche, fixierte Fenster, Filter und Sortierung enthält. + +## Zustandsverwaltung {#state-management} + +Erfahren Sie, wie Sie Tabellendaten mit Ihrem Anwendungszustand synchronisieren: + +- [Grundlagen der Zustandsverwaltung](react/state/state-management-basics.md) - kontrollierte Props, Event-Callbacks, der Ref-Notausgang +- [Redux Toolkit](react/state/redux-toolkit.md) - schrittweise Integrationsanleitung + +## Framework-Integrationen {#framework-integrations} + +- [Next.js](react/nextjs.md) - React Spreadsheet mit dem Next.js App Router verwenden + +## Theming und Lokalisierung {#theming-and-localization} + +- [Themes](react/themes.md) - integrierte Themes und benutzerdefinierte CSS-Überschreibungen +- [Lokalisierung](react/localization.md) - UI-Übersetzungen und Zahlen-/Datumsformatierung diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/installation.md b/i18n/de/docusaurus-plugin-content-docs/current/react/installation.md new file mode 100644 index 00000000..3ac0cb77 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/installation.md @@ -0,0 +1,84 @@ +--- +sidebar_label: Installation +title: React Spreadsheet Installation +description: "So installieren Sie die Evaluierungs- oder kommerzielle Version von DHTMLX React Spreadsheet über npm." +--- + +# React Spreadsheet Installation {#react-spreadsheet-installation} + +React Spreadsheet wird als npm-Paket in drei Varianten vertrieben: ein öffentlicher Evaluierungs-Build, ein privater Evaluierungs-Build und die kommerzielle Version. Diese Seite beschreibt, wie Sie jede Variante installieren, das erforderliche CSS-Stylesheet importieren und TypeScript-Unterstützung einrichten. + +:::info Voraussetzungen +- [Node.js](https://nodejs.org/en/) (LTS-Version empfohlen) +- React 18 oder neuer +::: + +## Evaluierungsversion (öffentliches npm) {#evaluation-version-public-npm} + +Das Evaluierungspaket ist ohne zusätzliche Konfiguration im öffentlichen npm-Registry verfügbar. Es enthält eine kostenlose 30-Tage-Evaluierung. + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +oder mit yarn: + +~~~bash +yarn add @dhtmlx/trial-react-spreadsheet +~~~ + +## Evaluierungsversion (privates npm) {#evaluation-version-private-npm} + +Die Evaluierungsversion befindet sich im privaten DHTMLX-Registry. Konfigurieren Sie zuerst Ihr Projekt: + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +Dann installieren: + +~~~bash +npm install @dhx/trial-react-spreadsheet +~~~ + +## Kommerzielle Version (privates npm) {#commercial-version-private-npm} + +Die kommerzielle Version verwendet dasselbe private Registry. Melden Sie sich in Ihrem Konto im [Kundenbereich](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses) an, um Zugangsdaten zu erhalten. + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +~~~bash +npm install @dhx/react-spreadsheet +~~~ + +## Paketvarianten {#package-variants} + +| Variante | Paketname | Registry | +|---------|-------------|----------| +| Evaluierung (öffentliches npm) | `@dhtmlx/trial-react-spreadsheet` | npmjs.org (öffentlich) | +| Evaluierung (privates npm) | `@dhx/trial-react-spreadsheet` | npm.dhtmlx.com (privat) | +| Kommerziell | `@dhx/react-spreadsheet` | npm.dhtmlx.com (privat) | + +## CSS-Import {#css-import} + +Importieren Sie das Stylesheet in Ihren Anwendungseinstiegspunkt oder Ihre Komponente: + +~~~tsx +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +Für die kommerzielle Version: + +~~~tsx +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +## TypeScript {#typescript} + +TypeScript-Typdefinitionen sind im Paket enthalten. Es wird kein zusätzliches `@types/`-Paket benötigt. + +## Nächste Schritte {#next-steps} + +- [Schnellstart](react/quick-start.md) - Ihre erste Tabellenanwendung Schritt für Schritt erstellen diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/localization.md b/i18n/de/docusaurus-plugin-content-docs/current/react/localization.md new file mode 100644 index 00000000..86ef493f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/localization.md @@ -0,0 +1,75 @@ +--- +sidebar_label: Localization +title: React Spreadsheet Lokalisierung +description: "UI-Bezeichnungen, Formelnamen und Zahlen-/Datumsformatierung in React Spreadsheet lokalisieren." +--- + +# React Spreadsheet Lokalisierung {#react-spreadsheet-localization} + +React Spreadsheet verfügt über zwei separate Lokalisierungsmechanismen für verschiedene Aspekte der Benutzeroberfläche. + +## Zwei Lokalisierungsmechanismen {#two-localization-mechanisms} + +| Mechanismus | Prop | Was wird gesteuert | +|-----------|------|-----------------| +| UI-Lokalisierung | `spreadsheetLocale` | Menübezeichnungen, Toolbar-Tooltips, Dialogtexte und lokalisierte Formelnamen | +| Zahlen-/Datumsformatierung | `localization` | Dezimaltrennzeichen, Währungssymbol, Datums-/Uhrzeitanzeigeformat | + +Diese Props sind unabhängig voneinander: Sie können eine oder beide verwenden. + +## UI-Lokalisierung (spreadsheetLocale) {#ui-localization-spreadsheetlocale} + +Die `spreadsheetLocale`-Prop akzeptiert ein [`SpreadsheetLocale`](react/types.md#spreadsheetlocale)-Objekt mit zwei Eigenschaften: + +- `locale` - ein `Record` mit UI-String-Überschreibungen +- `formulas` - ein `Record` mit lokalisierten Formelnamen, gruppiert nach Kategorie + +~~~tsx +const locale: SpreadsheetLocale = { + locale: { + "File": "Datei", + "Edit": "Bearbeiten", + "Insert": "Einfügen", + "Undo": "Rückgängig", + "Redo": "Wiederherstellen", + // ... weitere UI-Strings + }, + formulas: { + "MATCH": [ + ["Suchwert", "Erforderlich. Der Wert, der im Sucharray abgeglichen werden soll."], + ["Sucharray", "Erforderlich. Ein Zellbereich oder ein Array-Bezug."], + ], + // ... weitere Formelkategorien + }, +}; + + +~~~ + +:::warning +`spreadsheetLocale` ist eine Init-Only-Prop. Eine Änderung nach dem ersten Rendering führt dazu, dass das Widget zerstört und neu erstellt wird. Der Rückgängig/Wiederherstellen-Verlauf und der UI-Zustand (Auswahl, Scrollposition) werden zurückgesetzt. +::: + +## Zahlen-/Datumsformatierung (localization) {#numberdate-formatting-localization} + +Die `localization`-Prop steuert, wie Zahlen und Datumsangaben angezeigt werden: Dezimaltrennzeichen, Währungssymbole und Datumsmuster. Sie verwendet dasselbe Format wie die DHTMLX Spreadsheet-Konfigurationseigenschaft [`localization`](api/spreadsheet_localization_config.md). + +~~~tsx + +~~~ + +:::warning +`localization` ist ebenfalls eine Init-Only-Prop. Änderungen lösen einen vollständigen Zerstörungs-/Neuaufbau-Zyklus aus. +::: + +## Verwandte API und Anleitungen {#related-api-and-guides} + +- [Lokalisierung](localization.md) - DHTMLX Spreadsheet Lokalisierungsanleitung +- [SpreadsheetLocale-Typ](react/types.md#spreadsheetlocale) - TypeScript-Interface-Referenz diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/nextjs.md b/i18n/de/docusaurus-plugin-content-docs/current/react/nextjs.md new file mode 100644 index 00000000..d8189503 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/nextjs.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Next.js +title: React Spreadsheet in Next.js +description: "So verwenden Sie DHTMLX React Spreadsheet in einer Next.js-Anwendung mit App Router." +--- + +# React Spreadsheet in Next.js {#react-spreadsheet-in-nextjs} + +DHTMLX Spreadsheet ist ein clientseitiges Widget, das Zugriff auf das Browser-DOM benötigt. In Next.js mit dem App Router sind Server-Komponenten der Standard, daher müssen Sie die Tabelle in eine Client-Komponente mit der Direktive `"use client"` einbetten. + +:::note +Die JS-Ausgabe des React Spreadsheet-Wrappers enthält bereits ein `"use client"`-Banner, aber Sie benötigen die Direktive trotzdem in Ihrer eigenen Komponentendatei, die ihn importiert. +::: + +## Einrichtung {#setup} + +Erstellen Sie ein neues Next.js-Projekt und installieren Sie React Spreadsheet: + +~~~bash +npx create-next-app@latest my-spreadsheet-app +cd my-spreadsheet-app +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +## Eine Client-Komponente erstellen {#creating-a-client-component} + +Erstellen Sie eine neue Datei für die Tabellenkomponente mit der Direktive `"use client"`: + +~~~tsx title="src/components/SpreadsheetView.tsx" +"use client"; + +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +const initialSheets: SheetData[] = [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Name", css: "bold" }, + B1: { value: "Value", css: "bold" }, + A2: { value: "Item 1" }, + B2: { value: 100 }, + }, + }, +]; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +export default function SpreadsheetView() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} +~~~ + +## CSS-Import {#css-import} + +Importieren Sie die CSS-Datei direkt in der Client-Komponente (wie oben gezeigt) oder in Ihrem Root-Layout: + +~~~tsx title="src/app/layout.tsx" +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +## Container-Dimensionierung {#container-sizing} + +Stellen Sie sicher, dass der Container explizite Abmessungen hat. Für eine ganzseitige Tabelle fügen Sie diese Stile zu Ihrer globalen CSS-Datei hinzu: + +~~~css title="src/app/globals.css" +html, +body { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## Vollständiges Beispiel {#complete-example} + +Verwenden Sie die Client-Komponente in einer Server-Seite: + +~~~tsx title="src/app/page.tsx" +import SpreadsheetView from "@/components/SpreadsheetView"; + +export default function Home() { + return ; +} +~~~ + +## Verwandte API und Anleitungen {#related-api-and-guides} + +- [Props-Referenz](react/props.md) - alle Komponenten-Props mit Typen und Standardwerten +- [Events-Referenz](react/events.md) - auf Benutzeraktionen reagieren +- [Grundlagen der Zustandsverwaltung](react/state/state-management-basics.md) - Tabellendaten im React-Zustand verwalten diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/overview.md b/i18n/de/docusaurus-plugin-content-docs/current/react/overview.md new file mode 100644 index 00000000..48298d43 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/overview.md @@ -0,0 +1,207 @@ +--- +sidebar_label: Overview +title: React Spreadsheet Übersicht +description: "Übersicht des offiziellen React-Wrappers: deklaratives Datenmodell, Props, Theming, Events und Ref-Zugriff." +--- + +# React Spreadsheet Übersicht {#react-spreadsheet-overview} + +`ReactSpreadsheet` ist ein deklarativer React-Wrapper für das DHTMLX Spreadsheet-Widget. Er bietet eine komponentenbasierte API, bei der Props den Tabellenzustand beschreiben und der Wrapper die Synchronisierung mit dem zugrundeliegenden Widget übernimmt. + +:::note +Der React Spreadsheet-Wrapper ist unter den DHTMLX Spreadsheet-Lizenzen **Commercial**, **Enterprise** und **Ultimate** verfügbar. Zur Evaluierung verwenden Sie das kostenlose 30-Tage-Evaluierungspaket. Anweisungen zur Einrichtung finden Sie unter [Installation](react/installation.md). +::: + +## Spreadsheet-Funktionen {#spreadsheet-features} + +Der React-Wrapper bietet Zugriff auf den vollständigen Funktionsumfang von DHTMLX Spreadsheet: + +- Mehrseitige Tabellen mit Tabellenblatt-Reitern (hinzufügen, entfernen, umbenennen) +- Zellenwerte, Formeln (90+ integrierte Funktionen) und Zahlenformatierung +- Zellenstile, verbundene Zellen, fixierte Fenster, Datenvalidierung +- Sortierung, Filterung und Suche +- Zeilen-/Spaltenoperationen (hinzufügen, löschen, ein-/ausblenden, Größe ändern, automatisch anpassen) +- Excel (XLSX) Import und Export über WebAssembly-Module +- Anpassbare Toolbar und Kontextmenü +- Zellensperrung und Schreibschutz-Modus +- 4 integrierte Themes (light, dark, contrast-light, contrast-dark) mit CSS-Variable-Anpassung +- Lokalisierung von UI-Bezeichnungen, Formelnamen und Zahlen-/Datumsformatierung +- Rückgängig/Wiederherstellen-Verlauf +- TypeScript-Unterstützung mit gebündelten Typdefinitionen und JSDoc-Beschreibungen + +## Design-Prinzipien des Wrappers {#wrapper-design-principles} + +- **Props beschreiben den Zustand, keine Aktionen.** Es gibt keine "Auslöser"-Props. Übergeben Sie Daten, und die Komponente aktualisiert das Widget entsprechend. +- **`sheets` ist die einzige Datenquelle** für alle Tabellendaten: Zellen, verbundene Bereiche, fixierte Fenster, Filter, Sortierung. +- **Ref ist ein Notausgang.** Für Operationen, die sich nicht auf deklarative Props abbilden lassen (Export, programmatische Auswahl, Rückgängig/Wiederherstellen), greifen Sie über eine Ref auf die zugrundeliegende Widget-Instanz zu. +- **Alle Widget-Events sind als typisierte `onXxx`-Callback-Props verfügbar.** "Before"-Callbacks können `false` zurückgeben, um die Operation abzubrechen. + +## Versionsanforderungen {#version-requirements} + +- React 18+ +- Nur ESM-Paket + +## Schnellstart {#quick-start} + +Ein minimales funktionsfähiges Beispiel, das zeigt, wie eine Tabelle mit einem Tabellenblatt und formatierten Zellen gerendert wird. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + }, + }, + ]); + + const styles = { + bold: { "font-weight": "bold" }, + }; + + return ; +} +~~~ + +## Import-Pfade {#import-paths} + +**Evaluierung** (öffentliches npm, kostenlose 30-Tage-Evaluierung): + +~~~tsx +import { ReactSpreadsheet } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +**Kommerziell** (privates npm, Lizenz erforderlich): + +~~~tsx +import { ReactSpreadsheet } from "@dhx/react-spreadsheet"; +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +Informationen zur Registry-Konfiguration und allen verfügbaren Paketvarianten finden Sie unter [Installation](react/installation.md). + +## Prop-Aktualisierungsverhalten {#prop-update-behavior} + +Props werden danach kategorisiert, wie die Komponente mit Änderungen umgeht: + +| Kategorie | Props | Was passiert bei Änderung | +|----------|-------|----------------------| +| **Init-Only** | `menu`, `editLine`, `toolbarBlocks`, `multiSheets`, `formats`, `localization`, `importModulePath`, `exportModulePath`, `spreadsheetLocale` | Das Widget wird zerstört und neu erstellt. Tabellendaten bleiben erhalten, aber Rückgängig/Wiederherstellen-Verlauf und UI-Zustand (Auswahl, Scrollposition) werden zurückgesetzt. | +| **Laufzeit** | `readonly`, `rowsCount`, `colsCount` | Wird sofort ohne Datenverlust oder UI-Zustandsreset angewendet. | +| **Daten** | `sheets`, `activeSheet` | Wird inkrementell angewendet; nur geänderte Zellen, Bereiche oder Einstellungen werden aktualisiert. | +| **Neu-Parsen** | `styles` | Stiländerungen erfordern einen vollständigen Datenneulade. Tabellendaten bleiben erhalten, aber Rückgängig/Wiederherstellen-Verlauf und UI-Zustand werden zurückgesetzt. | +| **Zustand** | `search`, `theme`, `loadUrl` | Wird über dedizierte Widget-APIs ohne Nebeneffekte angewendet. | +| **Container** | `className`, `style` | Standard-React-DOM-Props auf dem Wrapper-`
`. | + +## Beispiele {#examples} + +### Mehrere Tabellenblätter mit Formeln {#multi-sheet-with-formulas} + +Zwei Tabellenblätter mit Zellenwerten und einer `SUM`-Formel, gerendert mit aktivierten Tabellenblatt-Reitern. + +~~~tsx +const [sheets] = useState([ + { + id: "revenue", + name: "Revenue", + cells: { + A1: { value: "Q1" }, B1: { value: "Q2" }, C1: { value: "Q3" }, D1: { value: "Q4" }, + A2: { value: 12000 }, B2: { value: 15000 }, C2: { value: 18000 }, D2: { value: 21000 }, + A3: { value: "Total" }, B3: { value: "=SUM(A2:D2)", format: "currency" }, + }, + }, + { + id: "expenses", + name: "Expenses", + cells: { + A1: { value: "Category" }, B1: { value: "Amount", format: "currency" }, + A2: { value: "Marketing" }, B2: { value: 5000, format: "currency" }, + A3: { value: "Operations" }, B3: { value: 8000, format: "currency" }, + }, + }, +]); + + +~~~ + +### Benutzerdefinierte Toolbar {#custom-toolbar} + +Übergeben Sie ein Array von Block-Identifikatoren an `toolbarBlocks`, um nur die benötigten Toolbar-Abschnitte anzuzeigen. + +~~~tsx + +~~~ + +### Schreibschutz mit gesperrten Zellen {#read-only-with-locked-cells} + +Setzen Sie `readonly={true}`, um alle Bearbeitungen auf Widget-Ebene zu deaktivieren. Das Hinzufügen von `locked: true` bei Zellen schützt diese einzeln, wenn die Tabelle nicht im Schreibschutz-Modus ist. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Report", + cells: { + A1: { value: "Metric", locked: true }, + B1: { value: "Value", locked: true }, + A2: { value: "Revenue", locked: true }, + B2: { value: 50000, format: "currency", locked: true }, + }, + }, +]; + + +~~~ + +## Imperativer Zugriff über Ref {#imperative-access-via-ref} + +Verwenden Sie eine `SpreadsheetRef`, um auf die zugrundeliegende Widget-Instanz für Operationen zuzugreifen, die sich nicht auf deklarative Props abbilden lassen, z. B. Daten serialisieren, Rückgängig/Wiederherstellen auslösen oder die Auswahl programmatisch setzen. + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + + const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); + }; + + const handleUndo = () => { + ref.current?.instance?.undo(); + }; + + return ( + <> + + + + + ); +} +~~~ + +Die `instance`-Eigenschaft ist `null`, bevor das Widget initialisiert wird und nach dem Unmount. + +## API-Referenz {#api-reference} + +| Dokument | Inhalt | +|----------|----------| +| [Props-Referenz](react/props.md) | Alle Komponenten-Props mit Typen, Standardwerten und Beispielen | +| [Events-Referenz](react/events.md) | Event-Callback-Props nach Kategorie gruppiert | +| [Typen-Referenz](react/types.md) | TypeScript-Interfaces, Enums und Typ-Aliase | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/props.md b/i18n/de/docusaurus-plugin-content-docs/current/react/props.md new file mode 100644 index 00000000..52044c97 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/props.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Props +title: Props-Referenz +description: "Vollständige Referenz aller ReactSpreadsheet-Komponenten-Props mit Typen und Beispielen." +--- + +# Props-Referenz {#props-reference} + +Alle Props sind optional. Die Komponente rendert eine leere Tabelle mit Standardeinstellungen, wenn keine Props angegeben werden. + +## Init-Only-Props {#init-only-props} + +Das Ändern einer dieser Props führt dazu, dass das Widget zerstört und neu erstellt wird. Tabellendaten bleiben erhalten, aber Rückgängig/Wiederherstellen-Verlauf und UI-Zustand (Auswahl, Scrollposition) werden zurückgesetzt. + +
+ +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `menu` | `boolean` | Kontextmenü anzeigen. Siehe JS-API: [`menu`](api/spreadsheet_menu_config.md). | +| `editLine` | `boolean` | Formel-/Bearbeitungsleiste über dem Raster anzeigen. Siehe JS-API: [`editLine`](api/spreadsheet_editline_config.md). | +| `toolbarBlocks` | `ToolbarBlocks[]` | Anzuzeigende Toolbar-Blöcke. Siehe JS-API: [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md). | +| `multiSheets` | `boolean` | Mehrere Tabellenblatt-Reiter aktivieren. Siehe JS-API: [`multisheets`](api/spreadsheet_multisheets_config.md). | +| `formats` | `IFormats[]` | Benutzerdefinierte Zahlenformatdefinitionen. Siehe JS-API: [`formats`](api/spreadsheet_formats_config.md). | +| `localization` | `ISpreadsheetConfig["localization"]` | Gebietsschema für Zahlen-/Datumsformatierung, z. B. Dezimaltrennzeichen und Währungssymbol. Unabhängig von `spreadsheetLocale`. Siehe JS-API: [`localization`](api/spreadsheet_localization_config.md). | +| `importModulePath` | `string` | Pfad zum XLSX-Importmodul. Siehe JS-API: [`importModulePath`](api/spreadsheet_importmodulepath_config.md). | +| `exportModulePath` | `string` | Pfad zum XLSX-Exportmodul. Siehe JS-API: [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). | +| `spreadsheetLocale` | [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) | UI-Übersetzungen und lokalisierte Formelnamen. Unabhängig von `localization`. | + +
+ +:::warning +Das Ändern einer Init-Only-Prop löst einen vollständigen Zerstörungs-/Neuaufbau-Zyklus aus. Rückgängig/Wiederherstellen-Verlauf, Auswahl und Scrollposition werden zurückgesetzt. +::: + +## Laufzeit-Props {#runtime-props} + +Diese Props werden sofort angewendet, ohne das Widget zu zerstören. Kein Datenverlust oder UI-Zustandsreset. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `rowsCount` | `number` | Anzahl der Zeilen im Raster. Siehe JS-API: [`rowsCount`](api/spreadsheet_rowscount_config.md). | +| `colsCount` | `number` | Anzahl der Spalten im Raster. Siehe JS-API: [`colsCount`](api/spreadsheet_colscount_config.md). | +| `readonly` | `boolean` | Schreibschutz-Modus aktivieren. Siehe JS-API: [`readonly`](api/spreadsheet_readonly_config.md). | + +## Daten-Props {#data-props} + +Die `sheets`-Prop ist die einzige Datenquelle für alle Tabelleninhalte. Änderungen werden inkrementell angewendet: Nur geänderte Zellen, Bereiche oder Einstellungen werden im Widget aktualisiert. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `sheets` | [`SheetData[]`](react/types.md#sheetdata) | Die einzige Datenquelle für alle Tabellendaten. Jeder Eintrag repräsentiert ein Tabellenblatt mit seinen Zellen, seiner Struktur und seinen Metadaten. Änderungen werden inkrementell angewendet. | +| `styles` | `Record>` | Gemeinsame CSS-Stildefinitionen, auf die über `CellData.css` verwiesen wird. Schlüssel sind Klassennamen, Werte sind CSS-Eigenschaftszuordnungen. Siehe [Styles-Beispiel](#styles-example). | +| `activeSheet` | `Id` | Id des aktiven (sichtbaren) Tabellenblatts. Eine Änderung wechselt den angezeigten Tabellenblatt-Reiter. | + +:::warning +Das Ändern von `styles` löst einen vollständigen Datenneulade aus. Tabellendaten bleiben erhalten, aber Rückgängig/Wiederherstellen-Verlauf und UI-Zustand (Auswahl, Scrollposition) werden zurückgesetzt. +::: + +## Such-Props {#search-props} + +Steuert den Zustand der Suchleiste von außerhalb der Komponente. Verwenden Sie dies zusammen mit `onSearchResults`, um eine benutzerdefinierte Such-UI zu erstellen. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `search` | [`SearchConfig`](react/types.md#searchconfig) | Kontrollierter Suchzustand. Übergeben Sie ein `SearchConfig`-Objekt, um die Suche auszulösen/zu aktualisieren. Übergeben Sie `undefined`, um die Suchleiste zu schließen. | + +## Datenladeprops {#data-loading-props} + +Tabellendaten von einer Remote-URL laden, anstatt sie über die `sheets`-Prop bereitzustellen. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `loadUrl` | `string` | URL, von der Tabellendaten geladen werden. Wenn sowohl `loadUrl` als auch `sheets` angegeben sind, hat `sheets` Vorrang. | +| `loadFormat` | `FileFormat` | Dateiformat-Hinweis für `loadUrl`. Standard: `"json"`. | + +## Theme-Prop {#theme-prop} + +Steuert das visuelle Theme der Tabelle. Da `theme` eine Laufzeit-Prop ist, wird das Widget sofort aktualisiert, wenn sich der Wert ändert. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `theme` | [`SpreadsheetTheme`](react/types.md#spreadsheettheme) | Farbthema. Integrierte Werte: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. Akzeptiert auch benutzerdefinierte Theme-Namen als Strings. Siehe [Themes](react/themes.md). | + +## Container-Props {#container-props} + +Standard-React-DOM-Props, die auf das Wrapper-`
` angewendet werden, das die Tabelle enthält. Verwenden Sie diese, um Größe und Layout zu steuern. + +| Prop | Typ | Beschreibung | +|------|------|-------------| +| `className` | `string` | CSS-Klassenname, der dem Wrapper-`
` hinzugefügt wird. | +| `style` | `React.CSSProperties` | Inline-Stile, die auf das Wrapper-`
` angewendet werden. | + +--- + +## Beispiele {#examples} + +### Tabellenblätter mit Zelldaten {#sheets-with-cell-data} + +Ein vollständiges `SheetData`-Beispiel mit Zellen, Zeilen- und Spaltengrößen, verbundenen Bereichen und einer fixierten Kopfzeile. + +~~~tsx +const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Budget", + cells: { + A1: { value: "Item", css: "header" }, + B1: { value: "Amount", css: "header", format: "currency" }, + A2: { value: "Rent" }, + B2: { value: 2000, format: "currency" }, + A3: { value: "=SUM(B2:B3)" }, + }, + rows: { 0: { height: 40 } }, + cols: { 0: { width: 150 }, 1: { width: 120 } }, + merged: [{ + from: { row: 0, column: 0 }, + to: { row: 0, column: 1 } + }], + freeze: { row: 1 }, + }, +]); + + +~~~ + +### Styles-Beispiel {#styles-example} + +Definieren Sie benannte Stile als CSS-Eigenschaftszuordnungen in der `styles`-Prop und verweisen Sie dann über `CellData.css` namentlich auf sie. + +~~~tsx +const styles = { + header: { + "font-weight": "bold", + "background": "#e3f2fd", + "color": "#1565c0", + }, + highlight: { + "background": "#ffeb3b", + "color": "#333", + }, +}; + + +~~~ + +### Toolbar-Anpassung {#toolbar-customization} + +~~~tsx + +~~~ + +### Mehrseitiger Modus {#multi-sheet-mode} + +Aktivieren Sie Tabellenblatt-Reiter mit `multiSheets={true}`. Übergeben Sie `false`, um die Reiterleiste vollständig auszublenden. + +~~~tsx + +~~~ + +~~~tsx + +~~~ + +### Excel Import/Export {#excel-importexport} + +~~~tsx + +~~~ + +Um eine bestimmte Version zu verwenden, ersetzen Sie `next` durch die Versionsnummer (prüfen Sie die GitHub-Repositories [Excel2Json](https://github.com/dhtmlx/excel2json) und [Json2Excel](https://github.com/dhtmlx/json2excel)). + +### Europäische Zahlenformatierung {#european-number-formatting} + +~~~tsx + +~~~ + +### Kontrollierte Suche {#controlled-search} + +Übergeben Sie ein `SearchConfig`-Objekt, um die Suchleiste programmatisch zu öffnen. Verwenden Sie `onSearchResults`, um die übereinstimmenden Zellreferenzen zu empfangen. + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} /> + +

Found in: {results.join(", ")}

+ + +~~~ + +### Theme-Wechsel {#theme-switching} + +~~~tsx +const [theme, setTheme] = useState("light"); + + + + +~~~ + +### Schreibschutz-Modus {#read-only-mode} + +~~~tsx + +~~~ + +### Daten von URL laden {#loading-data-from-url} + +~~~tsx + +~~~ + +### Gesperrte Zellen {#locked-cells} + +Markieren Sie einzelne Zellen mit `locked: true` als nicht bearbeitbar. Im Gegensatz zu `readonly` schützt dies bestimmte Zellen, während der Rest des Tabellenblatts bearbeitbar bleibt. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Protected", + cells: { + A1: { value: "Header", locked: true }, + A2: { value: "Editable" }, + }, + }, +]; + + +~~~ + +### Zellvalidierung {#cell-validation} + +Übergeben Sie ein String-Array an `CellData.validation`, um die Zelle auf ein Dropdown mit erlaubten Werten zu beschränken. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Form", + cells: { + A1: { value: "Status" }, + B1: { validation: ["Active", "Inactive", "Pending"] }, + }, + }, +]; + + +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/quick-start.md b/i18n/de/docusaurus-plugin-content-docs/current/react/quick-start.md new file mode 100644 index 00000000..426c284e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/quick-start.md @@ -0,0 +1,107 @@ +--- +sidebar_label: Quick start +title: Schnellstart mit React Spreadsheet +description: "Schritt-fur-Schritt-Anleitung zum Rendern Ihrer ersten DHTMLX React Spreadsheet-Komponente." +--- + +# Schnellstart mit React Spreadsheet {#quick-start-with-react-spreadsheet} + +Dieses Tutorial fuhrt Sie durch die Erstellung einer React-Anwendung mit DHTMLX Spreadsheet von Grund auf. + +## Neues Projekt erstellen {#create-a-new-project} + +~~~bash +npm create vite@latest my-spreadsheet-app -- --template react-ts +cd my-spreadsheet-app +~~~ + +## React Spreadsheet installieren {#install-react-spreadsheet} + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +Informationen zu anderen Paketvarianten finden Sie unter [Installation](react/installation.md). + +## Demodaten erstellen {#create-demo-data} + +Erstellen Sie eine Datei `src/data.ts` mit Beispieldaten fur die Tabellenkalkulation: + +~~~ts title="src/data.ts" +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +export const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + A3: { value: "Gadget" }, + B3: { value: 22000, format: "currency" }, + A4: { value: "Total" }, + B4: { value: "=SUM(B2:B3)", format: "currency" }, + }, + }, +]; + +export const styles = { + bold: { "font-weight": "bold" }, +}; +~~~ + +## Komponente erstellen {#create-the-component} + +Ersetzen Sie den Inhalt von `src/App.tsx`: + +~~~tsx title="src/App.tsx" +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import { sheets as initialSheets, styles } from "./data"; + +function App() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## Stile hinzufugen {#add-styles} + +Aktualisieren Sie `src/index.css`, um ein Layout mit voller Hohe sicherzustellen: + +~~~css title="src/index.css" +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## App starten {#start-the-app} + +~~~bash +npm run dev +~~~ + +Offnen Sie die in Ihrem Terminal angezeigte URL (in der Regel `http://localhost:5173`), um die Tabellenkalkulation anzuzeigen. + +## Verwandte API und Anleitungen {#related-api-and-guides} + +- [Props-Referenz](react/props.md) - Konfigurieren Sie das Verhalten der Tabellenkalkulation +- [Events-Referenz](react/events.md) - Reagieren Sie auf Benutzeraktionen +- [Typen-Referenz](react/types.md) - TypeScript-Interfaces und Enums +- [Daten- und Zustandsverwaltung](react/state/state-management-basics.md) - Tabellendaten im Anwendungsstatus verwalten + +Sie konnen auch das [GitHub-Demo-Repository](https://github.com/DHTMLX/react-spreadsheet-examples) fur ein vollstandiges funktionierendes Beispiel erkunden. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/state/index.md b/i18n/de/docusaurus-plugin-content-docs/current/react/state/index.md new file mode 100644 index 00000000..2f0afb74 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/state/index.md @@ -0,0 +1,21 @@ +--- +sidebar_label: "Daten & Status" +title: "Daten- und Zustandsverwaltung" +description: "Muster zur Verwaltung von DHTMLX Spreadsheet-Daten im React-Status oder mit State-Management-Bibliotheken." +--- + +# Daten- und Zustandsverwaltung {#data--state-management} + +Dieser Abschnitt behandelt Muster zur Synchronisierung von Tabellendaten mit Ihrem Anwendungsstatus: von einfachem React `useState` bis hin zu State-Management-Bibliotheken. + +## Einstieg {#start-here} + +- [Grundlagen der Zustandsverwaltung](react/state/state-management-basics.md) - Kernmuster: kontrollierte Props, Event-Callbacks, der Ref-Escape-Hatch und Performance-Tipps + +## Anleitungen zu State-Bibliotheken {#state-library-guides} + +- [Redux Toolkit](react/state/redux-toolkit.md) - Schritt-fur-Schritt-Integration mit Redux Toolkit + +## Kernkonzept {#key-concept} + +Die `sheets`-Prop ist die **einzige Quelle der Wahrheit** fur alle Tabellendaten. Ubergeben Sie ein Array von [`SheetData`](react/types.md#sheetdata)-Objekten; der Wrapper vergleicht Ihre Daten mit dem aktuellen Widget-Status und wendet nur die Anderungen an. Verwenden Sie unveranderliche Aktualisierungen (Spread-Operatoren, funktionale `setState`-Updater), damit React Anderungen effizient erkennen kann. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md b/i18n/de/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md new file mode 100644 index 00000000..9fcfabb9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md @@ -0,0 +1,183 @@ +--- +sidebar_label: Redux toolkit +title: React Spreadsheet mit Redux Toolkit +description: "Schritt-fur-Schritt-Integration von DHTMLX React Spreadsheet mit Redux Toolkit." +--- + +# React Spreadsheet mit Redux Toolkit {#react-spreadsheet-with-redux-toolkit} + +Dieses Tutorial zeigt, wie Sie Tabellendaten in einem Redux-Toolkit-Store verwalten. + +## Voraussetzungen {#prerequisites} + +- Kenntnisse in React, TypeScript und den Grundlagen von [Redux Toolkit](https://redux-toolkit.js.org/) +- Abgeschlossene Anleitung [Grundlagen der Zustandsverwaltung](react/state/state-management-basics.md) + +## Einrichtung {#setup} + +Erstellen Sie ein Vite-Projekt und installieren Sie die Abhangigkeiten: + +~~~bash +npm create vite@latest my-rtk-spreadsheet -- --template react-ts +cd my-rtk-spreadsheet +npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux +~~~ + +## Slice erstellen {#create-the-slice} + +Definieren Sie die Statusstruktur der Tabellenkalkulation, die Anfangsdaten und die Reducer in einem Redux-Toolkit-Slice. + +~~~ts title="src/store/spreadsheetSlice.ts" +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +interface SpreadsheetState { + sheets: SheetData[]; + activeSheet: string; +} + +const initialState: SpreadsheetState = { + sheets: [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Price", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 25.99, format: "currency" }, + }, + }, + ], + activeSheet: "sheet1", +}; + +const spreadsheetSlice = createSlice({ + name: "spreadsheet", + initialState, + reducers: { + setSheets(state, action: PayloadAction) { + state.sheets = action.payload; + }, + setActiveSheet(state, action: PayloadAction) { + state.activeSheet = action.payload; + }, + updateCell( + state, + action: PayloadAction<{ sheetId: string; cell: string; value: string | number }> + ) { + const { sheetId, cell, value } = action.payload; + const sheet = state.sheets.find((s) => s.id === sheetId); + if (sheet) { + sheet.cells[cell] = { ...sheet.cells[cell], value }; + } + }, + }, +}); + +export const { setSheets, setActiveSheet, updateCell } = spreadsheetSlice.actions; +export default spreadsheetSlice.reducer; +~~~ + +## Store konfigurieren {#configure-the-store} + +Registrieren Sie den Slice im Redux-Store und exportieren Sie die typisierten Hilfsfunktionen `RootState` und `AppDispatch`. + +~~~ts title="src/store/index.ts" +import { configureStore } from "@reduxjs/toolkit"; +import spreadsheetReducer from "./spreadsheetSlice"; + +export const store = configureStore({ + reducer: { + spreadsheet: spreadsheetReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +Umschliessen Sie Ihre App mit dem Provider: + +~~~tsx title="src/main.tsx" +import React from "react"; +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import { store } from "./store"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + +); +~~~ + +## Komponente erstellen {#create-the-component} + +Verbinden Sie `ReactSpreadsheet` mit dem Redux-Store mithilfe von `useSelector` zum Lesen des Status und `useDispatch`, um Anderungen nach jeder Benutzeraktion zuruckzusynchronisieren. + +~~~tsx title="src/App.tsx" +import { useRef } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import type { RootState } from "./store"; +import { setSheets } from "./store/spreadsheetSlice"; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +function App() { + const ref = useRef(null); + const dispatch = useDispatch(); + const sheets = useSelector((state: RootState) => state.spreadsheet.sheets); + const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data?.sheets) { + dispatch(setSheets(data.sheets)); + } + }; + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## Daten per Ref lesen {#reading-data-via-ref} + +Verwenden Sie `ref.current.instance` fur schreibgeschutzte Operationen wie Serialisierung oder das Abrufen von Zellenwerten: + +~~~tsx +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + // An API senden, herunterladen usw. +}; + +const getCellValue = (cell: string) => { + return ref.current?.instance?.getValue(cell); +}; +~~~ + +## Verwandte API und Anleitungen {#related-api-and-guides} + +- [Props-Referenz](react/props.md) - alle Komponenten-Props +- [Events-Referenz](react/events.md) - Event-Callback-Props +- [Grundlagen der Zustandsverwaltung](react/state/state-management-basics.md) - Kernmuster diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md b/i18n/de/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md new file mode 100644 index 00000000..1bdc5086 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md @@ -0,0 +1,172 @@ +--- +sidebar_label: Basics +title: Grundlagen der Datenbindung und Zustandsverwaltung +description: "Kernmuster zur Verwaltung von Tabellendaten in React: kontrollierte Props, Event-Callbacks und der Ref-Escape-Hatch." +--- + +# Grundlagen der Datenbindung und Zustandsverwaltung {#data-binding--state-management-basics} + +## Das deklarative Modell {#the-declarative-model} + +React Spreadsheet folgt einem deklarativen Ansatz: Sie speichern Blattdaten im React-Status, ubergeben sie als Props, und der Wrapper vergleicht Ihre Daten automatisch mit dem aktuellen Widget-Status und wendet nur die Anderungen an. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Hello" }, + }, + }, + ]); + + return ; +} +~~~ + +## Zellen aktualisieren {#updating-cells} + +Verwenden Sie unveranderliche Statusaktualisierungen mit dem funktionalen `setState`-Updater: + +~~~tsx +const updateCell = (sheetId: string, cell: string, value: string | number) => { + setSheets((prev) => + prev.map((sheet) => + sheet.id === sheetId + ? { + ...sheet, + cells: { + ...sheet.cells, + [cell]: { ...sheet.cells[cell], value }, + }, + } + : sheet + ) + ); +}; +~~~ + +## Auf Benutzeraktionen reagieren {#responding-to-user-actions} + +Verwenden Sie `onAfterAction`, um auf Benutzeranderungen zu reagieren. Kombinieren Sie es mit `ref`, um die aktuellen Widget-Daten zu lesen: + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [sheets, setSheets] = useState([/* ... */]); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data) { + // Widget-Status zuruck in den React-Status synchronisieren + console.log("Spreadsheet data:", data); + } + }; + + return ( + + ); +} +~~~ + +## Der Ref-Escape-Hatch {#the-ref-escape-hatch} + +Fur Operationen, die sich nicht auf deklarative Props abbilden lassen, verwenden Sie [`SpreadsheetRef`](react/types.md#spreadsheetref), um auf die zugrunde liegende Widget-Instanz zuzugreifen: + +- **Daten serialisieren:** `ref.current?.instance?.serialize()` +- **Ruckgangig/Wiederholen:** `ref.current?.instance?.undo()` / `ref.current?.instance?.redo()` +- **Zellenwert abrufen:** `ref.current?.instance?.getValue("A1")` +- **Programmgesteuerte Auswahl:** `ref.current?.instance?.selection.setSelectedCell("A1:C5")` + +~~~tsx +const ref = useRef(null); + +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); +}; + + +~~~ + +:::warning +Vermeiden Sie es, imperative Schreibvorgange (z. B. `instance.setValue()`) mit der deklarativen `sheets`-Prop zu vermischen. Der Wrapper kann imperative Anderungen beim nachsten Render-Zyklus uberschreiben. Verwenden Sie das Ref nur zum **Lesen** von Daten und fur Operationen wie Ruckgangig/Wiederholen, Auswahl und Export. +::: + +## Kontrollierte Suche {#controlled-search} + +Verwenden Sie die `search`-Prop zusammen mit `onSearchResults` fur eine kontrollierte Suche: + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +## Ruckgangig / Wiederholen {#undo--redo} + +Verwenden Sie `onStateChange`, um die Verfugbarkeit von Ruckgangig/Wiederholen zu verfolgen, und rufen Sie `undo()`/`redo()` uber das Ref auf: + +~~~tsx +const ref = useRef(null); +const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + + + + +~~~ + +## Performance {#performance} + +- Verwenden Sie `useMemo` fur abgeleitete Blatter, um unnnotige Neuberechnungen zu vermeiden: + +~~~tsx +const filteredSheets = useMemo( + () => sheets.filter((s) => s.name !== "Hidden"), + [sheets] +); + + +~~~ + +- Vermeiden Sie es, das `styles`-Objekt bei jedem Render neu zu erstellen. Definieren Sie es ausserhalb der Komponente oder umschliessen Sie es mit `useMemo`. +- Verwenden Sie den funktionalen `setState`-Updater, um veraltete Closure-Probleme in Event-Callbacks zu vermeiden. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/themes.md b/i18n/de/docusaurus-plugin-content-docs/current/react/themes.md new file mode 100644 index 00000000..01851069 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/themes.md @@ -0,0 +1,93 @@ +--- +sidebar_label: Themes +title: React Spreadsheet-Themes +description: "Integrierte oder benutzerdefinierte Themes auf DHTMLX React Spreadsheet anwenden." +--- + +# React Spreadsheet-Themes {#react-spreadsheet-themes} + +React Spreadsheet wird mit vier integrierten Themes geliefert und unterstutzt benutzerdefinierte Themes uber CSS-Variablen. Verwenden Sie die `theme`-Prop, um ein integriertes Theme auszuwahlen oder ein selbst definiertes Theme anzuwenden. + +## Integrierte Themes {#built-in-themes} + +Der Typ [`SpreadsheetTheme`](react/types.md#spreadsheettheme) definiert vier integrierte Themes: + +- `"light"` (Standard) +- `"dark"` +- `"contrast-light"` +- `"contrast-dark"` + +Sie konnen auch einen benutzerdefinierten Theme-Namen als Zeichenkette ubergeben. + +## Theme anwenden {#applying-a-theme} + +Ubergeben Sie die `theme`-Prop an `ReactSpreadsheet` mit dem Namen des gewunschten Themes: + +~~~tsx + +~~~ + +## Zur Laufzeit wechseln {#switching-at-runtime} + +Verwenden Sie den React-Status, um Themes dynamisch zu wechseln: + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData, type SpreadsheetTheme } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([/* ... */]); + const [theme, setTheme] = useState("light"); + + return ( + <> + + + + + ); +} +~~~ + +## Benutzerdefinierte CSS-Variablen {#custom-css-variables} + +DHTMLX Spreadsheet verwendet ein mehrschichtiges CSS-Variablen-System. Sie konnen diese Variablen uberschreiben, um das Erscheinungsbild uber die integrierten Themes hinaus anzupassen. + +### Benutzerdefiniertes Theme erstellen {#creating-a-custom-theme} + +Definieren Sie einen benutzerdefinierten `data-dhx-theme`-Selektor, uberschreiben Sie die benotigten Variablen und ubergeben Sie den Theme-Namen als Prop: + +~~~css title="src/custom-theme.css" +[data-dhx-theme='corporate'] { + /* Farbschema */ + --dhx-h-primary: 220; + --dhx-s-primary: 60%; + --dhx-l-primary: 45%; + + /* Toolbar und Grid */ + --dhx-s-toolbar-background: #f0f4f8; + --dhx-s-grid-header-background: #e2e8f0; + + /* Spreadsheet-Bereichsfarben */ + --dhx-spreadsheet-range-background-1: #bee3f8; + --dhx-spreadsheet-range-color-1: #2b6cb0; +} +~~~ + +~~~tsx +import "./custom-theme.css"; + + +~~~ + +## Verwandte Anleitungen {#related-guides} + +- [Themes](/themes/) - Ubersicht der integrierten Themes fur DHTMLX Spreadsheet +- [Konfiguration der Basis-Themes](themes/base_themes_configuration.md) - Konfigurieren von Basis-Themes +- [Benutzerdefiniertes Theme](themes/custom_theme.md) - Erstellen benutzerdefinierter Themes diff --git a/i18n/de/docusaurus-plugin-content-docs/current/react/types.md b/i18n/de/docusaurus-plugin-content-docs/current/react/types.md new file mode 100644 index 00000000..bbb3c436 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/react/types.md @@ -0,0 +1,276 @@ +--- +sidebar_label: Types +title: Typen-Referenz +description: "TypeScript-Interfaces, Enums und Typ-Aliase, die aus @dhx/react-spreadsheet exportiert werden." +--- + +# Typen-Referenz {#types-reference} + +Alle Typen werden aus `@dhx/react-spreadsheet` oder `@dhtmlx/trial-react-spreadsheet` exportiert. + +~~~tsx +import type { SheetData, CellData, SpreadsheetRef /* ... */ } from "@dhtmlx/trial-react-spreadsheet"; +~~~ + +## CellData {#celldata} + +Der deklarative Status einer einzelnen Zelle. Alle Eigenschaften sind optional; ausgelassene Eigenschaften behalten ihren aktuellen Wert bei Aktualisierungen bei. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `value` | `string \| number` | Zellenwert: Text, Zahl oder Formelzeichenkette (mit `=` als Prafix). | +| `css` | `string` | CSS-Klassenname(n), die auf Schlussel in der `styles`-Map auf oberster Ebene verweisen. | +| `format` | `string` | Zahlenformatmaske oder Alias (z. B. `"currency"` oder `"#,##0.00"`). | +| `locked` | `boolean` | Gibt an, ob die Zelle gesperrt ist (vor der Bearbeitung geschutzt). | +| `validation` | `string \| string[]` | Dropdown-Optionen fur die Datenvalidierung. | + +## RowConfig {#rowconfig} + +Zeilen-Metadaten. Nur Zeilen mit einer nicht standardmassigen Konfiguration benotigen Eintrage. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `height` | `number` | Zeilenhohe in Pixeln. | +| `hidden` | `boolean` | Gibt an, ob die Zeile ausgeblendet ist. | + +## ColConfig {#colconfig} + +Spalten-Metadaten. Nur Spalten mit einer nicht standardmassigen Konfiguration benotigen Eintrage. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `width` | `number` | Spaltenbreite in Pixeln. | +| `hidden` | `boolean` | Gibt an, ob die Spalte ausgeblendet ist. | + +## MergedRange {#mergedrange} + +Definiert einen zusammengefuhrten Zellbereich mithilfe von nullbasiert indizierten Zeilen-/Spaltenkoordinaten. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `from` | `{ row: number; column: number }` | Obere linke Ecke der Zusammenfuhrung (0-indiziert). | +| `to` | `{ row: number; column: number }` | Untere rechte Ecke der Zusammenfuhrung (0-indiziert). | + +**Beispiel:** + +~~~ts +// A1:B2 zusammenfuhren +const merge: MergedRange = { + from: { row: 0, column: 0 }, + to: { row: 1, column: 1 }, +}; +~~~ + +## FreezeConfig {#freezeconfig} + +Konfiguration der fixierten Bereiche fur ein Blatt. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `col` | `number` | Spalten bis zu dieser 0-indizierten Spaltennummer fixieren. `undefined` = keine Spaltenfixierung. | +| `row` | `number` | Zeilen bis zu dieser 0-indizierten Zeilennummer fixieren. `undefined` = keine Zeilenfixierung. | + +## SheetFilter {#sheetfilter} + +Filterkonfiguration fur eine Spalte innerhalb eines Blatts. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `cell` | `string` | Zellreferenz, die die gefilterte Spalte identifiziert (z. B. `"A1"`). | +| `rules` | `IFilterRules[]` | Anzuwendende Filterregeln. Ein leeres Array loscht den Filter. | + +## SheetSort {#sheetsort} + +Sortierkonfiguration fur eine Spalte innerhalb eines Blatts. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `cell` | `string` | Zellreferenz oder Bereich fur die Sortieroperation (z. B. `"B1"` oder `"A1:E8"`). Verwenden Sie einen Bereich, um mehrere Spalten gemeinsam zu sortieren und dabei die Zeilenintegritat zu wahren. | +| `dir` | `1 \| -1` | Sortierrichtung: `1` = aufsteigend, `-1` = absteigend. | + +## SheetData {#sheetdata} + +Vollstandiger deklarativer Status fur ein einzelnes Tabellenblatt. + +| Eigenschaft | Typ | Erforderlich | Beschreibung | +|-------------|-----|:------------:|--------------| +| `id` | `Id` | Ja | Eindeutiger Blattbezeichner. Muss uber Renders hinweg stabil sein. | +| `name` | `string` | Ja | Anzeigename auf dem Blatt-Tab. | +| `cells` | `Record` | Ja | Zelldaten, die durch Zellreferenz indiziert sind (z. B. `"A1"` oder `"B2"`). Nur Zellen mit nicht standardmassigen Daten benotigen Eintrage. | +| `rows` | `Record` | Nein | Zeilenkonfiguration, die durch 0-indizierte Zeilennummer indiziert ist. | +| `cols` | `Record` | Nein | Spaltenkonfiguration, die durch 0-indizierte Spaltennummer indiziert ist. | +| `merged` | `MergedRange[]` | Nein | Zusammengefuhrte Zellbereiche. | +| `freeze` | `FreezeConfig` | Nein | Konfiguration der fixierten Bereiche. | +| `filter` | `SheetFilter` | Nein | Spaltenfilter-Konfiguration. Auf `undefined` setzen, um zu loschen. | +| `sort` | `SheetSort` | Nein | Sortierkonfiguration. | + +**Beispiel:** + +~~~ts +const sheet: SheetData = { + id: "sheet1", + name: "Inventory", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Quantity", css: "bold" }, + A2: { value: "Laptop" }, + B2: { value: 42 }, + }, + cols: { 0: { width: 200 } }, + freeze: { row: 1 }, +}; +~~~ + +## SearchConfig {#searchconfig} + +Kontrollierter Suchstatus. Ubergeben Sie ein Objekt, um die Suche auszulosen/zu aktualisieren; ubergeben Sie `undefined`, um sie zu schliessen. + +| Eigenschaft | Typ | Erforderlich | Beschreibung | +|-------------|-----|:------------:|--------------| +| `query` | `string` | Ja | Zu suchender Text. | +| `open` | `boolean` | Nein | Gibt an, ob die integrierte Suchoberfla che geoffnet werden soll. Standard: `false`. | +| `sheetId` | `Id` | Nein | Suche auf ein bestimmtes Blatt anhand der ID einschranken. | + +## SpreadsheetLocale {#spreadsheetlocale} + +Lokalisierungskonfiguration fur UI-Bezeichnungen und Formelnamen. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `locale` | `Record` | Uberschreibungen fur UI-Zeichenketten. Schlussel entsprechen dem Locale-Worterbuch der Bibliothek. | +| `formulas` | `Record` | Lokalisierte Formelnamen, gruppiert nach Kategorie. Jeder Eintrag ist ein Tupel: `[localizedName, optionalDescription?]`. | + +## SpreadsheetTheme {#spreadsheettheme} + +~~~ts +type SpreadsheetTheme = "light" | "dark" | "contrast-light" | "contrast-dark" | string; +~~~ + +Integrierte Farbthemes. Akzeptiert auch benutzerdefinierte Theme-Namens-Zeichenketten. + +## IExecuteConfig {#iexecuteconfig} + +Konfiguration der Aktionsausfuhrung, die an [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) ubergeben wird. Die Struktur variiert je nach Aktionstyp. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `row` | `number` | Index der Zielzeile. | +| `col` | `number` | Index der Zielspalte. | +| `target` | `unknown` | Aktionsspezifisches Ziel. | +| `val` | `unknown` | Neuer Wert. | +| `prev` | `unknown` | Vorheriger Wert. | +| `action` | `Actions \| string` | Aktionsbezeichner. | +| `groupAction` | `Actions \| string` | Bezeichner der ubergeordneten Gruppenaktio n. | +| `cell` | `string` | Zellreferenz (z. B. `"A1"`). | +| `pageId` | `Id` | ID des Zielblatts. | +| `pageName` | `string` | Name des Zielblatts. | +| `[key: string]` | `unknown` | Weitere aktionsspezifische Eigenschaften. | + +## SpreadsheetRef {#spreadsheetref} + +Imperatives Handle, das uber `React.forwardRef` bereitgestellt wird. Ermoglicht direkten Zugriff auf die zugrunde liegende DHTMLX Spreadsheet-Instanz fur Operationen, die sich nicht auf deklarative Props abbilden lassen. + +| Eigenschaft | Typ | Beschreibung | +|-------------|-----|--------------| +| `instance` | `ISpreadsheet \| null` | Die zugrunde liegende Widget-Instanz. `null` vor der Initialisierung und nach dem Aushangen. | + +**Beispiel:** + +~~~tsx +const ref = useRef(null); + +// Daten serialisieren +const data = ref.current?.instance?.serialize(); + +// Programmgesteuerte Auswahl +ref.current?.instance?.selection.setSelectedCell("A1:C5"); + +// Ruckgangig/Wiederholen +ref.current?.instance?.undo(); +ref.current?.instance?.redo(); +~~~ + +## Actions-Enum {#actions-enum} + +Bekannte Spreadsheet-Aktionsbezeichner. Werden in [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) fur typensicheres Aktions-Matching verwendet. Die `| string`-Union bei Handler-Parametern ermoglicht Vorwartskompatibilitat mit kunftigen Aktionen. + +| Wert | Beschreibung | +|------|--------------| +| `setCellStyle` | CSS-Stil auf Zelle(n) anwenden. | +| `setCellValue` | Zellenwert setzen. | +| `setCellFormat` | Zahlenformat auf Zelle(n) setzen. | +| `removeCellStyles` | CSS-Stile von Zelle(n) entfernen. | +| `lockCell` | Zelle(n) sperren oder entsperren. | +| `deleteRow` | Zeile(n) loschen. | +| `addRow` | Zeile(n) einfugen. | +| `deleteColumn` | Spalte(n) loschen. | +| `addColumn` | Spalte(n) einfugen. | +| `groupAction` | Batch-Aktion (mehrere Unteraktionen). | +| `groupRowAction` | Batch-Zeilenaktion. | +| `groupColAction` | Batch-Spaltenaktion. | +| `addSheet` | Neues Blatt hinzufugen. | +| `deleteSheet` | Blatt loschen. | +| `renameSheet` | Blatt umbenennen. | +| `clearSheet` | Alle Daten in einem Blatt loschen. | +| `clear` | Ausgewahlte Zellen loschen. | +| `resizeCol` | Spaltenbreite andern. | +| `resizeRow` | Zeilenhohe andern. | +| `setValidation` | Datenvalidierung fur Zelle(n) festlegen. | +| `sortCells` | Zellen sortieren. | +| `insertLink` | Hyperlink einfugen. | +| `fitColumn` | Spaltenbreite automatisch an den Inhalt anpassen. | +| `filter` | Spaltenfilter anwenden oder andern. | +| `merge` | Zellen zusammenfuhren. | +| `unmerge` | Zusammenfuhrung von Zellen aufheben. | +| `toggleFreeze` | Fixierte Bereiche umschalten. | +| `toggleVisibility` | Sichtbarkeit von Zeilen/Spalten umschalten. | + +## Handler-Typ-Aliase {#handler-type-aliases} + +Komfort-Aliase fur die Funktionssignaturen, die von Event-Callback-Props verwendet werden. Importieren Sie diese, um Ihre Handler-Funktionen explizit zu annotieren. + +
+ +| Typ | Signatur | Verwendet von | +|-----|----------|---------------| +| `BeforeActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => boolean \| void` | `onBeforeAction` | +| `AfterActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => void` | `onAfterAction` | +| `BeforeCellHandler` | `(cell: string) => boolean \| void` | `onBeforeSelectionSet`, `onBeforeSelectionRemove`, `onBeforeFocusSet` | +| `AfterCellHandler` | `(cell: string) => void` | `onAfterSelectionSet`, `onAfterSelectionRemove`, `onAfterFocusSet` | +| `BeforeEditHandler` | `(cell: string, value: string) => boolean \| void` | `onBeforeEditStart`, `onBeforeEditEnd` | +| `AfterEditHandler` | `(cell: string, value: string) => void` | `onAfterEditStart`, `onAfterEditEnd` | +| `BeforeSheetHandler` | `(sheet: ISheet) => boolean \| void` | `onBeforeSheetChange` | +| `AfterSheetHandler` | `(sheet: ISheet) => void` | `onAfterSheetChange` | + +
+ +## SpreadsheetConfigProps {#spreadsheetconfigprops} + +~~~ts +type SpreadsheetConfigProps = Omit< + ISpreadsheetConfig, + "leftSplit" | "topSplit" | "dateFormat" | "timeFormat" +>; +~~~ + +Basistyp fur Komponenten-Props. Stellt alle `ISpreadsheetConfig`-Konstruktoroptionen als flache Props bereit. + +## Erneut exportierte Upstream-Typen {#re-exported-upstream-types} + +Diese Typen werden der Einfachheit halber aus `@dhx/ts-spreadsheet` erneut exportiert: + +| Typ | Beschreibung | +|-----|--------------| +| `ISpreadsheet` | Hauptinterface der Spreadsheet-Widget-Instanz. | +| `ISpreadsheetConfig` | Konstruktor-Konfigurationsinterface. | +| `ISheet` | Blatt-Instanz-Interface (verwendet in Blatt-Event-Callbacks). | +| `IFormats` | Definition benutzerdefinierter Zahlenformate. | +| `IFilterRules` | Konfiguration von Filterregeln. | +| `IFilter` | Filter-Instanz-Interface. | +| `IStylesList` | Stildefinitions-Map. | +| `IDataWithStyles` | Datenstruktur mit eingebetteten Stilen (verwendet von `serialize()`/`parse()`). | +| `ICellInfo` | Zellinformationen, die von Widget-Methoden zuruckgegeben werden. | +| `FileFormat` | Dateiformat fur das Laden von Daten (z. B. `"json"` oder `"xlsx"`). | +| `ToolbarBlocks` | Bezeichner fur Toolbar-Blocke (z. B. `"default"`, `"undo"` oder `"font"`). | +| `FilterConditions` | Enum der verfugbaren Filterbedingungstypen. | +| `Id` | Generischer Bezeichnertyp (*string \| number*). | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/sorting_data.md b/i18n/de/docusaurus-plugin-content-docs/current/sorting_data.md new file mode 100644 index 00000000..9c73d579 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/sorting_data.md @@ -0,0 +1,41 @@ +--- +sidebar_label: Daten sortieren +title: Daten sortieren +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie Daten sortieren. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Daten sortieren {#sorting-data} + +## Daten nach einer Spalte sortieren {#sorting-data-by-a-column} + +Um die Tabellendaten nach einer Spalte zu sortieren, gehen Sie folgendermaßen vor: + +1\. Klicken Sie mit der rechten Maustaste auf den Header der Spalte, nach der Sie sortieren möchten + +2\. Wählen Sie *Sortieren* -> *A bis Z sortieren* oder *Z bis A sortieren* + +![DHTMLX Spreadsheet column header context menu with Sort A to Z and Sort Z to A options](/img/sort_col.png) + +oder + +1\. Wählen Sie die gewünschte Spalte aus, indem Sie auf ihren Header klicken + +2\. Gehen Sie im Menü zu: *Daten* -> *Sortieren* -> *A bis Z sortieren* oder *Z bis A sortieren* + +![DHTMLX Spreadsheet Data menu with the Sort submenu showing Sort A to Z and Sort Z to A](/img/sort_col_menu.png) + +## Daten nach einem Bereich sortieren {#sorting-data-by-a-range} + +Um die Tabellendaten nach einem bestimmten Bereich zu sortieren, gehen Sie folgendermaßen vor: + +1\. Wählen Sie einen Zellbereich in der Spalte aus, nach der Sie sortieren möchten + +2\. Wählen Sie eine der folgenden Aktionen: + +- Klicken Sie mit der rechten Maustaste auf eine Zelle im ausgewählten Bereich und wählen Sie *Sortieren* -> *A bis Z sortieren* oder *Z bis A sortieren* + +![DHTMLX Spreadsheet context menu on a selected range with the Sort submenu](/img/sort_range_menu.png) + +- Oder gehen Sie im Menü zu: *Daten* -> *Sortieren* -> *A bis Z sortieren* oder *Z bis A sortieren* + +![DHTMLX Spreadsheet Data menu with the Sort submenu for sorting a selected cell range](/img/sort_range.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/svelte_integration.md b/i18n/de/docusaurus-plugin-content-docs/current/svelte_integration.md new file mode 100644 index 00000000..17df5b75 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/svelte_integration.md @@ -0,0 +1,259 @@ +--- +sidebar_label: Integration mit Svelte +title: Svelte-Integration +description: In der Dokumentation erfahren Sie mehr über die Svelte-Integration der DHTMLX JavaScript Spreadsheet-Bibliothek. Lesen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Integration mit Svelte {#integration-with-svelte} + +:::tip +Sie sollten mit den grundlegenden Konzepten und Mustern von **Svelte** vertraut sein, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihrer Kenntnisse lesen Sie bitte die [**Svelte-Dokumentation**](https://svelte.dev/). +::: + +DHTMLX Spreadsheet ist kompatibel mit **Svelte**. Wir haben Code-Beispiele vorbereitet, die zeigen, wie DHTMLX Spreadsheet mit **Svelte** verwendet wird. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo). + +## Projekt erstellen {#creating-a-project} + +:::info +Bevor Sie mit der Erstellung eines neuen Projekts beginnen, installieren Sie [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/). +::: + +Um ein **Svelte** JS-Projekt zu erstellen, führen Sie folgenden Befehl aus: + +~~~json +npm create vite@latest +~~~ + +Nennen wir das Projekt **my-svelte-spreadsheet-app**. + +### Installation der Abhängigkeiten {#installation-of-dependencies} + +Wechseln Sie in das App-Verzeichnis: + +~~~json +cd my-svelte-spreadsheet-app +~~~ + +Installieren Sie anschließend die Abhängigkeiten und starten Sie die App. Verwenden Sie dazu einen Paketmanager: + +- wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, müssen Sie folgende Befehle ausführen: + +~~~jsx +yarn +yarn dev // oder yarn dev +~~~ + +- wenn Sie [**npm**](https://www.npmjs.com/) verwenden, müssen Sie folgende Befehle ausführen: + +~~~json +npm install +npm run dev +~~~ + +Die App sollte auf localhost laufen (z. B. `http://localhost:3000`). + +## Spreadsheet erstellen {#creating-spreadsheet} + +Nun müssen Sie den DHTMLX Spreadsheet-Quellcode beziehen. Stoppen Sie zunächst die App und installieren Sie das Spreadsheet-Paket. + +### Schritt 1. Paketinstallation {#step-1-package-installation} + +Laden Sie das [**Spreadsheet-Testpaket**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) herunter und folgen Sie den Schritten in der README-Datei. Beachten Sie, dass das Test-Spreadsheet nur 30 Tage lang verfügbar ist. + +### Schritt 2. Komponente erstellen {#step-2-component-creation} + +Nun müssen Sie eine Svelte-Komponente erstellen, um Spreadsheet in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis *src/* und benennen Sie sie *Spreadsheet.svelte*. + +#### Quelldateien importieren {#importing-source-files} + +Öffnen Sie die Datei *Spreadsheet.svelte* und importieren Sie die Spreadsheet-Quelldateien. Beachten Sie: + +- wenn Sie die PRO-Version verwenden und das Spreadsheet-Paket aus einem lokalen Ordner installieren, sehen die Importpfade wie folgt aus: + +~~~html title="Spreadsheet.svelte" + +~~~ + +Beachten Sie, dass die Quelldateien je nach verwendetem Paket minimiert sein können. Stellen Sie in diesem Fall sicher, dass Sie die CSS-Datei als *spreadsheet.min.css* importieren. + +- wenn Sie die Testversion von Spreadsheet verwenden, geben Sie folgende Pfade an: + +~~~html title="Spreadsheet.svelte" + +~~~ + +In diesem Tutorial sehen Sie, wie die **Test**-Version von Spreadsheet konfiguriert wird. + +#### Container festlegen und Spreadsheet hinzufügen {#setting-the-container-and-adding-spreadsheet} + +Um Spreadsheet auf der Seite anzuzeigen, müssen Sie den Container für Spreadsheet erstellen und diese Komponente mit dem entsprechenden Konstruktor initialisieren: + +~~~html {3,6,10-11,19} title="Spreadsheet.svelte" + + +
+~~~ + +#### Styles hinzufügen {#adding-styles} + +Um Spreadsheet korrekt anzuzeigen, müssen Sie wichtige Styles für Spreadsheet und seinen Container in der CSS-Hauptdatei des Projekts festlegen: + +~~~css title="app.css" +/* Styles für die initiale Seite festlegen */ +html, +body, +#app { /* stellen Sie sicher, dass Sie den #app-Root-Container verwenden */ + height: 100%; + padding: 0; + margin: 0; +} + +/* Styles für den Spreadsheet-Container festlegen */ +.widget { + height: 100%; +} +~~~ + +#### Daten laden {#loading-data} + +Um Daten in Spreadsheet einzufügen, müssen Sie einen Datensatz bereitstellen. Erstellen Sie die Datei *data.js* im Verzeichnis *src/* und fügen Sie einige Daten hinzu: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // weitere Zellen mit Daten + ] + } +} +~~~ + +Öffnen Sie anschließend die Datei *App.svelte*, importieren Sie die Daten und übergeben Sie sie als **Props** an die neu erstellte ``-Komponente: + +~~~html {3,5,8} title="App.svelte" + + + +~~~ + +Öffnen Sie die Datei *Spreadsheet.svelte* und wenden Sie die übergebenen **Props** mit der Methode [`parse()`](api/spreadsheet_parse_method.md) auf Spreadsheet an: + +~~~html {6,13} title="Spreadsheet.svelte" + + +
+~~~ + +Die Spreadsheet-Komponente ist jetzt einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es Spreadsheet mit Daten. Sie können bei Bedarf auch die erforderlichen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [Spreadsheet API-Dokumentation](api/overview/properties_overview.md), um die vollständige Liste der verfügbaren Eigenschaften einzusehen. + +#### Events verarbeiten {#handling-events} + +Wenn ein Benutzer eine Aktion in Spreadsheet ausführt, löst das Widget ein Event aus. Sie können diese Events nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die [vollständige Liste der Events](api/overview/events_overview.md). + +Öffnen Sie *Spreadsheet.svelte* und ergänzen Sie die Methode `onMount()` wie folgt: + +~~~html {8-11} title="Spreadsheet.svelte" + + +// ... +~~~ + +Wenn Sie die App danach starten, sollten Sie Spreadsheet mit Daten auf der Seite geladen sehen. + +![DHTMLX Spreadsheet initialized with sample data in a Svelte application](/img/integrations/trial_spreadsheet.png) + +Nun haben Sie eine grundlegende Einrichtung für die Integration von DHTMLX Spreadsheet mit Svelte. Sie können den Code entsprechend Ihren spezifischen Anforderungen anpassen. Das fertige Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md new file mode 100644 index 00000000..718ca04f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Configuring built-in themes +title: Integrierte Themes konfigurieren +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie Themes konfigurieren. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Integrierte Themes konfigurieren {#configuring-built-in-themes} + +## Alle Themes konfigurieren {#configuring-all-themes} + +Die CSS-Variablen des [Standard](/themes/#light-theme-default)-Themes enthalten Farbschema-Variablen: + +~~~css +--dhx-h-primary: 200; +--dhx-s-primary: 98%; +--dhx-l-primary: 40%; + +--dhx-h-secondary: 0; +--dhx-s-secondary: 0%; +--dhx-l-secondary: 30%; + +--dhx-h-danger: 0; +--dhx-s-danger: 100%; +--dhx-l-danger: 60%; + +--dhx-h-success: 154; +--dhx-s-success: 89%; +--dhx-l-success: 37%; + +--dhx-h-background: 0; +--dhx-s-background: 0%; +--dhx-l-background: 100%; +--dhx-a-background: 0.5; +~~~ + +:::tip +Farbwerte werden im [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)-Format angegeben, wobei: + +- *Farbton* ein Grad auf dem Farbkreis von 0 bis 360 ist. 0 ist Rot, 120 ist Grun, 240 ist Blau; +- *Sattigung* ein Prozentwert ist; 0% bedeutet vollstandig ungesattigt (Grau) und 100% ist vollstandig gesattigt; +- *Helligkeit* ein Prozentwert ist; 100% ist Weiss, 0% ist Schwarz und 50% ist "normal". +::: + +Aufgrund dieser CSS-Variablen wird das Farbschema automatisch berechnet. Das bedeutet: Wenn Sie einen Farbschemawert im Root andern, werden die Werte fur die Themes `"contrast-light"`, `"dark"` und `"contrast-dark"` in Echtzeit automatisch neu berechnet. + +Sie konnen beispielsweise die Primarfarben fur alle Spreadsheet-Themes gleichzeitig wie folgt uberschreiben: + +~~~html + +~~~ + +Ausserdem werden die Werte der aus der Primarfarbe berechneten Variablen entsprechend neu berechnet. Zum Beispiel wird der Wert der Fokusfarbe wie folgt berechnet: + +~~~jsx +--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); +~~~ + +## Einzelnes Theme konfigurieren {#configuring-a-separate-theme} + +Wenn Sie einige Farbwerte fur ein einzelnes [Spreadsheet-Theme](/themes/) uberschreiben mochten, uberschreiben Sie diese im Attribut `data-dhx-theme`: + +~~~html {1-27,39} + + + +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/themes/custom_theme.md b/i18n/de/docusaurus-plugin-content-docs/current/themes/custom_theme.md new file mode 100644 index 00000000..8045446a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/themes/custom_theme.md @@ -0,0 +1,97 @@ +--- +sidebar_label: Custom theme +title: Benutzerdefiniertes Theme +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie ein benutzerdefiniertes Theme erstellen. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Benutzerdefiniertes Theme {#custom-theme} + +Wenn die integrierten Spreadsheet-Themes nicht zu Ihrem Projekt passen, konnen Sie ein eigenes Farbtheme konfigurieren. +Sehen Sie sich die Themes **custom light** und **custom dark** im folgenden Snippet an: + + + +Um ein eigenes benutzerdefiniertes Theme zu erstellen, uberschreiben Sie die Werte der internen CSS-Variablen wie folgt: + +~~~html + + + +~~~ + +**Verwandtes Beispiel:** [Spreadsheet. Benutzerdefinierte Themes (Skins)](https://snippet.dhtmlx.com/59nt1rcb?mode=wide) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/themes/themes.md b/i18n/de/docusaurus-plugin-content-docs/current/themes/themes.md new file mode 100644 index 00000000..a48861c9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/themes/themes.md @@ -0,0 +1,487 @@ +--- +sidebar_label: Built-in themes +title: Integrierte Themes +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie mehr uber die integrierten Themes. Durchsuchen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Integrierte Themes {#built-in-themes} + +Die DHTMLX Spreadsheet-Bibliothek bietet 4 vordefinierte Themes: + +- [Helles Theme](#light-theme-default) ("light") - wird standardmassig verwendet +- [Dunkles Theme](#dark-theme) ("dark") +- [Helles Hochkontrast-Theme](#light-high-contrast-theme) ("contrast-light") +- [Dunkles Hochkontrast-Theme](#dark-high-contrast-theme) ("contrast-dark") + +Die Spreadsheet-Themes wurden in Ubereinstimmung mit internationalen Standards entwickelt. Die Hochkontrast-Themes helfen Benutzern mit Sehbehinderungen. Weitere Details finden Sie im Artikel [Barrierefreiheitsunterstutzung](https://docs.dhtmlx.com/suite/common_features/accessibility_support/). + +Sie konnen alle Themes im folgenden Beispiel ausprobieren: + + + +## Helles Theme (Standard) {#light-theme-default} + +![DHTMLX Spreadsheet Standard-Hell-Theme mit weissem Hintergrund und dunklem Text](/img/themes/default_theme.png) + +Das Standard-Theme `"light"` wird mithilfe der unten aufgefuhrten CSS-Variablen konfiguriert: + +~~~css +:root, [data-dhx-theme] { + /* Basisfarben */ + --dhx-color-white: #fff; + --dhx-color-gray-100: #e6e6e6; + --dhx-color-gray-200: #ccc; + --dhx-color-gray-300: #b3b3b3; + --dhx-color-gray-400: #999; + --dhx-color-gray-500: #808080; + --dhx-color-gray-600: #666; + --dhx-color-gray-700: #4d4d4d; + --dhx-color-gray-800: #333; + --dhx-color-gray-900: #1a1a1a; + --dhx-color-black: #000; + /* Ende Basisfarben */ + + /* Schrift */ + --dhx-font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; + + --dhx-font-weight-regular: 400; + --dhx-font-weight-medium: 500; + --dhx-font-weight-bold: 700; + + --dhx-font-size-small: 12px; + --dhx-font-size-normal: 14px; + --dhx-font-size-large: 16px; + + --dhx-line-height-small: 16px; + --dhx-line-height-normal: 20px; + --dhx-line-height-large: 24px; + + --dhx-font-color-primary: rgba(0, 0, 0, .7); + --dhx-font-color-secondary: rgba(0, 0, 0, .5); + --dhx-font-color-additional: rgba(0, 0, 0, .3); + --dhx-font-color-disabled: rgba(0, 0, 0, .3); + + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-color-white); + /* Ende Schrift */ + + /* Symbol */ + --dhx-icon-size-small: 16px; + --dhx-icon-size-normal: 20px; + --dhx-icon-size-large: 24px; + /* Ende Symbol */ + + /* Rahmen */ + --dhx-border-width: 1px; + --dhx-border-radius: 2px; + --dhx-border-color: rgba(0, 0, 0, .1); + --dhx-border-color-focused: rgba(0, 0, 0, .3); + --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color); + /* Ende Rahmen */ + + /* Rahmenschatten */ + --dhx-border-shadow-small: 0 2px 4px rgba(0, 0, 0, .15); + --dhx-border-shadow-normal: 0 2px 5px rgba(0, 0, 0, .3); + --dhx-border-shadow-large: 0px 1px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1); + + --dhx-shadow-input-size: inset 0px 0px 0px var(--dhx-border-width); + /* Ende Rahmenschatten */ + + /* Ubergange */ + --dhx-transition-time: 0.2s; + --dhx-transition-in: ease-in; + --dhx-transition-out: ease-out; + /* Ende Ubergange */ + + /* z-index */ + --dhx-z-index-up: 1; + --dhx-z-index-force-up: 10; + --dhx-z-index-overlay: 999; + --dhx-z-index-overlay-total: 10000000; + /* Ende z-index */ + + /* Nur Servicefarbschema */ + --dhx-l-contrast-offset: 0%; /* Helligkeits-Offset fur Kontrast-Theme */ + --dhx-l-h-offset: 10%; /* Helligkeits-Hover-Offset */ + --dhx-s-d-offset: 30%; /* Sattigungs-Deaktivierungs-Offset */ + --dhx-l-d: 70%; /* Helligkeitswert deaktiviert */ + --dhx-a-l-h: .15; /* Alpha-Wert fur helles Hover */ + --dhx-a-l-a: .3; /* Alpha-Wert fur helles Aktiv */ + /* Ende nur Servicefarbschema */ + + /* Farbschema */ + --dhx-h-primary: 200; + --dhx-s-primary: 98%; + --dhx-l-primary: 40%; + + --dhx-h-secondary: 0; + --dhx-s-secondary: 0%; + --dhx-l-secondary: 30%; + + --dhx-h-danger: 0; + --dhx-s-danger: 100%; + --dhx-l-danger: 60%; + + --dhx-h-success: 154; + --dhx-s-success: 89%; + --dhx-l-success: 37%; + + --dhx-h-background: 0; + --dhx-s-background: 0%; + --dhx-l-background: 100%; + --dhx-a-background: 0.5; + /* Ende Farbschema */ + + /* Theme-Farben */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 3%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 10%)); + --dhx-background-overlay: hsla(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) * -1), var(--dhx-a-background)); + --dhx-background-overlay-light: rgba(255, 255, 255, .5); + + --dhx-tooltip-background-dark: var(--dhx-color-gray-800); + --dhx-tooltip-background-light: var(--dhx-color-white); + + --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); + + --dhx-color-primary: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-hover: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-active: var(--dhx-color-primary); + --dhx-color-primary-disabled: hsl(var(--dhx-h-primary), calc(var(--dhx-s-primary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-primary-light-hover: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-primary-light-active: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-secondary: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-hover: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-active: var(--dhx-color-secondary); + --dhx-color-secondary-disabled: hsl(var(--dhx-h-secondary), calc(var(--dhx-s-secondary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-secondary-light-hover: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-secondary-light-active: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-danger: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-hover: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-active: var(--dhx-color-danger); + --dhx-color-danger-disabled: hsl(var(--dhx-h-danger), calc(var(--dhx-s-danger) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-danger-light-hover: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-danger-light-active: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-success: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset))); + --dhx-color-success-hover: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-success-active: var(--dhx-color-success); + --dhx-color-success-disabled: hsl(var(--dhx-h-success), calc(var(--dhx-s-success) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-success-light-hover: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-success-light-active: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + /* Ende Theme-Farben */ + + /* DHTMLX Toolbar-Servicevariablen*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* Ende DHTMLX Toolbar-Servicevariablen */ + + /* DHTMLX Grid-Servicevariablen*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* Ende DHTMLX Grid-Servicevariablen*/ + + /* DHTMLX Calendar-Servicevariablen*/ + --dhx-s-calendar-muffled: .6; + /* Ende DHTMLX Calendar-Servicevariablen*/ + + /* DHTMLX Slider-Servicevariablen*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* Ende DHTMLX Slider-Servicevariablen*/ +} +~~~ + +## Helles Hochkontrast-Theme {#light-high-contrast-theme} + +![DHTMLX Spreadsheet helles Hochkontrast-Theme mit grosseren Schriften und starkeren Rahmen fur barrierefreie Nutzung](/img/themes/light_high_contrast_theme.png) + +Das Theme `"contrast-light"` wird mithilfe der [Root-CSS-Variablen](#light-theme-default) und der unten aufgefuhrten Variablen konfiguriert: + +~~~css +[data-dhx-theme='contrast-light'] { + /* Schrift */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-secondary: rgba(0, 0, 0, .66); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + /* Ende Schrift */ + + /* Rahmen */ + --dhx-border-color: rgba(0, 0, 0, .4); + /* Ende Rahmen */ + + /* Farbschema */ + --dhx-l-contrast-offset: 14%; + /* Ende Farbschema */ + + /* DHTMLX Toolbar-Servicevariablen*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* Ende DHTMLX Toolbar-Servicevariablen */ + + /* DHTMLX Grid-Servicevariablen*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* Ende DHTMLX Grid-Servicevariablen*/ + + /* DHTMLX Calendar-Servicevariablen*/ + --dhx-s-calendar-muffled: .8; + /* Ende DHTMLX Calendar-Servicevariablen*/ + + /* DHTMLX Slider-Servicevariablen*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* Ende DHTMLX Slider-Servicevariablen*/ +} +~~~ + +## Dunkles Theme {#dark-theme} + +![DHTMLX Spreadsheet dunkles Theme mit dunklem Hintergrund und hellem Text fur die Nutzung bei schwachem Licht](/img/themes/dark_theme.png) + +Das Theme `"dark"` wird mithilfe der [Root-CSS-Variablen](#light-theme-default) und der unten aufgefuhrten Variablen konfiguriert: + +~~~css +[data-dhx-theme='dark'] { + /* Schrift */ + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, .7); + --dhx-font-color-additional: rgba(255, 255, 255, .5); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* Ende Schrift */ + + /* Rahmen */ + --dhx-border-color: rgba(255, 255, 255, 0.3); + --dhx-border-color-focused: rgba(255, 255, 255, 0.5); + /* Ende Rahmen */ + + /* Farbschema */ + --dhx-l-secondary: 60%; /* Helligkeits-Offset fur Kontrast-Theme */ + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* Ende Farbschema */ + + /* Theme-Farben */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* Ende Theme-Farben */ + + /* DHTMLX Toolbar-Servicevariablen*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* Ende DHTMLX Toolbar-Servicevariablen */ + + /* DHTMLX Grid-Servicevariablen*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* Ende DHTMLX Grid-Servicevariablen*/ + + /* DHTMLX Calendar-Servicevariablen*/ + --dhx-s-calendar-muffled: .6; + /* Ende DHTMLX Calendar-Servicevariablen*/ + + /* DHTMLX Slider-Servicevariablen*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* Ende DHTMLX Slider-Servicevariablen*/ +} +~~~ + +## Dunkles Hochkontrast-Theme {#dark-high-contrast-theme} + +![DHTMLX Spreadsheet dunkles Hochkontrast-Theme mit verbessertem Textkontrast fur barrierefreie Nutzung](/img/themes/dark_contrast.png) + +Das Theme `"contrast-dark"` wird mithilfe der [Root-CSS-Variablen](#light-theme-default) und der unten aufgefuhrten Variablen konfiguriert: + +~~~css +[data-dhx-theme='contrast-dark'] { + /* Schrift */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, 0.86); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-black); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* Ende Schrift */ + + /* Rahmen */ + --dhx-border-color: rgba(255, 255, 255, 0.5); + --dhx-border-color-focused: rgba(255, 255, 255, 0.7); + /* Ende Rahmen */ + + /* Farbschema */ + --dhx-l-contrast-offset: -12%; /* Helligkeits-Offset fur Kontrast-Theme */ + + --dhx-l-secondary: 60%; + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* Ende Farbschema */ + + /* Theme-Farben */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* Ende Theme-Farben */ + + /* DHTMLX Toolbar-Servicevariablen*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* Ende DHTMLX Toolbar-Servicevariablen */ + + /* DHTMLX Grid-Servicevariablen*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* Ende DHTMLX Grid-Servicevariablen*/ + + /* DHTMLX Calendar-Servicevariablen*/ + --dhx-s-calendar-muffled: .8; + /* Ende DHTMLX Calendar-Servicevariablen*/ + + /* DHTMLX Slider-Servicevariablen*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* Ende DHTMLX Slider-Servicevariablen*/ +} +~~~ + +## Spreadsheet-spezifische Stile {#spreadsheet-specific-styles} + +Die Liste der fur die Spreadsheet-Komponente spezifischen Variablen umfasst folgende: + +- fur das **Standard-Hell**-Theme und das **helle Hochkontrast**-Theme: + +~~~css +:root, [data-dhx-theme],[data-dhx-theme='contrast-light'] { + + --dhx-spreadsheet-range-background-1: #8be3c9; + --dhx-spreadsheet-range-background-2: #f6f740; + --dhx-spreadsheet-range-background-3: #f7b69e; + --dhx-spreadsheet-range-background-4: #e0fcff; + --dhx-spreadsheet-range-background-5: #8fe9ff; + --dhx-spreadsheet-range-background-6: #d8ffa6; + --dhx-spreadsheet-range-background-7: #e4e4e4; + --dhx-spreadsheet-range-background-8: #ecb6ff; + + --dhx-spreadsheet-range-color-1: #00815a; + --dhx-spreadsheet-range-color-2: #bfc000; + --dhx-spreadsheet-range-color-3: #c55933; + --dhx-spreadsheet-range-color-4: #0cc1d6; + --dhx-spreadsheet-range-color-5: #0080a3; + --dhx-spreadsheet-range-color-6: #529a0a; + --dhx-spreadsheet-range-color-7: #6d767b; + --dhx-spreadsheet-range-color-8: #ba38e7; + +} +~~~ + +- fur die **dunklen** und **dunklen Hochkontrast**-Themes: + +~~~css +[data-dhx-theme='contrast-dark'], +[data-dhx-theme='dark'] { + --dhx-spreadsheet-range-background-1: #00815a; + --dhx-spreadsheet-range-background-2: #bfc000; + --dhx-spreadsheet-range-background-3: #c55933; + --dhx-spreadsheet-range-background-4: #0cc1d6; + --dhx-spreadsheet-range-background-5: #0080a3; + --dhx-spreadsheet-range-background-6: #529a0a; + --dhx-spreadsheet-range-background-7: #6d767b; + --dhx-spreadsheet-range-background-8: #ba38e7; + + --dhx-spreadsheet-range-color-1: #8be3c9; + --dhx-spreadsheet-range-color-2: #f6f740; + --dhx-spreadsheet-range-color-3: #f7b69e; + --dhx-spreadsheet-range-color-4: #e0fcff; + --dhx-spreadsheet-range-color-5: #8fe9ff; + --dhx-spreadsheet-range-color-6: #d8ffa6; + --dhx-spreadsheet-range-color-7: #e4e4e4; + --dhx-spreadsheet-range-color-8: #ecb6ff; + +} +~~~ + +## Themes setzen {#setting-themes} + +Um das gewunschte Theme zu setzen, sei es ein integriertes Spreadsheet-Theme oder ein [benutzerdefiniertes](themes/custom_theme.md), verwenden Sie eine der unten beschriebenen Methoden: + +### Verwendung des Attributs `data-dhx-theme` {#using-the-data-dhx-theme-attribute} + +Sie konnen zwischen den folgenden Varianten wahlen: + +- Das Attribut `data-dhx-theme` fur den gewunschten Container setzen: + +~~~html title="index.html" + +
+~~~ + +- Das Attribut `data-dhx-theme` fur ein HTML-Element setzen, z. B. fur `documentElement`: + +~~~jsx title="index.js" +document.documentElement.setAttribute("data-dhx-theme", "dark"); +~~~ + +### Verwendung der Methode `dhx.setTheme()` {#using-the-dhxsettheme-method} + +Die Methode `dhx.setTheme()` akzeptiert folgende Parameter: + +- `theme: string` - (erforderlich) der Name des Themes. Mogliche Werte: + - der Name des Spreadsheet-Themes: `"light" | "contrast-light" | "dark" | "contrast-dark"` + - der Name eines [benutzerdefinierten Themes](themes/custom_theme.md) + - `"light"` - standardmassig +- `container: string | HTMLElement` - (optional) der Container, auf den das Theme angewendet werden soll. Mogliche Werte: + - ein HTMLElement + - ein Zeichenkettenwert mit der ID des Containers oder der ID einer Layout-Zelle + - `document.documentElement` - standardmassig + +Die folgenden Beispiele zeigen, wie die Methode `dhx.setTheme()` verwendet wird: + +- Theme auf den Body oder den Container setzen + +~~~html +
+
Other content
+ + +~~~ + +- Theme auf den via HTMLElement angegebenen Container setzen + +~~~html +
+
Other content
+ + +~~~ + +**Verwandte Beispiele:** + +- [Spreadsheet. Helles, dunkles, helles Hochkontrast- und dunkles Hochkontrast-Theme (Skins)](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet) +- [Spreadsheet. Benutzerdefinierte Themes (Skins)](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/using_typescript.md b/i18n/de/docusaurus-plugin-content-docs/current/using_typescript.md new file mode 100644 index 00000000..0a152380 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/using_typescript.md @@ -0,0 +1,27 @@ +--- +sidebar_label: TypeScript-Unterstützung +title: TypeScript-Unterstützung +description: Sie erfahren, wie Sie TypeScript mit der DHTMLX JavaScript Spreadsheet-Bibliothek verwenden. Sehen Sie sich Entwicklerhandbücher und API-Referenzen an, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# TypeScript-Unterstützung {#typescript-support} + +Ab Version 4.0 unterstützt DHTMLX Spreadsheet TypeScript-Definitionen. Die integrierte TypeScript-Unterstützung ist sofort einsatzbereit. + +{{note Sie können die Funktionalität direkt in unserem Snippet Tool ausprobieren.}} + +![DHTMLX Spreadsheet TypeScript-Unterstützung mit Typüberprüfung und Autovervollständigung in einer IDE](/img/typescript.png) + +## Vorteile der Verwendung von TypeScript {#advantages-of-using-typescript} + +Warum sollten Sie DHTMLX Spreadsheet mit TypeScript verwenden? + +Der Hauptvorteil von TypeScript besteht darin, dass die Entwicklung deutlich effizienter wird. + +Der Aufbau einer Anwendung wird zuverlässiger, da Typüberprüfung und Autovervollständigung dabei helfen, potenzielle Fehler zu vermeiden. Außerdem zeigt TypeScript an, welche Datentypen bei der Arbeit mit der DHTMLX Spreadsheet-API zu verwenden sind. + +## JSDoc-Hinweise {#jsdoc-hints} + +Die Typdefinitionen von DHTMLX Spreadsheet enthalten JSDoc-Annotationen für die gesamte API. Das bedeutet, dass Sie beim Arbeiten mit der Bibliothek in Ihrer IDE Methodenbeschreibungen lesen, Parametertypen prüfen und Codebeispiele anzeigen können, ohne den Editor zu verlassen. Fahren Sie mit der Maus über eine beliebige Methode oder Eigenschaft, um die inline-Dokumentation anzuzeigen. + +![DHTMLX Spreadsheet JSDoc-Hinweise mit Methoden-Inline-Dokumentation in einer IDE](/img/jsdoc_hints.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/vuejs_integration.md b/i18n/de/docusaurus-plugin-content-docs/current/vuejs_integration.md new file mode 100644 index 00000000..b477fc26 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/vuejs_integration.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Integration mit Vue +title: Vue-Integration +description: In der Dokumentation erfahren Sie mehr über die Vue-Integration der DHTMLX JavaScript Spreadsheet-Bibliothek. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Integration mit Vue {#integration-with-vue} + +:::tip +Sie sollten mit den grundlegenden Konzepten und Mustern von [**Vue**](https://vuejs.org/) vertraut sein, bevor Sie diese Dokumentation lesen. Um Ihr Wissen aufzufrischen, lesen Sie bitte die [**Vue 3-Dokumentation**](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX Spreadsheet ist kompatibel mit **Vue**. Wir haben Code-Beispiele vorbereitet, die zeigen, wie Sie DHTMLX Spreadsheet mit **Vue 3** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo). + +## Ein Projekt erstellen {#creating-a-project} + +:::info +Bevor Sie ein neues Projekt erstellen, installieren Sie [**Node.js**](https://nodejs.org/en/). +::: + +Um ein **Vue**-Projekt zu erstellen, führen Sie den folgenden Befehl aus: + +~~~json +npm create vue@latest +~~~ + +Dieser Befehl installiert und führt `create-vue` aus, das offizielle Scaffolding-Tool für **Vue**-Projekte. Details finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +Nennen wir das Projekt **my-vue-spreadsheet-app**. + +### Installation der Abhängigkeiten {#installation-of-dependencies} + +Wechseln Sie in das App-Verzeichnis: + +~~~json +cd my-vue-spreadsheet-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Verwenden Sie dazu einen Paketmanager: + +- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie die folgenden Befehle aus: + +~~~jsx +yarn +yarn start // oder yarn dev +~~~ + +- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie die folgenden Befehle aus: + +~~~json +npm install +npm run dev +~~~ + +Die App sollte auf localhost laufen (zum Beispiel `http://localhost:3000`). + +## Spreadsheet erstellen {#creating-spreadsheet} + +Jetzt müssen Sie den DHTMLX Spreadsheet-Quellcode beziehen. Stoppen Sie zunächst die App und installieren Sie das Spreadsheet-Paket. + +### Schritt 1. Paketinstallation {#step-1-package-installation} + +Laden Sie das [**Spreadsheet-Testpaket**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) herunter und folgen Sie den Schritten in der README-Datei. Beachten Sie, dass das Testpaket von Spreadsheet nur 30 Tage lang verfügbar ist. + +### Schritt 2. Komponente erstellen {#step-2-component-creation} + +Jetzt müssen Sie eine Vue-Komponente erstellen, um Spreadsheet in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis *src/components/* und benennen Sie sie *Spreadsheet.vue*. + +#### Quelldateien importieren {#import-source-files} + +Öffnen Sie die Datei *Spreadsheet.vue* und importieren Sie die Spreadsheet-Quelldateien. Beachten Sie: + +- Wenn Sie die PRO-Version verwenden und das Spreadsheet-Paket aus einem lokalen Ordner installieren, sehen die Import-Pfade folgendermaßen aus: + +~~~html title="Spreadsheet.vue" + +~~~ + +Beachten Sie, dass die Quelldateien je nach verwendetem Paket minifiziert sein können. Stellen Sie in diesem Fall sicher, dass Sie die CSS-Datei als *spreadsheet.min.css* importieren. + +- Wenn Sie die Testversion von Spreadsheet verwenden, geben Sie die folgenden Pfade an: + +~~~html title="Spreadsheet.vue" + +~~~ + +In diesem Tutorial erfahren Sie, wie Sie die **Test**version von Spreadsheet konfigurieren. + +#### Den Container einrichten und Spreadsheet hinzufügen {#setting-the-container-and-adding-spreadsheet} + +Um Spreadsheet auf der Seite anzuzeigen, müssen Sie den Container für Spreadsheet erstellen und diese Komponente mit dem entsprechenden Konstruktor initialisieren: + +~~~html {2,7-8,18} title="Spreadsheet.vue" + + + +~~~ + +#### Styles hinzufügen {#adding-styles} + +Um Spreadsheet korrekt anzuzeigen, müssen Sie wichtige Styles für Spreadsheet und seinen Container in der CSS-Hauptdatei des Projekts angeben: + +~~~css title="main.css" +/* Styles für die initiale Seite angeben */ +html, +body, +#app { /* stellen Sie sicher, dass Sie den #app-Root-Container verwenden */ + height: 100%; + padding: 0; + margin: 0; +} + +/* Styles für den Spreadsheet-Container angeben */ +.widget { + height: 100%; +} +~~~ + +#### Daten laden {#loading-data} + +Um Daten in Spreadsheet einzufügen, müssen Sie einen Datensatz bereitstellen. Sie können die Datei *data.js* im Verzeichnis *src/* erstellen und einige Daten hinzufügen: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // weitere Zellen mit Daten + ] + } +} +~~~ + +Öffnen Sie dann die Datei *App.vue*, importieren Sie die Daten und initialisieren Sie sie mit der internen Methode `data()`. Danach können Sie die Daten als **props** an die neu erstellte ``-Komponente übergeben: + +~~~html {3,7-9,14} title="App.vue" + + + + +~~~ + +Wechseln Sie zur Datei *Spreadsheet.vue* und wenden Sie die übergebenen **props** mit der Methode [`parse()`](api/spreadsheet_parse_method.md) auf Spreadsheet an: + +~~~html {6,10} title="Spreadsheet.vue" + + + +~~~ + +Die Spreadsheet-Komponente ist nun einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es Spreadsheet mit Daten. Sie können auch die erforderlichen Konfigurationseinstellungen angeben. Besuchen Sie unsere [Spreadsheet-API-Dokumentation](api/overview/properties_overview.md), um die vollständige Liste der verfügbaren Eigenschaften zu sehen. + +#### Events verarbeiten {#handling-events} + +Wenn ein Benutzer eine Aktion in Spreadsheet ausführt, löst das Widget ein Event aus. Sie können diese Events nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Lesen Sie die [vollständige Liste der Events](api/overview/events_overview.md). + +Öffnen Sie *Spreadsheet.vue* und vervollständigen Sie die Methode `mounted()`: + +~~~html {8-11} title="Spreadsheet.vue" + + +//... +~~~ + +Danach können Sie die App starten, um Spreadsheet mit Daten auf einer Seite geladen zu sehen. + +![DHTMLX Spreadsheet mit Beispieldaten in einer Vue 3-Anwendung initialisiert](/img/integrations/trial_spreadsheet.png) + +Jetzt wissen Sie, wie Sie DHTMLX Spreadsheet mit Vue integrieren. Sie können den Code entsprechend Ihren spezifischen Anforderungen anpassen. Das fertige Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 00000000..f5a3a2ce --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,804 @@ +--- +sidebar_label: Was ist neu +title: Was ist neu in DHTMLX Spreadsheet +description: Sie erfahren in der Dokumentation, was neu in der DHTMLX JavaScript Spreadsheet-Bibliothek ist. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Was ist neu {#whats-new} + +Wenn Sie Spreadsheet von einer älteren Version aktualisieren, lesen Sie die [Migration auf eine neuere Version](migration.md) für Details. + +## Version 6.0.2 {#version-602} + +Veröffentlicht am 1. Juli 2026 + +### Fehlerbehebungen {#fixes} + +- Zellrahmen gingen nach einem "Kopieren aus Excel → Einfügen in Spreadsheet → Exportieren/Importieren"-Zyklus verloren +- Unterhalb der letzten Zeile eingefügte Daten wurden nicht angezeigt, weil das Raster keine neuen Zeilen hinzufügte, um sie aufzunehmen + +## Version 6.0 {#version-60} + +Veröffentlicht am 20. Mai 2026 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/meet-dhtmlx-spreadsheet-6-0/) + +### Breaking Changes {#breaking-changes} + +Die neue Version führt wesentliche Änderungen in der Spreadsheet-API ein: Es gibt eine Reihe veralteter Methoden, Eigenschaften und Events. Lesen Sie den [Migrationsleitfaden](migration.md#52---60), um mit der neuesten Version Schritt zu halten. + +### Neue Funktionalität {#new-functionality} + +- Der [React Spreadsheet-Wrapper](react.md) wird eingeführt. Zugehörige Beispiele finden Sie im [GitHub-Demo-Repository](https://github.com/DHTMLX/react-spreadsheet-examples) +- Das [`SheetManager`](api/overview/sheetmanager_overview.md)-Modul wird eingeführt. Es ist eine zentrale API zur Verwaltung von Tabellenblättern in Spreadsheet. Es ist über die `spreadsheet.sheets`-Eigenschaft zugänglich und ersetzt alle [veralteten tabellenblattbezogenen Methoden](migration.md#deprecated-methods) auf der Root-Spreadsheet-Instanz. + - neue Methoden: [`sheets.add()`](api/sheetmanager_add_method.md), [`sheets.remove()`](api/sheetmanager_remove_method.md), [`sheets.getAll()`](api/sheetmanager_getall_method.md), [`sheets.getActive()`](api/sheetmanager_getactive_method.md), [`sheets.setActive()`](api/sheetmanager_setactive_method.md), [`sheets.clear()`](api/sheetmanager_clear_method.md), [`sheets.get()`](api/sheetmanager_get_method.md) +- Die Möglichkeit, eine [benutzerdefinierte (anwenderdefinierte) Formel](functions.md#custom-formulas) über die neue [`addFormula()`](api/spreadsheet_addformula_method.md)-Methode anzugeben +- Die Möglichkeit, Zahlen in der [wissenschaftlichen (Exponential-)Schreibweise](number_formatting.md#scientific-number-format) anzuzeigen + +### Aktualisierungen {#updates} + +- Die Möglichkeit, den Schriftgrad des Zellinhalts anzupassen: + - Festlegen einer Standard-Schriftgradoption über ein [integriertes Toolbar-Steuerelement](customization.md#default-controls) + - Festlegen eines [benutzerdefinierten Schriftgrads](customization.md#custom-font-size) für das Toolbar-Steuerelement +- Neue bedingte Aggregationsfunktionen wurden in die [Formel-Engine](functions.md#math-functions) aufgenommen: `COUNTIF`, `COUNTIFS`, `SUMIF`, `SUMIFS`, `AVERAGEIF`, `AVERAGEIFS`, `MAXIFS`, `MINIFS` +- Neue dynamische Array-Funktionen wurden in die [Formel-Engine](functions.md#array-functions) aufgenommen: `CHOOSECOLS`, `CHOOSEROWS`, `DROP`, `EXPAND`, `RANDARRAY`, `SEQUENCE`, `SORT`, `SORTBY`, `TAKE`, `TEXTSPLIT`, `TOCOL`, `TOROW`, `UNIQUE`, `WRAPCOLS`, `WRAPROWS` +- Der [`awaitRedraw()`](awaitredraw.md)-Helfer wurde für Spreadsheet hinzugefügt, um den Rendering-Prozess zu erkennen und gewünschten Code auszuführen, nachdem die Komponente das Rendern abgeschlossen hat +- [JSDoc-Annotationen](using_typescript.md#jsdoc-hints) wurden den Typdefinitionen hinzugefügt, die inline API-Beschreibungen, Parametertypen und Code-Beispiele direkt in der IDE bereitstellen + +### Fehlerbehebungen {#fixes-60} + +- Fokusverlust beim Wechseln des aktiven Tabellenblatts über die API +- Rückgabe eines Arrays geänderter Zellen im Transponierungsmodus +- Neuberechnung abhängiger Formeln nach dem Einfügen +- Überschreiben gesperrter Zellen mit Formeln bei Einfügevorgängen +- Das Problem mit der Ausführung mathematischer Formeln in einer gesperrten Zelle +- Escapierung von Tabellenblattnamen für Namen, die Zellbezügen ähneln, mit einer Zahl beginnen oder Sonderzeichen enthalten +- Das Problem mit dynamischen Arrays, wenn die Zell-ID null ist (die erste Zelle des ersten Tabellenblatts) + +## Version 5.2.9 {#version-529} + +Veröffentlicht am 8. Januar 2026 + +### Fehlerbehebungen {#fixes-529} + +- Die Editor-Dropdown-Filterung verwendet jetzt `startsWith` statt `includes` bei der Eingabe in einem geöffneten Editor +- Excel-Zellrahmen werden jetzt nach Export und Import beibehalten +- Schriftgrad-Überschreiben beim Einfügen aus externen Tabellen wird verhindert + +## Version 5.2.8 {#version-528} + +Veröffentlicht am 15. Dezember 2025 + +### Fehlerbehebungen {#fixes-528} + +- Das Problem mit dem Fokusverlust beim Auswählen einer anderen Zelle während der Formelbearbeitung +- Die Probleme mit der Tastaturnavigation + +## Version 5.2.7 {#version-527} + +Veröffentlicht am 9. Dezember 2025 + +### Fehlerbehebungen {#fixes-527} + +- Export nach Excel schlägt fehl, wenn ein Tabellenblatt eine Zelle mit einer Datenvalidierungsliste enthält +- Das Problem, bei dem ein Dropdown mit einer Datenvalidierungsliste nicht mehr funktioniert, wenn der anfängliche Zellwert `%` ist +- Das Problem mit der `INDEX/MATCH`-Formel, die nach dem Setzen des Fokus in der Formelleiste beschädigt wird + +## Version 5.2.6 {#version-526} + +Veröffentlicht am 19. November 2025 + +### Fehlerbehebungen {#fixes-526} + +- Ein zusätzliches DOM-Element erscheint beim Import einer .xlsx-Datei, die eine Zelle mit umgebrochenem Text enthält +- Falsche Anzeige von Spalten-/Zeilenbeschriftungen im Spalten-Kontextmenü beim Verwalten von Spalten +- Die Tabellenblattstruktur bricht ab, wenn ein Bereich mit verbundenen Zellen eingefroren wird +- Verbesserte Tastaturnavigation in Tabellenblättern mit verbundenen Zellen + +## Version 5.2.5 {#version-525} + +Veröffentlicht am 23. Oktober 2025 + +### Fehlerbehebungen {#fixes-525} + +- Das Problem mit der Verringerung der Zeilenhöhe beim Anwenden der "Umbrechen"-Option auf Inhalt, der in die Spaltenbreite passt + +## Version 5.2.4 {#version-524} + +Veröffentlicht am 24. September 2025 + +### Fehlerbehebungen {#fixes-524} + +- Export-/Import-Unterstützung für mehrzeilige Zellen hinzugefügt + +## Version 5.2.3 {#version-523} + +Veröffentlicht am 10. September 2025 + +### Fehlerbehebungen {#fixes-523} + +- Falsche Ausrichtung von Zahlen in Zellen beim Einfügen von Arrays +- Verbesserte Eingabe in asiatischen Sprachen + +## Version 5.2.2 {#version-522} + +Veröffentlicht am 18. August 2025 + +### Aktualisierungen {#updates-522} + +- `setValidation()` für die Vorausfilterung im integrierten Dropdown-Editor erweitert +- Export-/Import-Unterstützung für ausgeblendete/eingefrorene Spalten/Zeilen, das Datenvalidierungs-Auswahlfeld und Excel-Links in .xlsx-Dateien hinzugefügt + +### Fehlerbehebungen {#fixes-522} + +- Das Problem mit dem Aufheben der Verbindung von verbundenen Zellen in eingefrorenen Spalten/Zeilen +- Das Problem mit der Anwendung integrierter Themes +- Das Problem mit chinesischer Eingabe +- Das Problem mit japanischer Eingabe unter MacOS: Die Autokorrektur-Bestätigung schließt den Editor +- Das Problem beim Kompilieren der `spreadsheet.d.ts`-Datei + +## Version 5.2.1 {#version-521} + +Veröffentlicht am 30. Juni 2025 + +### Aktualisierungen {#updates-521} + +- Die Möglichkeit, mehrere Spalten/Zeilen in einem Vorgang über das Kontextmenü zu entfernen + +### Fehlerbehebungen {#fixes-521} + +- Der Skriptfehler beim Kopieren/Einfügen +- Der Fehler, der beim Löschen einer Zeile auftrat, wenn die beiden oder mehr letzten Zeilen im Tabellenblatt ausgewählt waren +- Das Problem mit der Warnung bei der Toolbar-Anpassung +- Das Problem mit fehlender Lokalisierung für den Datepicker +- Das Problem mit der unnötigen Anzeige des vertikalen Scrollbalkens in der Toolbar +- Mathematische Korrekturen für korrekte Berechnungen in Formeln + +## Version 5.2 {#version-52} + +Veröffentlicht am 20. Mai 2025 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/) + +### Breaking Changes {#breaking-changes-52} + +Die neue Version führt einige Änderungen an der Einfrieren-/Auftauen-Funktionalität für Spalten und Zeilen ein. Lesen Sie den [Migrationsleitfaden](migration.md#51---52), um mit der neuesten Version Schritt zu halten. + +### Veraltet {#deprecated} + +- Die Konfigurationseigenschaften `leftSplit` und `topSplit` wurden entfernt + +### Neue Funktionalität {#new-functionality-52} + +- Zellen bearbeiten: + - die Möglichkeit, [einen formatierten Rahmen für eine Gruppe von Zellen über die Benutzeroberfläche zu erstellen](data_formatting.md#styled-borders-for-cells) +- Spalten/Zeilen einfrieren/auftauen: + - die Möglichkeit, Spalten und Zeilen über die [Benutzeroberfläche](work_with_rows_cols.md#freezingunfreezing-rows-and-columns) einzufrieren/aufzutauen + - die Möglichkeit, Spalten und Zeilen über die [API](working_with_ssheet.md#freezingunfreezing-rows-and-columns) einzufrieren/aufzutauen + - neue Methoden: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + - neue Aktion: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + - neue `freeze`-Eigenschaft für das *sheets*-Objekt der [`parse()`](api/spreadsheet_parse_method.md)-Methode +- Spalten/Zeilen ausblenden/einblenden: + - die Möglichkeit, Spalten und Zeilen über die [Benutzeroberfläche](work_with_rows_cols.md#hidingshowing-rows-and-columns) auszublenden/einzublenden + - die Möglichkeit, Spalten und Zeilen über die [API](working_with_ssheet.md#hidingshowing-rows-and-columns) auszublenden/einzublenden + - neue Methoden: [`hideCols()`](api/spreadsheet_hidecols_method.md), [`showCols()`](api/spreadsheet_showcols_method.md), [`hideRows()`](api/spreadsheet_hiderows_method.md), [`showRows()`](api/spreadsheet_showrows_method.md) + - neue Aktion: [`toggleVisibility`](api/overview/actions_overview.md#list-of-actions) + - neue `hidden`-Eigenschaft für die *cols*- und *rows*-Konfigurationen des *sheets*-Objekts der [`parse()`](api/spreadsheet_parse_method.md)-Methode +- Mit Formeln arbeiten: + - [Popup mit Beschreibungen für Formeln](functions.md#popup-with-formula-description) hinzugefügt + - neue Lokalisierung: [`formulas`](localization.md#default-locale-for-formulas) hinzugefügt +- Datei-Import: + - neues [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md)-Event hinzugefügt, um anzuzeigen, dass das Laden von Daten in Spreadsheet abgeschlossen wurde + +### Fehlerbehebungen {#fixes-52} + +- Das Problem mit der Sortierung +- Das Problem mit dem Verschieben des Filters in eine neue Spalte +- Der Fehler, der beim Blockieren des Hinzufügens eines Tabellenblatts mit der "addSheet"-Aktion auftrat +- Das Problem mit dem Filtern leerer Zellen +- Das Problem beim Bearbeiten einer großen verbundenen Tabelle +- Der Fehler, der beim Rückgängigmachen einer Aktion in einer Zelle auftrat +- Der Fehler, der beim Eingeben/Bearbeiten einer Zelle mit der IF-Formel auftrat +- Der Skriptfehler, der nach dem Ausschneiden und Einfügen eines Links auftrat +- Das Problem mit der Änderung der Textausrichtung beim Export/Import einer .xlsx-Datei +- Das Problem mit dem Fokusverlust von Spreadsheet nach einigen Aktionen +- Leistungsverbesserungen + +## Version 5.1.8 {#version-518} + +Veröffentlicht am 10. Dezember 2024 + +### Fehlerbehebungen {#fixes-518} + +- Das Problem mit dem lokalen Trial-Paket beim Import in Frameworks + +## Version 5.1.7 {#version-517} + +Veröffentlicht am 27. November 2024 + +### Fehlerbehebungen {#fixes-517} + +- Die Warnung "Element nicht gefunden" wurde entfernt +- Parsing-Optimierung +- Ein geöffneter Zell-Editor schließt sich nicht, wenn mit der (Shift)+Tab-Taste zu einer benachbarten Zelle gewechselt wird + +## Version 5.1.6 {#version-516} + +Veröffentlicht am 25. Juli 2024 + +### Fehlerbehebungen {#fixes-516} + +- Eingefügte Zeilen/Spalten fehlen in den serialisierten Daten beim Laden +- Eine leere Datumszelle zeigt das zuletzt ausgewählte Datum im Datepicker und Timepicker an +- Ein Problem mit der Zahlenlokalisierung und einem leeren Zeichenkettenwert in einer Zelle +- Die Suche erhält keinen Fokus während der Bearbeitung einer Zelle +- Die Verwendung von `ngIf/ngFor` für den Spreadsheet-Container verursacht einen Komponentenfehler + + +## Version 5.1.5 {#version-515} + +Veröffentlicht am 13. Februar 2024 + +### Fehlerbehebungen {#fixes-515} + +- Das Einfügen einer Zelle mit Nullen erstellt eine leere Zelle +- Das Kopieren und anschließende Einfügen einer leeren Zelle wirft einen Fehler +- Die `setValue()`-Funktionalität für das allgemeine Format korrigiert +- Speichern der ID eines Tabellenblatts während der Serialisierung und Rückgabe durch das `afterAction`-Event +- Tabellenblattübergreifende Formelverwendung über die Benutzeroberfläche korrigiert +- Strg+F-Suche korrigiert + +## Version 5.1.4 {#version-514} + +Veröffentlicht am 31. Januar 2024 + +### Fehlerbehebungen {#fixes-514} + +- Falsches Einfügen von verbundenen Zellen + +## Version 5.1.3 {#version-513} + +Veröffentlicht am 29. Januar 2024 + +### Fehlerbehebungen {#fixes-513} + +- Falsches Parsen von numerischen Werten im "common"-Format +- Lokalisierungs-i18n-Probleme, wenn Spreadsheet zusammen mit Suite verwendet wird +- Leistungsprobleme beim Laden einer Tabelle mit einer großen Anzahl von verbundenen Zellen +- Falsches Einfügen von verbundenen Zellen + +## Version 5.1.2 {#version-512} + +Veröffentlicht am 16. Januar 2024 + +### Fehlerbehebungen {#fixes-512} + +- Das Problem beim Kopieren und Einfügen von Zellen behoben. Kopierte und eingefügte Zellen mit Datum von Excel nach Spreadsheet werden als Zeichenketten angezeigt +- Das Problem mit dem numerischen Wert im "common"-Format, der als Zahl formatiert ist, behoben +- Das Problem beim Parsen von Daten, das den ursprünglichen Datensatz verändert, behoben +- Das Problem beim Einfügen von verbundenen Zellen behoben + +## Version 5.1.1 {#version-511} + +Veröffentlicht am 14. Dezember 2023 + +### Fehlerbehebungen {#fixes-511} + +- Das Problem behoben, bei dem die `fixColumn()`-Methode das Pfeilsymbol des Select-Editors ignoriert +- Das Problem behoben, bei dem Zellstile Vorrang vor Bereichsstilen haben +- Das Problem beim Kopieren/Einfügen des Inhalts von Zellen mit angewendeten Stilen und der Rückgängig-Funktion behoben +- Das Problem mit einem sich ändernden Link beim Einfügen in eine andere Zelle behoben +- Probleme beim Kopieren/Einfügen von verbundenen Zellen behoben +- Das Problem mit der Serialisierung von Stilen behoben +- Das Scrollen zur Zelle beim Aufruf der `setSelectedCell()`- oder `setFocusedCell()`-Methoden behoben + +## Version 5.1 {#version-51} + +Veröffentlicht am 7. Dezember 2023 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-1/) + +### Neue Funktionalität {#new-functionality-51} + +- [Unterstützung für neue Themes](/themes/): Dunkel, Helles Hochkontrast und Dunkles Hochkontrast +- Erweiterte [Unterstützung für Lokalisierung von Zahlen-, Datums-, Zeit- und Währungsformaten](number_formatting.md#number-date-time-currency-localization) +- [Integration mit dem Svelte-Framework](svelte_integration.md) +- Möglichkeit, [einen benutzerdefinierten Namen für eine exportierte .xlsx-Datei anzugeben](loading_data.md#how-to-set-a-custom-name-for-an-exported-file) +- Möglichkeit, [den "gesperrten" Zellstatus zu speichern](loading_data.md#setting-the-locked-state-for-a-cell) und [einen Link für eine Zelle anzugeben](loading_data.md#adding-a-link-into-a-cell) in einem Datensatz + +### Aktualisierungen {#updates-51} + +- Erneuerte [Integrationen mit React, Angular und Vue.js](/integrations/) +- Automatische [Umwandlung von Kleinbuchstaben in Großbuchstaben](functions.md) in Formeln +- Automatisches Schließen von Formeln + +### Fehlerbehebungen {#fixes-51} + +- Das Problem mit der Anwendung von Rückgängig auf den in einer Zelle gesetzten Wert behoben +- Die Beschränkung der Anzahl der eingefügten Zeilen behoben +- Das Ersetzen von Leerzeichen durch ` `-Symbole in Formeln in der Bearbeitungszeile behoben +- Falsches Verhalten des Excel-Imports mit datumsähnlichen Werten behoben +- Falsches Bearbeiten eines Zellenblocks behoben +- Den Skriptfehler behoben, der beim Aufruf von `getExcelDate()` während der Filterung auftrat +- Das Konvertieren eines Textwerts in eine Zahl beim Einfügen eines Zellinhalts behoben +- Falsches Einfügen von Daten aus einer Excel-Datei mit geänderter Spaltenbreite behoben + +## Version 5.0.10 {#version-5010} + +Veröffentlicht am 27. November 2023 + +### Fehlerbehebungen {#fixes-5010} + +- Typprobleme behoben + +## Version 5.0.9 {#version-509} + +Veröffentlicht am 24. Oktober 2023 + +### Fehlerbehebungen {#fixes-509} + +- Falschen Aufruf der setStyle()-Methode behoben, der before/afterSelectionSet-Events auslöste +- Falschen Inhaltsumbruch behoben +- Typprobleme behoben + +## Version 5.0.7 {#version-507} + +Veröffentlicht am 21. September 2023 + +### Fehlerbehebungen {#fixes-507} + +- Das Problem beim Export von Formeln nach Excel behoben +- Das Problem beim Wiederherstellen des ausgeschnittenen Zellinhalts durch Klicken auf die Rückgängig-Schaltfläche behoben + +## Version 5.0.6 {#version-506} + +Veröffentlicht am 18. September 2023 + +### Fehlerbehebungen {#fixes-506} + +- Das Problem beim Rendern von Nullen behoben +- Das Problem beim Anwenden von Farbstilen, die als Zeichenkettenwerte festgelegt sind, behoben +- Das Problem mit der XSS-Schwachstelle behoben +- Das Problem behoben, bei dem die Änderung eines Werts in einem inaktiven Tabellenblatt den Wert im aktiven Tabellenblatt änderte + +## Version 5.0.5 {#version-505} + +Veröffentlicht am 10. August 2023 + +### Fehlerbehebungen {#fixes-505} + +- Das Problem mit der XSS-Schwachstelle behoben +- Falsches Einfügen von Daten mit Zellverbünden behoben + +## Version 5.0.4 {#version-504} + +Veröffentlicht am 5. Juni 2023 + +### Fehlerbehebungen {#fixes-504} + +- Fehler bei der Blockauswahl oder beim Aufruf eines Kontextmenüs im Nur-Lesen-Modus behoben +- Das Problem mit der Anzeige des Bearbeitungsmenüs im Nur-Lesen-Modus behoben +- Falsches Runden von Zahlen behoben +- Das Problem beim Ersetzen einer Formel durch ihr Ergebnis in der Bearbeitungszeile nach dem Verbinden von Zellen behoben + +## Version 5.0.3 {#version-503} + +Veröffentlicht am 26. April 2023 + +### Fehlerbehebungen {#fixes-503} + +- Falsche Berechnung der letzten zu verbindenden Zelle behoben +- Probleme mit Excel-Import/-Export behoben +- Das Problem behoben, das dazu führte, dass Daten nach der Anwendung der Datenvalidierung vertauscht wurden +- Das Problem behoben, bei dem Text mit dem ":"-Symbol als Link interpretiert wurde +- Das Problem beim Laden mehrzeiliger Daten behoben. Jetzt ist es möglich, die Eigenschaft `multiline: "wrap"` im [`styles`](api/spreadsheet_parse_method.md#parsing-styled-data)-Objekt zu setzen +- Das Problem beim Verbinden von Zellen bei der Spreadsheet-Initialisierung behoben, wenn [`multiSheets`](api/spreadsheet_multisheets_config.md) auf `false` gesetzt ist +- Das Problem beim Zurücksetzen der Scroll-Position nach einem Doppelklick auf den Größenänderungscursor einer Spalte im Tabellenkopf behoben + +## Version 5.0.2 {#version-502} + +Veröffentlicht am 14. Februar 2023 + +### Fehlerbehebungen {#fixes-502} + +- Das Problem behoben, das dazu führte, dass die Ausrichtung einer Zelle nach dem Kopieren und Einfügen des Zellwerts nicht gespeichert wurde +- Das Problem behoben, das dazu führte, dass die Filterergebnisse nach dem Sortieren von Daten geändert wurden +- Das Problem mit der Anzeige des 12-Stunden-Formats im Timepicker behoben +- Das Problem beim Entfernen von Link-Stilen behoben, nachdem die Zelle automatisch ausgefüllt wurde +- Jetzt ist es möglich, mehrere [benutzerdefinierte Formate für Datumsangaben](number_formatting.md#formats-customization) hinzuzufügen +- Jetzt ist es möglich, Spalten und Zeilen zu entfernen, auch wenn sie zu den [begrenzten Spalten und Zeilen](configuration.md#number-of-rows-and-columns) gehören + +## Version 5.0.1 {#version-501} + +Veröffentlicht am 19. Januar 2023 + +### Fehlerbehebungen {#fixes-501} + +- Das Problem behoben, das dazu führte, dass in Zellen mit Währungsformat eingegebene Werte als Zeichenkette und nicht als Zahl gespeichert wurden +- Das Problem beim Löschen der Auswahl der zuvor gesuchten Zellen behoben +- Das Problem mit der Datenanzeige nach dem Parsen in die Tabellenkalkulation behoben +- Das Problem beim Neuzeichnen des Rasters nach dem Entfernen von Spalten behoben +- Das Problem beim Sortieren leerer Werte behoben +- Das Problem bei der Validierung numerischer Werte bei Verwendung einer Dropdown-Liste behoben +- Die Funktion zum automatischen Ausfüllen von Zellen mit alphanumerischen Werten korrigiert +- Verbesserte Arbeit mit Masken von Zahlenformaten +- Jetzt werden alle Zahlenwerte in Zellen standardmäßig rechtsbündig ausgerichtet + +## Version 5.0 {#version-50} + +Veröffentlicht am 21. November 2022 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-0/) + +### Breaking Changes {#breaking-changes-50} + +Die neue Version führt einige Änderungen an der [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md)-Eigenschaft ein. Lesen Sie den [Migrationsartikel](migration.md#43---50), um mit der neuesten Version Schritt zu halten. + +### Neue Funktionalität {#new-functionality-50} + +- Datensuche: + - die Möglichkeit, Daten über die [Benutzeroberfläche](data_search.md) zu suchen + - die Möglichkeit, Daten über die [API](working_with_ssheet.md#searching-for-data) zu suchen: + - neue Methoden: [`search()`](api/spreadsheet_search_method.md) und [`hideSearch()`](api/spreadsheet_hidesearch_method.md) +- Daten filtern: + - die Möglichkeit, Daten über die [Benutzeroberfläche](filtering_data.md) zu filtern + - die Möglichkeit, Daten über die [API](working_with_ssheet.md#filtering-data) zu filtern: + - neue Methoden: [`setFilter()`](api/spreadsheet_setfilter_method.md) und [`getFilter()`](api/spreadsheet_getfilter_method.md) + - neue Aktion: [`filter`](api/overview/actions_overview.md#list-of-actions) +- Zellen verbinden/teilen: + - die Möglichkeit, Zellen über die [Benutzeroberfläche](merge_cells.md) zu verbinden/zu teilen + - die Möglichkeit, Zellen über die [API](working_with_cells.md#merging-cells) zu verbinden/zu teilen: + - neue Eigenschaft des Sheet-Objekts: [`merged`](api/spreadsheet_parse_method.md) + - neue Methode: [`mergeCells()`](api/spreadsheet_mergecells_method.md) + - neue Aktionen: [`merge`](api/overview/actions_overview.md#list-of-actions) und [`unmerge`](api/overview/actions_overview.md#list-of-actions) +- Spaltenbreite automatisch anpassen: + - die Möglichkeit, die Spaltenbreite über die [Benutzeroberfläche](work_with_rows_cols.md#autofit-column-width) automatisch anzupassen + - die Möglichkeit, die Spaltenbreite über die [API](working_with_ssheet.md#autofit-column-width) automatisch anzupassen: + - neue Methode: [`fitColumn()`](api/spreadsheet_fitcolumn_method.md) + - neue Aktion: [`fitColumn`](api/overview/actions_overview.md#list-of-actions) +- Hyperlink einfügen: + - die Möglichkeit, einen Hyperlink in eine Zelle über die [Benutzeroberfläche](work_with_cells.md#inserting-a-hyperlink-into-a-cell) einzufügen + - die Möglichkeit, einen Hyperlink in eine Zelle über die [API](working_with_cells.md#inserting-a-hyperlink-into-a-cell) einzufügen: + - neue Methode: [`insertLink()`](api/spreadsheet_insertlink_method.md) + - neue Aktion: [`insertLink`](api/overview/actions_overview.md#list-of-actions) +- [Durchgestrichenes Format von Daten](data_formatting.md#color-and-style) + +### Aktualisierungen {#updates-50} + +- [Erweiterte Liste der Lokalisierungsoptionen](localization.md#default-locale) +- [Erweiterte Liste der Tastenkombinationen](hotkeys.md): + - für die Datensuche + - `Ctrl (Cmd) + F` + - `Ctrl (Cmd) + G` + - `Ctrl (Cmd) + Shift + G` + - zum Auswählen der gesamten Spalte/Zeile + - `Ctrl (Cmd) + Space` + - `Shift + Space` + - zum Ausrichten des Zellinhalts links/rechts/zentriert + - `Ctrl (Cmd) + Shift + L` + - `Ctrl (Cmd) + Shift + R` + - `Ctrl (Cmd) + Shift + E` + - zum Durchstreichen des Zellinhalts + - `Alt + Shift + 5 (Cmd + Shift + X)` + - zum Hinzufügen neuer Tabellenblätter und Wechseln zwischen ihnen + - `Shift + F11` + - `Alt + Pfeil hoch/ Pfeil runter` + - zum Einfügen eines Hyperlinks in eine Zelle + - `Ctrl (Cmd) + K` + +## Version 4.3 {#version-43} + +Veröffentlicht am 23. Mai 2022 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-3/) + +### Breaking Changes {#breaking-changes-43} + +Version 4.3 bringt keine grundlegenden Änderungen, führt aber eine neue Methode zur Verarbeitung von in der Tabellenkalkulation durchgeführten Aktionen ein. Lesen Sie die Details im [Migrationsartikel](migration.md#42---43). + +### Neue Funktionalität {#new-functionality-43} + +- Die Möglichkeit, eine Dropdown-Liste mit Optionen in Zellen über die [`setValidation()`](api/spreadsheet_setvalidation_method.md)-Methode oder über die [Benutzeroberfläche](work_with_cells.md#using-drop-down-lists-in-cells) hinzuzufügen +- Die Möglichkeit, Zeilen am oberen Rand der Tabellenkalkulation über die `topSplit`-Eigenschaft zu fixieren +- Die Möglichkeit, Daten über die [`sortCells()`](api/spreadsheet_sortcells_method.md)-Methode oder über die [Benutzeroberfläche](sorting_data.md) zu sortieren +- [Die Möglichkeit, langen Text in mehrere Zeilen aufzuteilen](data_formatting.md#wrap-text-in-a-cell) (die Schaltfläche *Textumbruch* wurde in die Toolbar hinzugefügt) +- Erheblich erweiterte Liste der unterstützten [Datums-, Finanz-, Math- und Zeichenkettenfunktionen](functions.md#information-functions) (mit dem Label *added in v4.3* gekennzeichnet) +- Unterstützung für [Nachschlagefunktionen](functions.md#lookup-functions) +- [Zeitformat](number_formatting.md#default-number-formats) hinzugefügt +- Die Möglichkeit, das Format der Zeiten in den Tabellenkalkulations-Zellen über die [`timeFormat`](api/spreadsheet_localization_config.md)-Eigenschaft zu definieren +- Die Möglichkeit, die Zeit in einer Zelle über einen Timepicker einzugeben +- [Export nach JSON](api/export_json_method.md) +- [Import aus JSON](api/spreadsheet_load_method.md#loading-json-files) +- Neue Events hinzugefügt: [beforeAction](api/spreadsheet_beforeaction_event.md) und [afterAction](api/spreadsheet_afteraction_event.md) +- Neues [Aktionssystem](api/overview/actions_overview.md) + +### Aktualisierungen {#updates-43} + +- Die [`parse()`](api/spreadsheet_parse_method.md)-Methode wurde aktualisiert. Ein neues **editor**-Attribut eines Zellobjekts wurde hinzugefügt + +## Version 4.2 {#version-42} + +Veröffentlicht am 29. November 2021 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-2-with130-new-functions-boolean-operators-date-format-row-resizing-much/) + +### Neue Funktionalität {#new-functionality-42} + +- Unterstützung für [Datums-](functions.md#date-functions), [Finanz-](functions.md#financial-functions), [Informations-](functions.md#information-functions), [Regex-](functions.md#regex-functions) und [sonstige](functions.md#other-functions) Funktionen +- Unterstützung für [boolesche Operatoren](functions.md#boolean-operators) +- Die Möglichkeit, Zeilen über die Benutzeroberfläche in der Größe zu ändern +- Neue Schaltfläche [Vertikale Ausrichtung](data_formatting.md#alignment) in die Toolbar hinzugefügt +- Die Möglichkeit, das aktive Tabellenblatt über die `setActiveSheet()`-Methode festzulegen +- Die Möglichkeit, die Auswahl aus den angegebenen Zellen über die [`removeSelectedCell()`](api/selection_removeselectedcell_method.md)-Methode des Selection-Objekts zu entfernen +- Die Möglichkeit, eine Tabellenkalkulation oder ihr Tabellenblatt über die [`clear()`](api/spreadsheet_clear_method.md)- oder `clearSheet()`-Methode zu löschen +- Neue Events hinzugefügt: [`beforeClear`](api/spreadsheet_beforeclear_event.md), [`afterClear`](api/spreadsheet_afterclear_event.md), `beforeSheetClear`, `afterSheetClear` +- Die Möglichkeit, das Format der Datumsangaben in der Tabellenkalkulation über die [`dateFormat`](api/spreadsheet_localization_config.md)-Eigenschaft zu definieren +- [Datumsformat wurde zu den Standard-Zahlenformaten hinzugefügt](number_formatting.md#default-number-formats) + +### Aktualisierungen {#updates-42} + +- Erweiterte Liste der [Lokalisierungsoptionen](localization.md) +- Erweiterte Liste der [Math-](functions.md#math-functions) und [Zeichenkettenfunktionen](functions.md#string-functions) +- Der Ausrichten-Block der Spreadsheet-Toolbar wurde aktualisiert. Lesen Sie die Details im [Migrationsartikel](migration.md#41---42) +- Die [`parse()`](api/spreadsheet_parse_method.md)- und [`serialize()`](api/spreadsheet_serialize_method.md)-Methoden wurden aktualisiert. Neue **rows**- und **cols**-Attribute des Sheet-Objekts ermöglichen das Speichern des Zustands der Zeilenhöhe und Spaltenbreite für jedes Tabellenblatt. + +### Fehlerbehebungen {#fixes-42} + +- Problem mit der CTRL-X-Tastenkombination +- Problem, das dazu führte, dass ein Skriptfehler auftrat, wenn eine Zelle in der Tabellenkalkulation mit ausgeblendeter [Bearbeitungszeile](api/spreadsheet_editline_config.md) bearbeitet wurde + +## Version 4.1.3 {#version-413} + +Veröffentlicht am 31. August 2021 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-6-scheduler-5-3-12-suite-7-2-1/) + +### Fehlerbehebungen {#fixes-413} + +- Falsches Verhalten der Rückgängig-Operation beim Zurücksetzen der Zeile/Spalte nach dem Entfernen behoben +- Falsches Verhalten der im Zahlenformat-Objekt angegebenen "mask"-Eigenschaft behoben +- Das Problem behoben, das dazu führte, dass leere Zellen/Zeilen oben in der Auswahl nach dem Einfügen von Daten aus Excel in die Tabellenkalkulation abgeschnitten wurden +- Das Problem behoben, das dazu führte, dass die Zellen, auf die die absolute Formel verweist, nicht markiert wurden +- Das Problem mit dem "afterSelectionSet"-Event behoben, das dazu führte, dass das Event zweimal ausgelöst wurde, nachdem ein Zellbereich ausgewählt wurde +- Das Problem mit TypeScript-Definitionen behoben +- Die Probleme mit dem "text"-Zahlenformat behoben + +## Version 4.1.2 {#version-412} + +Veröffentlicht am 3. Juni 2021 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/maintenance-release-suite-7-1-9-spreadsheet-4-1-2/) + +### Fehlerbehebungen {#fixes-412} + +- Falsches automatisches Ausfüllen von Zellen mit mathematischen Funktionen beim gleichzeitigen Anwenden des automatischen Ausfüllens auf mehrere Spalten behoben +- Das Problem behoben, das dazu führte, dass die ausgewählte Zelle nach dem nächsten Klick mit "Strg + Klick" nicht deselektiert wurde +- Das Problem mit der Anwendung der mathematischen Formel auf die Zelle nach der Auswahl der Formel mit der Tastaturnavigation behoben +- Das Problem beim Sperren/Entsperren von Zellen, die mit "Strg + Klick" ausgewählt wurden, behoben +- Das Problem mit der "serialize()"-Methode behoben, das dazu führte, dass "0"-Werte nicht serialisiert wurden +- Das Problem mit der automatischen Anpassung der Spaltenbreite nach dem Klicken auf den Kopfbereichsrahmen zwischen den Spalten behoben +- Das Problem mit der Anzeige von Nullwerten in der Bearbeitungszeile behoben +- Das Problem beim Bearbeiten langer Zellinhalte behoben +- Das Problem beim Export der Tabellenkalkulation in eine Excel-Datei behoben +- Die Probleme mit dem falschen Verhalten der horizontalen Bildlaufleiste und der Anzeige von Spalten beim Arbeiten mit einer Tabellenkalkulation mit vielen Spalten behoben +- Den Skriptfehler behoben, der nach der Verwendung der Tastaturnavigation in der leeren Tabellenkalkulation auftrat + +## Version 4.1.1 {#version-411} + +Veröffentlicht am 14. April 2021 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-2-suite-7-1-5-spreadsheet-4-1-1/) + +### Fehlerbehebungen {#fixes-411} + +- Das Problem mit TypeScript-Definitionen behoben +- Die Probleme mit absoluten Referenzen behoben +- Die Probleme behoben, die beim Arbeiten mit aus einer ".xlsx"-Datei geladenen Daten auftraten +- Das Problem mit dem falschen Einfügen von aus einer Excel-Datei kopierten Daten behoben +- Das Problem behoben, das dazu führte, dass beim Summieren von Fließkommazahlen ein falsches Ergebnis zurückgegeben wurde + +## Version 4.1 {#version-41} + +Veröffentlicht am 24. März 2021 + +[Versionsüberblick im Blog](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-1-multiple-sheets/) + +### Neue Funktionalität {#new-functionality-41} + +- Neue [multiSheets](api/spreadsheet_multisheets_config.md)-Konfigurationsoption hinzugefügt +- Die Möglichkeit, [mit mehreren Tabellenblättern](work_with_sheets.md) in der Tabellenkalkulation zu arbeiten +- Die Möglichkeit, [Querverweise in mehreren Tabellenblättern](work_with_sheets.md#cross-references-between-sheets) zu verwenden +- Die Möglichkeit, [mehrere Tabellenblätter gleichzeitig](working_with_sheets.md#loading-multiple-sheets) in die Tabellenkalkulation zu laden +- Neue Methoden für die Arbeit mit [mehreren Tabellenblättern](working_with_sheets.md) hinzugefügt: `addSheet()`, `removeSheet()`, `getActiveSheet()`, `getSheets()` +- Neue Events hinzugefügt: `BeforeSheetAdd`, `AfterSheetAdd`, [`BeforeSheetChange`](api/spreadsheet_beforesheetchange_event.md), [`AfterSheetChange`](api/spreadsheet_aftersheetchange_event.md), `BeforeSheetRemove`, `AfterSheetRemove`, `BeforeSheetRename`, `AfterSheetRename` +- Die Möglichkeit, die Formel einer Zelle über die [getFormula()](api/spreadsheet_getformula_method.md)-Methode abzurufen + +### Aktualisierungen {#updates-41} + +- Das Format des "cell"-Parameters der [getValue()](api/spreadsheet_getvalue_method.md)-, [setValue()](api/spreadsheet_setvalue_method.md)-, [getStyle()](api/spreadsheet_getstyle_method.md)-, [setStyle()](api/spreadsheet_setstyle_method.md)-, [getFormat()](api/spreadsheet_getformat_method.md)-, [setFormat()](api/spreadsheet_setformat_method.md)-, [isLocked()](api/spreadsheet_islocked_method.md)-, [lock()](api/spreadsheet_lock_method.md)-, [unlock()](api/spreadsheet_unlock_method.md)-Methoden wurde aktualisiert. Jetzt kann der Verweis auf eine Zelle oder einen Zellbereich den Namen des Tabs enthalten. + +## Version 4.0.5 {#version-405} + +Veröffentlicht am 3. Februar 2021 + +### Fehlerbehebungen {#fixes-405} + +- Das Leistungsproblem behoben +- Den Skriptfehler behoben, der auftrat, wenn der Benutzer die letzte Aktion in der Zelle rückgängig machte +- Den nach dem Aufruf des Destruktors geworfenen Skriptfehler behoben +- Das Problem behoben, das dazu führte, dass Werte aus einem Zellbereich beim Einfügen in eine einzelne Zelle abgeschnitten wurden +- Das Problem beim Erkennen des Formats einer Zelle behoben, nachdem die Zelle ausgeschnitten und dann ein zweites Mal eingefügt wurde + +## Version 4.0.4 {#version-404} + +Veröffentlicht am 12. Januar 2021 + +### Fehlerbehebungen {#fixes-404} + +- Das falsche Verhalten der "SUM"-Funktion beim Arbeiten mit mehr als 2 Zahlen behoben +- Das Problem bei der Initialisierung der Tabellenkalkulation nach dem Aufruf von "destructor()" behoben +- Das Problem mit Typen behoben + +## Version 4.0.3 {#version-403} + +Veröffentlicht am 28. Dezember 2020 + +### Fehlerbehebungen {#fixes-403} + +- Das Problem beim Festlegen des Formats für den Wert einer Zelle innerhalb eines Datensatzes behoben +- Den Fehler behoben, der beim Anhängen der Tabellenkalkulation an das Layout auftrat +- Das Problem behoben, das dazu führte, dass die für eine Zelle gesetzte Formel nach der Berechnung des Ergebnisses nicht bearbeitet werden konnte +- Das falsche Verhalten der [setFocusedCell()](api/selection_setfocusedcell_method.md)-Methode behoben +- Das falsche Fokusverhalten beim Arbeiten mit Formeln behoben +- Das Problem beim Auswählen eines Zellbereichs mit der "Strg"-Taste behoben +- Das Problem beim Hinzufügen eines Zellbereichs über "Strg+Klick" zu einer Zelle mit einer Formel behoben +- Das falsche Verhalten von Math-Funktionen behoben +- Das Problem mit der SUM()-Formel beim Auswählen über das Popup und einen Mausklick behoben + +## Version 4.0.2 {#version-402} + +Veröffentlicht am 21. Dezember 2020 + +### Fehlerbehebungen {#fixes-402} + +- Das falsche Verhalten der Tastaturnavigation beim Erstellen von 2 oder mehr Tabellenkalkulations-Objekten auf der Seite behoben +- Das Problem mit dem aus der Datei types.d.ts geworfenen Fehler behoben +- Probleme beim Kopieren und Einfügen eines Zellbereichs behoben + +## Version 4.0.1 {#version-401} + +Veröffentlicht am 2. Dezember 2020 + +### Fehlerbehebungen {#fixes-401} + +- Die falsche Anzeige der Tooltips beim Hovern über die Rückgängig/Wiederholen-Schaltflächen in der Toolbar +- Das Problem, das beim Entfernen der letzten Spalte der Tabellenkalkulation nach dem Import von Daten auftrat, die größer als die Tabellenkalkulationsgröße sind +- Das Problem mit der [setSelectedCell()](api/selection_setselectedcell_method.md)-Methode, das dazu führte, dass die Formel der ausgewählten Zelle nicht in der Formelleiste angezeigt wurde +- Die fehlerhafte Generierung der TypeScript-Definitionen +- Das visuelle Problem mit der Ausrichtung des Zellinhalts +- Das Problem mit der Serialisierung leerer Zellen oder Zellen mit dem Wert null + +## Version 4.0 {#version-40} + +Veröffentlicht am 19. Oktober 2020 + +### Neue Funktionalität {#new-functionality-40} + +- [Math-Funktionen](functions.md) +- [TypeScript-Unterstützung](using_typescript.md) +- Die Möglichkeit, Spalten auf der linken Seite der Tabellenkalkulation über die `leftSplit`-Konfigurationseigenschaft einzufrieren +- [Das Text-Format zur Anzeige des Zellinhalts als Text wurde zu den Standard-Zahlenformaten hinzugefügt](number_formatting.md#default-number-formats) +- Die Möglichkeit, mehrere verstreute Zellbereiche durch Verwendung der Kombination ["Strg+Shift+Linksklick"](hotkeys.md#selection) auszuwählen + +### Fehlerbehebungen {#fixes-40} + +- Das falsche Verhalten des Farbwählers beim Anwenden der Hintergrundfarbe auf einen Zellbereich behoben +- Das falsche Parsen von Zahlen beim Import von Excel-Dateien behoben +- Das Problem behoben, das dazu führte, dass alle aus einer Google- oder Excel-Tabelle kopierten Daten in eine Zelle der Tabellenkalkulation eingefügt wurden +- Das falsche Verhalten der [editLine:false](api/spreadsheet_editline_config.md)-Eigenschaft behoben, das dazu führte, dass der Bearbeitungsvorgang mit einem Fehler in der Konsole endete +- Das Problem mit dem `AfterValueChange`-Event behoben, das dazu führte, dass das Event zweimal aufgerufen wurde + +## Version 3.1.4 {#version-314} + +Veröffentlicht am 19. September 2019 + +### Fehlerbehebungen {#fixes-314} + +- Stil-Korrekturen + +## Version 3.1.3 {#version-313} + +Veröffentlicht am 19. September 2019 + +### Fehlerbehebungen {#fixes-313} + +- Problem mit dem Fokus auf einer Zelle, wenn Spreadsheet an Layout angehängt ist + +## Version 3.1.2 {#version-312} + +Veröffentlicht am 25. März 2019 + +### Fehlerbehebungen {#fixes-312} + +- Probleme mit Textstilen beim Excel-Export +- Problem mit dem Unterstreichen von rechtsbündig ausgerichtetem Text + +## Version 3.1.1 {#version-311} + +Veröffentlicht am 25. März 2019 + +### Fehlerbehebungen {#fixes-311} + +- Probleme beim Export nach Excel + +## Version 3.1 {#version-31} + +Veröffentlicht am 21. März 2019 + +### Neue Funktionalität {#new-functionality-31} + +- [Import aus Excel](loading_data.md#loading-excel-file-xlsx) +- [Export nach Excel](loading_data.md#exporting-data) +- [Zahlenformatierung](number_formatting.md) +- [Automatisches Ausfüllen von Zellen](work_with_cells.md#auto-filling-cells-with-content) + +### Aktualisierungen {#updates-31} + +- [Tastenkombinationsverhalten in einem Zellbereich](hotkeys.md) + +### Fehlerbehebungen {#fixes-31} + +- Probleme mit Tastenkombinationen auf der aktiven Zelle + +## Version 3.0.3 {#version-303} + +Veröffentlicht am 13. Dezember 2018 + +### Fehlerbehebungen {#fixes-303} + +- Falsches Verhalten im benutzerdefinierten Nur-Lesen-Modus +- Probleme mit Methoden zum Entfernen einer Spalte/Zeile +- Probleme mit dem Fokusverlust auf der Bearbeitungszeile +- Probleme mit Tastenkombinationen auf der aktiven Zelle + +## Version 3.0.2 {#version-302} + +Veröffentlicht am 6. Dezember 2018 + +### Fehlerbehebungen {#fixes-302} + +- Probleme mit dem Tastenkombinationsverhalten +- Probleme mit der Platzierung des Auswahlgriffs +- Probleme mit dem Fokusverlust auf der aktiven Zelle +- Falsches Auswahlverhalten auf der aktiven Zelle +- Falsches Tastenkombinationsverhalten auf der aktiven Zelle +- Falsches Scrollverhalten mit Pfeiltasten + +## Version 3.0.1 {#version-301} + +Veröffentlicht am 8. November 2018 + +### Fehlerbehebungen {#fixes-301} + +- Falsches Verhalten der Rückgängig-Operation +- Falsches Verhalten der Ausschneiden-Einfügen-Operation auf einer Gruppe von Zellen + +## Version 3.0 {#version-30} + +Veröffentlicht am 25. Oktober 2018 + +### Breaking Change {#breaking-change} + +{{note Die API der Version 3.0 ist nicht kompatibel mit API v2.1.}} + +Im Vergleich zur vorherigen PHP-basierten Version ist DHTMLX Spreadsheet der Version 3.0 eine vollständig clientseitige JavaScript-Komponente. + +Lesen Sie den [Migrations-](migration.md#21---30)Artikel, um Informationen zur Verwendung der neuen API zu erhalten. + +### Neue Funktionalität {#new-functionality-30} + +Die API von Spreadsheet wurde geändert und ist handlicher zu verwenden. Eine weitere wesentliche Aktualisierung ist das vollständige Redesign der Komponente, das der Oberfläche von Spreadsheet ein modernes Aussehen verlieh. Zusammen mit dem frischen Erscheinungsbild wurde die Benutzerfreundlichkeit von DHTMLX Spreadsheet erheblich verbessert. + +- [Spreadsheet-Übersicht](/) +- [Vollständig anpassbare Struktur und einstellbares Erscheinungsbild](customization.md) +- [Vollständig erneuerte API](api/api_overview.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/work_with_cells.md b/i18n/de/docusaurus-plugin-content-docs/current/work_with_cells.md new file mode 100644 index 00000000..fef9c203 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/work_with_cells.md @@ -0,0 +1,173 @@ +--- +sidebar_label: Zellen bearbeiten +title: Zellen bearbeiten +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie alles über die Arbeit mit Zellen. Lesen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Zellen bearbeiten {#editing-cells} + +## Inhalt in eine Zelle eingeben {#entering-content-in-a-cell} + +### Daten manuell eingeben {#entering-data-manually} + +- Klicken Sie auf eine gewünschte Zelle in einem Tabellenblatt. +- Geben Sie Text, eine Zahl, ein Datum oder eine Uhrzeit ein und drücken Sie **Enter**. + +### Eine Formel eingeben {#entering-a-formula} + +- Klicken Sie auf die Zelle, in der das Formelergebnis erscheinen soll. +- Geben Sie das Zeichen `=` ein. +- Erstellen Sie eine Formel. Dazu können Sie Folgendes verwenden: + - Konstante Zahlen und Rechenoperatoren, zum Beispiel `=3-2*5+12` + - Zellbezüge und Rechenoperatoren, zum Beispiel `=A1/A2` + - [Integrierte Funktionen](functions.md), zum Beispiel `=MAX(C46;D46)` +- Drücken Sie **Enter**. + +:::note +Kleinbuchstaben in Formeln werden automatisch in Großbuchstaben umgewandelt. +::: + +## Einen Hyperlink in eine Zelle einfügen {#inserting-a-hyperlink-into-a-cell} + +### Einen Link hinzufügen {#adding-a-link} + +Um einen Hyperlink in eine Zelle einzufügen, können Sie eine der unten beschriebenen Methoden verwenden. + +#### Über das Kontextmenü {#using-context-menu} + +- Klicken Sie mit der rechten Maustaste auf die Zelle und wählen Sie *Link einfügen* + +![DHTMLX Spreadsheet-Kontextmenü mit hervorgehobener Option „Link einfügen"](/img/link/via_context_menu.png) + +- Geben Sie im angezeigten Fenster den Text und den Link ein und klicken Sie auf *Speichern* + +![DHTMLX Spreadsheet-Dialog „Link einfügen" mit Eingabefeldern für Text und Link](/img/link/popup_window.png) + +#### Über die Symbolleisten-Schaltfläche {#using-toolbar-button} + +- Wählen Sie die Zelle aus und klicken Sie in der Symbolleiste auf die Schaltfläche **Link einfügen** + +![DHTMLX Spreadsheet-Symbolleiste mit hervorgehobener Schaltfläche „Link einfügen"](/img/link/via_toolbar.png) + +- Geben Sie im angezeigten Fenster den Text und den Link ein und klicken Sie auf *Speichern* + +#### Über das Menü {#using-menu} + +- Wählen Sie die Zelle aus und gehen Sie im Menü zu: *Einfügen -> Link einfügen* + +![DHTMLX Spreadsheet-Menü „Einfügen" mit der Option „Link einfügen"](/img/link/via_menu.png) + +- Geben Sie im angezeigten Fenster den Text und den Link ein und klicken Sie auf *Speichern*. + +### Einen Link kopieren {#copying-a-link} + +- Wählen Sie die Zelle aus, die den Link enthält, den Sie kopieren möchten +- Klicken Sie im angezeigten Popup auf das Symbol **Kopieren** + +![DHTMLX Spreadsheet-Link-Popup mit hervorgehobenem Symbol „Kopieren"](/img/link/copy_link.png) + +### Einen Link bearbeiten {#editing-a-link} + +- Wählen Sie die Zelle aus, die den Link enthält, den Sie bearbeiten möchten +- Klicken Sie im angezeigten Popup auf das Symbol **Bearbeiten** + +![DHTMLX Spreadsheet-Link-Popup mit hervorgehobenem Symbol „Bearbeiten"](/img/link/edit.png) + +### Einen Link entfernen {#removing-a-link} + +- Wählen Sie die Zelle aus, die den Link enthält, den Sie entfernen möchten +- Klicken Sie im angezeigten Popup auf das Symbol **Link entfernen** + +![DHTMLX Spreadsheet-Link-Popup mit hervorgehobenem Symbol „Link entfernen"](/img/link/remove_link.png) + +## Dropdown-Listen in Zellen verwenden {#using-drop-down-lists-in-cells} + +Sie können in einer Zelle eine Dropdown-Liste erstellen, damit Benutzer das gewünschte Element aus der Liste auswählen können. + +### Eine Dropdown-Liste manuell erstellen {#creating-a-drop-down-list-by-typing-it-manually} + +- Wählen Sie eine Zelle oder einen Zellbereich aus, in dem Sie die Liste erstellen möchten + +- Gehen Sie im Menü zu: *Daten -> Datenvalidierung* + +- Wählen Sie das Kriterium *Liste der Elemente* + +- Geben Sie die Elemente ein, die in der Dropdown-Liste erscheinen sollen + +- Klicken Sie auf die Schaltfläche **Speichern** + +![DHTMLX Spreadsheet-Dialog „Datenvalidierung" – Erstellen einer Dropdown-Liste aus einer Elementliste](/img/data_validation.gif) + +### Eine Dropdown-Liste aus einem Bereich erstellen {#creating-a-drop-down-list-by-using-a-range} + +- Geben Sie die Elemente ein, die in der Dropdown-Liste erscheinen sollen + +- Wählen Sie eine Zelle oder einen Zellbereich aus, in dem Sie die Liste erstellen möchten + +- Gehen Sie im Menü zu: *Daten -> Datenvalidierung* + +- Wählen Sie das Kriterium *Liste aus einem Bereich* + +- Wählen Sie Ihren Listenbereich aus + +- Klicken Sie auf die Schaltfläche **Speichern** + +![DHTMLX Spreadsheet-Dialog „Datenvalidierung" – Erstellen einer Dropdown-Liste aus einem Zellbereich](/img/data_validation_range.gif) + +### Validierung aus einer Zelle entfernen {#removing-validation-from-a-cell} + +Sie können die Verwendung einer Dropdown-Liste in einer Zelle beenden. Gehen Sie dazu folgendermaßen vor: + +- Wählen Sie die gewünschte Zelle oder den Zellbereich aus, aus dem Sie die Dropdown-Liste entfernen möchten +- Gehen Sie im Menü zu: *Daten -> Datenvalidierung* +- Wählen Sie die Option *Validierung entfernen* + +![DHTMLX Spreadsheet-Menü „Daten" mit der Option „Datenvalidierung – Validierung entfernen"](/img/remove_validation.png) + +## Dieselben Daten in mehrere Zellen eingeben {#entering-the-same-data-in-several-cells} + +Sie können dieselben Daten in mehrere Zellen eingeben, indem Sie den **Ausfüllpunkt** verwenden, um Daten in Tabellenzellen automatisch zu füllen. Weitere Details finden Sie unten. + +### Zellen automatisch mit Inhalt füllen {#auto-filling-cells-with-content} + +Sie können Zellen automatisch mit Daten füllen. So funktioniert es: + +1\. Wählen Sie eine oder mehrere Zellen aus, deren Daten als Grundlage für das Füllen weiterer Zellen dienen sollen. + +2\. Geben Sie Daten in die ausgewählte(n) Zelle(n) ein. Das automatische Füllen funktioniert auf mehrere Arten: + +- Kopieren des Werts + +​Beispiel: Um die Reihe 4, 4, 4, 4, ... zu erstellen, geben Sie 4 nur in die erste Zelle ein. + +- Nach einem Muster + - Um die Reihe 1, 2, 3, 4, 5, ... zu erstellen, geben Sie 1 und 2 in die ersten beiden Zellen ein. + - Um die Reihe 1, 3, 5, 7, 9, ... zu erstellen, geben Sie 1 und 3 in die ersten beiden Zellen ein. + - Um die Reihe 2, 4, 6, 8, 10, ... zu erstellen, geben Sie 2 und 4 in die ersten beiden Zellen ein. + - Neben Zahlen können Sie auch Buchstaben in einem Muster verwenden, zum Beispiel: Um eine Reihe wie 1, a, 2, b, 3, a, 4, b, ... zu erstellen, geben Sie 1, a, 2, b in die ersten vier Zellen ein. + +3\. Ziehen Sie den **Ausfüllpunkt** + +![DHTMLX Spreadsheet-Autofill – Ausfüllpunkt ziehen, um Zelldaten zu replizieren](/img/autofill.gif) + +## Zellen sperren {#locking-cells} + +Sie können Zellen sperren, um ihre Werte vor Änderungen zu schützen. Wenn Sie eine Zelle sperren, wird in der oberen rechten Ecke ein graues "Schlüssel"-Symbol angezeigt. Gesperrte Zellen reagieren nicht auf Bearbeitungsversuche. + +![DHTMLX Spreadsheet – gesperrte Zellen, markiert mit einem grauen Schlüssel-Symbol in der oberen rechten Ecke](/img/lockedcells.png) + +Um eine Zelle zu sperren oder zu entsperren, verwenden Sie eine der unten beschriebenen Methoden: + +### Zellen über die Symbolleisten-Schaltfläche sperren {#lock-cells-via-the-toolbar-button} + +- Wählen Sie die Zellen aus, die Sie sperren/entsperren möchten (sie müssen nicht benachbart sein). +- Klicken Sie in der Symbolleiste auf die Schaltfläche **Zelle sperren**. + +![DHTMLX Spreadsheet-Symbolleiste mit hervorgehobener Schaltfläche „Zelle sperren"](/img/lock.png) + +### Zellen über das Kontextmenü sperren {#lock-cells-via-the-context-menu} + +- Klicken Sie mit der rechten Maustaste auf eine Zelle oder einen Zellbereich, den Sie sperren/entsperren möchten. +- Wählen Sie im angezeigten Kontextmenü die Option „Zelle sperren/entsperren". + +![DHTMLX Spreadsheet-Kontextmenü mit hervorgehobener Option „Zelle sperren/entsperren"](/img/unlock.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/work_with_rows_cols.md b/i18n/de/docusaurus-plugin-content-docs/current/work_with_rows_cols.md new file mode 100644 index 00000000..ff40c61f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/work_with_rows_cols.md @@ -0,0 +1,261 @@ +--- +sidebar_label: Arbeiten mit Zeilen und Spalten +title: Arbeiten mit Zeilen und Spalten +description: Sie erfahren, wie Sie in der DHTMLX JavaScript Spreadsheet-Bibliothek mit Zeilen und Spalten arbeiten. Entdecken Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Arbeiten mit Zeilen und Spalten {#work-with-rows-and-columns} + +DHTMLX Spreadsheet ermöglicht Ihnen das Hinzufügen und Entfernen von Spalten und Zeilen, das automatische Anpassen der Spaltenbreite an den Inhalt, das Fixieren und Aufheben der Fixierung von Spalten und Zeilen sowie das Ein- und Ausblenden von Spalten und Zeilen uber Toolbar-Schaltflachen, Menüoptionen und Kontextmenüoptionen der Zelle. + +## Hinzufügen/Entfernen von Zeilen und Spalten {#addingremoving-rows-and-columns} + +### Zeilen hinzufügen {#adding-rows} + +Um eine neue Zeile hinzuzufügen, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Zeile (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Zeile aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Rows** in der Toolbar und wählen Sie die Option *Add row above* + +![DHTMLX Spreadsheet Rows toolbar button with the Add row above option highlighted](/img/add_row_button.png) + +- oder wählen Sie die Menüoption **Insert** und dann *Rows -> Add row above* + +![DHTMLX Spreadsheet Insert menu showing Rows and the Add row above option](/img/add_row_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf die Zeile oder eine Zelle in der Zeile und wählen Sie *Rows -> Add row above* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Add row above](/img/add_row_context_menu.png) + +### Zeilen entfernen {#removing-rows} + +Um eine Zeile zu entfernen, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Zeile (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der Zeile aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie auf die Schaltfläche **Rows** in der Toolbar und wählen Sie die Option *Remove row* + +![DHTMLX Spreadsheet Rows toolbar button with the Remove row option highlighted](/img/remove_row_button.png) + +- oder wählen Sie die Menüoption **Insert** und dann *Rows -> Remove row* + +![DHTMLX Spreadsheet Insert menu showing Rows and the Remove row option](/img/remove_row_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf die Zeile oder eine Zelle in der Zeile und wählen Sie *Rows -> Remove row* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Remove row](/img/remove_row_context_menu.png) + +:::note +Um mehrere Zeilen auf einmal zu entfernen: Wahlen Sie die Zeilen aus, klicken Sie mit der rechten Maustaste, um das Kontextmenü aufzurufen, und wählen Sie *Rows -> Remove rows [ids]*. +::: + +### Spalten hinzufügen {#adding-columns} + +Um eine neue Spalte hinzuzufügen, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Spalte (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Spalte aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Columns** in der Toolbar und wählen Sie die Option *Add column left* + +![DHTMLX Spreadsheet Columns toolbar button with the Add column left option highlighted](/img/add_column_button.png) + +- oder wählen Sie die Menüoption **Insert** und dann *Columns -> Add column left* + +![DHTMLX Spreadsheet Insert menu showing Columns and the Add column left option](/img/add_column_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf die Spalte oder eine Zelle in der Spalte und wählen Sie *Columns -> Add column left* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Add column](/img/add_column_context_menu.png) + +### Spalten entfernen {#removing-columns} + +Um eine Spalte zu entfernen, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Spalte (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der Spalte aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie auf die Schaltfläche **Columns** in der Toolbar und wählen Sie die Option *Remove column* + +![DHTMLX Spreadsheet Columns toolbar button with the Remove column option highlighted](/img/remove_column_button.png) + +- oder wählen Sie die Menüoption **Insert** und dann *Columns -> Remove column* + +![DHTMLX Spreadsheet Insert menu showing Columns and the Remove column option](/img/remove_column_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf die Spalte oder eine Zelle in der Spalte und wählen Sie *Columns -> Remove column* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Remove column](/img/remove_column_context_menu.png) + +:::note +Um mehrere Spalten auf einmal zu entfernen: Wahlen Sie die Spalten aus, klicken Sie mit der rechten Maustaste, um das Kontextmenü aufzurufen, und wählen Sie *Columns -> Remove columns [ids]*. +::: + +## Spaltenbreite automatisch anpassen {#autofit-column-width} + +Um die Spaltenbreite so zu ändern, dass sie automatisch dem längsten Inhalt der Spalte entspricht, können Sie: + +- auf den Cursor zum Anpassen der Größe einer Spalte im Tabellenkopf doppelklicken + +![DHTMLX Spreadsheet column header with the resize cursor for autofitting column width](/img/resize_cursor.png) + +- oder die folgenden Schritte ausführen: + +1\. Klicken Sie mit der linken Maustaste auf das 3-Punkte-Symbol der Spalte + +![DHTMLX Spreadsheet column context menu opened from the three dots icon](/img/column_context_menu.png) + +2\. Wahlen Sie *Columns -> Fit to data* + +![DHTMLX Spreadsheet Columns submenu with the Fit to data option for autofit column width](/img/column_autofit.png) + +## Zeilen und Spalten fixieren/Fixierung aufheben {#freezingunfreezing-rows-and-columns} + +### Zeilen fixieren {#freezing-rows} + +Um Zeilen bis zu einer bestimmten Zeile zu fixieren, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Zeile (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Zeile aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Rows** in der Toolbar und wählen Sie die Option *Freeze up to row [id]* + +![DHTMLX Spreadsheet Rows toolbar button with the Freeze up to row option highlighted](/img/freeze_rows_toolbar.png) + +- oder wählen Sie die Menüoption **Edit** und dann *Freeze -> Freeze up to row [id]* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Freeze up to row](/img/freeze_rows_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf eine Zeile oder eine Zelle in der Zeile und wählen Sie *Rows -> Freeze up to row [id]* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Freeze up to row](/img/freeze_rows_context_menu.png) + +### Fixierung von Zeilen aufheben {#unfreezing-rows} + +(*In den folgenden Abbildungen sind Zeilen bis zur Zeile 5 fixiert*) + +Um die Fixierung von Zeilen aufzuheben, führen Sie einen der folgenden Schritte aus: + +- Klicken Sie entweder auf die Schaltfläche **Rows** in der Toolbar und wählen Sie die Option *Unfreeze rows* + +![DHTMLX Spreadsheet Rows toolbar button with the Unfreeze rows option highlighted](/img/unfreeze_rows_toolbar.png) + +- oder wählen Sie die Menüoption **Edit** und dann *Freeze -> Unfreeze rows* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Unfreeze rows](/img/unfreeze_rows_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf eine beliebige Zelle und wählen Sie *Rows -> Unfreeze rows* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Unfreeze rows](/img/unfreeze_rows_context_menu.png) + +### Spalten fixieren {#freezing-columns} + +Um Spalten bis zu einer bestimmten Spalte zu fixieren, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Spalte (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Spalte aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Columns** in der Toolbar und wählen Sie die Option *Freeze up to column [id]* + +![DHTMLX Spreadsheet Columns toolbar button with the Freeze up to column option highlighted](/img/freeze_columns_toolbar.png) + +- oder wählen Sie die Menüoption **Edit** und dann *Freeze -> Freeze up to column [id]* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Freeze up to column](/img/freeze_columns_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf eine Spalte oder eine Zelle in der Spalte und wählen Sie *Columns -> Freeze up to column [id]* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Freeze up to column](/img/freeze_columns_context_menu.png) + +### Fixierung von Spalten aufheben {#unfreezing-columns} + +(*In den folgenden Abbildungen sind Spalten bis zur Spalte D fixiert*) + +Um die Fixierung von Spalten aufzuheben, führen Sie einen der folgenden Schritte aus: + +- Klicken Sie entweder auf die Schaltfläche **Columns** in der Toolbar und wählen Sie die Option *Unfreeze columns* + +![DHTMLX Spreadsheet Columns toolbar button with the Unfreeze columns option highlighted](/img/unfreeze_columns_toolbar.png) + +- oder wählen Sie die Menüoption **Edit** und dann *Freeze -> Unfreeze columns* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Unfreeze columns](/img/unfreeze_columns_menu.png) + +- oder klicken Sie mit der rechten Maustaste auf eine beliebige Zelle und wählen Sie *Columns -> Unfreeze columns* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Unfreeze columns](/img/unfreeze_columns_context_menu.png) + +## Zeilen und Spalten ein-/ausblenden {#hidingshowing-rows-and-columns} + +### Zeilen ausblenden {#hiding-rows} + +Um eine Zeile auszublenden, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Zeile (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Zeile aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Rows** in der Toolbar und wählen Sie die Option *Hide row(s) [id]* + +![DHTMLX Spreadsheet Rows toolbar button with the Hide rows option highlighted](/img/hide_rows_toolbar.png) + +- oder klicken Sie mit der rechten Maustaste auf eine Zeile oder eine Zelle in der Zeile und wählen Sie *Rows -> Hide row(s) [id]* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Hide rows](/img/hide_row_context_menu.png) + +### Zeilen einblenden {#showing-rows} + +Um ausgeblendete Zeilen einzublenden, führen Sie einen der folgenden Schritte aus: + +- Klicken Sie entweder auf das "Pfeil"-Symbol, das im Zeilenkopf anstelle der ausgeblendeten Zeile(n) erscheint + +(*In der folgenden Abbildung sind die Zeilen 8 und 11 ausgeblendet*) + +![DHTMLX Spreadsheet rows header with the arrows icon indicating hidden rows](/img/show_rows.png) + +- oder wählen Sie Zeilen oder mehrere Zellen aus, sodass die ausgeblendeten Zeilen in die Auswahl eingeschlossen sind, klicken Sie mit der rechten Maustaste, um das Kontextmenü aufzurufen, und wählen Sie *Rows -> Show rows* + +(*In der folgenden Abbildung ist die Zeile 8 ausgeblendet*) + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Show rows](/img/show_rows_context_menu.png) + +### Spalten ausblenden {#hiding-columns} + +Um eine Spalte auszublenden, führen Sie die folgenden Schritte aus: + +1\. Wahlen Sie eine Spalte (durch Klicken auf ihre Kopfzeile) oder eine Zelle in der gewünschten Spalte aus. + +2\. Wahlen Sie eine der folgenden Aktionen: + +- Klicken Sie entweder auf die Schaltfläche **Columns** in der Toolbar und wählen Sie die Option *Hide column(s) [id]* + +![DHTMLX Spreadsheet Columns toolbar button with the Hide columns option highlighted](/img/hide_columns_toolbar.png) + +- oder klicken Sie mit der rechten Maustaste auf eine Spalte oder eine Zelle in der Spalte und wählen Sie *Columns -> Hide column(s) [id]* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Hide columns](/img/hide_columns_context_menu.png) + +### Spalten einblenden {#showing-columns} + +Um ausgeblendete Spalten einzublenden, führen Sie einen der folgenden Schritte aus: + +- Klicken Sie entweder auf das "Pfeil"-Symbol, das im Spaltenkopf anstelle der ausgeblendeten Spalte(n) erscheint + +(*In der folgenden Abbildung sind die Spalten C und E ausgeblendet*) + +![DHTMLX Spreadsheet columns header with the arrows icon indicating hidden columns](/img/show_columns.png) + +- oder wählen Sie Spalten oder mehrere Zellen aus, sodass die ausgeblendeten Spalten in die Auswahl eingeschlossen sind, klicken Sie mit der rechten Maustaste, um das Kontextmenü aufzurufen, und wählen Sie *Columns -> Show columns* + +(*In der folgenden Abbildung ist die Spalte C ausgeblendet*) + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Show columns](/img/show_columns_context_menu.png) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/work_with_sheets.md b/i18n/de/docusaurus-plugin-content-docs/current/work_with_sheets.md new file mode 100644 index 00000000..e6dce490 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/work_with_sheets.md @@ -0,0 +1,53 @@ +--- +sidebar_label: Mit Tabellenblättern arbeiten +title: Mit Tabellenblättern arbeiten +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie mit Tabellenblättern arbeiten. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Mit Tabellenblättern arbeiten {#work-with-sheets} + +## Ein neues Tabellenblatt hinzufügen {#adding-a-new-sheet} + +Um ein neues Tabellenblatt hinzuzufügen, gehen Sie wie folgt vor: + +1. Wählen Sie einen Tabellenblatt-Tab aus, indem Sie darauf klicken + +2. Klicken Sie in der unteren Symbolleiste auf die Schaltfläche **Tabellenblatt hinzufügen** + +:::note +Beachten Sie, dass ein neues Tabellenblatt nach dem aktuell aktiven Tabellenblatt eingefügt wird. +::: + +![DHTMLX Spreadsheet bottom toolbar with the Add sheet button and sheet tabs](/img/add_sheet.png) + +## Ein Tabellenblatt entfernen {#removing-a-sheet} + +Um ein Tabellenblatt aus der Tabellenkalkulation zu entfernen, klicken Sie mit der rechten Maustaste auf den Tabellenblatt-Tab und wählen Sie *Löschen*. + +{{note Beachten Sie, dass ein Tabellenblatt nicht entfernt werden kann, wenn es das einzige Tabellenblatt in der Tabellenkalkulation ist.}} + +![DHTMLX Spreadsheet sheet tab context menu with the Delete option highlighted](/img/remove_sheet.png) + +## Das aktive Tabellenblatt wechseln {#changing-the-active-sheet} + +Um das aktuell aktive Tabellenblatt zu wechseln, klicken Sie auf einen anderen Tabellenblatt-Tab. + +![DHTMLX Spreadsheet sheet tabs at the bottom with the active sheet highlighted](/img/change_active_sheet.png) + +## Ein Tabellenblatt umbenennen {#renaming-a-sheet} + +Um ein Tabellenblatt umzubenennen, klicken Sie mit der rechten Maustaste auf den Tabellenblatt-Tab, klicken Sie auf *Umbenennen* und geben Sie den neuen Namen ein. + +![DHTMLX Spreadsheet sheet tab context menu with the Rename option and a name input](/img/rename_sheet.png) + +## Querverweise zwischen Tabellenblättern {#cross-references-between-sheets} + +Sie können Daten aus mehreren Tabellenblättern mithilfe von Querverweisen in einem zusammenfassen.
Gehen Sie dazu wie folgt vor: + +1\. Geben Sie ein Gleichheitszeichen (=) in eine Zelle ein + +2\. Klicken Sie auf den Tabellenblatt-Tab, auf den Sie einen Querverweis setzen möchten, und wählen Sie die Zelle oder den Zellbereich aus + +3\. Beenden Sie die Eingabe der Formel und drücken Sie die Eingabetaste + +![DHTMLX Spreadsheet cross-reference formula built across multiple sheet tabs](/img/cross_reference.gif) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/working_with_cells.md b/i18n/de/docusaurus-plugin-content-docs/current/working_with_cells.md new file mode 100644 index 00000000..de569496 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/working_with_cells.md @@ -0,0 +1,289 @@ +--- +sidebar_label: Mit Zellen arbeiten +title: Mit Zellen arbeiten +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie mit Zellen arbeiten. Entwickleranleitungen und API-Referenz, Code-Beispiele, Live-Demos und eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet stehen zur Verfügung. +--- + +# Mit Zellen arbeiten {#work-with-cells} + +## Zellwert setzen {#setting-cell-value} + +### Werte setzen {#set-values} + +Um einen Wert für eine Zelle über die API zu setzen, verwenden Sie die Methode [](api/spreadsheet_setvalue_method.md). Übergeben Sie ihr die folgenden Parameter: + +- `cells` - (*string*) die ID(s) einer Zelle/mehrerer Zellen oder eines Zellbereichs +- `value` - (*string/number/array*) der Wert, der für eine Zelle/mehrere Zellen gesetzt werden soll + +~~~jsx +// Wert für eine Zelle setzen +spreadsheet.setValue("A1",5); +// denselben Wert für einen Zellbereich setzen +spreadsheet.setValue("A1:D1",5); +// denselben Wert für verschiedene Zellen setzen +spreadsheet.setValue("B6,A1:D1",5); +// Werte aus einem Array abwechselnd für Zellen in einem Bereich setzen +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +:::note +Beachten Sie, dass die Methode denselben (wiederholten) Wert für die angegebenen Zellen setzt. Wenn Sie verschiedene Werte in Tabellenzellen einfügen möchten, verwenden Sie die Methode [`parse()`](api/spreadsheet_parse_method.md). +::: + + +### Werte abrufen {#get-values} + +Sie können auch den/die in einer Zelle/mehreren Zellen gesetzten Wert(e) zurückgeben, indem Sie die *ID(s) der gewünschten Zelle(n) oder einen Zellbereich* an die Methode [](api/spreadsheet_getvalue_method.md) übergeben. + +Die Methode gibt den/die Wert(e) als String, Zahl oder Array zurück: + +~~~jsx +// Wert einer Zelle zurückgeben +var cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// Werte eines Zellbereichs zurückgeben +var rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// Werte verschiedener Zellen zurückgeben +var values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +## Zellen validieren {#validating-cells} + +Ab v4.3 können Sie Datenvalidierung auf Zellen anwenden, indem Sie Dropdown-Listen mit Optionen hinzufügen. Verwenden Sie dazu die Methode [](api/spreadsheet_setvalidation_method.md): + +~~~jsx +spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]); +~~~ + +Die Dropdown-Liste schränkt die Auswahl des Benutzers ein. Sie zeigt die Meldung *Ungültiger Wert* an, wenn der Benutzer einen unerwarteten Wert in eine Zelle eingibt. + +:::info +Die Methode [`setValidation()`](api/spreadsheet_setvalidation_method.md) kann auch die Validierung aus den angegebenen Zellen entfernen. [Details prüfen](api/spreadsheet_setvalidation_method.md#details). +::: + +## Hyperlink in eine Zelle einfügen {#inserting-a-hyperlink-into-a-cell} + +Um einen Hyperlink in eine Zelle einzufügen, verwenden Sie die Methode [`insertLink()`](api/spreadsheet_insertlink_method.md). Die Methode kann auch einen Text hinzufügen, der zusammen mit dem Hyperlink angezeigt wird: + +~~~jsx +// Link in Zelle "A2" einfügen +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); +~~~ + +Wenn Sie den Link aus einer Zelle entfernen möchten, übergeben Sie der Methode nur die Zell-ID: + +~~~jsx +// Link aus Zelle "A2" entfernen +spreadsheet.insertLink("A2"); +~~~ + +## Zellen formatieren {#styling-cells} + +### Stile setzen {#set-styles} + +Sie können Stile auf eine Zelle oder einen Zellbereich mit der Methode [](api/spreadsheet_setstyle_method.md) anwenden. Sie nimmt zwei Parameter entgegen: + +- `cells` - (*string*) die ID(s) einer Zelle/mehrerer Zellen oder eines Zellbereichs +- `styles` - (*object/array*) Stile, die auf Zellen angewendet werden sollen + +~~~jsx +// Stil für eine Zelle setzen +spreadsheet.setStyle("A1", {background: "red"}); +// denselben Stil für einen Zellbereich setzen +spreadsheet.setStyle("A1:D1", {color: "blue"}); +// denselben Stil für verschiedene Zellen setzen +spreadsheet.setStyle("B6,A1:D1", {color: "blue"}); +// Stile aus einem Array abwechselnd für Zellen in einem Bereich setzen +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +:::note +Die Methode setzt denselben Stil für die angegebenen Zellen. Wenn Sie verschiedene Stile auf Tabellenzellen anwenden möchten, verwenden Sie die Methode [`parse()`](api/spreadsheet_parse_method.md). +::: + +### Stile abrufen {#get-styles} + +Um die auf eine Zelle/mehrere Zellen angewendeten Stile abzurufen, verwenden Sie die Methode [](api/spreadsheet_getstyle_method.md). Übergeben Sie ihr die *ID(s) einer Zelle/mehrerer Zellen oder eines Zellbereichs*: + +~~~jsx +// Stil einer Zelle abrufen +var style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// Stile eines Zellbereichs abrufen +var rangeStyles = spreadsheet.getStyle("A1:D1"); // -> siehe Details + +// Stile verschiedener Zellen abrufen +var values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +Für mehrere Zellen gibt die Methode ein Array von Objekten mit den auf eine Zelle angewendeten Stilen zurück: + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ + +## Zelle bearbeiten {#editing-a-cell} + +### Zell-Editor aktivieren {#enable-cell-editor} + +Sie können ein Eingabefeld in eine Zelle einfügen, indem Sie die Methode [](api/spreadsheet_startedit_method.md) aufrufen: + +~~~jsx +spreadsheet.startEdit(); +~~~ + +Die Methode kann zwei optionale Parameter entgegennehmen: + +- `cell` - (*string*) optional, die ID einer Zelle +- `value` - (*string*) optional, der Zellwert + +Wenn die ID einer Zelle nicht übergeben wird, wird das Eingabefeld in die aktuell ausgewählte Zelle eingefügt. + +### Zell-Editor deaktivieren {#disable-cell-editor} + +Um die Bearbeitung einer Zelle zu beenden, verwenden Sie die Methode [](api/spreadsheet_endedit_method.md), die den Editor schließt und den eingegebenen Wert speichert. + +~~~jsx +spreadsheet.endEdit(); +~~~ + +## Zellen sperren {#locking-cells} + +### Zellen sperren {#lock-cells} + +Sie können eine Zelle oder mehrere Zellen programmgesteuert sperren, um sie für Benutzer schreibgeschützt zu machen. Verwenden Sie dazu die Methode [](api/spreadsheet_lock_method.md). Die Methode nimmt die *ID(s) der Zelle(n)* oder einen *Zellbereich* als Parameter entgegen. + +~~~jsx +// sperrt eine Zelle +spreadsheet.lock("A1"); + +// sperrt einen Zellbereich +spreadsheet.lock("A1:C1"); + +// sperrt angegebene Zellen +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +**Verwandtes Beispiel**: [Spreadsheet. Gesperrte Zellen](https://snippet.dhtmlx.com/czeyiuf8) + +### Zellen entsperren {#unlock-cells} + +Um gesperrte Zelle(n) zu entsperren, verwenden Sie die Methode [](api/spreadsheet_unlock_method.md). Übergeben Sie die *ID(s) der Zelle(n)* oder einen *Bereich mit gesperrten Zellen* als Parameter: + +~~~jsx +// entsperrt eine Zelle +spreadsheet.unlock("A1"); + +// entsperrt einen Zellbereich +spreadsheet.unlock("A1:C1"); + +// entsperrt angegebene Zellen +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +### Prüfen, ob eine Zelle gesperrt ist {#check-whether-a-cell-is-locked} + +Um zu prüfen, ob eine oder mehrere Zellen gesperrt sind, verwenden Sie die Methode [](api/spreadsheet_islocked_method.md) und übergeben Sie ihr die *ID(s) der Zelle(n)* oder einen *Zellbereich*: + +~~~jsx +// prüft, ob eine Zelle gesperrt ist +var cellLocked = spreadsheet.isLocked("A1"); + +// prüft, ob mehrere Zellen gesperrt sind +var rangeLocked = spreadsheet.isLocked("A1:C1"); + +// prüft, ob verstreute Zellen gesperrt sind +var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +Die Methode gibt `true` oder `false` zurück, abhängig vom Zustand der Zelle. Wenn mehrere Zellen gleichzeitig geprüft werden, gibt die Methode `true` zurück, wenn mindestens eine gesperrte Zelle unter den angegebenen Zellen vorhanden ist. + +## Zellen zusammenführen {#merging-cells} + +### Zellen zusammenführen {#merge-cells} + +Sie können zwei oder mehr Zellen zu einer zusammenführen, indem Sie einen Zellbereich, den Sie zusammenführen möchten, an die Methode [`mergeCells()`](api/spreadsheet_mergecells_method.md) übergeben: + +~~~jsx +//Zellen A6, A7 und A8 zusammenführen +spreadsheet.mergeCells("A6:A8"); + +//Zellen B2, C2 und D2 zusammenführen +spreadsheet.mergeCells("B2:D2"); +~~~ + +### Zellen trennen {#split-cells} + +Sie können zusammengeführte Zellen auch mit der Methode [`mergeCells()`](api/spreadsheet_mergecells_method.md) wieder trennen. Übergeben Sie zusätzlich zum Zellbereich `true` als zweiten Parameter, um die Zusammenführung der angegebenen Zellen aufzuheben: + +~~~jsx +//Zusammenführung der Zellen B2, C2 und D2 aufheben +spreadsheet.mergeCells("B2:D2", true); +~~~ + +## Zellen auswählen {#selecting-cells} + +### Zellen auswählen {#select-cells} + +Das Spreadsheet ermöglicht es Ihnen, die Zellauswahl über die API des `Selection`-Objekts festzulegen. + +Sie können Zelle(n) auswählen, indem Sie deren ID(s) an die Methode [](api/selection_setselectedcell_method.md) übergeben: + +~~~jsx +// eine Zelle auswählen +spreadsheet.selection.setSelectedCell("B5"); +// einen Zellbereich auswählen +spreadsheet.selection.setSelectedCell("B1:B5"); +// verstreute Zellen auswählen +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +Es ist auch möglich, die ID(s) der ausgewählten Zelle(n) über die Methode [](api/selection_getselectedcell_method.md) abzurufen: + +~~~jsx +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +### Auswahl aufheben {#unselect-cells} + +Um die Auswahl von Zelle(n) aufzuheben, übergeben Sie deren ID(s) an die Methode [](api/selection_removeselectedcell_method.md): + +~~~jsx +// Auswahl setzen +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// Auswahl entfernen +spreadsheet.selection.removeSelectedCell("B7,D4,E5:E7"); + +const selected = spreadsheet.selection.getSelectedCell(); +console.log(selected); // -> "B3,D6,E4,E8" +~~~ + +**Verwandtes Beispiel:** [Spreadsheet. Auswahl entfernen](https://snippet.dhtmlx.com/u4j76cuh) + +## Fokus auf eine Zelle setzen {#setting-focus-on-a-cell} + +Das `Selection`-Objekt ermöglicht es Ihnen, den Fokus auf eine Tabellenzelle zu setzen und die ID der fokussierten Zelle abzurufen. Verwenden Sie dazu die entsprechenden Methoden: + +- [](api/selection_setfocusedcell_method.md) + +~~~jsx +// ID der Zelle übergeben, auf die der Fokus gesetzt werden soll +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +- [](api/selection_getfocusedcell_method.md) + +~~~jsx +// fokussierte Zelle abrufen +var focused = spreadsheet.selection.getFocusedCell(); // -> "D4" +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/working_with_sheets.md b/i18n/de/docusaurus-plugin-content-docs/current/working_with_sheets.md new file mode 100644 index 00000000..0b5ac0a5 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/working_with_sheets.md @@ -0,0 +1,149 @@ +--- +sidebar_label: Mit Tabellen arbeiten +title: Mit Tabellen arbeiten +description: In der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren Sie, wie Sie mit Tabellen arbeiten. Hier finden Sie Entwickleranleitungen und API-Referenzen, Codebeispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet. +--- + +# Mit Tabellen arbeiten + +Ab v4.1 können Sie mit [mehreren Tabellen](api/spreadsheet_multisheets_config.md) im Spreadsheet arbeiten. + +Dieser Artikel beschreibt, wie Sie eine neue Tabelle hinzufügen, eine nicht benötigte Tabelle entfernen, alle Tabellen abrufen und die aktuell aktive Tabelle über API-Methoden ermitteln. Außerdem wird erläutert, wie Sie mehrere Tabellen gleichzeitig in das Spreadsheet laden. + +{{note Informationen zur Interaktion mit mehreren Tabellen über die Benutzeroberfläche finden Sie in unserem [Benutzerhandbuch](work_with_sheets.md). }} + +Ab v6.0 übernimmt das **Sheet Manager**-Modul die Tabellenverwaltung über die Eigenschaft `spreadsheet.sheets`. Die dedizierte [Sheet Manager API](api/overview/sheetmanager_overview.md) ersetzt die tabellenspezifischen Methoden, die zuvor direkt an der Spreadsheet-Instanz verfügbar waren. + +## Mehrere Tabellen laden {#loading-multiple-sheets} + +Um mehrere Tabellen in das Spreadsheet zu laden, bereiten Sie die Daten mit der gewünschten Anzahl von Tabellen und deren Konfiguration vor und übergeben Sie diese als Parameter an die Methode [`parse()`](api/spreadsheet_parse_method.md). Die Daten müssen ein `object` sein. [Sehen Sie die Liste der Attribute, die das Objekt enthalten kann](api/spreadsheet_parse_method.md). + + + +{{note Wenn die Konfigurationsoption [`multiSheets`](api/spreadsheet_multisheets_config.md) auf `false` gesetzt ist, wird nur eine Tabelle erstellt.}} + +## Eine neue Tabelle hinzufügen {#adding-a-new-sheet} + +Um eine neue Tabelle in das Spreadsheet einzufügen, verwenden Sie die Methode [`sheets.add()`](api/sheetmanager_add_method.md) und übergeben Sie den Namen der neuen Tabelle als Parameter: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Tabelle mit benutzerdefiniertem Namen hinzufügen +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // z. B. "sheet_2" + +// Tabelle mit automatisch generiertem Namen hinzufügen +const anotherId = spreadsheet.sheets.add(); +~~~ + +Die Methode gibt die ID der erstellten Tabelle zurück. + +## Eine Tabelle entfernen {#removing-a-sheet} + +Sie können eine Tabelle anhand ihrer ID aus dem Spreadsheet entfernen, indem Sie die Methode [`sheets.remove()`](api/sheetmanager_remove_method.md) verwenden: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Tabelle anhand ihrer ID entfernen +spreadsheet.sheets.remove("sheet_2"); +~~~ + +Beachten Sie, dass eine Tabelle nicht entfernt wird, wenn das Spreadsheet weniger als 2 Tabellen enthält. + +## Aktive Tabelle festlegen {#setting-active-sheet} + +Um die aktive Tabelle nach der Initialisierung des Spreadsheets dynamisch zu wechseln, verwenden Sie die Methode [`sheets.setActive()`](api/sheetmanager_setactive_method.md). Diese nimmt die ID einer Tabelle als Parameter entgegen: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Zur zweiten Tabelle wechseln +spreadsheet.sheets.setActive("sheet_2"); + +// Wechsel überprüfen +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**Verwandtes Beispiel:** [Spreadsheet. Aktive Tabelle festlegen](https://snippet.dhtmlx.com/iowl449t) + +## Aktive Tabelle abrufen {#getting-active-sheet} + +Sie können die aktuell aktive Tabelle mit der Methode [`sheets.getActive()`](api/sheetmanager_getactive_method.md) abrufen: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +Die Methode gibt ein Objekt mit den Attributen `name` und `id` der aktuell aktiven Tabelle zurück. + +## Alle Tabellen abrufen {#getting-all-sheets} + +Die Methode [`sheets.getAll()`](api/sheetmanager_getall_method.md) gibt alle Tabellen des Spreadsheets als Array von Tabellenobjekten zurück: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +## Eine Tabelle anhand der ID abrufen {#getting-a-sheet-by-id} + +Um ein einzelnes Tabellenobjekt anhand seiner ID abzurufen, verwenden Sie die Methode [`sheets.get()`](api/sheetmanager_get_method.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +## Tabellen leeren {#clearing-sheets} + +Sie können die Daten einer bestimmten Tabelle anhand ihrer ID mit der Methode [`sheets.clear()`](api/sheetmanager_clear_method.md) leeren: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Bestimmte Tabelle anhand der ID leeren +spreadsheet.sheets.clear("sheet_1"); + +// Aktuell aktive Tabelle leeren +spreadsheet.sheets.clear(); +~~~ + +**Verwandtes Beispiel:** [Spreadsheet. Leeren](https://snippet.dhtmlx.com/szmtjn72) + +Wenn Sie das gesamte Spreadsheet auf einmal leeren möchten, verwenden Sie die Methode [`clear()`](api/spreadsheet_clear_method.md). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/working_with_ssheet.md b/i18n/de/docusaurus-plugin-content-docs/current/working_with_ssheet.md new file mode 100644 index 00000000..8f775251 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/working_with_ssheet.md @@ -0,0 +1,302 @@ +--- +sidebar_label: Mit der Tabellenkalkulation arbeiten +title: Mit der Tabellenkalkulation arbeiten +description: Sie können in der Dokumentation der DHTMLX JavaScript Spreadsheet-Bibliothek erfahren, wie Sie mit der Tabellenkalkulation arbeiten. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Spreadsheet herunter. +--- + +# Mit der Tabellenkalkulation arbeiten {#work-with-spreadsheet} + +Während Benutzer über die Oberfläche mit der Tabellenkalkulation interagieren, können Sie mit der Komponente über ihre [einfache API](api/api_overview.md) arbeiten. + +## Aktionen rückgängig machen/wiederholen {#undoredo-actions} + +Die API-Methode [](api/spreadsheet_undo_method.md) macht die letzte Aktion rückgängig: + +~~~jsx +spreadsheet.undo(); +~~~ + +Um eine rückgängig gemachte Aktion erneut anzuwenden, verwenden Sie die Methode [](api/spreadsheet_redo_method.md): + +~~~jsx +spreadsheet.redo(); +~~~ + +## Zeilen und Spalten hinzufügen/entfernen {#addingremoving-rows-and-columns} + +### Spalten {#columns} + +Um eine Spalte hinzuzufügen oder zu löschen, verwenden Sie die entsprechenden API-Methoden: + +- [](api/spreadsheet_addcolumn_method.md) +- [](api/spreadsheet_deletecolumn_method.md) + +Übergeben Sie den Methoden die ID der Zelle, die die ID der hinzuzufügenden oder zu löschenden Spalte enthält. + +~~~jsx +// fügt eine leere Spalte "C" hinzu +spreadsheet.addColumn("C1"); +// entfernt die Spalte "C" +spreadsheet.deleteColumn("C1"); +~~~ + +Wenn eine neue Spalte hinzugefügt wird, werden die benachbarten Spalten nach rechts verschoben. + +:::note +Sie können mehrere Spalten löschen, indem Sie einen Bereich von Zellen-IDs als Parameter der Methode `deleteColumn()` angeben, z. B.: "A1:C3". +::: + +### Zeilen {#rows} + +Um eine Zeile hinzuzufügen oder zu löschen, verwenden Sie die folgenden API-Methoden: + +- [](api/spreadsheet_addrow_method.md) +- [](api/spreadsheet_deleterow_method.md) + +Übergeben Sie den Methoden die ID der Zelle, die die ID der hinzuzufügenden oder zu löschenden Zeile enthält. + +~~~jsx +// fügt eine leere zweite Zeile hinzu +spreadsheet.addRow("A2"); +// entfernt die zweite Zeile +spreadsheet.deleteRow("A2"); +~~~ + +Wenn eine neue Zeile hinzugefügt wird, werden die benachbarten Zeilen um eine Zelle nach unten verschoben. + +:::note +Sie können mehrere Zeilen löschen, indem Sie einen Bereich von Zellen-IDs als Parameter der Methode `deleteRow()` angeben, z. B.: "A1:C3". +::: + +## Spaltenbreite automatisch anpassen {#autofit-column-width} + +Um die Spaltenbreite so zu ändern, dass sie sich automatisch an den längsten Inhalt der Spalte anpasst, verwenden Sie die Methode [`fitColumn()`](api/spreadsheet_fitcolumn_method.md). Die Methode nimmt einen Parameter entgegen — die ID der Zelle, die den Namen der gewünschten Spalte enthält. + +~~~jsx +// passt die Breite der Spalte "G" an +spreadsheet.fitColumn("G2"); +~~~ + +## Zeilen und Spalten fixieren/freigeben {#freezingunfreezing-rows-and-columns} + +Möglicherweise müssen Sie einige Spalten oder Zeilen fixieren (oder "einfrieren"), sodass sie beim Scrollen der Seite statisch bleiben, während die übrigen Spalten und Zeilen verschiebbar bleiben. + +### Spalten {#columns-1} + +Um Spalten zu fixieren oder freizugeben, verwenden Sie die entsprechenden API-Methoden: + +- [](api/spreadsheet_freezecols_method.md) +- [](api/spreadsheet_unfreezecols_method.md) + +Übergeben Sie den Methoden die ID der Zelle, um die ID einer Spalte zu definieren. Wenn keine Zellen-ID übergeben wird, wird die aktuell ausgewählte Zelle verwendet. + +~~~jsx +// Spalten fixieren +spreadsheet.freezeCols("B2"); // die Spalten bis zur Spalte "B" werden fixiert +spreadsheet.freezeCols("sheet2!B2"); // die Spalten bis zur Spalte "B" in "sheet2" werden fixiert + +// Spalten freigeben +spreadsheet.unfreezeCols(); // fixierte Spalten im aktuellen Blatt werden freigegeben +spreadsheet.unfreezeCols("sheet2!A1"); // fixierte Spalten in "sheet2" werden freigegeben +~~~ + +### Zeilen {#rows-1} + +Um Zeilen zu fixieren oder freizugeben, verwenden Sie die entsprechenden API-Methoden: + +- [](api/spreadsheet_freezerows_method.md) +- [](api/spreadsheet_unfreezerows_method.md) + +Übergeben Sie den Methoden die ID der Zelle, um die ID einer Zeile zu definieren. Wenn keine Zellen-ID übergeben wird, wird die aktuell ausgewählte Zelle verwendet. + +~~~jsx +// Zeilen fixieren +spreadsheet.freezeRows("B2"); // die Zeilen bis zur Zeile "2" werden fixiert +spreadsheet.freezeRows("sheet2!B2"); // die Zeilen bis zur Zeile "2" in "sheet2" werden fixiert + +// Zeilen freigeben +spreadsheet.unfreezeRows(); // fixierte Zeilen im aktuellen Blatt werden freigegeben +spreadsheet.unfreezeRows("sheet2!A1"); // fixierte Zeilen in "sheet2" werden freigegeben +~~~ + +### Zeilen/Spalten im Datensatz fixieren {#freezing-rowscolumns-in-the-dataset} + +Sie können auch Zeilen und Spalten für bestimmte Blätter im Datensatz fixieren, während Sie Daten in die Tabellenkalkulation einlesen. +Verwenden Sie dazu die Eigenschaft `freeze` im `sheets`-Objekt der Methode [`parse()`](api/spreadsheet_parse_method.md): + +~~~jsx {10-13} +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // weitere Einstellungen für "sheet_1" + }, + // weitere Konfigurationsobjekte für Blätter + ] +}; + +spreadsheet.parse(data); +~~~ + +## Zeilen und Spalten aus-/einblenden {#hidingshowing-rows-and-columns} + +Sie können bestimmte Zeilen und Spalten über die entsprechenden API-Methoden aus- und einblenden. + +### Spalten {#columns-2} + +Um eine Spalte aus- oder einzublenden, verwenden Sie die folgenden Methoden: + +- [](api/spreadsheet_hidecols_method.md) +- [](api/spreadsheet_showcols_method.md) + +Übergeben Sie den Methoden die ID der Zelle, um die ID einer Spalte zu definieren. Wenn keine Zellen-ID übergeben wird, wird die aktuell ausgewählte Zelle verwendet. + +~~~jsx +// Spalten ausblenden +spreadsheet.hideCols("B2"); // die Spalte "B" wird ausgeblendet +spreadsheet.hideCols("sheet2!B2"); // die Spalte "B" in "sheet2" wird ausgeblendet +spreadsheet.hideCols("B2:C2"); // die Spalten "B" und "C" werden ausgeblendet + +// Spalten einblenden +spreadsheet.showCols("B2"); // die Spalte "B" wird wieder sichtbar +spreadsheet.showCols("sheet2!B2"); // die Spalte "B" in "sheet2" wird wieder sichtbar +spreadsheet.showCols("B2:C2"); // die Spalten "B" und "C" werden wieder sichtbar +~~~ + +### Zeilen {#rows-2} + +Um eine Zeile aus- oder einzublenden, verwenden Sie die folgenden API-Methoden: + +- [](api/spreadsheet_hiderows_method.md) +- [](api/spreadsheet_showrows_method.md) + +Übergeben Sie den Methoden die ID der Zelle, um die ID einer Zeile zu definieren. Wenn keine Zellen-ID übergeben wird, wird die aktuell ausgewählte Zelle verwendet. + +~~~jsx +// Zeilen ausblenden +spreadsheet.hideRows("B2"); // die Zeile "2" wird ausgeblendet +spreadsheet.hideRows("sheet2!B2"); // die Zeile "2" in "sheet2" wird ausgeblendet +spreadsheet.hideRows("B2:C4"); // die Zeilen von "2" bis "4" werden ausgeblendet + +// Zeilen einblenden +spreadsheet.showRows("B2"); // die Zeile "2" wird wieder sichtbar +spreadsheet.showRows("sheet2!B2"); // die Zeile "2" in "sheet2" wird wieder sichtbar +spreadsheet.showRows("B2:C2"); // die Zeilen von "2" bis "4" werden wieder sichtbar +~~~ + +## Daten filtern {#filtering-data} + +### Filter setzen {#set-filter} + +Sie können Daten in der Tabellenkalkulation filtern und nur die Datensätze anzeigen, die den angegebenen Kriterien entsprechen. Verwenden Sie dazu die Methode [`setFilter()`](api/spreadsheet_setfilter_method.md) und geben Sie die Filterregeln für die gewünschte(n) Spalte(n) an. + +Sie können beispielsweise Filterkriterien für eine einzelne Spalte angeben: + +~~~jsx +// Daten nach Kriterien für Spalte A filtern +spreadsheet.setFilter("A2", [{condition: { factor: "tc", value: "e" }, exclude: ["Peru"]}]); + +// Daten nach Kriterien für Spalte C filtern +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); +~~~ + +In diesem Fall erscheint für jede Spalte im Datenbereich ein Filter-Symbol. + +Sie können auch Filterkriterien für einen Zellbereich angeben, wie zum Beispiel: + +~~~jsx +// Daten nach Kriterien für Spalte C filtern +spreadsheet.setFilter("C1:C9", [{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); + +// Daten nach Kriterien für Spalte A und C filtern +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); +~~~ + +und ein Filter-Symbol erscheint nur für Spalten innerhalb des angegebenen Bereichs. + +**Verwandtes Beispiel:** [Tabellenkalkulation. Filtern über API](https://snippet.dhtmlx.com/effrcsg6) + +### Filter zurücksetzen {#reset-filter} + +Wenn Sie den Filter zurücksetzen möchten, verwenden Sie die Methode [`setFilter()`](api/spreadsheet_setfilter_method.md) ohne Parameter oder übergeben Sie der Methode nur den ersten Parameter: + +~~~jsx +spreadsheet.setFilter("A2"); +~~~ + +### Filter abrufen {#get-filter} + +Um die Kriterien abzurufen, nach denen Daten aktuell in einem Blatt gefiltert werden, verwenden Sie die Methode [`getFilter()`](api/spreadsheet_getfilter_method.md). Übergeben Sie die ID des gewünschten Blatts als Parameter. + +~~~jsx +const filter = spreadsheet.getFilter("Income"); +~~~ + +Sie müssen die ID des Blatts nicht übergeben, wenn Sie die Filterkriterien des aktuell aktiven Blatts abrufen möchten: + +~~~jsx +const filter = spreadsheet.getFilter(); +~~~ + +## Nach Daten suchen {#searching-for-data} + +Sie können Zellen, die bestimmte Einträge enthalten, abrufen, indem Sie den gesuchten Wert an die Methode [`search()`](api/spreadsheet_search_method.md) übergeben. + +~~~jsx +spreadsheet.search("min"); // -> ['D1'] +~~~ + +Sie können auch `true` als zweiten Parameter übergeben, um die Suchleiste zu öffnen und die gefundenen Zellen in der Tabellenkalkulation hervorzuheben: + +~~~jsx +spreadsheet.search("min", true); +~~~ + +Standardmäßig durchsucht die Tabellenkalkulation die Zellen des aktuell aktiven Blatts. Um in einem anderen Blatt zu suchen, übergeben Sie dessen ID als dritten Parameter der Methode: + +~~~jsx +spreadsheet.search("min", false, "Income"); +~~~ + +### Suchleiste schliessen {#close-search-bar} + +Um die Suchleiste auszublenden, verwenden Sie die Methode [`hideSearch()`](api/spreadsheet_hidesearch_method.md): + +~~~jsx +spreadsheet.hideSearch(); +~~~ + +## Daten sortieren {#sorting-data} + +Ab v4.3 können Sie Daten in der Tabellenkalkulation mit der Methode [`sortCells()`](api/spreadsheet_sortcells_method.md) sortieren. Übergeben Sie der Methode zwei Parameter: +- `cell` - die ID(s) einer Zelle oder eines Zellbereichs, nach dem die Daten in der Tabellenkalkulation sortiert werden sollen +- `dir` - die Sortierrichtung: 1 - aufsteigende Sortierreihenfolge, -1 - absteigende Sortierreihenfolge + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // Konfigurationsparameter +}); + +spreadsheet.sortCells("B2:B11", -1); +~~~ + +## Tabellenkalkulation leeren {#clearing-spreadsheet} + +Sie können die gesamte Tabellenkalkulation auf einmal mit der Methode [`clear()`](api/spreadsheet_clear_method.md) leeren: + +~~~jsx +spreadsheet.clear(); +~~~ + +**Verwandtes Beispiel:** [Tabellenkalkulation. Leeren](https://snippet.dhtmlx.com/szmtjn72) + +Wenn Sie ein bestimmtes Blatt leeren möchten, verwenden Sie die Methode [`sheets.clear()`](api/sheetmanager_clear_method.md). diff --git a/i18n/de/docusaurus-theme-classic/footer.json b/i18n/de/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..dcbab228 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Entwicklungszentrum", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Unternehmen", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Spreadsheet": { + "message": "Spreadsheet herunterladen", + "description": "The label of footer link with label=Download Spreadsheet linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml" + }, + "link.item.label.Examples": { + "message": "Beispiele", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/ihtkdcoc?tag=spreadsheet" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/?s=spreadsheet" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/spreadsheet/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "Über uns", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Kontakt", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Lizenzierung", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses" + } +} diff --git a/i18n/de/docusaurus-theme-classic/navbar.json b/i18n/de/docusaurus-theme-classic/navbar.json new file mode 100644 index 00000000..cc4fcac0 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Spreadsheet Dokumentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Spreadsheet Dokumentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Beispiele", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ko/code.json b/i18n/ko/code.json new file mode 100644 index 00000000..af243366 --- /dev/null +++ b/i18n/ko/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "페이지에 오류가 발생하였습니다.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "맨 위로 스크롤하기", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "게시물 목록", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "게시물 목록", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "블로그 게시물 목록 탐색", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "이전 페이지", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "다음 페이지", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "블로그 게시물 탐색", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "이전 게시물", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "다음 게시물", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "모든 태그 보기", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "시스템 모드", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "밝은 모드", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "어두운 모드", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "탐색 경로", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 항목", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "문서 페이지", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "이전", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "다음", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count}개 문서가", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} \"{tagName}\" 태그에 분류되었습니다", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "버전: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "최신 버전", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "페이지 편집", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}에 대한 직접 링크", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}에", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " {user}가", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "최종 수정: {atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.NotFound.title": { + "message": "페이지를 찾을 수 없습니다.", + "description": "The title of the 404 page" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "버전", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.tags.tagsListLabel": { + "message": "태그:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "주의", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "위험", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "정보", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "노트", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "팁", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "경고", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "최근 블로그 문서 둘러보기", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 펼치기", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 접기", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(새 탭에서 열림)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "메인 내비게이션", + "description": "The ARIA label for the main navigation" + }, + "theme.NotFound.p1": { + "message": "원하는 페이지를 찾을 수 없습니다.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "언어", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "이 페이지에서", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "자세히 보기", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "{title} 에 대해 더 읽어보기", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "약 {readingTime}분", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "복사", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "복사했습니다", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "클립보드에 코드 복사", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "줄 바꿈 전환", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "홈", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "문서 사이드바", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "사이드바 닫기", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "사이드바 펼치거나 접기", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 메인 메뉴로 돌아가기", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "드롭다운 펼치기", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "드롭다운 접기", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "{count}개의 결과 확인하기" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count}개의 문서를 찾았습니다.", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "\"{query}\" 검색 결과", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "문서를 검색합니다.", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "검색어를 입력하세요.", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "검색", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Algolia 제공", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "검색 결과가 없습니다.", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "새로운 검색 결과를 불러오는 중입니다.", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "검색", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "검색어 초기화", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "취소", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "문서 검색", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "다른 질문하기...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "답변 중...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "검색", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "입력", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "검색", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "키워드 검색으로 돌아가기", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "키워드 검색으로 돌아가기", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "최근", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "최근 검색어 없음", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "이 검색어를 저장", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "이 검색어를 최근 검색어에서 삭제", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "즐겨찾기", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "이 검색어를 즐겨찾기에서 삭제", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "최근 대화", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "기록에서 이 대화 삭제", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "결과를 불러올 수 없음", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "인터넷 연결을 다시 확인하시기 바랍니다.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "AI에게 질문하기: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "답변은 AI로 생성되며 오류가 있을 수 있습니다. 답변을 확인하세요.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "관련 출처", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "생각 중...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "복사", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "복사됨!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "복사", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "좋아요", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "싫어요", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "피드백을 보내 주셔서 감사합니다!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "검색 중...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "검색 중: ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "검색 완료:", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "로 선택", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "질문 제출", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "엔터 키", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "로 이동", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "화살표 위 키", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "화살표 아래 키", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "로 종료", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 키", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "검색 제공", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "검색으로 돌아가기", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "검색 결과 없음", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "다른 추천 검색어", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "검색 결과가 없는 것이 오류라고 생각되십니까?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "알려주시기 바랍니다.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "문서 검색", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "{count}개 게시물", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "작성자", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "모든 작성자 보기", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "이 작성자는 아직 작성한 글이 없습니다.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "목록에 없는 페이지", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "이 페이지는 목록에 없습니다. 검색 엔진이 색인을 생성하지 않으며, 직접 링크가 있는 사용자만 접근할 수 있습니다.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "초안 페이지", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "이 페이지는 초안입니다. 개발 환경에서만 표시되며 프로덕션 빌드에서는 제외됩니다.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "다시 시도해 보세요", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "본문으로 건너뛰기", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "태그", + "description": "The title of the tag list page" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-blog/options.json b/i18n/ko/docusaurus-plugin-content-blog/options.json new file mode 100644 index 00000000..9239ff70 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current.json b/i18n/ko/docusaurus-plugin-content-docs/current.json new file mode 100644 index 00000000..1bf9b07c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,106 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "새로운 기능 및 마이그레이션", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "새로운 기능 및 마이그레이션", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet methods": { + "message": "Spreadsheet 메서드", + "description": "The label for category 'Spreadsheet methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet events": { + "message": "Spreadsheet 이벤트", + "description": "The label for category 'Spreadsheet events' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet properties": { + "message": "Spreadsheet 속성", + "description": "The label for category 'Spreadsheet properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Sheet Manager API": { + "message": "Sheet Manager API", + "description": "The label for category 'Sheet Manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Selection 메서드", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Events Bus methods": { + "message": "Event Bus 메서드", + "description": "The label for category 'Events Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "내보내기 메서드", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "가이드", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides": { + "message": "개발자 가이드", + "description": "The label for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides.link.generated-index.title": { + "message": "개발자 가이드", + "description": "The generated-index page title for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Localization": { + "message": "지역화", + "description": "The label for category 'Localization' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "테마", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "테마", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides": { + "message": "사용자 가이드", + "description": "The label for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides.link.generated-index.title": { + "message": "사용자 가이드", + "description": "The generated-index page title for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells": { + "message": "셀 작업", + "description": "The label for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells.link.generated-index.title": { + "message": "셀 작업", + "description": "The generated-index page title for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations": { + "message": "프레임워크 및 통합", + "description": "The label for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations.link.generated-index.title": { + "message": "프레임워크 및 통합", + "description": "The generated-index page title for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.React Spreadsheet": { + "message": "React Spreadsheet", + "description": "The label for category 'React Spreadsheet' in sidebar 'docs'" + }, + "sidebar.docs.category.API reference": { + "message": "API 참조", + "description": "The label for category 'API reference' in sidebar 'docs'" + }, + "sidebar.docs.category.Data & state management": { + "message": "데이터 및 상태 관리", + "description": "The label for category 'Data & state management' in sidebar 'docs'" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 00000000..b4994cf9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +38bb50778dabafd1a441588f2fcced1e446e7e66 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/angular_integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/angular_integration.md new file mode 100644 index 00000000..09757af4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/angular_integration.md @@ -0,0 +1,284 @@ +--- +sidebar_label: Angular 통합 +title: Angular 통합 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 Angular 통합에 대해 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# Angular 통합 {#integration-with-angular} + +:::tip +이 문서를 활용하려면 **Angular**의 기본 개념과 패턴에 익숙해야 합니다. 내용을 복습하려면 [**Angular 문서**](https://angular.dev/overview)를 참조하세요. +::: + +DHTMLX Spreadsheet는 **Angular**와 호환됩니다. **Angular**에서 DHTMLX Spreadsheet를 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 [**GitHub 예제**](https://github.com/DHTMLX/angular-spreadsheet-demo)를 참조하세요. + +## 프로젝트 생성 {#creating-a-project} + +:::info +새 프로젝트를 시작하기 전에 [**Angular CLI**](https://angular.dev/tools/cli)와 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +::: + +Angular CLI를 사용하여 *my-angular-spreadsheet-app* 프로젝트를 새로 생성합니다. 다음 명령어를 실행하세요: + +~~~json +ng new my-angular-spreadsheet-app +~~~ + +:::note +이 가이드를 따르려면 새 Angular 앱을 생성할 때 Server-Side Rendering (SSR)과 Static Site Generation (SSG/Prerendering)을 비활성화하세요. +::: + +위 명령어는 필요한 모든 도구를 설치하므로 추가 명령어를 실행할 필요가 없습니다. + +### 의존성 설치 {#installation-of-dependencies} + +그런 다음 앱 디렉터리로 이동합니다: + +~~~json +cd my-angular-spreadsheet-app +~~~ + +의존성을 설치하고 개발 서버를 시작합니다. 이를 위해 [**yarn**](https://yarnpkg.com/) 패키지 매니저를 사용합니다: + +~~~json +yarn +yarn start +~~~ + +앱이 localhost에서 실행됩니다(예: `http://localhost:3000`). + +## Spreadsheet 생성 {#creating-spreadsheet} + +이제 DHTMLX Spreadsheet 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 Spreadsheet 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-package-installation} + +[**Spreadsheet 트라이얼 패키지**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르세요. 트라이얼 Spreadsheet는 30일 동안만 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 {#step-2-component-creation} + +이제 애플리케이션에 Spreadsheet를 추가할 Angular 컴포넌트를 만들어야 합니다. *src/app/* 디렉터리에 *spreadsheet* 폴더를 만들고, 그 안에 *spreadsheet.component.ts*라는 새 파일을 추가합니다. 그런 다음 아래에 설명된 단계를 완료합니다. + +#### 소스 파일 가져오기 {#importing-source-files} + +파일을 열고 Spreadsheet 소스 파일을 가져옵니다. 참고 사항: + +- PRO 버전을 사용하고 로컬 폴더에서 Spreadsheet 패키지를 설치하는 경우 가져오기 경로는 다음과 같습니다: + +~~~jsx +import { Spreadsheet } from 'dhx-spreadsheet-package'; +~~~ + +- Spreadsheet 트라이얼 버전을 사용하는 경우 다음 경로를 지정합니다: + +~~~jsx +import { Spreadsheet } from '@dhx/trial-spreadsheet'; +~~~ + +이 튜토리얼에서는 Spreadsheet **트라이얼** 버전 구성 방법을 설명합니다. + +#### 컨테이너 설정 및 Spreadsheet 초기화 {#set-the-container-and-initialize-spreadsheet} + +페이지에 Spreadsheet를 표시하려면 컴포넌트를 렌더링할 컨테이너를 설정하고 해당 생성자를 사용하여 Spreadsheet를 초기화해야 합니다: + +~~~jsx {1,8,12-13,18-19} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', // "app.component.ts" 파일에서 로 사용되는 템플릿 이름 + styleUrls: ['./spreadsheet.component.css'], // css 파일 포함 + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + // Spreadsheet 컨테이너 초기화 + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + // Spreadsheet 컴포넌트 초기화 + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); // Spreadsheet 소멸 + } +} +~~~ + +#### 스타일 추가 {#adding-styles} + +Spreadsheet를 올바르게 표시하려면 해당 스타일을 제공해야 합니다. 이를 위해 *src/app/spreadsheet/* 디렉터리에 *spreadsheet.component.css* 파일을 만들고 Spreadsheet와 컨테이너에 필요한 스타일을 지정합니다: + +~~~css title="spreadsheet.component.css" +/* Spreadsheet 스타일 가져오기 */ +@import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css"; + +/* 초기 페이지 스타일 지정 */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* Spreadsheet 컨테이너 스타일 지정 */ +.widget { + height: 100%; +} +~~~ + +#### 데이터 로드 {#loading-data} + +Spreadsheet에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. *src/app/spreadsheet/* 디렉터리에 *data.ts* 파일을 만들고 데이터를 추가합니다: + +~~~jsx title="data.ts" +export function getData(): any { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // 더 많은 데이터 셀 + ] + } +} +~~~ + +그런 다음 *spreadsheet.component.ts* 파일을 엽니다. 데이터 파일을 가져오고 아래와 같이 `ngOnInit()` 메서드 내에서 [`parse()`](api/spreadsheet_parse_method.md) 메서드를 사용하여 적용합니다. + +~~~jsx {2,18,21} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { getData } from "./data"; // 데이터 가져오기 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', + styleUrls: ['./spreadsheet.component.css'], + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + const data = getData(); // 데이터 속성 초기화 + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + + this._spreadsheet.parse(data); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); + } +} +~~~ + +이제 Spreadsheet 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 Spreadsheet가 데이터와 함께 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. [Spreadsheet API 문서](api/overview/events_overview.md)에서 사용 가능한 속성의 전체 목록을 확인하세요. + +#### 이벤트 처리 {#handling-events} + +사용자가 Spreadsheet에서 작업을 수행하면 widget이 이벤트를 발생시킵니다. 이러한 이벤트를 사용하여 작업을 감지하고 원하는 코드를 실행할 수 있습니다. [이벤트 전체 목록](api/overview/events_overview.md)을 참조하세요. + +*spreadsheet.component.ts* 파일을 열고 `ngOnInit()` 메서드를 다음과 같이 완성합니다: + +~~~jsx {5-8} title="spreadsheet.component.ts" +// ... +ngOnInit() { + this._spreadsheet = new Spreadsheet(this.spreadsheet_container.nativeElement,{}); + + spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); + }); +} + +ngOnDestroy() { + this._spreadsheet.destructor(); +} +~~~ + +### 3단계. 앱에 Spreadsheet 추가 {#step-3-adding-spreadsheet-into-the-app} + +`SpreadsheetComponent` 컴포넌트를 앱에 추가하려면 *src/app/app.component.ts* 파일을 열고 기본 코드를 다음으로 교체합니다: + +~~~jsx {5} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` // "spreadsheet.component.ts" 파일에서 생성된 템플릿 +}) +export class AppComponent { + name = ""; +} +~~~ + +그런 다음 *src/app/* 디렉터리에 *app.module.ts* 파일을 만들고 아래와 같이 `SpreadsheetComponent`를 지정합니다: + +~~~jsx {4-5,8} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; + +@NgModule({ + declarations: [AppComponent, SpreadsheetComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +마지막 단계로 *src/main.ts* 파일을 열고 기존 코드를 다음으로 교체합니다: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +그런 다음 앱을 시작하면 페이지에 데이터가 로드된 Spreadsheet를 확인할 수 있습니다. + +![Angular 애플리케이션에서 샘플 데이터로 초기화된 DHTMLX Spreadsheet](/img/integrations/trial_spreadsheet.png) + +이제 DHTMLX Spreadsheet를 Angular와 통합하는 방법을 알게 되었습니다. 요구 사항에 맞게 코드를 커스터마이징할 수 있습니다. 최종 예제는 [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md new file mode 100644 index 00000000..9fb698f3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -0,0 +1,140 @@ +--- +sidebar_label: API 개요 +title: API 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 API 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# API 개요 {#api-overview} + +## 생성자 {#constructor} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + rowsCount: 20, + colsCount: 20 +}); +~~~ + +매개변수: + +- HTML 컨테이너 (또는 HTML 컨테이너의 ID) +- 구성 옵션의 해시 (아래 참조) + +## Spreadsheet 메서드 {#spreadsheet-methods} + +| 이름 | 설명 | +| :------------------------------------------- | :-------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(api/spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(api/spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(api/spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(api/spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(api/spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(api/spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(api/spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(api/spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(api/spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(api/spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(api/spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(api/spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(api/spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(api/spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(api/spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(api/spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(api/spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(api/spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(api/spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(api/spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(api/spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(api/spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(api/spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(api/spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(api/spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(api/spreadsheet_redo_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(api/spreadsheet_serialize_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(api/spreadsheet_search_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(api/spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(api/spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(api/spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(api/spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(api/spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(api/spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(api/spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(api/spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(api/spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(api/spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(api/spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(api/spreadsheet_unlock_method.md) | + +## Spreadsheet 이벤트 {#spreadsheet-events} + +| 이름 | 설명 | +| :---------------------------------------------- | :----------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(api/spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(api/spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(api/spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(api/spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(api/spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(api/spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(api/spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(api/spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(api/spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(api/spreadsheet_beforesheetchange_event.md) | + +## Spreadsheet 속성 {#spreadsheet-properties} + +| 이름 | 설명 | +| ---------------------------------------------- | ----------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(api/spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(api/spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(api/spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(api/spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(api/spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(api/spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(api/spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(api/spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(api/spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(api/spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(api/spreadsheet_toolbarblocks_config.md) | + + +## Sheet Manager 메서드 {#sheet-manager-methods} + +| 이름 | 설명 | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(api/sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(api/sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(api/sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(api/sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(api/sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(api/sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(api/sheetmanager_setactive_method.md) | + +## Selection 메서드 {#selection-methods} + +| 이름 | 설명 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(api/selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(api/selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(api/selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(api/selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(api/selection_setselectedcell_method.md) | + +## Events Bus 메서드 {#events-bus-methods} + +| 이름 | 설명 | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(api/eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(api/eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(api/eventsbus_on_method.md) | + +## 내보내기 메서드 {#export-methods} + +| 이름 | 설명 | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(api/export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(api/export_xlsx_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md new file mode 100644 index 00000000..886909a2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: detach() +title: detach events bus 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 detach events bus 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# detach() + +### 설명 {#description} + +@short: `on()` 메서드로 이전에 연결된 이벤트 핸들러를 분리합니다 + +### 사용법 {#usage} + +~~~jsx +detach(name: string): void; +~~~ + +### 매개변수 {#parameters} + +- `name` - (필수) 분리할 이벤트의 이름 + +### 예제 {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); + +spreadsheet.events.detach("StyleChange"); +~~~ + +:::info +기본적으로 `detach()`는 대상 이벤트의 모든 이벤트 핸들러를 제거합니다. 컨텍스트 마커를 사용하면 특정 이벤트 핸들러만 분리할 수 있습니다. +::: + +~~~jsx +const marker = "any"; // you can use any string|object value + +spreadsheet.events.on("StyleChange", handler1); +spreadsheet.events.on("StyleChange", handler2, marker); +// the next command will delete only handler2 +spreadsheet.events.detach("StyleChange", marker); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md new file mode 100644 index 00000000..3d3d782b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: fire() +title: fire events bus 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 fire events bus 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# fire() + +### 설명 {#description} + +@short: 내부 이벤트를 트리거합니다 + +:::info +일반적으로 이벤트는 자동으로 호출되므로 이 메서드를 사용할 필요가 없습니다. +::: + +### 사용법 {#usage} + +~~~jsx +fire(name: string, arguments: array): boolean; +~~~ + +### 매개변수 {#parameters} + +- `name` - (필수) 이벤트 이름 (대소문자 구분 없음) +- `arguments` - (필수) 이벤트 관련 데이터 배열 + +### 반환값 {#returns} + +일부 이벤트 핸들러가 `false`를 반환하면 이 메서드는 `false`를 반환합니다. 그렇지 않으면 `true`를 반환합니다. + +### 예제 {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("CustomEvent", function(param1, param2){ + return true; +}); + +const res = spreadsheet.events.fire("CustomEvent", [12, "abc"]); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md new file mode 100644 index 00000000..e19f7c2d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: on() +title: on events bus 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 on events bus 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# on() + +### 설명 {#description} + +@short: Spreadsheet의 내부 이벤트에 핸들러를 연결합니다 + +### 사용법 {#usage} + +~~~jsx +on(name: string, callback: function): void; +~~~ + +### 매개변수 {#parameters} + +- `name` - (필수) 이벤트 이름 (대소문자 구분 없음) +- `callback` - (필수) 핸들러 함수 + +### 예제 {#example} + +~~~jsx {6-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); +~~~ + +:::info +Spreadsheet 이벤트의 전체 목록은 [여기](api/api_overview.md#spreadsheet-events)에서 확인하실 수 있습니다. + +동일한 이벤트에 여러 핸들러를 연결할 수 있으며, 모든 핸들러가 실행됩니다. 일부 핸들러가 `false`를 반환하면 관련 작업이 차단됩니다. 이벤트 핸들러는 연결된 순서대로 처리됩니다. +::: + +**관련 문서:** [이벤트 처리](handling_events.md) + +**관련 샘플:** [Spreadsheet. 이벤트](https://snippet.dhtmlx.com/2vkjyvsi) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/export_json_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/export_json_method.md new file mode 100644 index 00000000..223c927f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/export_json_method.md @@ -0,0 +1,35 @@ +--- +sidebar_label: json() +title: json 내보내기 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 json 내보내기 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# json() + +### 설명 {#description} + +@short: 스프레드시트의 데이터를 JSON 파일로 내보냅니다 + +### 사용법 {#usage} + +~~~jsx +json(): void; +~~~ + +### 예제 {#example} + +~~~jsx {7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// exports data from a spreadsheet into a JSON file +spreadsheet.export.json(); +~~~ + +**변경 로그:** v4.3에서 추가됨 + +**관련 문서:** [데이터 로드 및 내보내기](loading_data.md) + +**관련 샘플:** [Spreadsheet. JSON 내보내기/가져오기](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md new file mode 100644 index 00000000..c1a9c5f2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md @@ -0,0 +1,48 @@ +--- +sidebar_label: xlsx() +title: xlsx 내보내기 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 xlsx 내보내기 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# xlsx() + +### 설명 {#description} + +@short: 스프레드시트의 데이터를 Excel(.xlsx) 파일로 내보냅니다 + +### 사용법 {#usage} + +~~~jsx +xlsx(name:string): void; +~~~ + +### 매개변수 {#parameters} + +- `name` - (선택 사항) 내보낼 .xlsx 파일의 이름 + +### 예제 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// exports data from a spreadsheet into an Excel file +spreadsheet.export.xlsx(); + +// exports data from a spreadsheet into an Excel file with a custom name +spreadsheet.export.xlsx("MyData"); +~~~ + +:::note +컴포넌트는 `.xlsx` 확장자를 가진 Excel 파일로의 내보내기만 지원합니다. +::: + +:::info +DHTMLX Spreadsheet는 WebAssembly 기반 라이브러리 [Json2Excel](https://github.com/dhtmlx/json2excel)을 사용하여 Excel로 데이터를 내보냅니다. [자세한 내용을 확인하세요](loading_data.md#exporting-data). +::: + +**관련 문서:** [데이터 로드 및 내보내기](loading_data.md) + +**관련 샘플:** [Spreadsheet. Xlsx 내보내기](https://snippet.dhtmlx.com/btyo3j8s) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md new file mode 100644 index 00000000..8039e4d9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md @@ -0,0 +1,86 @@ +--- +sidebar_label: Spreadsheet 액션 +title: 액션 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 액션 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# 액션 개요 {#actions-overview} + +이 섹션에서는 Spreadsheet 이벤트와 상호작용하는 새로운 방식을 설명합니다. + +v4.3부터 DHTMLX Spreadsheet는 코드를 더 간단하고 간결하게 만들어 주는 [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md) 이벤트 쌍을 포함합니다. 이 이벤트들은 액션이 실행되기 직전에 발생하며, 어떤 액션이 수행되었는지를 정확히 나타냅니다. + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + // more actions +}); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config) + }, + // more actions +}); +~~~ + +[사용 가능한 액션의 전체 목록은 아래에서 확인하실 수 있습니다.](#list-of-actions) + +>이는 더 이상 스프레드시트에서 무언가를 변경할 때 실행하는 액션을 추적하고 처리하기 위해 [**before-** 및 **after-**](api/overview/events_overview.md) 이벤트 쌍을 추가할 필요가 없다는 것을 의미합니다. + +>그러나 필요한 경우 **이전 방식**도 사용할 수 있으며, 기존의 모든 이벤트는 이전과 동일하게 계속 작동합니다: +~~~jsx +spreadsheet.events.on("afterColumnAdd", function(cell){ + console.log("A new column is added", cell); +}); +~~~ +~~~jsx +spreadsheet.events.on("beforeColumnAdd", function(cell){ + console.log("A new column will be added", cell); + return true; +}); +~~~ + + + + +## 액션 목록 {#list-of-actions} + +| 액션 | 설명 | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **addColumn** | 새 열을 추가할 때 실행됩니다 | +| **addRow** | 새 행을 추가할 때 실행됩니다 | +| **addSheet** | 새 시트를 추가할 때 실행됩니다 | +| **clear** | clear() 메서드를 통해 스프레드시트를 지울 때 실행됩니다 | +| **clearSheet** | sheets.clear() 메서드를 통해 시트를 지울 때 실행됩니다 | +| **deleteColumn** | 열을 삭제할 때 실행됩니다 | +| **deleteRow** | 행을 삭제할 때 실행됩니다 | +| **deleteSheet** | 시트를 삭제할 때 실행됩니다 | +| **filter** | 시트에서 데이터를 필터링할 때 실행됩니다 | +| **fitColumn** | 열 너비를 자동으로 맞출 때 실행됩니다 | +| **groupAction** | 셀 범위를 선택하고 일부 작업(예: 셀 스타일 또는 형식 변경, 셀 잠금/잠금 해제, 셀 값 또는 스타일 지우기)을 적용할 때 실행됩니다 | +| **insertLink** | 셀에 하이퍼링크를 삽입할 때 실행됩니다 | +| **lockCell** | 셀을 잠그거나 잠금 해제할 때 실행됩니다 | +| **merge** | 셀 범위를 병합할 때 실행됩니다 | +| **removeCellStyles** | 셀 스타일을 지울 때 실행됩니다 | +| **renameSheet** | 시트 이름을 바꿀 때 실행됩니다 | +| **resizeCol** | 열 크기를 조정할 때 실행됩니다 | +| **resizeRow** | 행 크기를 조정할 때 실행됩니다 | +| **setCellFormat** | 셀 형식을 변경할 때 실행됩니다 | +| **setCellValue** | 셀 값을 변경하거나 제거할 때 실행됩니다 | +| **setValidation** | 셀에 데이터 유효성 검사를 설정할 때 실행됩니다 | +| **sortCells** | 스프레드시트에서 데이터를 정렬할 때 실행됩니다 | +| **setCellStyle** | 셀 스타일을 변경할 때 실행됩니다 | +| **toggleVisibility** | 열/행을 숨기거나 표시할 때 실행됩니다 | +| **toggleFreeze** | 열/행을 고정하거나 고정 해제할 때 실행됩니다 | +| **unmerge** | 셀을 분할할 때 실행됩니다 | + +**변경 로그:** + +- **toggleFreeze** 및 **toggleVisibility** 액션이 v5.2에서 추가되었습니다 +- **merge**, **unmerge**, **filter**, **fitColumn**, **insertLink** 액션이 v5.0에서 추가되었습니다 + +**관련 샘플:** [Spreadsheet. 액션](https://snippet.dhtmlx.com/efcuxlkt) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md new file mode 100644 index 00000000..d00f919c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md @@ -0,0 +1,13 @@ +--- +sidebar_label: Event Bus 메서드 개요 +title: Event Bus 메서드 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 Event Bus 메서드 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# Event Bus 메서드 개요 {#event-bus-methods-overview} + +| 이름 | 설명 | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(../eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(../eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(../eventsbus_on_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 00000000..4ee933b3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,25 @@ +--- +sidebar_label: 이벤트 개요 +title: 이벤트 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 이벤트 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# 이벤트 개요 {#events-overview} + +| 이름 | 설명 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(../spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(../spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(../spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(../spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(../spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(../spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(../spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(../spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/export_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/export_overview.md new file mode 100644 index 00000000..49aaf524 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/export_overview.md @@ -0,0 +1,12 @@ +--- +sidebar_label: 내보내기 메서드 개요 +title: 내보내기 메서드 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 내보내기 메서드 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# 내보내기 메서드 개요 {#export-methods-overview} + +| 이름 | 설명 | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(../export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(../export_xlsx_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 00000000..3ec5c888 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,50 @@ +--- +sidebar_label: 메서드 개요 +title: 메서드 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# 메서드 개요 {#methods-overview} + +| 이름 | 설명 | +| :------------------------------------------ | :------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(../spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(../spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(../spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(../spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(../spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(../spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(../spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(../spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(../spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(../spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(../spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(../spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(../spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(../spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(../spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(../spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(../spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(../spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(../spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(../spreadsheet_redo_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(../spreadsheet_search_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(../spreadsheet_serialize_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(../spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(../spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(../spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(../spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(../spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(../spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(../spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(../spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(../spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(../spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(../spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(../spreadsheet_unlock_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 00000000..14ea5ad2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 속성 개요 +title: 속성 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 속성 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# 속성 개요 {#properties-overview} + +| 이름 | 설명 | +| --------------------------------------------- | ---------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(../spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(../spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(../spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(../spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(../spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(../spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(../spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md new file mode 100644 index 00000000..886c69c6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: Selection 메서드 개요 +title: Selection 메서드 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Selection 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# Selection 메서드 개요 {#selection-methods-overview} + +| 이름 | 설명 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md new file mode 100644 index 00000000..19c167e9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md @@ -0,0 +1,17 @@ +--- +sidebar_label: Sheet Manager API 개요 +title: Sheet Manager API 개요 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager API 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# Sheet Manager API 개요 {#sheet-manager-api-overview} + +| 이름 | 설명 | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(../sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(../sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(../sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(../sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(../sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(../sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(../sheetmanager_setactive_method.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md new file mode 100644 index 00000000..3b95bf5d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getFocusedCell() +title: getFocusedCell selection 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getFocusedCell selection 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# getFocusedCell() + +### 설명 {#description} + +@short: 포커스가 있는 셀의 id를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getFocusedCell(): string; +~~~ + +### 반환값 {#returns} + +이 메서드는 포커스가 있는 셀의 id를 반환합니다 + +### 예제 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// 셀에 포커스 설정 +spreadsheet.selection.setFocusedCell("D4"); + +// 포커스가 있는 셀 가져오기 +const focused = spreadsheet.selection.getFocusedCell(); // ->"D4" +~~~ + +**관련 문서:** [Spreadsheet 작업하기](working_with_ssheet.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md new file mode 100644 index 00000000..256f7160 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getSelectedCell() +title: getSelectedCell selection 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getSelectedCell selection 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# getSelectedCell() + +### 설명 {#description} + +@short: 선택된 셀의 id를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getSelectedCell(): string; +~~~ + +### 반환값 {#returns} + +이 메서드는 선택된 셀의 id 또는 범위를 반환합니다 + +### 예제 {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// 선택된 셀 가져오기 +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +**관련 문서:** [Spreadsheet 작업하기](working_with_ssheet.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md new file mode 100644 index 00000000..61c1cfd2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: removeSelectedCell() +title: removeSelectedCell selection 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Selection의 removeSelectedCell 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# removeSelectedCell() + +### 설명 {#description} + +@short: 지정된 셀에서 선택을 해제합니다 + +### 사용법 {#usage} + +~~~jsx +removeSelectedCell(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 선택된 셀의 id 또는 범위 + +### 예제 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// 분산된 셀 선택 +spreadsheet.selection.setSelectedCell("A1:A9,C2,B4,D6"); + +// 지정된 셀의 선택 해제 +spreadsheet.selection.removeSelectedCell("A3:A6,C2"); +~~~ + +**변경 로그:** v4.2에서 추가됨 + +**관련 문서:** [Spreadsheet 작업하기](working_with_ssheet.md) + +**관련 샘플:** [Spreadsheet. 선택 해제](https://snippet.dhtmlx.com/u4j76cuh) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md new file mode 100644 index 00000000..3a162a2d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: setFocusedCell() +title: setFocusedCell selection 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 setFocusedCell selection 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# setFocusedCell() + +### 설명 {#description} + +@short: 지정된 셀에 포커스를 설정합니다 + +### 사용법 {#usage} + +~~~jsx +setFocusedCell(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 포커스를 설정할 셀의 id + +### 예제 {#example} + +~~~jsx {6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +**관련 문서:** [Spreadsheet 작업하기](working_with_ssheet.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md new file mode 100644 index 00000000..b853979c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSelectedCell() +title: setSelectedCell selection 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 setSelectedCell selection 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# setSelectedCell() + +### 설명 {#description} + +@short: 지정된 셀을 선택합니다 + +### 사용법 {#usage} + +~~~jsx +setSelectedCell(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 선택할 셀의 id 또는 범위 + +### 예제 {#example} + +~~~jsx {7,10,13} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// 단일 셀 선택 +spreadsheet.selection.setSelectedCell("B5"); + +// 셀 범위 선택 +spreadsheet.selection.setSelectedCell("B1:B5"); + +// 분산된 셀 선택 +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +**관련 문서:** [Spreadsheet 작업하기](working_with_ssheet.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md new file mode 100644 index 00000000..316af70a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: add() +title: add 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 add 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# add() + +### 설명 {#description} + +@short: 스프레드시트에 새로운 빈 시트를 추가하고, 새로 생성된 시트의 고유 식별자를 반환합니다 + +이름을 지정하지 않으면 기본 이름이 자동으로 생성됩니다(예: "Sheet 2" 또는 "Sheet 3"). + +:::info +이 메서드를 사용하려면 [`multiSheets`](api/spreadsheet_multisheets_config.md) 설정 옵션을 활성화해야 합니다. +::: + +### 사용법 {#usage} + +~~~ts +add: (name?: string) => Id; +~~~ + +### 매개변수 {#parameters} + +- `name` - (*string*) 선택 사항, 새 시트 탭에 표시될 이름. 생략하면 기본 이름이 할당됩니다. + +### 반환값 {#returns} + +- `Id` - (*string | number*) 새로 생성된 시트의 고유 식별자. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 사용자 지정 이름으로 시트 추가 +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // 예: "sheet_2" + +// 자동 생성된 이름으로 시트 추가 +const anotherSheetId = spreadsheet.sheets.add(); +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업하기](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md new file mode 100644 index 00000000..4039ada9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: clear() +title: clear 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 clear 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# clear() + +### 설명 {#description} + +@short: 특정 시트의 내용을 지웁니다(시트 자체는 삭제하지 않고 모든 셀 값, 스타일, 서식을 제거합니다) + +id를 제공하지 않으면 현재 활성 시트가 지워집니다. + +### 사용법 {#usage} + +~~~ts +clear: (id?: Id) => void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (*string | number*) 선택사항, 지울 시트의 고유 식별자입니다. 생략하면 현재 활성 시트가 지워집니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 특정 시트를 id로 지우기 +spreadsheet.sheets.clear("sheet_1"); + +// 현재 활성 시트 지우기 +spreadsheet.sheets.clear(); +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md new file mode 100644 index 00000000..b798b766 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: get() +title: get 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 get 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# get() + +### 설명 {#description} + +@short: 식별자로 단일 시트 객체를 반환합니다 + +### 사용법 {#usage} + +~~~ts +get: (id: Id) => ISheet; +~~~ + +### 매개변수 {#parameters} + +- `id` - (*string | number*) 필수, 가져올 시트의 고유 식별자입니다. + +### 반환값 {#returns} + +- `ISheet` - (*object*) 지정한 id와 일치하는 시트 객체입니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md new file mode 100644 index 00000000..971afce9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getActive() +title: getActive 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 getActive 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# getActive() + +### 설명 {#description} + +@short: 스프레드시트에서 현재 활성(표시) 상태인 시트 객체를 반환합니다 + +### 사용법 {#usage} + +~~~ts +getActive: () => ISheet; +~~~ + +### 반환값 {#returns} + +- `ISheet` - (*object*) `id`와 `name` 속성을 포함한 현재 활성 시트 객체입니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md new file mode 100644 index 00000000..440f9080 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getAll() +title: getAll 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 getAll 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# getAll() + +### 설명 {#description} + +@short: 스프레드시트에 현재 존재하는 모든 시트 객체의 배열을 반환합니다 + +:::info +각 시트 객체에는 시트의 id와 name이 포함됩니다. +::: + +### 사용법 {#usage} + +~~~ts +getAll: () => ISheet[]; +~~~ + +### 반환값 {#returns} + +- `ISheet[]` - (*array*) 시트 객체의 배열입니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md new file mode 100644 index 00000000..973ffb57 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: remove() +title: remove 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 remove 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# remove() + +### 설명 {#description} + +@short: 식별자로 스프레드시트에서 시트를 제거합니다 + +제거된 시트가 활성 상태였다면 스프레드시트는 자동으로 다른 사용 가능한 시트로 전환됩니다. + +:::info +이 메서드를 적용하려면 [`multiSheets`](api/spreadsheet_multisheets_config.md) 구성 옵션을 활성화해야 합니다. + +또한 스프레드시트에 시트가 2개 미만인 경우 시트는 삭제되지 않습니다. +::: + +### 사용법 {#usage} + +~~~ts +remove: (id: Id) => void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (*string | number*) 필수, 제거할 시트의 고유 식별자입니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// id로 시트 제거 +spreadsheet.sheets.remove("sheet_2"); +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md new file mode 100644 index 00000000..30745458 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md @@ -0,0 +1,43 @@ +--- +sidebar_label: setActive() +title: setActive 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Sheet Manager의 setActive 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setActive() + +### 설명 {#description} + +@short: 식별자로 지정한 시트로 활성(표시) 시트를 전환합니다 + +스프레드시트 UI가 다시 렌더링되어 대상 시트의 내용이 표시됩니다. + +### 사용법 {#usage} + +~~~ts +setActive: (id: Id) => void; +~~~ + +### 매개변수 {#parameters} + +- `id` - (*string | number*) 필수, 활성화할 시트의 고유 식별자입니다. + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 두 번째 시트로 전환 +spreadsheet.sheets.setActive("sheet_2"); + +// 전환 확인 +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 문서:** [시트 작업](working_with_sheets.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md new file mode 100644 index 00000000..26a30316 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addColumn() +title: addColumn 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 addColumn 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# addColumn() + +### 설명 {#description} + +@short: 스프레드시트에 새 열을 추가합니다 + +:::info +이 메서드는 지정한 셀을 찾아 선택한 다음, 해당 셀이 위치한 열을 한 칸 왼쪽으로 이동시키고 그 자리에 빈 열을 추가합니다. +::: + +### 사용법 {#usage} + +~~~jsx +addColumn(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 추가할 열의 id가 포함된 셀의 id + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 빈 "G" 열 추가 +spreadsheet.addColumn("G1"); +~~~ + +**관련 문서:** [Spreadsheet 작업](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md new file mode 100644 index 00000000..69797891 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md @@ -0,0 +1,55 @@ +--- +sidebar_label: addFormula() +title: addFormula 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 addFormula 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# addFormula() + +### 설명 {#description} + +@short: 셀 수식에서 사용할 수 있는 사용자 정의 수식 함수를 등록합니다 + +등록 후 해당 수식은 대문자 이름으로 모든 셀에서 사용할 수 있습니다(예: `=MYFUNC(A1, B2)`). + +### 사용법 {#usage} + +~~~ts +type cellValue = string | number | boolean +type mathArgument = cellValue | cellValue[]; +type mathFunction = (...x: mathArgument[]) => cellValue; + +addFormula: (name: string, handler: mathFunction) => void; +~~~ + +### 매개변수 {#parameters} + +- `name` - (*string*) 필수, 수식 이름(대소문자 구분 없이 대문자로 저장됩니다) +- `handler` - (*function*) 필수, 입력 인수(문자열, 숫자, 불리언 또는 이들의 배열)를 처리하고 단일 값을 반환하는 callback 함수 + +:::note +`handler` callback 함수는 동기 함수여야 합니다. 함수 내부에서 `Promise` 또는 `fetch`를 사용하는 것은 허용되지 않습니다. +::: + +### 예제 {#example} + +~~~jsx {4-6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +// 값을 두 배로 만드는 사용자 정의 수식 추가 +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); + +// 셀에서 사용: =DOUBLE(A1) +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +**변경 로그:** v6.0에서 추가됨 + +**관련 샘플:** [Spreadsheet. 사용자 정의 수식 추가](https://snippet.dhtmlx.com/wvxdlahp) + +**관련 문서:** [수식 및 함수](functions.md#custom-formulas) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md new file mode 100644 index 00000000..c88dda92 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addRow() +title: addRow 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 addRow 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# addRow() + +### 설명 {#description} + +@short: 스프레드시트에 새 행을 추가합니다 + +:::info +이 메서드는 지정한 셀을 찾아 선택한 다음, 해당 셀이 위치한 행을 한 칸 아래로 이동시키고 그 자리에 빈 행을 추가합니다. +::: + +### 사용법 {#usage} + +~~~jsx +addRow(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 추가할 행의 id가 포함된 셀의 id + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 빈 두 번째 행 추가 +spreadsheet.addRow("G2"); +~~~ + +**관련 문서:** [Spreadsheet 작업](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md new file mode 100644 index 00000000..5de85602 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: afterAction +title: afterAction 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterAction 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# afterAction + +### 설명 {#description} + +@short: 액션이 실행된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterAction: (action: string, config: object) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `action` - (필수) 액션의 이름. 사용 가능한 액션의 전체 목록은 [여기](api/overview/actions_overview.md#list-of-actions)를 참조하세요. +- `config` - (필수) 액션의 매개변수를 포함한 객체 + +### 예제 {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config 매개변수 +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + } +}); +~~~ + +**변경 로그:** v4.3에서 추가됨 + +**관련 문서:** +- [Spreadsheet 액션](api/overview/actions_overview.md) +- [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md new file mode 100644 index 00000000..796f06b4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: afterClear +title: afterClear 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterClear 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterClear + +:::caution +`afterClear` 이벤트는 v4.3에서 deprecated되었습니다. 아직 작동하지만, 다음과 같이 새로운 방식을 사용하는 것을 권장합니다: + +~~~jsx +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + } +}); +~~~ + +새로운 개념에 대한 자세한 내용은 **[Spreadsheet 액션](api/overview/actions_overview.md)**을 참조하세요. +::: + +### 설명 {#description} + +@short: 스프레드시트가 초기화된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterClear: () => void; +~~~ + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterClear" 이벤트 구독 +spreadsheet.events.on("afterClear", function(){ + console.log("A spreadsheet is cleared"); + return false; +}); +~~~ + +**변경 로그:** v4.2에서 추가됨 + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md new file mode 100644 index 00000000..42591a5e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterDataLoaded +title: afterDataLoaded 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterDataLoaded 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterDataLoaded + +### 설명 {#description} + +@short: 데이터 로딩이 완료된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterDataLoaded: () => void; +~~~ + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); +spreadsheet.parse(data); + +// "afterDataLoaded" 이벤트 구독 +spreadsheet.events.on("afterDataLoaded", () => { + dhx.message({ + text: "Data is successfully loaded into Spreadsheet!", + css: "dhx_message--success", + expire: 5000 + }); +}); +~~~ + +**변경 로그:** v5.2에서 추가됨 + +**관련 문서:** [이벤트 처리](handling_events.md) + +**관련 샘플:** [Spreadsheet. 데이터 로드 이벤트](https://snippet.dhtmlx.com/vxr7amz6) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md new file mode 100644 index 00000000..5ef6dbfc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditEnd +title: afterEditEnd 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterEditEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterEditEnd + +### 설명 {#description} + +@short: 셀 편집이 완료된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterEditEnd: (cell: string, value: string) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id +- `value` - (필수) 셀의 값 + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterEditEnd" 이벤트 구독 +spreadsheet.events.on("afterEditEnd", function(cell, value){ + console.log("Editing is finished"); + console.log(cell, value); +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md new file mode 100644 index 00000000..7a6bdbab --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditStart +title: afterEditStart 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterEditStart 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterEditStart + +### 설명 {#description} + +@short: 셀 편집이 시작된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterEditStart: (cell: string, value: string) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id +- `value` - (필수) 셀의 값 + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterEditStart" 이벤트 구독 +spreadsheet.events.on("afterEditStart", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md new file mode 100644 index 00000000..481788b7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterFocusSet +title: afterFocusSet 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterFocusSet 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterFocusSet + +### 설명 {#description} + +@short: 셀에 포커스가 설정된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterFocusSet: (cell: string) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterFocusSet" 이벤트 구독 +spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md new file mode 100644 index 00000000..cbafd895 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterSelectionSet +title: afterSelectionSet 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterSelectionSet 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterSelectionSet + +### 설명 {#description} + +@short: 셀이 선택된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterSelectionSet: (cell: string) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id(들) + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterSelectionSet" 이벤트 구독 +spreadsheet.events.on("afterSelectionSet", function(cell){ + console.log("The cells " + spreadsheet.selection.getSelectedCell() + " are selected"); + console.log(cell); +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md new file mode 100644 index 00000000..ee3671e9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md @@ -0,0 +1,40 @@ +--- +sidebar_label: afterSheetChange +title: afterSheetChange 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 afterSheetChange 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# afterSheetChange + +### 설명 {#description} + +@short: 현재 활성 시트가 변경된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx +afterSheetChange: (sheet: object) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `sheet` - (필수) 새로 활성화된 시트의 이름과 id를 포함하는 객체 + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "afterSheetChange" 이벤트 구독 +spreadsheet.events.on("afterSheetChange", function(sheet) { + console.log("The newly active sheet is " + sheet.name); + console.log(sheet); +}); +~~~ + +**변경 로그:** v4.1에서 추가됨 + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md new file mode 100644 index 00000000..e9dc2c31 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md @@ -0,0 +1,50 @@ +--- +sidebar_label: beforeAction +title: beforeAction 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 beforeAction 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# beforeAction + +### 설명 {#description} + +@short: 액션이 실행되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeAction: (action: string, config: object) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `action` - (필수) 액션의 이름. 사용 가능한 액션의 전체 목록은 [여기](api/overview/actions_overview.md#list-of-actions)에서 확인하세요 +- `config` - (필수) 액션의 매개변수를 포함하는 객체 + +### 반환값 {#returns} + +액션 실행을 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환하세요 + +### 예제 {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return false; + } +}); +~~~ + +**변경 로그:** v4.3에서 추가됨 + +**관련 문서:** +- [Spreadsheet 액션](api/overview/actions_overview.md) +- [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md new file mode 100644 index 00000000..04d82e19 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md @@ -0,0 +1,53 @@ +--- +sidebar_label: beforeClear +title: beforeClear 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 beforeClear 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# beforeClear + +:::caution +`beforeClear` 이벤트는 v4.3에서 deprecated되었습니다. 아직 작동하지만, 다음과 같이 새로운 방식을 사용하는 것을 권장합니다: + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + return false; + } +}); +~~~ + +새로운 개념에 대한 자세한 내용은 **[Spreadsheet 액션](api/overview/actions_overview.md)**을 참조하세요. +::: + +### 설명 {#description} + +@short: 스프레드시트가 초기화되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeClear: () => void | boolean; +~~~ + +### 반환값 {#returns} + +스프레드시트 초기화를 방지하려면 `false`를 반환하고, 그렇지 않으면 `true`를 반환하세요. + +### 예제 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeClear" 이벤트 구독 +spreadsheet.events.on("beforeClear", function(){ + console.log("A spreadsheet will be cleared"); + return false; +}); +~~~ + +**변경 로그:** v4.2에서 추가됨 + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md new file mode 100644 index 00000000..63797752 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditEnd +title: beforeEditEnd 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 beforeEditEnd 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하실 수 있습니다. +--- + +# beforeEditEnd + +### 설명 {#description} + +@short: 셀 편집이 완료되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeEditEnd: (cell: string, value: string) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id +- `value` - (필수) 셀의 값 + +### 반환값 {#returns} + +셀 편집을 완료하려면 `true`를 반환하고, 편집기를 닫지 않으려면 `false`를 반환하세요 + +### 예제 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeEditEnd" 이벤트 구독 +spreadsheet.events.on("beforeEditEnd", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); + return true; +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md new file mode 100644 index 00000000..fccd078c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditStart +title: beforeEditStart 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 beforeEditStart 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeEditStart + +### 설명 {#description} + +@short: 셀 편집이 시작되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeEditStart: (cell: string, value: string) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id +- `value` - (필수) 셀의 값 + +### 반환값 {#returns} + +셀을 편집하려면 `true`를 반환하고, 편집을 방지하려면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeEditStart" 이벤트를 구독합니다 +spreadsheet.events.on("beforeEditStart", function(cell, value){ + console.log("Editing is about to start"); + console.log(cell, value); + return true; +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md new file mode 100644 index 00000000..6638c68d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeFocusSet +title: beforeFocusSet 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 beforeFocusSet 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeFocusSet + +### 설명 {#description} + +@short: 셀에 포커스가 설정되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeFocusSet: (cell: string) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀의 id + +### 반환값 {#returns} + +셀에 포커스를 설정하려면 `true`를 반환하고, 포커스 설정을 방지하려면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeFocusSet" 이벤트를 구독합니다 +spreadsheet.events.on("beforeFocusSet", function(cell){ + console.log("Focus will be set on a cell "+spreadsheet.selection.getSelectedCell()); + console.log(cell); + return true; +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md new file mode 100644 index 00000000..e2700205 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeSelectionSet +title: beforeSelectionSet 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 beforeSelectionSet 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeSelectionSet + +### 설명 {#description} + +@short: 셀이 선택되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeSelectionSet: (cell: string) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `cell` - (필수) 셀(들)의 id + +### 반환값 {#returns} + +셀을 선택하려면 `true`를 반환하고, 셀 선택을 방지하려면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeSelectionSet" 이벤트를 구독합니다 +spreadsheet.events.on("beforeSelectionSet", function(cell){ + console.log("Cells "+spreadsheet.selection.getSelectedCell()+" will be selected"); + console.log(cell); + return true; +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md new file mode 100644 index 00000000..20f210be --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeSheetChange +title: beforeSheetChange 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 beforeSheetChange 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# beforeSheetChange + +### 설명 {#description} + +@short: 현재 활성 시트가 변경되기 전에 발생합니다 + +### 사용법 {#usage} + +~~~jsx +beforeSheetChange: (sheet: object) => void | boolean; +~~~ + +### 매개변수 {#parameters} + +이벤트의 callback은 다음 매개변수를 받습니다: + +- `sheet` - (필수) 현재 활성 시트의 이름과 id를 포함하는 객체 + +### 반환값 {#returns} + +활성 시트를 변경하려면 `true`를 반환하고, 활성 시트 변경을 방지하려면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "beforeSheetChange" 이벤트를 구독합니다 +spreadsheet.events.on("beforeSheetChange", function(sheet) { + console.log("The active sheet will be changed"); + console.log(sheet); + return true; +}); +~~~ + +**변경 로그:** v4.1에서 추가됨 + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md new file mode 100644 index 00000000..136963ee --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md @@ -0,0 +1,33 @@ +--- +sidebar_label: clear() +title: clear 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 clear 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# clear() + +### 설명 {#description} + +@short: 스프레드시트를 초기화합니다 + +### 사용법 {#usage} + +~~~jsx +clear(): void; +~~~ + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 스프레드시트를 초기화합니다 +spreadsheet.clear(); +~~~ + +**변경 로그:** v4.2에서 추가됨 + +**관련 문서:** [스프레드시트 초기화](working_with_ssheet.md#clearing-spreadsheet) + +**관련 샘플:** [Spreadsheet. Clear](https://snippet.dhtmlx.com/szmtjn72) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md new file mode 100644 index 00000000..c55fe77e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: colsCount +title: colsCount 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 colsCount 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# colsCount + +### 설명 {#description} + +@short: 선택 사항. 초기화 시 스프레드시트의 열 수를 설정합니다 + +### 사용법 {#usage} + +~~~jsx +colsCount?: number; +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + colsCount: 10, + // 기타 설정 매개변수 +}); +~~~ + +**관련 문서:** [설정](configuration.md#number-of-rows-and-columns) + +**관련 샘플:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md new file mode 100644 index 00000000..aa626c11 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteColumn() +title: deleteColumn 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 deleteColumn 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# deleteColumn() + +### 설명 {#description} + +@short: 스프레드시트에서 열을 제거합니다 + +:::info +이 메서드는 지정된 셀을 찾아 선택한 다음, 해당 셀이 위치한 열을 제거하고 왼쪽 열을 해당 위치로 이동합니다. +::: + +### 사용법 {#usage} + +~~~jsx +deleteColumn(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 삭제할 열의 이름이 포함된 셀의 id + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "G" 열을 제거합니다 +spreadsheet.deleteColumn("G2"); +~~~ + +:::note +"A1:C3"과 같이 셀 id의 범위를 메서드의 매개변수로 제공하여 여러 열을 삭제할 수 있습니다. +::: + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md new file mode 100644 index 00000000..4d060c00 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteRow() +title: deleteRow 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 deleteRow 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# deleteRow() + +### 설명 {#description} + +@short: 스프레드시트에서 행을 제거합니다 + +:::info +이 메서드는 지정된 셀을 찾아 선택한 다음, 해당 셀이 위치한 행을 제거하고 아래 행을 해당 위치로 이동합니다. +::: + +### 사용법 {#usage} + +~~~jsx +deleteRow(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 삭제할 행의 id가 포함된 셀의 id + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 두 번째 행을 제거합니다 +spreadsheet.deleteRow("G2"); +~~~ + +:::note +"A1:C3"과 같이 셀 id의 범위를 메서드의 매개변수로 제공하여 여러 행을 삭제할 수 있습니다. +::: + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md new file mode 100644 index 00000000..54fb931b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md @@ -0,0 +1,77 @@ +--- +sidebar_label: eachCell() +title: eachCell 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 eachcell 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# eachCell() + +### 설명 {#description} + +@short: 스프레드시트의 셀을 순회합니다 + +:::info +셀 범위가 지정되지 않은 경우, 메서드는 선택된 셀을 순회합니다. +::: + +### 사용법 {#usage} + +~~~jsx +eachCell( + cb: (cellName: string, cellValue: any) => any, + range?: string +): void; +~~~ + +### 매개변수 {#parameters} + +- `callback` - (필수) callback 함수 +- `range` - (선택 사항) 순회할 셀 범위 + +### 예제 {#example} + +~~~jsx {21-27} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 설정 매개변수 +}); + +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + items: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); + +function checkValue(check) { + spreadsheet.eachCell(function (cell, value) { + if (!check(value)) { + spreadsheet.setStyle(cell, { background: "#e57373" }); + } else { + spreadsheet.setStyle(cell, { background: "" }); + } + }, spreadsheet.selection.getSelectedCell()); +} + +spreadsheet.menu.events.on("click", function (id) { + switch (id) { + case "isNumber": + checkValue(function (value) { return !isNaN(value) }); + break; + case "isEven": + checkValue(function (value) { return value % 2 === 0 }); + break; + } +}); +~~~ + +**관련 문서:** [커스터마이징](customization.md#menu) + +**관련 샘플**: [Spreadsheet. Menu](https://snippet.dhtmlx.com/2mlv2qaz) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md new file mode 100644 index 00000000..912b725c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: editLine +title: editLine 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 문서에서 editLine 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# editLine + +### 설명 {#description} + +@short: 선택 사항. 편집 바를 표시하거나 숨깁니다 + +### 사용법 {#usage} + +~~~jsx +editLine?: boolean; +~~~ + +### 기본 설정 {#default-config} + +~~~jsx +editLine: true +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + editLine: true, + // 기타 설정 매개변수 +}); +~~~ + +**관련 문서:** [설정](configuration.md#editing-bar) + +**관련 샘플:** [Spreadsheet. Disabled Line](https://snippet.dhtmlx.com/unem2jkh) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md new file mode 100644 index 00000000..9fd037af --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md @@ -0,0 +1,29 @@ +--- +sidebar_label: endEdit() +title: endEdit 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 endEdit 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# endEdit() + +### 설명 {#description} + +@short: 선택된 셀의 편집을 종료하고, 에디터를 닫으며, 입력된 값을 저장합니다 + +### 사용법 {#usage} + +~~~jsx +endEdit(): void; +~~~ + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 선택된 셀의 편집을 종료합니다 +spreadsheet.endEdit(); +~~~ + +**관련 문서:** [스프레드시트 작업](working_with_cells.md#editing-a-cell) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md new file mode 100644 index 00000000..d9358dda --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md @@ -0,0 +1,43 @@ +--- +sidebar_label: exportModulePath +title: exportModulePath 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 exportModulePath 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# exportModulePath + +### 설명 {#description} + +@short: 선택 사항. 내보내기 모듈의 경로를 설정합니다 + +### 사용법 {#usage} + +~~~jsx +exportModulePath?: string; +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx", // 내보내기 모듈의 `worker.js` 파일에 대한 로컬 경로 + // other config parameters +}); +~~~ + +### 상세 설명 {#details} + +:::note +DHTMLX Spreadsheet는 데이터를 Excel로 내보내기 위해 WebAssembly 기반 라이브러리 [JSON2Excel](https://github.com/dhtmlx/json2excel)을 사용합니다. +::: + +파일을 내보내려면 `exportModulePath` 옵션으로 [Json2Excel](https://github.com/dhtmlx/json2excel) 라이브러리의 *worker.js* 파일 경로(내보내기가 처리되는 위치)를 설정해야 합니다. 기본적으로 `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`가 사용됩니다. +- 공개 내보내기 서버를 사용하는 경우, 기본값으로 사용되므로 링크를 별도로 지정할 필요가 없습니다 +- 자체 내보내기 서버를 사용하는 경우 다음을 수행해야 합니다: + - [**Json2Excel**](https://github.com/dhtmlx/json2excel) 라이브러리를 설치합니다 + - 특정 버전의 경우 `"../libs/json2excel/x.x/worker.js?vx"`를 사용합니다(`x.x`를 서버에 배포된 버전으로 교체하세요) + + +**관련 문서:** [데이터 로딩 및 내보내기](loading_data.md#exporting-data) + +**관련 샘플:** [Spreadsheet. 사용자 정의 가져오기 내보내기 경로](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md new file mode 100644 index 00000000..391c2b0e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: fitColumn() +title: fitColumn 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 fitColumn 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# fitColumn() + +### 설명 {#description} + +@short: 열 너비를 해당 열에서 가장 긴 값에 맞게 조정합니다 + + +### 사용법 {#usage} + +~~~jsx +fitColumn(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 해당 열의 이름을 포함하는 셀의 id + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "G" 열의 너비를 조정합니다 +spreadsheet.fitColumn("G2"); +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#autofit-column-width) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md new file mode 100644 index 00000000..ae61e4a8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md @@ -0,0 +1,83 @@ +--- +sidebar_label: formats +title: formats 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 formats 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# formats + +### 설명 {#description} + +@short: 선택 사항. 숫자 형식 목록을 정의합니다 + +### 사용법 {#usage} + +~~~jsx +formats?: array; +~~~ + +### 매개변수 {#parameters} + +`formats` 속성은 숫자 형식 객체의 배열이며, 각 객체는 다음 속성들을 포함합니다: + +- `id` - [](api/spreadsheet_setformat_method.md) 메서드로 셀에 형식을 설정할 때 사용하는 형식의 id +- `mask` - 숫자 형식의 마스크 +- `name` - 도구 모음 및 메뉴 드롭다운 목록에 표시되는 형식의 이름 +- `example` - 형식이 적용된 숫자가 어떻게 보이는지 보여주는 예제. 형식 예제의 기본값으로 숫자 2702.31이 사용됩니다 + +### 기본 설정 {#default-config} + +기본 숫자 형식은 다음과 같습니다: + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // depending on the timeFormat config + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" } +]; +~~~ + + +### 예제 {#example} + +~~~jsx {2-19} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + formats: [ + { + name: "U.S. Dollar", + id: "currency", + mask: "$#,##0.00" + }, + { + name: "Euro", + id: "euro", + mask: "[$€]#.##0,00", + example: "1000.50" + }, + { + name: "Swiss franc", + id: "franc", + mask: "[$CHF ]#.##0,00" + } + ], + // other config parameters +}); +~~~ + +**변경 로그:** +- "Time" 형식이 v4.3에서 추가됨 +- "Date" 형식이 v4.2에서 추가됨 +- "Text" 형식이 v4.0에서 추가됨 + +**관련 문서:** +- [숫자 형식 지정](number_formatting.md) +- [형식 사용자 정의](number_formatting.md#formats-customization) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md new file mode 100644 index 00000000..9e8ed8a6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeCols() +title: freezeCols 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 freezeCols 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# freezeCols() + +### 설명 {#description} + +@short: 열을 고정("동결")합니다 + +### 사용법 {#usage} + +~~~jsx +freezeCols(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 열의 id를 정의하는 데 사용할 셀의 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed +spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed +~~~ + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**관련 API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 고정](https://snippet.dhtmlx.com/a12xd1mn) + +**변경 로그:** +v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md new file mode 100644 index 00000000..3266795d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeRows() +title: freezeRows 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 freezeRows 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# freezeRows() + +### 설명 {#description} + +@short: 행을 고정("동결")합니다 + +### 사용법 {#usage} + +~~~jsx +freezeRows(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 행의 id를 정의하는 데 사용할 셀의 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.freezeRows("B2"); // the rows up to the "2" row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the "2" row in "sheet2" will be fixed +~~~ + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**관련 API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 고정](https://snippet.dhtmlx.com/a12xd1mn) + +**변경 로그:** +v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md new file mode 100644 index 00000000..00c6b19a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: getFilter() +title: getFilter 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getFilter 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# getFilter() + +### 설명 {#description} + +@short: 데이터 필터링에 지정된 기준이 포함된 객체를 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getFilter(id?: string): {cell, rules}; +~~~ + +### 매개변수 {#parameters} + +- `id` - (선택 사항) 시트의 id. 지정하지 않으면 현재 시트에 대해 메서드가 호출됩니다 + +### 반환값 {#returns} + +이 메서드는 필터링 기준이 포함된 객체를 반환합니다. 객체는 두 가지 속성을 포함합니다: + +- `cell` - 필터링이 적용된 셀 범위 +- `rules` - 필터링 규칙이 담긴 객체 배열 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 현재 시트의 필터링 기준을 가져옵니다 +const filter = spreadsheet.getFilter(); // -> {cell:"A1:A8", rules: [{…}, {…}, {…}, {…}, {…}]} +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [데이터 필터링](working_with_ssheet.md#filtering-data) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md new file mode 100644 index 00000000..874c4ad2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormat() +title: getFormat 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getFormat 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# getFormat() + +### 설명 {#description} + +@short: 셀 값에 적용된 숫자 형식을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getFormat(cell: string): string | array; +~~~ + +### 매개변수 {#parameters} + +`cell` - (필수) 셀 또는 셀 범위의 id + +### 반환값 {#returns} + +이 메서드는 셀 값에 적용된 형식을 반환합니다 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "currency"를 반환합니다 +const format = spreadsheet.getFormat("A1"); +~~~ + +:::info +v4.1부터 셀 참조는 다음 형식으로 지정할 수 있습니다: + +~~~jsx +// "number"를 반환합니다 +const cellFormat = spreadsheet.getFormat("sheet1!A2"); +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 현재 활성 탭의 셀 값에 적용된 형식이 반환됩니다. +::: + +**관련 문서:** [숫자 형식 지정](number_formatting.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md new file mode 100644 index 00000000..acf1dc82 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormula() +title: getFormula 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getFormula 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# getFormula() + +### 설명 {#description} + +@short: 셀의 수식을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getFormula(cell: string): string | array; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀의 id + +### 반환값 {#returns} + +이 메서드는 셀의 수식을 반환합니다 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "ABS(C2)"를 반환합니다 +const formula = spreadsheet.getFormula("B2"); +~~~ + +:::info +셀 참조는 다음 형식으로 지정할 수 있습니다: + +~~~jsx +// "ABS(C2)"를 반환합니다 +const formula = spreadsheet.getFormula("sheet1!B2"); +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 활성 탭의 셀 수식이 반환됩니다. +::: + +**변경 로그:** v4.1에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md new file mode 100644 index 00000000..f5140ff2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md @@ -0,0 +1,68 @@ +--- +sidebar_label: getStyle() +title: getStyle 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getStyle 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하세요. +--- + +# getStyle() + +### 설명 {#description} + +@short: 셀에 적용된 스타일을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getStyle(cell: string): any; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 또는 셀 범위의 id + +### 반환값 {#returns} + +이 메서드는 셀에 설정된 스타일을 반환합니다 + +### 예제 {#example} + +~~~jsx {5,9,12} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 단일 셀의 스타일 가져오기 +const style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// 셀 범위의 스타일 가져오기 +const rangeStyles = spreadsheet.getStyle("A1:D1"); // -> see details + +// 여러 셀의 스타일 가져오기 +const values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +:::info +여러 셀의 경우, 이 메서드는 각 셀에 적용된 스타일이 담긴 객체 배열을 반환합니다: + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ +::: + +:::info +v4.1부터 셀 또는 셀 범위의 참조는 다음 형식으로 지정할 수 있습니다: + +~~~jsx +const style = spreadsheet.getStyle("sheet1!A2"); +//-> {justify-content: "flex-end", text-align: "right"} +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 활성 탭의 셀 스타일이 반환됩니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md new file mode 100644 index 00000000..7d541a85 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: getValue() +title: getValue 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 getValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# getValue() + +### 설명 {#description} + +@short: 셀(들)의 값을 반환합니다 + +### 사용법 {#usage} + +~~~jsx +getValue(cell: string): any | array; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 또는 셀 범위의 id + +### 반환값 {#returns} + +이 메서드는 셀들의 값을 반환합니다 + +### 예제 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 단일 셀의 값 반환 +const cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// 셀 범위의 값 반환 +const rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// 여러 셀의 값 반환 +const values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +:::info +v4.1부터 셀 또는 셀 범위에 대한 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000 +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 메서드는 활성 탭에 있는 셀의 값을 반환합니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md new file mode 100644 index 00000000..60784395 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: groupFill +title: groupFill 이벤트 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 groupFill 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# groupFill + +### 설명 {#description} + +@short: 셀 자동 채우기 시 발생합니다 + +### 사용법 {#usage} + +~~~jsx +groupFill: (focusedCell: string, selectedCell: string) => void; +~~~ + +### 매개변수 {#parameters} + +이벤트의 콜백은 다음 매개변수를 받습니다: + +- `focusedCell` - (필수) 포커스된 셀의 id +- `selectedCell` - (필수) 선택된 셀들의 id + +### 예제 {#example} + +~~~jsx {5-7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "groupFill" 이벤트 구독 +spreadsheet.events.on("groupFill", function (focusedCell, selectedCell) { + console.log(focusedCell, selectedCell); +}); +~~~ + +**관련 문서:** [이벤트 처리](handling_events.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md new file mode 100644 index 00000000..066b525b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: hideCols() +title: hideCols 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 hideCols 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# hideCols() + +### 설명 {#description} + +@short: 열을 숨깁니다 + +### 사용법 {#usage} + +~~~jsx +hideCols(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택) 열의 id를 정의하는 데 사용되는 셀의 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.hideCols("B2"); // "B" 열이 숨겨집니다 +spreadsheet.hideCols("sheet2!B2"); // "sheet2"의 "B" 열이 숨겨집니다 +spreadsheet.hideCols("B2:C2"); // "B"와 "C" 열이 숨겨집니다 +~~~ + + +**관련 문서:** [Spreadsheet 다루기](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**관련 API:** [`showCols()`](api/spreadsheet_showcols_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 숨기기](https://snippet.dhtmlx.com/zere1ote) + +**변경 로그:** v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md new file mode 100644 index 00000000..06e116d4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: hideRows() +title: hideRows 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 hideRows 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# hideRows() + +### 설명 {#description} + +@short: 행을 숨깁니다 + +### 사용법 {#usage} + +~~~jsx +hideRows(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택) 행의 id를 정의하는 데 사용되는 셀의 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.hideRows("B2"); // "2" 행이 숨겨집니다 +spreadsheet.hideRows("sheet2!B2"); // "sheet2"의 "2" 행이 숨겨집니다 +spreadsheet.hideRows("B2:C4"); // "2"에서 "4"까지의 행이 숨겨집니다 +~~~ + +**관련 문서:** [Spreadsheet 다루기](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**관련 API:** [`showRows()`](api/spreadsheet_showrows_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 숨기기](https://snippet.dhtmlx.com/zere1ote) + +**변경 로그:** v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md new file mode 100644 index 00000000..e6743b68 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: hideSearch() +title: hideSearch 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 hideSearch 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# hideSearch() + +### 설명 {#description} + +@short: 검색 바를 숨깁니다 + +### 사용법 {#usage} + +~~~jsx +hideSearch(): void; +~~~ + +### 예제 {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 검색 바를 열고 발견된 셀을 강조 표시합니다 +spreadsheet.search("min", true); + +// 검색 바를 숨깁니다 +spreadsheet.hideSearch(); +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [Spreadsheet 다루기](working_with_ssheet.md#searching-for-data) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md new file mode 100644 index 00000000..eb518b0f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md @@ -0,0 +1,45 @@ +--- +sidebar_label: importModulePath +title: importModulePath 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 importModulePath 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# importModulePath + +### 설명 {#description} + +@short: 선택 사항. import 모듈의 경로를 설정합니다 + +### 사용법 {#usage} + +~~~jsx +importModulePath?: string; +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + importModulePath: "../libs/excel2json/1.0/worker.js", + // 기타 설정 매개변수 +}); +~~~ + +### 세부 정보 {#details} + +:::note +DHTMLX Spreadsheet는 WebAssembly 기반 라이브러리 [Excel2json](https://github.com/DHTMLX/excel2json)을 사용하여 Excel에서 데이터를 가져옵니다. +::: + +파일을 가져오려면 다음 작업이 필요합니다: + +- **Excel2json** 라이브러리를 설치합니다 +- 다음 두 가지 방법 중 하나로 `importModulePath` 옵션에 *worker.js* 파일의 경로를 설정합니다: + - 컴퓨터의 로컬 경로를 제공하는 방법: `"../libs/excel2json/1.0/worker.js"` + - CDN의 파일 링크를 제공하는 방법: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +기본값으로 CDN 링크가 사용됩니다. + +**관련 문서:** [데이터 로딩 및 내보내기](loading_data.md#loading-excel-file-xlsx) + +**관련 샘플:** [Spreadsheet. 사용자 정의 Import Export 경로](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md new file mode 100644 index 00000000..dbf66aec --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md @@ -0,0 +1,53 @@ +--- +sidebar_label: insertLink() +title: insertLink 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 insertLink 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# insertLink() + +### 설명 {#description} + +@short: 셀에 하이퍼링크를 삽입하거나 제거합니다 + +### 사용법 {#usage} + +~~~jsx +insertLink( + cell: string, + link? : { + text?: string, + href: string + } +): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀의 id +- `link` - (선택) 링크 설정 객체: + - `text` - (선택) 하이퍼링크에 표시할 텍스트 + - `href` - (필수) 하이퍼링크가 연결되는 페이지의 URL + +:::info +텍스트는 유지하면서 하이퍼링크만 제거하려면 `link` 매개변수 없이 메서드를 호출합니다. +::: + +### 예제 {#example} + +~~~jsx {5-7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// "A2" 셀에 링크 삽입 +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); + +// "A2" 셀에서 링크 제거 +spreadsheet.insertLink("A2"); +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [Spreadsheet 다루기](working_with_cells.md#inserting-a-hyperlink-into-a-cell) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md new file mode 100644 index 00000000..cde964a7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md @@ -0,0 +1,57 @@ +--- +sidebar_label: isLocked() +title: isLocked 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 isLocked 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# isLocked() + +### 설명 {#description} + +@short: 셀(들)이 잠겨 있는지 확인합니다 + +### 사용법 {#usage} + +~~~jsx +isLocked(cell: string): boolean; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 또는 셀 범위의 id + +### 반환값 {#returns} + +이 메서드는 셀이 잠겨 있으면 `true`를, 잠기지 않았으면 `false`를 반환합니다 + +### 예제 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 셀이 잠겨 있는지 확인 +const cellLocked = spreadsheet.isLocked("A1"); + +// 여러 셀이 잠겨 있는지 확인 +const rangeLocked = spreadsheet.isLocked("A1:C1"); + +// 분산된 셀들이 잠겨 있는지 확인 +const cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +:::info +여러 셀을 동시에 확인하는 경우, 지정된 셀 중 하나라도 잠긴 셀이 있으면 메서드는 `true`를 반환합니다. +::: + +:::info +v4.1부터 셀 또는 셀 범위에 대한 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +const cellsLocked = spreadsheet.isLocked("sheet1!A2"); +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 메서드는 활성 탭의 셀을 확인합니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md new file mode 100644 index 00000000..5bf887b9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md @@ -0,0 +1,102 @@ +--- +sidebar_label: load() +title: load 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 load 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# load() + +### 설명 {#description} + +@short: 외부 파일에서 데이터를 로드합니다 + +### 사용법 {#usage} + +~~~jsx +load(url: string, type?: string): promise; +~~~ + +### 매개변수 {#parameters} + +- `url` - (필수) 외부 파일의 URL +- `type` - (선택) 로드할 데이터 타입: "json" (기본값), "csv", "xlsx" + +### 반환값 {#returns} + +이 메서드는 데이터 로딩의 promise를 반환합니다 + +### 예제 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// JSON 형식으로 데이터 로드 (기본값) +spreadsheet.load("../common/data.json"); + +// CSV 형식으로 데이터 로드 +spreadsheet.load("../common/data.csv", "csv"); + +// Excel 형식으로 데이터 로드 (.xlsx만 지원) +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +**관련 예제:** +- [Spreadsheet. 데이터 로드](https://snippet.dhtmlx.com/ih9zmc3e) + +- [Spreadsheet. CSV 로드](https://snippet.dhtmlx.com/1f87y71v) + +- [Spreadsheet. Xlsx 가져오기](https://snippet.dhtmlx.com/cqlpy828) + +:::info +컴포넌트는 AJAX 호출을 수행하며 원격 URL이 유효한 데이터를 제공해야 합니다. + +데이터 로딩은 비동기로 처리되므로, 로딩 완료 후 실행할 코드는 promise로 감싸야 합니다: + +~~~jsx +spreadsheet.load("../some/data.json").then(function(){ + spreadsheet.selection.add(123); +}); +~~~ +::: + +### Excel 데이터 로드 {#loading-excel-data} + +:::note +컴포넌트는 `.xlsx` 확장자의 Excel 파일 가져오기만 지원합니다. +::: + +DHTMLX Spreadsheet는 WebAssembly 기반 라이브러리 [Excel2Json](https://github.com/dhtmlx/excel2json)을 사용하여 Excel에서 데이터를 가져옵니다. [세부 정보 확인](loading_data.md#loading-excel-file-xlsx). + +### JSON 파일 로드 {#loading-json-files} + +사용자가 파일 탐색기를 통해 JSON 파일을 스프레드시트에 로드할 수 있습니다. 이를 위해: + +- ".json" 파일을 선택할 수 있는 파일 탐색기를 여는 버튼을 지정합니다: + +~~~html +
+ +
+~~~ + + +- `load()` 메서드를 두 개의 매개변수와 함께 호출합니다: URL로 빈 문자열, 로드할 데이터 타입("json"): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: true, +}); + +spreadsheet.parse(dataset); + +function json() { + spreadsheet.load("", "json"); // .json 파일에서 데이터를 로드합니다 +} +~~~ + +[예제](https://snippet.dhtmlx.com/e3xct53l)를 확인하세요. + +**변경 로그:** 파일 탐색기를 통한 JSON 파일 로드 기능이 v4.3에서 추가됨 + +**관련 문서:** [데이터 로딩 및 내보내기](loading_data.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md new file mode 100644 index 00000000..c6620c39 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md @@ -0,0 +1,86 @@ +--- +sidebar_label: localization +title: localization 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 localization 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# localization + +### 설명 {#description} + +@short: 선택 사항. 숫자, 날짜, 시간 및 통화 형식을 정의합니다 + +### 사용법 {#usage} + +~~~jsx +localization?: object; +~~~ + +### 매개변수 {#parameters} + +`localization` 객체는 다음 속성을 포함할 수 있습니다: + +- `decimal` - (선택) 소수점 구분자로 사용되는 기호, 기본값은 `"."`입니다.
가능한 값: `"." | ","` +- `thousands` - (선택) 천 단위 구분자로 사용되는 기호, 기본값은 `","`입니다.
가능한 값: `"." | "," | " " | ""` +- `currency` - (선택) 통화 기호, 기본값은 `"$"`입니다 +- `dateFormat` - (선택) 날짜 표시 형식을 문자열로 설정합니다. 기본 형식은 `"%d/%m/%Y"`입니다. [아래](#characters-for-setting-date-format)에서 세부 정보를 확인하세요 +- `timeFormat` - (선택) 시간 표시 형식을 `12` 또는 `24`로 설정합니다. 기본 형식은 `12`입니다 + +### 기본 설정 {#default-config} + +~~~jsx +const defaultLocales = { + decimal: ".", + thousands: ",", + currency: "$", + dateFormat: "%d/%m/%Y", + timeFormat: 12, +}; +~~~ + +### 예제 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +### 날짜 형식 설정 문자 {#characters-for-setting-date-format} + +DHTMLX Spreadsheet는 날짜 형식 설정에 다음 문자를 사용합니다: + +| 문자 | 정의 | +|-----------|---------------------------------------------------| +| **%d** | 앞에 0이 붙는 날짜 숫자, 01..31 | +| **%j** | 날짜 숫자, 1..31 | +| **%D** | 요일 약식 이름, Su Mo Tu... | +| **%l** | 요일 전체 이름, Sunday Monday Tuesday... | +| **%m** | 앞에 0이 붙는 월 숫자, 01..12 | +| **%n** | 월 숫자, 1..12 | +| **%M** | 월 약식 이름, Jan Feb Mar... | +| **%F** | 월 전체 이름, January February March... | +| **%y** | 연도 숫자, 2자리 | +| **%Y** | 연도 숫자, 4자리 | +| **%h** | 앞에 0이 붙는 12시간 형식 시간, 01..12) | +| **%g** | 12시간 형식 시간, 1..12) | +| **%H** | 앞에 0이 붙는 24시간 형식 시간, 00..23 | +| **%G** | 24시간 형식 시간, 0..23 | +| **%i** | 앞에 0이 붙는 분, 01..59 | +| **%s** | 앞에 0이 붙는 초, 01..59 | +| **%a** | am 또는 pm | +| **%A** | AM 또는 PM | +| **%u** | 밀리초 | + +**변경 로그:** +- v5.1에서 추가됨 + +**관련 문서:** [숫자, 날짜, 시간, 통화 현지화](number_formatting.md#number-date-time-currency-localization) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md new file mode 100644 index 00000000..5d285ff9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: lock() +title: lock 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 lock 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# lock() + +### 설명 {#description} + +@short: 지정한 셀을 잠급니다 + +### 사용법 {#usage} + +~~~jsx +lock(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 또는 셀 범위의 id + +### 예제 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 셀 하나를 잠급니다 +spreadsheet.lock("A1"); + +// 셀 범위를 잠급니다 +spreadsheet.lock("A1:C1"); + +// 지정한 셀들을 잠급니다 +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +:::info +v4.1부터 셀 또는 셀 범위 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +spreadsheet.lock("sheet1!A2"); +~~~ + +여기서 `sheet1`은 탭의 이름입니다. + +탭 이름을 지정하지 않으면 현재 활성 탭의 셀을 잠급니다. +::: + +**관련 샘플**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md new file mode 100644 index 00000000..53780d5a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: menu +title: menu 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 menu 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# menu + +### 설명 {#description} + +@short: 선택 사항. 메뉴를 표시하거나 숨깁니다 + +### 사용법 {#usage} + +~~~jsx +menu?: boolean; +~~~ + +### 기본값 {#default-config} + +~~~jsx +menu: true +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: false, + // 다른 설정 매개변수 +}); +~~~ + +**관련 문서:** [구성](configuration.md#menu) + +**관련 샘플:** [Spreadsheet. Menu](https://snippet.dhtmlx.com/uulux27v) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md new file mode 100644 index 00000000..beb8c97b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: mergeCells() +title: mergeCells 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 mergeCells 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# mergeCells() + +### 설명 {#description} + +@short: 셀 범위를 하나로 병합하거나 병합된 셀을 분리합니다 + +### 사용법 {#usage} + +~~~jsx +mergeCells( + cell: string, + remove?: boolean +); +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 범위 (예: "A1:A5") +- `remove` - (선택) 셀에 수행할 작업을 정의합니다: + - `false` - 셀을 병합합니다 (기본값) + - `true` - 셀 병합을 해제합니다 + +### 예제 {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// A3, A4, A5 셀을 병합합니다 +spreadsheet.mergeCells("A2:A5"); + +// A3, A4, A5 셀의 병합을 해제합니다 +spreadsheet.mergeCells("A2:A5", true); +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [셀 작업](working_with_cells.md#merging-cells) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md new file mode 100644 index 00000000..3ed59c54 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md @@ -0,0 +1,38 @@ +--- +sidebar_label: multiSheets +title: multiSheets 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 multiSheets 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# multiSheets + +### 설명 {#description} + +@short: 선택 사항. 스프레드시트에서 여러 시트를 사용하는 기능을 활성화하거나 비활성화합니다 + +### 사용법 {#usage} + +~~~jsx +multiSheets?: boolean; +~~~ + +### 기본값 {#default-config} + +~~~jsx +multiSheets: true +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + multiSheets: false, + // 다른 설정 매개변수 +}); +~~~ + +:::info +이 속성을 `false`로 설정하면 하단의 시트 탭 탭바가 숨겨집니다. +::: + +**변경 로그:** v4.1에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md new file mode 100644 index 00000000..bfa81d51 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md @@ -0,0 +1,297 @@ +--- +sidebar_label: parse() +title: parse 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 parse 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# parse() + +### 설명 {#description} + +@short: 로컬 데이터 소스에서 스프레드시트로 데이터를 로드합니다 + +### 사용법 {#usage} + +~~~jsx title="한 시트에 데이터 로드" +parse([ + { + cell: string, + value: string | number | Date, + css?: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // 추가 셀 객체 +]): void; +~~~ + +~~~jsx title="여러 시트에 데이터 로드" +parse({ + sheets: [ + { + name?: string, + id?: string, + cols?: [ + { + width?: number, + hidden?: boolean, + }, + // 추가 열 객체 + ], + rows?: [ + { + height?: number, + hidden?: boolean, + }, + // 추가 행 객체 + ], + data: [ + { + cell: string, + value: string | number | Date, + css: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // 추가 셀 객체 + ], + merged?: [ + { + from: { column: index, row: index }, + to: { column: index, row: index } + }, + // 추가 객체 + ], + freeze?: { + col?: number, + row?: number, + } + }, + // 추가 시트 객체 + ] +}): void; +~~~ + +### 매개변수 {#parameters} + +*하나의 시트*에 대한 데이터 셋을 생성하려면 데이터를 **셀 객체 배열**로 지정합니다. 각 **셀** 객체에는 다음 매개변수를 지정할 수 있습니다: + +- `cell` - (필수) "열 id + 행 id" 형식으로 구성된 셀 id (예: A1) +- `value` - (필수) 셀의 값 +- `css` - (선택) CSS 클래스 이름 +- `format` - (선택) 셀 값에 적용할 [기본 숫자 형식](number_formatting.md#default-number-formats) 또는 [사용자 정의 형식](number_formatting.md#formats-customization)의 이름 +- `editor` - (선택) 셀 편집기 구성 설정 객체: + - `type` - (필수) 셀 편집기 유형: "select" + - `options` - (필수) 셀 범위("A1:B8") 또는 문자열 값 배열 +- `locked` - (선택) 셀 잠금 여부를 정의합니다. 기본값은 `false` +- `link` - (선택) 셀에 추가된 링크 구성 설정 객체: + - `text` - (선택) 링크 텍스트 + - `href` - (필수) 링크 대상을 정의하는 URL + +
+ +*여러 시트*에 대한 데이터 셋을 한 번에 생성하려면 데이터를 다음 매개변수를 가진 **객체**로 지정합니다: + +- `sheets` - (필수) **시트** 객체 배열. 각 객체는 다음 속성을 가집니다: + - `name` - (선택) 시트 이름 + - `id` - (선택) 시트 id + - `rows` - (선택) 행 구성 객체 배열. 각 객체는 다음 속성을 포함할 수 있습니다: + - `height` - (선택) 행 높이. 지정하지 않으면 행 높이는 32px + - `hidden` - (선택) 행의 가시성을 정의합니다 + - `cols` - (선택) 열 구성 객체 배열. 각 객체는 다음 속성을 포함할 수 있습니다: + - `width` - (선택) 열 너비. 지정하지 않으면 열 너비는 120px + - `hidden` - (선택) 열의 가시성을 정의합니다 + - `data` - (필수) **셀** 객체 배열. 각 객체는 다음 속성을 가집니다: + - `cell` - (필수) "열 id + 행 id" 형식으로 구성된 셀 id (예: A1) + - `value` - (필수) 셀의 값 + - `css` - (선택) CSS 클래스 이름 + - `format` - (선택) 셀 값에 적용할 [기본 숫자 형식](number_formatting.md#default-number-formats) 또는 [사용자 정의 형식](number_formatting.md#formats-customization)의 이름 + - `editor` - (선택) 셀 편집기 구성 설정 객체: + - `type` - (필수) 셀 편집기 유형: "select" + - `options` - (필수) 셀 범위("A1:B8") 또는 문자열 값 배열 + - `locked` - (선택) 셀 잠금 여부를 정의합니다. 기본값은 `false` + - `link` - (선택) 셀에 추가된 링크 구성 설정 객체: + - `text` - (선택) 링크 텍스트 + - `href` - (필수) 링크 대상을 정의하는 URL + - `merged` - (선택) 병합할 셀 범위를 정의하는 객체 배열. 각 객체는 다음 속성을 포함해야 합니다: + - `from` - 범위의 첫 번째 셀 위치를 정의하는 객체: + - `column` - 열의 인덱스 + - `row` - 행의 인덱스 + - `to` - 범위의 마지막 셀 위치를 정의하는 객체: + - `column` - 열의 인덱스 + - `row` - 행의 인덱스 + - `freeze` - (선택) 특정 시트에 고정 열/행을 설정하고 조정하는 객체. 다음 속성을 포함할 수 있습니다: + - `col` - (선택) 고정할 열 수를 지정합니다 (예: 2). 기본값은 `0` + - `row` - (선택) 고정할 행 수를 지정합니다 (예: 2). 기본값은 `0` + +:::info +[`multisheets`](api/spreadsheet_multisheets_config.md) 구성 옵션이 `false`로 설정되면 시트가 하나만 생성됩니다. +::: + +### 예제 {#example} + +~~~jsx {22} title="예제 1. 한 시트에 데이터 로드" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430 }, + { cell: "E2", value: 2872.4 }, + + // 셀에 드롭다운 목록 추가 + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // 추가 데이터 +]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); +~~~ + +~~~jsx title="예제 2. 여러 시트에 데이터 로드" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + rows: [ + { height: 50, hidden: true }, // 첫 번째 행 구성 + { height: 50 }, // 두 번째 행 구성 + // 다른 행의 높이는 32 + ], + cols: [ + { width: 300 }, // 첫 번째 열 구성 + { width: 300, hidden: true }, // 두 번째 열 구성 + // 다른 열의 너비는 120 + ], + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + merged: [ + // A1과 B1 셀을 병합 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // A2, A3, A4, A5 셀을 병합 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } } + ], + freeze: { + col: 2, + row: 2 + }, + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + ] + } + ] +}; + +spreadsheet.parse(data); +~~~ + +## 스타일이 적용된 데이터 파싱 {#parsing-styled-data} + +데이터 셋을 준비할 때 셀에 특정 스타일을 추가할 수도 있습니다. 이렇게 하려면 데이터를 두 매개변수를 가진 객체로 정의합니다: + +- `styles` - (필수) 특정 셀에 적용할 CSS 클래스를 담은 객체. [아래의 속성 목록을 참조하세요](#list-of-properties) +- `data` - (필수) 로드할 데이터 + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "a1", value: "Country" }, + { cell: "b1", value: "Product" }, + { cell: "c1", value: "Price" }, + { cell: "d1", value: "Amount" }, + { cell: "e1", value: "Total Price" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, css: "someclass" }, + { cell: "d2", value: 430, css: "someclass" }, + { cell: "e2", value: 2872.4 } + ], +}; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(styledData); +~~~ + +:::info +`css` 속성을 사용하여 셀에 CSS 클래스를 설정합니다. +::: + +### 속성 목록 {#list-of-properties} + +`styles` 객체에 지정할 수 있는 속성 목록: + +- `background` +- `color` +- `textAlign` +- `verticalAlign` +- `textDecoration` +- `fontWeight` +- `fontStyle` +- `multiline: "wrap"` (v5.0.3부터) +- `border`, `border-right`, `border-left`, `border-top`, `border-bottom` (v5.2부터) + +:::note +필요한 경우 다음 속성도 사용할 수 있습니다: + +- `fontSize` +- `font` +- `fontFamily` +- `textShadow` + +단, 경우에 따라 예상대로 동작하지 않을 수 있습니다 (예: `position: absolute` 또는 `display: box` 적용 시) +::: + +**변경 로그:** + +- `sheets` 객체의 `rows` 및 `cols` 속성에 대한 `freeze` 속성과 `hidden` 매개변수는 v5.2에서 추가됨 +- `cell` 객체의 `locked` 및 `link` 속성은 v5.1에서 추가됨 +- `sheets` 객체의 `merged` 속성은 v5.0에서 추가됨 +- `cell` 객체의 `editor` 속성은 v4.3에서 추가됨 +- `sheets` 객체의 `rows` 및 `cols` 속성은 v4.2에서 추가됨 +- 여러 시트에 대한 데이터 준비 기능은 v4.1에서 추가됨 + +**관련 문서:** [데이터 로드 및 내보내기](loading_data.md) + +**관련 예제**: + +- [Spreadsheet. Styled Data](https://snippet.dhtmlx.com/abnh7glb) +- [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) +- [Spreadsheet. Initialization with merged cells](https://snippet.dhtmlx.com/0vtukep9) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md new file mode 100644 index 00000000..d1468f7b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: readonly +title: readonly 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 readonly 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# readonly + +### 설명 {#description} + +@short: 선택 사항. 읽기 전용 모드를 활성화하거나 비활성화합니다 + +### 사용법 {#usage} + +~~~jsx +readonly?: boolean; +~~~ + +### 기본값 {#default-config} + +~~~jsx +readonly: false +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + readonly: true, + // 다른 설정 매개변수 +}); +~~~ + +**관련 문서:** +- [구성](configuration.md#read-only-mode) +- [커스터마이징](customization.md#custom-read-only-mode) + +**관련 샘플:** [Spreadsheet. Readonly](https://snippet.dhtmlx.com/2w959gx2) + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md new file mode 100644 index 00000000..1a69d8a8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: redo() +title: redo 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 redo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# redo() + +### 설명 {#description} + +@short: 취소된 작업을 다시 적용합니다 + +### 사용법 {#usage} + +~~~jsx +redo(): void; +~~~ + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 취소된 작업을 다시 적용합니다 +spreadsheet.redo(); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md new file mode 100644 index 00000000..cc32b39d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: rowsCount +title: rowsCount 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 rowsCount 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# rowsCount + +### 설명 {#description} + +@short: 선택 사항. 초기화 시 스프레드시트의 행 수를 설정합니다 + +### 사용법 {#usage} + +~~~jsx +rowsCount?: number; +~~~ + +### 예제 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + rowsCount: 10, + // 다른 설정 매개변수 +}); +~~~ + +**관련 문서:** [구성](configuration.md#number-of-rows-and-columns) + +**관련 샘플:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md new file mode 100644 index 00000000..97a7969a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: search() +title: search 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 search 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# search() + +### 설명 {#description} + +@short: 지정한 매개변수로 셀을 검색합니다 + +이 메서드는 스프레드시트 오른쪽 상단에 검색 상자를 열고 일치하는 결과를 강조 표시할 수도 있습니다 + +### 사용법 {#usage} + +~~~jsx +search( + text?: string, + openSearch?: boolean, + sheetId?: string | number +): string[]; +~~~ + +### 매개변수 {#parameters} + +- `text` - (선택) 검색할 값 +- `openSearch` - (선택) `true`이면 검색 상자를 열고 일치하는 결과가 있는 셀을 강조 표시합니다. 기본값은 `false` +- `sheetId` - (선택) 시트의 ID. 기본적으로 현재 활성 시트에서 셀을 검색합니다 + +### 반환값 {#returns} + +이 메서드는 검색된 셀의 ID로 구성된 배열을 반환합니다 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 일치하는 셀의 ID를 반환하고, 검색 바를 열며 검색된 셀을 강조 표시합니다 +spreadsheet.search("feb", true, "Income"); // -> ['C1'] +~~~ + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#searching-for-data) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md new file mode 100644 index 00000000..bcca0893 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: serialize() +title: serialize 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 serialize 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# serialize() + +### 설명 {#description} + +@short: 스프레드시트 데이터를 JSON 객체로 직렬화합니다 + +### 사용법 {#usage} + +~~~jsx +serialize(): object; +~~~ + +### 반환값 {#returns} + +이 메서드는 직렬화된 JSON 객체를 반환합니다 + +직렬화된 데이터는 다음 속성을 가진 객체입니다: + +- `formats` - 숫자 형식 객체 배열 +- `styles` - 적용된 CSS 클래스를 담은 객체 +- `sheets` - 시트 객체 배열. 각 객체는 다음 속성을 포함합니다: + - `name` - 시트 이름 + - `data` - 데이터 객체 배열 + - `rows` - 높이 객체 배열 + - `cols` - 너비 객체 배열 + +### 예제 {#example} + +~~~jsx {4} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +const data = spreadsheet.serialize(); +~~~ + +**관련 문서:** [데이터 로드 및 내보내기](loading_data.md#saving-and-restoring-state) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md new file mode 100644 index 00000000..18bef9b8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md @@ -0,0 +1,94 @@ +--- +sidebar_label: setFilter() +title: setFilter 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 setFilter 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setFilter() + +### 설명 {#description} + +@short: 지정된 기준으로 스프레드시트의 데이터를 필터링합니다 + +### 사용법 {#usage} + +~~~jsx +setFilter( + cell?: string, + rules?: [ + { + condition?: { + factor: "string", + value: date | number |string | [number, number] + }, + exclude?: any[] + }, + // 추가 규칙 객체 + ] +): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 값이 필터링될 열의 id를 포함하는 셀 id(또는 셀 범위) (예: "A1", "A1:C10", "sheet2!A1") +- `rules` - (선택 사항) 필터링 규칙이 담긴 객체 배열. 각 객체에는 다음 매개변수가 포함될 수 있습니다: + - `condition` - (선택 사항) 시트의 조건부 필터링을 위한 매개변수 객체: + - `factor` - (필수) 필터링에 사용할 비교 표현식을 정의하는 문자열 값. 사용 가능한 값 목록은 [아래](#list-of-factors)를 참고하세요 + - `value` - (필수) 지정된 factor로 필터링할 때 사용할 값 + - `exclude` - (선택 사항) 시트에서 제외할 데이터 포인트 배열 + +:::note +필터링을 초기화하려면 매개변수 없이 메서드를 호출하거나 `cell` 매개변수만 전달하세요. +::: + +### 예제 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// A열에 지정된 조건으로 데이터 필터링 +spreadsheet.setFilter("A2", [{condition: {factor: "te", value:"r" }}]); + +// Date 시트의 A열에 지정된 기준으로 데이터 필터링 +spreadsheet.setFilter("Date!A1", [{condition: {factor: "db", value:"18/10/2022" }, exclude: ["25/06/2022"]}]); + +// C열에 지정된 조건으로 데이터 필터링 +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}}]); + +// A열과 C열에 지정된 조건으로 데이터 필터링 +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); + + +// 필터링 초기화 +spreadsheet.setFilter(); +~~~ + +### 인수(factor) 목록 {#list-of-factors} + +| Factor | 의미 | +| ------ | --------------------- | +| "e" | 비어 있음 | +| "ne" | 비어 있지 않음 | +| "tc" | 텍스트 포함 | +| "tdc" | 텍스트 포함하지 않음 | +| "ts" | 텍스트 시작 | +| "te" | 텍스트 끝 | +| "tex" | 텍스트 일치 | +| "d" | 날짜 일치 | +| "db" | 날짜 이전 | +| "da" | 날짜 이후 | +| "gt" | 초과 | +| "geq" | 이상 | +| "lt" | 미만 | +| "leq" | 이하 | +| "eq" | 같음 | +| "neq" | 같지 않음 | +| "ib" | 사이 | +| "inb" | 사이가 아님 | + +**변경 로그:** v5.0에서 추가됨 + +**관련 문서:** [데이터 필터링](working_with_ssheet.md#filtering-data) + +**관련 샘플:** [Spreadsheet. API를 통한 필터링](https://snippet.dhtmlx.com/effrcsg6) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md new file mode 100644 index 00000000..74c7c5d8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: setFormat() +title: setFormat 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 setFormat 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setFormat() + +### 설명 {#description} + +@short: 셀 값에 지정된 형식을 설정합니다 + +### 사용법 {#usage} + +~~~jsx +setFormat(cell: string, format: string | array): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 id 또는 셀 범위 +- `format` - (필수) 셀 값에 적용할 숫자 형식 이름 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// A1 셀에 통화 형식 적용 +spreadsheet.setFormat("A1","currency"); +~~~ + +:::info +v4.1부터 셀 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +spreadsheet.setFormat("sheet1!A2", "number"); +~~~ + +여기서 `sheet1`은 탭 이름입니다. + +탭 이름을 지정하지 않으면 활성 탭의 셀 값에 형식이 설정됩니다. +::: + +**관련 문서:** [숫자 형식 지정](number_formatting.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md new file mode 100644 index 00000000..9b0eb534 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setStyle() +title: setStyle 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 setStyle 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setStyle() + +### 설명 {#description} + +@short: 셀에 스타일을 설정합니다 + +:::info +이 메서드는 지정된 셀에 동일한 스타일을 설정합니다. 스프레드시트 셀에 각기 다른 스타일을 적용하려면 [](api/spreadsheet_parse_method.md) 메서드를 사용하세요. +::: + +### 사용법 {#usage} + +~~~jsx +setStyle(cell: string, styles: array | object): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 id 또는 셀 범위 +- `styles` - (필수) 셀에 적용할 스타일. [셀 스타일 지정에 사용할 수 있는 속성 목록 확인](api/spreadsheet_parse_method.md#list-of-properties) + +### 예제 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 하나의 셀에 스타일 설정 +spreadsheet.setStyle("A1", {background: "red"}); + +// 셀 범위에 동일한 스타일 설정 +spreadsheet.setStyle("A1:D1", {color: "blue"}); + +// 여러 셀에 동일한 스타일 설정 +spreadsheet.setStyle("B6,A1:D1", {color:"blue"}); + +// 범위 내 셀에 배열의 스타일을 순서대로 설정 +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +**관련 샘플**: [Spreadsheet. 스타일이 적용된 데이터](https://snippet.dhtmlx.com/abnh7glb) + +:::info +v4.1부터 셀 또는 셀 범위 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +spreadsheet.setStyle("sheet1!A2", {background: "red"}); +~~~ + +여기서 `sheet1`은 탭 이름입니다. + +탭 이름을 지정하지 않으면 활성 탭의 셀에 스타일이 적용됩니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md new file mode 100644 index 00000000..0ef3f6e6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md @@ -0,0 +1,58 @@ +--- +sidebar_label: setValidation() +title: setValidation 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 setValidation 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setValidation() + +### 설명 {#description} + +@short: 셀에 드롭다운 목록을 추가하여 유효성 검사를 설정합니다 + +이 메서드는 셀에서 데이터 유효성 검사를 제거할 수도 있습니다. + +### 사용법 {#usage} + +~~~jsx +setValidation( + cell: string, + options: string | string[] +): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 id 또는 셀 범위 +- `options` - (필수) 셀 범위를 나타내는 문자열("C1:C3") 또는 문자열 값 배열 + +### 예제 {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); + +spreadsheet.parse(dataset); + +// B10 셀에 3개 항목이 있는 드롭다운 목록으로 유효성 검사를 설정합니다 +spreadsheet.setValidation("B10", ["Apple", "Mango", "Avocado"]); +~~~ + +### 상세 설명 {#details} + +셀에서 유효성 검사를 제거하려면 옵션 목록 대신 메서드의 두 번째 매개변수로 `null`, `0`, `false`, 또는 `undefined`를 전달하세요: + +~~~jsx +spreadsheet.setValidation("B15"); + +//또는 +spreadsheet.setValidation("B15", null); + +//또는 +spreadsheet.setValidation("B15", false); +~~~ + +**변경 로그:** v4.3에서 추가됨 + +**관련 문서:** [셀 유효성 검사](working_with_cells.md#validating-cells) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md new file mode 100644 index 00000000..c4074eec --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setValue() +title: setValue 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 setValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# setValue() + +### 설명 {#description} + +@short: 셀에 값을 설정합니다 + +:::info +이 메서드는 지정된 셀에 동일한(반복) 값을 설정합니다. 스프레드시트 셀에 각기 다른 값을 추가하려면 [](api/spreadsheet_parse_method.md) 메서드를 사용하세요. +::: + +### 사용법 {#usage} + +~~~jsx +setValue(cell: string, value: string | number | array): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 id 또는 셀 범위 +- `value` - (필수) 셀에 설정할 값 + +### 예제 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 하나의 셀에 값 설정 +spreadsheet.setValue("A1",5); + +// 셀 범위에 동일한 값 설정 +spreadsheet.setValue("A1:D1",5); + +// 여러 셀에 동일한 값 설정 +spreadsheet.setValue("B6,A1:D1",5); + +// 범위 내 셀에 배열의 값을 순서대로 설정 +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +**관련 샘플:** [Spreadsheet. 여러 시트로 초기화](https://snippet.dhtmlx.com/ihtkdcoc) + +:::info +v4.1부터 셀 또는 셀 범위 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +spreadsheet.setValue("sheet1!A1",5); +~~~ + +여기서 `sheet1`은 탭 이름입니다. + +탭 이름을 지정하지 않으면 활성 탭의 셀에 값이 설정됩니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md new file mode 100644 index 00000000..f90a3092 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showCols() +title: showCols 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 showCols 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# showCols() + +### 설명 {#description} + +@short: 숨겨진 열을 표시합니다 + +### 사용법 {#usage} + +~~~jsx +showCols(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 열 id를 정의하는 데 사용할 셀 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.showCols("B2"); // "B" 열이 다시 표시됩니다 +spreadsheet.showCols("sheet2!B2"); // "sheet2"의 "B" 열이 다시 표시됩니다 +spreadsheet.showCols("B2:C2"); // "B"와 "C" 열이 다시 표시됩니다 +~~~ + +**관련 문서:** [Spreadsheet 사용](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**관련 API:** [`hideCols()`](api/spreadsheet_hidecols_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 숨기기](https://snippet.dhtmlx.com/zere1ote) + +**변경 로그:** v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md new file mode 100644 index 00000000..2e8ed059 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showRows() +title: showRows 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 showRows 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# showRows() + +### 설명 {#description} + +@short: 숨겨진 행을 표시합니다 + +### 사용법 {#usage} + +~~~jsx +showRows(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 행 id를 정의하는 데 사용할 셀 id. 셀 id를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.showRows("B2"); // "2" 행이 다시 표시됩니다 +spreadsheet.showRows("sheet2!B2"); // "sheet2"의 "2" 행이 다시 표시됩니다 +spreadsheet.showRows("B2:C2"); // "2"부터 "4"까지의 행이 다시 표시됩니다 +~~~ + +**관련 문서:** [Spreadsheet 사용](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**관련 API:** [`hideRows()`](api/spreadsheet_hiderows_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 숨기기](https://snippet.dhtmlx.com/zere1ote) + +**변경 로그:** v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md new file mode 100644 index 00000000..12210ee7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: sortCells() +title: sortCells 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 sortCells 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# sortCells() + +### 설명 {#description} + +@short: 스프레드시트의 데이터를 정렬합니다 + +### 사용법 {#usage} + +~~~jsx +sortCells(cell: string, dir: number): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 스프레드시트 데이터를 정렬할 기준이 되는 셀 id 또는 셀 범위 +- `dir` - (필수) 정렬 방향: + - 1 - 오름차순 + - -1 - 내림차순 + +### 예제 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // configuration parameters +}); +spreadsheet.parse(data); + +// 첫 번째 시트의 데이터 정렬 +spreadsheet.sortCells("B2:B11", -1); + +// 여러 시트의 데이터 정렬 +spreadsheet.sortCells("Income!B2:B11, Report!B2:B11, Expenses!C2:C11", 1); +~~~ + + +**관련 샘플:** [Spreadsheet. 여러 시트로 초기화](https://snippet.dhtmlx.com/ihtkdcoc) + +**관련 문서:** [데이터 정렬](working_with_ssheet.md#sorting-data) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md new file mode 100644 index 00000000..4f4a4f42 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: startEdit() +title: startEdit 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 startEdit 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# startEdit() + +### 설명 {#description} + +@short: 선택된 셀에서 편집을 시작합니다 + +:::info +셀 id를 전달하지 않으면 현재 선택된 셀에서 편집이 시작됩니다. +::: + +### 사용법 {#usage} + +~~~jsx +startEdit(cell?: string, initialValue?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 셀 id +- `initialValue` - (선택 사항) 셀 값 + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 현재 선택된 셀에서 편집 시작 +spreadsheet.startEdit(); +~~~ + +**관련 문서:** [Spreadsheet 사용](working_with_cells.md#editing-a-cell) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md new file mode 100644 index 00000000..03e28bd8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md @@ -0,0 +1,71 @@ +--- +sidebar_label: toolbarBlocks +title: toolbarBlocks 설정 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 toolbarBlocks 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 확인하며, DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드하세요. +--- + +# toolbarBlocks + +### 설명 {#description} + +@short: 선택 사항. 스프레드시트 툴바에 표시할 버튼 블록을 지정합니다 + +### 사용법 {#usage} + +~~~jsx +toolbarBlocks?: array; +~~~ + +### 기본 설정 {#default-config} + +~~~jsx +toolbarBlocks: ["undo", "colors", "font", "decoration", "align", "cell", "format", "actions"] +~~~ + +### 예제 {#example} + +~~~jsx {3-17} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // 전체 툴바 + toolbarBlocks: [ + "undo", + "colors", + "font", + "decoration", + "align", + "cell", + "format", + "actions", + "lock", + "clear", + "columns", + "rows", + "file", + "help" + ] +}); +~~~ + +### 상세 설명 {#details} + +`toolbarBlocks` 배열에 필요한 요소를 원하는 순서로 나열하여 툴바의 구조를 직접 지정할 수 있습니다. 예를 들면: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +[툴바 커스터마이즈](customization.md#toolbar) 방법을 확인하세요. + +**변경 로그:** + +- `"font"` 블록이 v6.0에서 추가됨 +- `"cell"` 블록이 v5.2에서 추가됨 +- `"actions"` 블록이 v5.0에서 추가됨 + +**관련 문서:** +- [구성](configuration.md#toolbar) +- [커스터마이즈](customization.md) + +**관련 샘플:** [Spreadsheet. 전체 툴바](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md new file mode 100644 index 00000000..641a5f46 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: undo() +title: undo 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 undo 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# undo() + +### 설명 {#description} + +@short: 마지막 작업을 되돌립니다 + +### 사용법 {#usage} + +~~~jsx +undo(): void; +~~~ + +### 예제 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 한 단계 뒤로 되돌립니다 +spreadsheet.undo(); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md new file mode 100644 index 00000000..04c0450c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeCols() +title: unfreezeCols 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 unfreezeCols 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# unfreezeCols() + +### 설명 {#description} + +@short: 고정("동결")된 열의 고정을 해제합니다 + +### 사용법 {#usage} + +~~~jsx +unfreezeCols(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 열 ID를 지정하는 데 사용되는 셀의 ID. 셀 ID를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.unfreezeCols(); // 현재 시트의 고정된 열이 해제됩니다 +spreadsheet.unfreezeCols("sheet2!A1"); // "sheet2"의 고정된 열이 해제됩니다 +~~~ + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**관련 API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 고정](https://snippet.dhtmlx.com/a12xd1mn) + +**변경 로그:** +v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md new file mode 100644 index 00000000..7f20ec5c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeRows() +title: unfreezeRows 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 unfreezeRows 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# unfreezeRows() + +### 설명 {#description} + +@short: 고정("동결")된 행의 고정을 해제합니다 + +### 사용법 {#usage} + +~~~jsx +unfreezeRows(cell?: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (선택 사항) 행 ID를 지정하는 데 사용되는 셀의 ID. 셀 ID를 전달하지 않으면 현재 선택된 셀이 사용됩니다 + +### 예제 {#example} + +~~~jsx +spreadsheet.unfreezeRows(); // 현재 시트의 고정된 행이 해제됩니다 +spreadsheet.unfreezeRows("sheet2!A1"); // "sheet2"의 고정된 행이 해제됩니다 +~~~ + +**관련 문서:** [스프레드시트 작업](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**관련 API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md) + +**관련 샘플:** [Spreadsheet. API를 통한 열 및 행 고정](https://snippet.dhtmlx.com/a12xd1mn) + +**변경 로그:** +v5.2에서 추가됨 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md new file mode 100644 index 00000000..d2164075 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: unlock() +title: unlock 메서드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 unlock 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# unlock() + +### 설명 {#description} + +@short: 잠긴 셀의 잠금을 해제합니다 + +### 사용법 {#usage} + +~~~jsx +unlock(cell: string): void; +~~~ + +### 매개변수 {#parameters} + +- `cell` - (필수) 셀 또는 셀 범위의 ID + +### 예제 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 셀 잠금을 해제합니다 +spreadsheet.unlock("A1"); + +// 셀 범위의 잠금을 해제합니다 +spreadsheet.unlock("A1:C1"); + +// 지정된 셀들의 잠금을 해제합니다 +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +:::info +v4.1부터 셀 또는 셀 범위에 대한 참조를 다음 형식으로 지정할 수 있습니다: + +~~~jsx +spreadsheet.unlock("sheet1!A2"); +~~~ + +여기서 `sheet1`은 탭 이름입니다. + +탭 이름을 지정하지 않으면 메서드는 활성 탭의 셀 잠금을 해제합니다. +::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/awaitredraw.md b/i18n/ko/docusaurus-plugin-content-docs/current/awaitredraw.md new file mode 100644 index 00000000..9d11cbd4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/awaitredraw.md @@ -0,0 +1,28 @@ +--- +sidebar_label: AwaitRedraw 헬퍼 +title: AwaitRedraw 헬퍼 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 AwaitRedraw 헬퍼에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# AwaitRedraw 헬퍼 {#awaitredraw-helper} + +DHTMLX Spreadsheet의 일부 API 메서드는 컴포넌트가 페이지에 렌더링된 후에만 적용됩니다. 경우에 따라 렌더링에 시간이 걸릴 수 있으므로, 다음 코드를 실행하기 전에 브라우저가 렌더링을 완료할 때까지 기다려야 합니다. + +이러한 경우 `dhx.awaitRedraw` 헬퍼를 사용할 수 있습니다. 이 헬퍼는 렌더링 사이클을 추적하여 Spreadsheet의 렌더링이 완료되는 즉시 코드를 실행합니다. + +~~~js +dhx.awaitRedraw().then(() => { + // 여기에 코드를 작성하세요 +}); +~~~ + +예를 들어, `afterDataLoaded` 내에서 `awaitRedraw`를 사용하여 셀 값을 읽기 전에 해당 값이 사용 가능한지 확인할 수 있습니다: + +~~~js +spreadsheet.events.on("afterDataLoaded", () => { + dhx.awaitRedraw().then(() => { + const value = spreadsheet.getValue("A1"); + console.log(value); + }); +}); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/configuration.md new file mode 100644 index 00000000..ff5bb1c4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/configuration.md @@ -0,0 +1,71 @@ +--- +sidebar_label: 구성 +title: 구성 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 구성에 대해 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 구성 {#configuration} + +DHTMLX Spreadsheet의 원하는 설정을 필요에 맞게 조정할 수 있습니다. 사용 가능한 구성 옵션을 통해 행과 열의 수를 제한하고, 툴바 모양을 변경하며, 메뉴와 편집 바의 가시성을 제어할 수 있습니다. 필요한 경우 Spreadsheet를 읽기 전용 모드로 초기화할 수도 있습니다. + +## 툴바 {#toolbar} + +Spreadsheet의 툴바는 필요에 따라 변경할 수 있는 여러 컨트롤 블록으로 구성됩니다. 기본적으로 툴바에는 `"undo"`, `"colors"`, `"font"`, `"decoration"`, `"align"`, `"cell"`, `"format"`, `"actions"` 블록이 포함되어 있습니다. `"lock"`, `"clear"`, `"rows"`, `"columns"`, `"file"`, `"help"` 블록을 추가할 수도 있습니다. + + + +툴바 구조는 컴포넌트의 [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 구성 옵션을 통해 조정할 수 있으며, 이 옵션은 컨트롤 이름 문자열로 구성된 배열입니다. + +원하는 순서로 `toolbarBlocks` 배열에 필요한 요소를 나열하여 고유한 툴바 구조를 지정할 수도 있습니다. 예: `"colors"`, `"align"`, `"cell"`, `"decoration"`, `"lock"`, `"clear"`. + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +툴바는 [높은 수준의 커스터마이징](customization.md)이 가능합니다. 새 컨트롤을 추가하고, 컨트롤의 아이콘을 변경하며, 원하는 아이콘 팩을 적용할 수 있습니다. + +## 편집 바 {#editing-bar} + +Spreadsheet의 구조가 유연하기 때문에 원하는 컴포넌트 모양을 구현하기 위해 편집 바를 켜거나 끌 수 있습니다. [`editLine`](api/spreadsheet_editline_config.md) 구성 옵션을 사용하여 편집 바를 숨기거나 표시합니다. + + + +## 행과 열의 수 {#number-of-rows-and-columns} + +Spreadsheet가 초기화되면 26개의 열과 1000개의 행으로 구성된 그리드로 시작합니다. 그러나 이 한도에 도달하면 추가 행과 열이 자동으로 렌더링되므로 직접 추가할 필요가 없습니다. 그럼에도 불구하고 행과 열을 제한하려는 경우 그리드의 정확한 행 수와 열 수를 지정할 수 있습니다. 이를 위해 [`colsCount`](api/spreadsheet_colscount_config.md) 및 [`rowsCount`](api/spreadsheet_rowscount_config.md) 옵션을 사용합니다. + + + +## 메뉴 {#menu} + +Spreadsheet의 메뉴는 기본적으로 숨겨져 있습니다. 해당 구성 옵션 [`menu`](api/spreadsheet_menu_config.md)를 통해 켜거나 끌 수 있습니다: + + + +## 읽기 전용 모드 {#read-only-mode} + +[`readonly`](api/spreadsheet_readonly_config.md) 구성 옵션을 통해 Spreadsheet 셀 편집을 방지하는 읽기 전용 모드를 활성화할 수도 있습니다. + +[Spreadsheet의 읽기 전용 동작을 커스터마이징](customization.md#custom-read-only-mode)할 수도 있습니다. + + + +## 셀에 대한 사용자 정의 숫자 형식 {#custom-number-formats-for-cells} + +셀 값에 7가지 기본 형식을 적용할 수 있습니다: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". + +[`formats`](api/spreadsheet_formats_config.md) 구성 옵션을 통해 기본 형식의 구성을 재정의하거나 사용자 정의 숫자 형식을 지정할 수 있습니다. 자세한 내용은 [숫자 형식 지정](number_formatting.md) 문서를 확인하세요. + + + +## 내보내기/가져오기 모듈 경로 {#path-to-exportimport-modules} + +DHTMLX Spreadsheet는 Excel 형식으로 데이터를 가져오고 내보낼 수 있습니다. 컴포넌트는 데이터 가져오기/내보내기를 위해 WebAssembly 기반 라이브러리인 [Excel2Json](https://github.com/dhtmlx/excel2json)과 [JSON2Excel](https://github.com/dhtmlx/json2excel)을 사용합니다. + +필요한 라이브러리를 설치한 후, 해당 구성 옵션 [`importModulePath`](api/spreadsheet_importmodulepath_config.md) 또는 [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md)를 통해 *worker.js* 파일(로컬 또는 CDN)의 경로를 설정해야 합니다. + +자세한 내용은 [데이터 로드 및 내보내기](loading_data.md) 문서에서 확인할 수 있습니다. + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/customization.md b/i18n/ko/docusaurus-plugin-content-docs/current/customization.md new file mode 100644 index 00000000..161b055a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/customization.md @@ -0,0 +1,458 @@ +--- +sidebar_label: 커스터마이징 +title: 커스터마이징 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 커스터마이징에 대해 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 커스터마이징 {#customization} + +툴바, 메뉴, 컨텍스트 메뉴의 모양, 구조, 기능을 커스터마이징하고 Spreadsheet에 대한 사용자 정의 읽기 전용 동작을 정의할 수 있습니다. + +## 기본 아이콘과 사용자 정의 아이콘 {#default-and-custom-icons} + +DHTMLX Spreadsheet는 기본적으로 [Material Design](https://pictogrammers.com/library/mdi/?welcome) 기반 아이콘을 사용합니다. 그러나 필요한 경우 다른 아이콘 폰트 팩을 사용할 수 있습니다. 이를 위해 원하는 아이콘 폰트를 페이지에 포함하고 스프레드시트의 모든 부분(툴바 컨트롤, 메뉴 및 컨텍스트 메뉴 항목)에 아이콘을 적용합니다. + +예를 들어, DHTMLX Spreadsheet 소스 파일 다음에 [CDN 링크](https://docs.fontawesome.com/web/setup/get-started)를 포함하여 [Font Awesome](https://fontawesome.com/) 아이콘 팩을 사용할 수 있습니다: + +~~~html + + + + +~~~ + +그런 다음 툴바, 메뉴 또는 컨텍스트 메뉴의 컨트롤 파라미터 객체에서 `icon` 속성 값으로 아이콘 이름을 사용할 수 있습니다. 자세한 내용은 아래를 참조하세요. + +## 컨트롤 유형 및 작업 {#controls-types-and-operations} + +### 유형 {#types} + +`button`, `menuItem`, `separator`, `spacer` 유형의 컨트롤을 추가할 수 있습니다. + +`button` 객체에는 다음 속성이 있습니다: + +- `type` - 버튼 유형, "button"으로 설정 +- `id` - 버튼의 id +- `icon` - 사용 중인 아이콘 폰트의 아이콘 이름 +- `hotkey` - 버튼의 단축키 이름 +- `value` - 버튼의 값 +- `tooltip` - 버튼의 툴팁 +- `twoState` - 버튼을 두 가지 상태로 사용할 수 있는지 여부를 정의하는 플래그 +- `active` - 버튼 상태: `true` - 활성, `false` - 비활성 + +`menuItem` 객체에는 다음 속성이 있습니다: + +- `type` - 메뉴 항목 유형, "menuItem"으로 설정 +- `id` - 메뉴 항목의 id +- `icon` - 사용 중인 아이콘 폰트의 아이콘 이름 +- `hotkey` - 메뉴 항목의 단축키 이름 +- `value` - 메뉴 항목의 값 +- `childs` - 자식 컨트롤 배열 (모든 자식은 `menuItem` 유형이어야 함) + +**toolbar**, **menu**, **context menu**의 데이터 컬렉션 API를 통해 컨트롤을 관리할 수 있습니다: 사용자 정의 컨트롤 추가, 불필요한 컨트롤 제거, 또는 아이콘 변경 등의 업데이트를 수행할 수 있습니다. + +### 컨트롤 추가 {#adding-controls} + +새 컨트롤을 추가하려면 `spreadsheet.{name}.data.add()` 메서드를 사용합니다. 다음 파라미터를 받습니다: + +- `config` - (*object*) 컨트롤 구성이 담긴 객체 +- `index` - (*number*) 컨트롤을 배치할 위치의 인덱스 +- `parent` - (*string*) 부모 컨트롤의 id (`menuItem` 유형에 해당) + +버튼의 경우: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "button", // "menuItem" + id: "button-id", + tooltip: "Some tooltip", + icon: "icon-name" +}, 2); +~~~ + +menuItem의 경우: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "menuitem-id", + value: "Some value", +}, -1, "parent-id"); +~~~ + +### 컨트롤 업데이트 {#updating-controls} + +`spreadsheet.{name}.data.update()` 메서드를 통해 컨트롤의 아이콘 및 기타 구성 옵션을 변경할 수 있습니다. 두 가지 파라미터를 받습니다: + +- 컨트롤의 id +- 컨트롤의 새 구성이 담긴 객체 + +~~~jsx +// spreadsheet.menu.data.update / spreadsheet.contextMenu.data.update +spreadsheet.toolbar.data.update("add", { + icon: "icon_name" +}); +~~~ + +### 컨트롤 삭제 {#deleting-controls} + +컨트롤을 제거하려면 `spreadsheet.{name}.data.remove()` 메서드를 사용합니다. 제거할 컨트롤의 id를 메서드에 전달합니다: + +~~~jsx +// spreadsheet.menu.data.remove / spreadsheet.contextMenu.data.remove +spreadsheet.toolbar.data.remove("control-id"); +~~~ + +## 툴바 {#toolbar} + +### 기본 컨트롤 {#default-controls} + +[기본 툴바](/#toolbar)에는 다음 컨트롤 블록이 포함됩니다: + +- **실행 취소** 블록 + - *실행 취소* 버튼 (id: "undo") + - *다시 실행* 버튼 (id: "redo") +- **색상** 블록 + - *텍스트 색상* 버튼 (id: "color") + - *배경 색상* 버튼 (id: "background") +- **글꼴** 블록 + - *글꼴 크기* 콤보박스 (id: "font-size") +- **꾸밈** 블록 + - *굵게* 버튼 (id: "font-weight-bold") + - *기울임꼴* 버튼 (id: "font-style-italic") + - *밑줄* 버튼 (id: "text-decoration-underline") + - *취소선* 버튼 (id: "text-decoration-line-through") +- **정렬** 블록 + - **가로 정렬** 서브 블록 + - *왼쪽* 버튼 (id: "halign-left") + - *가운데* 버튼 (id: "halign-center") + - *오른쪽* 버튼 (id: "halign-right") + - **세로 정렬** 서브 블록 + - *위* 버튼 (id: "valign-top") + - *가운데* 버튼 (id: "valign-center") + - *아래* 버튼 (id: "valign-bottom") + - **텍스트 줄 바꿈** 서브 블록 + - *잘라내기* 버튼 (id: "multiline-clip") + - *줄 바꿈* 버튼 (id: "multiline-wrap") +- **셀** 블록 + - *테두리* 버튼 (id: "border") + - *병합/병합 해제* 버튼 (id: "merge") +- **형식** 블록 + - *형식* menuItem (id: "format") +- **작업** 블록 + - *필터* 버튼 (id: "filter") + - *링크 삽입* 버튼 (id: "link") + +다음 블록도 추가할 수 있습니다: + +- **잠금** 블록 + - *잠금* 버튼 (id: "lock") +- **지우기** 블록 + - *지우기 그룹* menuItem (id: "clear-group") + - *값 지우기* menuItem (id: "clear-value") + - *스타일 지우기* menuItem (id: "clear-styles") + - *모두 지우기* menuItem (id: "clear-all") +- **행** 블록 + - *행 추가* 버튼 (id: "add-row") + - *행 제거* 버튼 (id: "remove-row") + - *행 고정 해제* 버튼 (id: "unfreeze-rows") + - *[id]행까지 고정* (id: "freeze-rows") + - *행 숨기기 [id]* (id: "hide-rows") +- **열** 블록 + - *열 추가* 버튼 (id: "add-col") + - *열 제거* 버튼 (id: "remove-col") + - *열 고정 해제* 버튼 (id: "unfreeze-cols") + - *[id]열까지 고정* (id: "freeze-cols") + - *열 숨기기 [id]* (id: "hide-cols") +- **파일** 블록 + - *내보내기* menuItem (id: "export") + - *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx") + - *가져오기* menuItem (id: "import") + - *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") +- **도움말** 블록 + - *도움말* 버튼 (id: "help") + +### 컨트롤 추가 {#adding-controls-1} + +아래 예제에서는 툴바에 새 버튼을 추가합니다: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "button", + icon: "dxi dxi-delete", + tooltip: "Remove all", + id: "remove-all" +}); +~~~ + +![커스터마이징을 통해 사용자 정의 모두 제거 버튼이 추가된 DHTMLX Spreadsheet 툴바](/img/custom_toolbar_button.png) + +**관련 샘플**: [Spreadsheet. 사용자 정의 툴바 버튼](https://snippet.dhtmlx.com/qopk6lta) + +아래 예제에서는 "clear-group" 컨트롤에 새 menuItem 옵션을 추가합니다: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2" +}, -1, "clear-group"); +~~~ + +새 항목의 정확한 위치가 필요하지 않은 경우 menuItem을 추가하는 간략한 표기법이 있습니다: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2", + parent: "clear-group" +}); +~~~ + +### 컨트롤 업데이트 {#updating-controls-1} + +아래 예제에서는 툴바 실행 취소/다시 실행 버튼의 기본 아이콘을 Font Awesome 아이콘으로 변경합니다: + +~~~jsx +spreadsheet.toolbar.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.toolbar.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![Font Awesome의 사용자 정의 실행 취소 및 다시 실행 아이콘이 적용된 DHTMLX Spreadsheet 툴바](/img/custom_toolbar_icons.png) + +**관련 샘플**: [Spreadsheet. 사용자 정의 툴바 아이콘](https://snippet.dhtmlx.com/mvnx43o0) + +### 컨트롤 삭제 {#deleting-controls-1} + +아래 예제에서는 툴바에서 실행 취소 버튼을 제거합니다: + +~~~jsx +spreadsheet.toolbar.data.remove("undo"); +~~~ + +### 사용자 정의 글꼴 크기 {#custom-font-size} + +**글꼴** 툴바 블록에서 사용 가능한 글꼴 크기 목록을 재정의하려면 `"font-size"` 콤보박스에서 기존 항목을 제거하고 새 항목을 추가합니다: + +~~~jsx +const FONT_SIZES = [8, 10, 12, 14, 16, 20]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // 구성 옵션 +}); + +spreadsheet.toolbar.data.removeAll("font-size"); +spreadsheet.toolbar.data.add( + FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })), + -1, + "font-size" +); + +spreadsheet.parse(dataset); +~~~ + +**관련 샘플:** [Spreadsheet. 사용자 정의 글꼴 크기 설정](https://snippet.dhtmlx.com/tffbf11g) + +## 메뉴 {#menu} + +### 기본 컨트롤 {#default-controls-1} + +[기본 메뉴](/#menu)의 구조는 다음과 같습니다: + +- **파일** menuItem (id: "edit") + - *다음으로 가져오기...* menuItem (id: "import") + - *"Microsoft Excel(.xlsx)"* menuItem (id: "import-xlsx") + - *다음으로 다운로드...* menuItem (id: "download") + - *"Microsoft Excel(.xlsx)"* menuItem (id: "export-xlsx") +- **편집** menuItem (id: "edit") + - *실행 취소* menuItem (id: "undo") + - *다시 실행* menuItem (id: "redo") + - 구분선 + - *고정* menuItem (id: "freeze") + - *열 고정 해제* menuItem (id: "unfreeze-cols") + - *[id]열까지 고정* (id: "freeze-cols") + - 구분선 (id: "freeze-sep") + - *행 고정 해제* menuItem (id: "unfreeze-rows") + - *[id]행까지 고정* (id: "freeze-rows") + - *잠금* menuItem (id: "lock") + - 구분선 + - *지우기* menuItem (id: "clear") + - *값 지우기* menuItem (id: "clear-value") + - *스타일 지우기* menuItem (id: "clear-styles") + - *모두 지우기* menuItem (id: "clear-all") +- **삽입** menuItem (id: "insert") + - *열* menuItem (id: "columns") + - *열 추가* menuItem (id: "add-col") + - *열 제거* menuItem (id: "remove-col") + - *행* menuItem (id: "rows") + - *행 추가* menuItem (id: "add-row") + - *행 제거* menuItem (id: "remove-row") + - *링크 삽입* menuItem (id: "link") +- **형식** menuItem (id: "configuration") + - *굵게* menuItem (id: "font-weight-bold") + - *기울임꼴* menuItem (id: "font-style-italic") + - *밑줄* menuItem (id: "text-decoration-underline") + - *취소선* menuItem (id: "text-decoration-line-through") + - 구분선 + - *가로 정렬* menuItem (id: "halign") + - *왼쪽* menuItem (id: "halign-left") + - *가운데* menuItem (id: "halign-center") + - *오른쪽* menuItem (id: "halign-right") + - *세로 정렬* menuItem (id: "valign") + - *위* menuItem (id: "valign-top") + - *가운데* menuItem (id: "valign-center") + - *아래* menuItem (id: "valign-bottom") + - *텍스트 줄 바꿈* menuItem (id: "multiline") + - *잘라내기* menuItem (id: "multiline-clip") + - *줄 바꿈* menuItem (id: "multiline-wrap") + - *형식* menuItem (id: "format") + - *병합/병합 해제* menuItem (id: "merge") +- **데이터** menuItem (id: "data") + - *데이터 유효성 검사* menuItem (id: "validation") + - *검색* menuItem (id: "search") + - *필터* menuItem (id: "filter") + - *정렬* menuItem (id: "sort") + - *A에서 Z로 정렬* menuItem (id: "asc-sort") + - *Z에서 A로 정렬* menuItem (id: "desc-sort") +- **도움말** menuItem (id: "help") + +### 컨트롤 추가 {#adding-controls-2} + +아래 예제에서는 메뉴에 새 menuItem을 추가합니다: + +~~~jsx +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + childs: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); +~~~ + +![숫자 확인을 위한 사용자 정의 유효성 검사 옵션이 추가된 DHTMLX Spreadsheet 메뉴](/img/custom_menuitem.png) + +**관련 샘플**: [Spreadsheet. 메뉴 데이터](https://snippet.dhtmlx.com/2mlv2qaz) + +### 컨트롤 업데이트 {#updating-controls-2} + +아래 예제에서는 실행 취소/다시 실행 menuItem의 기본 아이콘을 Font Awesome 아이콘으로 변경합니다: + +~~~jsx +spreadsheet.menu.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.menu.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![Font Awesome의 사용자 정의 실행 취소 및 다시 실행 아이콘이 적용된 DHTMLX Spreadsheet 메뉴](/img/custom_menu_icons.png) + +### 컨트롤 삭제 {#deleting-controls-2} + +아래 예제에서는 메뉴에서 실행 취소 menuItem을 제거합니다: + +~~~jsx +spreadsheet.menu.data.remove("undo"); +~~~ + +## 컨텍스트 메뉴 {#context-menu} + +### 기본 컨트롤 {#default-controls-2} + +[기본 컨텍스트 메뉴](/#context-menu)의 구조는 다음과 같습니다: + +- **잠금** menuItem (id: "lock") +- **지우기** menuItem (id: "clear") + - *값 지우기* menuItem (id: "clear-value") + - *스타일 지우기* menuItem (id: "clear-styles") + - *모두 지우기* menuItem (id: "clear-all") +- **열** menuItem (id: "columns") + - *열 추가* menuItem (id: "add-col") + - *열 제거* menuItem (id: "remove-col") + - *데이터에 맞추기* menuItem (id: "fit-col") + - 구분선 + - *열 고정 해제* menuItem (id: "unfreeze-cols") + - *[id]열까지 고정* menuItem (id: "freeze-cols") + - *열 표시* menuItem (id: "show-cols") + - *열 숨기기 [id]* menuItem (id: "hide-cols") +- **행** menuItem (id: "rows") + - *행 추가* menuItem (id: "add-row") + - *행 제거* menuItem (id: "remove-row") + - 구분선 + - *행 고정 해제* menuItem (id: "unfreeze-rows") + - *[id]행까지 고정* menuItem (id: "freeze-rows") + - *행 표시* menuItem (id: "show-rows") + - *행 숨기기 [id]* menuItem (id: "hide-rows") +- **정렬** menuItem (id: "sort") + - *A에서 Z로 정렬* menuItem (id: "asc-sort") + - *Z에서 A로 정렬* menuItem (id: "desc-sort") +- **링크 삽입** menuItem (id: "link") + +### 컨트롤 추가 {#adding-controls-3} + +아래 예제에서는 컨텍스트 메뉴에 새 menuItem을 추가합니다: + +~~~jsx +spreadsheet.contextMenu.data.add({ + icon: "mdi mdi-eyedropper-variant", + value: "Paint format", + id: "paint-format" +}); +~~~ + +![사용자 정의 페인트 형식 옵션이 추가된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/custom_context_menuitem.png) + +**관련 샘플**: [Spreadsheet. 컨텍스트 메뉴](https://snippet.dhtmlx.com/atl9gd4h) + +### 컨트롤 업데이트 {#updating-controls-3} + +아래 예제에서는 잠금 menuItem의 기본 아이콘을 Font Awesome 아이콘으로 변경합니다: + +~~~jsx +spreadsheet.contextMenu.data.update("lock", { icon: "fa fa-key" }); +~~~ + +![Font Awesome의 사용자 정의 잠금 아이콘이 적용된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/custom_context_icon.png) + +### 컨트롤 삭제 {#deleting-controls-3} + +아래 예제에서는 컨텍스트 메뉴에서 실행 취소 menuItem을 제거합니다: + +~~~jsx +spreadsheet.contextMenu.data.remove("lock"); +~~~ + +## 사용자 정의 읽기 전용 모드 {#custom-read-only-mode} + +Spreadsheet 전체에 [읽기 전용 모드](configuration.md#read-only-mode)를 적용하는 것 외에도, `before`로 시작하는 이름을 가진 이벤트를 사용하여 특정 작업을 차단할 수 있습니다. 예를 들어: + +- [](api/spreadsheet_beforeeditstart_event.md) +- [](api/spreadsheet_beforeaction_event.md) + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +spreadsheet.events.on("beforeEditStart", function(){ + return false; +}); + +spreadsheet.events.on("beforeAction", function(actionName){ + if (actionName === "setCellValue" || actionName === "setCellStyle") { + return false; + } +}); + +spreadsheet.parse(data); +~~~ + +**관련 샘플**: [Spreadsheet. 사용자 정의 읽기 전용](https://snippet.dhtmlx.com/8xcursbe) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/data_formatting.md b/i18n/ko/docusaurus-plugin-content-docs/current/data_formatting.md new file mode 100644 index 00000000..f40e0a86 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/data_formatting.md @@ -0,0 +1,112 @@ +--- +sidebar_label: 데이터 형식 지정 +title: 데이터 형식 지정 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 데이터 형식 지정에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 데이터 형식 지정 {#data-formatting} + +## 색상 및 스타일 {#color-and-style} + +DHTMLX Spreadsheet의 툴바에는 셀 데이터 스타일을 수정할 수 있는 여러 섹션의 버튼이 있습니다. + +![텍스트 색상, 배경, 굵게, 기울임꼴을 위한 DHTMLX Spreadsheet 툴바 색상 및 텍스트 스타일 버튼](/img/color.png) + +수행할 수 있는 작업: + +- **텍스트 색상** 버튼의 색상 선택기로 **텍스트 색상** 변경 +- **배경 색상** 버튼의 색상 선택기로 **배경 색상** 변경 +- 텍스트에 *굵게*, *기울임꼴*, *밑줄* 스타일 적용 +- 텍스트에 *취소선* 서식 적용 + +## 정렬 {#alignment} + +### 가로 정렬 {#horizontal-alignment} + +셀의 데이터를 가로로 정렬하려면 다음 단계를 따르세요: + +1\. 정렬할 셀 또는 셀 범위 선택 + +2\. 다음 중 하나의 방법을 선택합니다: + +- 툴바에서 "가로 정렬" 버튼을 클릭하고 *왼쪽*, *가운데*, 또는 *오른쪽*을 선택합니다 + +![왼쪽, 가운데, 오른쪽 옵션이 표시된 DHTMLX Spreadsheet 툴바의 가로 정렬 드롭다운](/img/align.png) + +- 또는 메뉴에서 *형식* -> *가로 정렬* -> *왼쪽*, *가운데*, 또는 *오른쪽* 선택 + +![가로 정렬 하위 메뉴 옵션이 있는 DHTMLX Spreadsheet 형식 메뉴](/img/horizontal_alignment.png) + +### 세로 정렬 {#vertical-alignment} + +셀의 데이터를 세로로 정렬하려면 다음 단계를 따르세요: + +1\. 정렬할 셀 또는 셀 범위 선택 + +2\. 다음 중 하나의 방법을 선택합니다: + +- 툴바에서 "세로 정렬" 버튼을 클릭하고 *위*, *가운데*, 또는 *아래*를 선택합니다 + +![위, 가운데, 아래 옵션이 표시된 DHTMLX Spreadsheet 툴바의 세로 정렬 드롭다운](/img/vertical_align.png) + +- 또는 메뉴에서 *형식* -> *세로 정렬* -> *위*, *가운데*, 또는 *아래* 선택 + +![세로 정렬 하위 메뉴 옵션이 있는 DHTMLX Spreadsheet 형식 메뉴](/img/vertical_alignment.png) + +### 셀에서 텍스트 줄 바꿈 {#wrap-text-in-a-cell} + +셀에서 텍스트를 줄 바꿈하려면 다음 방법을 사용합니다: + +1\. 형식을 지정할 셀 또는 셀 범위 선택 + +2\. 다음 중 하나의 방법을 선택합니다: + +- 툴바에서 "텍스트 줄 바꿈" 버튼을 클릭하고 *잘라내기* 또는 *줄 바꿈*을 선택합니다 + +![잘라내기 및 줄 바꿈 옵션이 표시된 DHTMLX Spreadsheet 툴바의 텍스트 줄 바꿈 드롭다운](/img/wrap.png) + +- 또는 메뉴에서 *형식* -> *텍스트 줄 바꿈* -> *잘라내기* 또는 *줄 바꿈* 선택 + +![잘라내기 및 줄 바꿈 옵션이 있는 DHTMLX Spreadsheet 형식 메뉴의 텍스트 줄 바꿈 하위 메뉴](/img/text_wrapping.png) + +:::tip +열 너비를 변경하면 텍스트 줄 바꿈이 자동으로 조정됩니다. +::: + +## 스타일 및 값 제거 {#removing-styles-and-values} + +셀 값, 셀 스타일, 또는 둘 다 지울 수 있습니다. 다음 두 가지 방법 중 하나를 선택합니다: + +1\. 툴바 버튼 사용: + +- 필요한 셀/셀 범위를 선택합니다. +- 툴바에서 **지우기** 버튼을 사용합니다. +- 드롭다운 목록에서 원하는 옵션을 선택합니다: + +![값 또는 스타일을 지울 수 있는 지우기 버튼 드롭다운이 있는 DHTMLX Spreadsheet 툴바](/img/clear_button.png) + +2\. 셀의 컨텍스트 메뉴 사용: + +- 필요한 셀/셀 범위를 선택합니다. +- 선택 영역을 우클릭하여 컨텍스트 메뉴를 호출합니다. +- **지우기** 옵션을 선택한 다음 드롭다운 목록에서 옵션 중 하나를 선택합니다: + +![값, 스타일 또는 모두 지우기 옵션이 있는 DHTMLX Spreadsheet 컨텍스트 메뉴의 지우기 옵션](/img/clear_option.png) + +## 셀의 스타일 있는 테두리 {#styled-borders-for-cells} + +셀 또는 셀 그룹에 스타일 있는 테두리를 추가할 수 있습니다. + +### 스타일 있는 테두리 설정 {#setting-styled-borders} + +- 스타일 있는 테두리를 설정할 셀 또는 셀 그룹을 선택합니다 +- 툴바에서 **테두리** 버튼을 클릭하고 원하는 테두리 유형, 색상, 스타일을 선택합니다 + +![테두리 유형, 색상, 스타일 옵션이 있는 DHTMLX Spreadsheet 테두리 툴바 버튼](/img/styled_cell_border.png) + +### 스타일 있는 테두리 제거 {#removing-styled-borders} + +- 스타일 있는 테두리를 제거할 셀 또는 셀 그룹을 선택합니다 +- 툴바에서 **테두리** 버튼을 클릭하고 *테두리 지우기* 옵션을 선택합니다 + +![테두리 지우기 옵션이 강조 표시된 DHTMLX Spreadsheet 테두리 툴바 버튼](/img/clear_cells_border.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/data_search.md b/i18n/ko/docusaurus-plugin-content-docs/current/data_search.md new file mode 100644 index 00000000..97049f87 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/data_search.md @@ -0,0 +1,14 @@ +--- +sidebar_label: 데이터 검색 +title: 데이터 검색 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 데이터 검색에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 데이터 검색 {#searching-for-data} + +검색 바를 열려면 다음 두 가지 방법 중 하나를 사용합니다: + +- 임의의 셀에 포커스를 설정하고 **Ctrl (Cmd) + F**를 누릅니다 +- 또는 *데이터* -> *검색*으로 이동합니다 + +![데이터 검색을 위한 텍스트 입력이 있는 DHTMLX Spreadsheet 검색 바](/img/search_data.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/excel_import_export.md b/i18n/ko/docusaurus-plugin-content-docs/current/excel_import_export.md new file mode 100644 index 00000000..154a9c52 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/excel_import_export.md @@ -0,0 +1,39 @@ +--- +sidebar_label: Excel 가져오기/내보내기 +title: Excel 가져오기 및 내보내기 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 Excel 가져오기 및 내보내기에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# Excel 가져오기/내보내기 {#excel-importexport} + +## Excel에서 가져오기 {#import-from-excel} + +Excel 파일에서 Spreadsheet로 데이터를 불러올 수 있습니다. 방법은 다음과 같습니다: + +1\. 툴바에서 **가져오기** 버튼을 클릭하고 *Microsoft Excel (.xlsx)*를 선택합니다 + +![Microsoft Excel XLSX 파일을 위한 가져오기 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/import_xlsx.png) + +또는: + +메뉴에서 *파일 -> 다음으로 가져오기... -> Microsoft Excel (.xlsx)*로 이동합니다 + +![Microsoft Excel XLSX 파일의 다음으로 가져오기 옵션이 있는 DHTMLX Spreadsheet 파일 메뉴](/img/file_import.png) + +2\. 컴퓨터에서 Excel 파일을 선택하면 해당 내용이 열려 있는 시트에 가져와집니다. + +## Excel로 내보내기 {#export-to-excel} + +Spreadsheet에 입력한 데이터를 Excel 파일로 내보낼 수 있습니다. 다음 단계를 완료합니다: + +1\. 툴바에서 **내보내기** 버튼을 클릭합니다: + +![Microsoft Excel XLSX로 저장하기 위한 내보내기 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/export_xlsx.png) + +또는: + +메뉴에서 *파일 -> 다음으로 다운로드... -> Microsoft Excel (.xlsx)*로 이동합니다 + +![Microsoft Excel XLSX 내보내기를 위한 다음으로 다운로드 옵션이 있는 DHTMLX Spreadsheet 파일 메뉴](/img/file_export.png) + +2\. 다운로드 디렉터리에서 Spreadsheet의 데이터가 포함된 Excel 파일을 확인합니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/filtering_data.md b/i18n/ko/docusaurus-plugin-content-docs/current/filtering_data.md new file mode 100644 index 00000000..2653216a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/filtering_data.md @@ -0,0 +1,62 @@ +--- +sidebar_label: 데이터 필터링 +title: 데이터 필터링 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 데이터 필터링에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX Spreadsheet의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 데이터 필터링 {#filtering-data} + +스프레드시트의 데이터를 필터링하여 지정한 기준을 충족하는 레코드만 표시할 수 있습니다. + +필터링을 활성화하려면 다음 두 가지 방법 중 하나를 사용합니다: + +- 셀에 포커스를 설정하거나 셀 범위를 선택하고 툴바에서 **필터** 버튼을 클릭합니다 + +![데이터 필터링을 활성화하는 필터 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/filter_button.png) + +- 셀에 포커스를 설정하거나 셀 범위를 선택하고 메뉴에서 *데이터 -> 필터*로 이동합니다 + +![열 필터 활성화를 위한 필터 옵션이 있는 DHTMLX Spreadsheet 데이터 메뉴](/img/filter_menu.png) + +그런 다음 범위 내 각 열 헤더 오른쪽에 **필터** 아이콘이 나타납니다. + +## 조건으로 필터링 {#filtering-by-condition} + +- 해당 열의 **필터** 아이콘을 클릭합니다 + +- 기본 제공 비교 연산자 중 하나를 선택합니다. 예: **보다 큼** + +- 필터 기준을 지정하고 **적용**을 클릭합니다 + +![보다 큼 등의 비교 연산자가 있는 DHTMLX Spreadsheet 열 필터 드롭다운](/img/filter_by_condition.png) + +### 필터 지우기 {#clearing-a-filter} + +필터를 지우려면 열 헤더의 **필터** 아이콘을 클릭하고 _조건으로: **없음**_을 선택한 다음 **적용**을 클릭합니다. + +![필터를 지우기 위한 조건으로 없음 옵션이 있는 DHTMLX Spreadsheet 필터 대화상자](/img/clear_filter_bycondition.png) + +## 값으로 필터링 {#filtering-by-values} + +- 해당 열의 **필터** 아이콘을 클릭합니다 + +- **모두 선택 해제** 버튼을 클릭합니다 + +![모두 선택 해제 버튼과 값 체크박스가 있는 DHTMLX Spreadsheet 열 필터](/img/unselect_all_button.png) + +- 표시할 값의 체크박스를 선택하고 **적용**을 클릭합니다 + +### 필터 지우기 {#clearing-a-filter-1} + +필터를 지우려면 열 헤더의 **필터** 아이콘을 클릭하고 **모두 선택** 버튼을 클릭한 다음 **적용**을 클릭합니다. + +![값 필터를 지우기 위한 모두 선택 버튼이 있는 DHTMLX Spreadsheet 열 필터 대화상자](/img/clear_filter_by_values.png) + +## 필터 제거 {#removing-filters} + +필터링을 비활성화하려면 다음 중 하나를 수행합니다: + +- 툴바에서 **필터** 버튼을 클릭합니다 +- 또는 메뉴에서 *데이터 -> 필터*로 이동합니다 + +열 헤더에서 **필터** 아이콘이 사라지고 숨겨진 모든 레코드가 다시 표시됩니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/formulas_locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/formulas_locale.md new file mode 100644 index 00000000..d94436d1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/formulas_locale.md @@ -0,0 +1,1168 @@ +--- +sidebar_label: 수식의 기본 로케일 +title: 수식의 기본 로케일 +description: DHTMLX Spreadsheet 수식 팝업에 대한 완전한 기본 영어 로케일로, 모든 내장 수식의 매개변수 이름과 설명을 포함합니다. +--- + +# 수식의 기본 로케일 {#default-locale-for-formulas} + +`dhx.i18n.formulas` 객체에서 수식 설명이 포함된 Spreadsheet 팝업의 i18n 로케일을 확인할 수 있습니다. 완전한 기본 영어 로케일은 아래에 나열되어 있습니다. + +수식에 사용자 정의 로케일을 적용하는 방법은 [현지화](localization.md#custom-locale-for-formulas) 가이드를 참고하십시오. + +~~~jsx +const en = { + "SUM": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + "SUMIF": [ + ["Range", "Required. Range to apply criteria to."], + ["Criteria", "Required. Criteria to apply."], + ["Sum_range", "Optional. Range to sum. If omitted, cells in range are summed."] + ], + "SUMIFS": [ + ["Sum_range", "Required. The range to be summed."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "AVERAGE": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "AVERAGEA": [ + ["Value1", "Required. A value or reference to a value that can be evaluated as a number."], + ["Value2", "Optional. A value or reference to a value that can be evaluated as a number."] + ], + "AVERAGEIF": [ + ["Range", "Required. One or more cells, including numbers or names, arrays, or references."], + ["Criteria", "Required. A number, expression, cell reference, or text."], + ["Average_range", "Optional. The cells to average. When omitted, range is used."] + ], + "AVERAGEIFS": [ + ["Avg_rng", "Required. The range to average."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "COUNT": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTA": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTIF": [ + ["Range", "Required. The range of cells to count."], + ["Criteria", "Required. The criteria that controls which cells should be counted."] + ], + "COUNTIFS": [ + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MIN": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MINIFS": [ + ["Min_range", "Required. Range of values used to determine minimum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MAX": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MAXIFS": [ + ["Max_range", "Required. Range of values used to determine maximum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "SQRT": [ + ["Number", "Required. The number to get the square root of."] + ], + "POWER": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "LOG": [ + ["Number", "Required. Number for which you want the logarithm."], + ["Base", "Optional. Base of the logarithm. Defaults to 10."] + ], + "EXP": [ + ["Number", "Required. The power that e is raised to."] + ], + "PRODUCT": [ + ["Number1", "Required. The first number or range to multiply."], + ["Number2", "Optional. The second number or range to multiply."] + ], + "SUMPRODUCT": [ + ["Array1", "Required. The first array or range to multiply, then add."], + ["Array2", "Optional. The second array or range to multiply, then add."] + ], + "ABS": [ + ["Number", "Required. The number to get the absolute value of."] + ], + "RAND": [], + "RANDBETWEEN": [ + ["Bottom", "Required. An integer representing the lower value of the range."], + ["Top", "Required. An integer representing the upper value of the range."] + ], + "ROUND": [ + ["Number", "Required. The number to round."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDUP": [ + ["Number", "Required. The number to round up."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDDOWN": [ + ["Number", "Required. The number to round down."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "INT": [ + ["Number", "Required. The number from which you want an integer."] + ], + "CEILING": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "FLOOR": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "CONCATENATE": [ + ["Text1", "Required. The first text value to join together."], + ["Text2", "Required. The second text value to join together."], + ["Text3", "Optional. The third text value to join together."] + ], + "MID": [ + ["Text", "Required. The text to extract from."], + ["Start_num", "Required. The location of the first character to extract."], + ["Num_chars", "Required. The number of characters to extract."] + ], + "LEFT": [ + ["Text", "Required. The text from which to extract characters."], + ["Num_chars", "Optional. The number of characters to extract, starting on the left side of text. Default = 1."] + ], + "RIGHT": [ + ["Text", "Required. The text from which to extract characters on the right."], + ["Num_chars", "Optional. The number of characters to extract, starting on the right. Optional, default = 1."] + ], + "LOWER": [ + ["Text", "Required. The text that should be converted to lower case."] + ], + "UPPER": [ + ["Text", "Required. The text that should be converted to upper case."] + ], + "PROPER": [ + ["Text", "Required. The text that should be converted to proper case."] + ], + "TRIM": [ + ["Text", "Required. The text from which to remove extra space."] + ], + "LEN": [ + ["Text", "Required. The text for which to calculate length."] + ], + "SEARCH": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. Starting position. Optional, defaults to 1."] + ], + "FIND": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. The starting position in the text to search. Optional, defaults to 1."] + ], + "REPLACE": [ + ["Old_text", "Required. The text to replace."], + ["Start_num", "Required. The starting location in the text to search."], + ["Num_chars", "Required. The number of characters to replace."], + ["New_text", "Required. The text to replace old_text with."] + ], + "SUBSTITUTE": [ + ["Text", "Required. The text to change."], + ["Old_text", "Required. The text to replace."], + ["New_text", "Required. The text to replace with."], + ["Instance", "Optional. The instance to replace. If not supplied, all instances are replaced."] + ], + "NOW": [], + "DATE": [ + ["Year", "Required. Number for year."], + ["Month", "Required. Number for month."], + ["Day", "Required. Number for day."] + ], + "TIME": [ + ["Hour", "Required. The hour for the time you wish to create."], + ["Minute", "Required. The minute for the time you wish to create."], + ["Second", "Required. The second for the time you wish to create."] + ], + "YEAR": [ + ["Date", "Required. A valid Excel date."] + ], + "MONTH": [ + ["Serial_number", "Required. A valid Excel date."] + ], + "DAY": [ + ["Date", "Required. A valid Excel date."] + ], + "HOUR": [ + ["Serial_number", "Required. A valid Excel time."] + ], + "MINUTE": [ + ["Serial_number", "Required. A valid date or time."] + ], + "SECOND": [ + ["Serial_number", "Required. A valid time in a format Excel recognizes."] + ], + "DATEDIF": [ + ["Start_date", "Required. Start date in Excel date serial number format."], + ["End_date", "Required. End date in Excel date serial number format."], + ["Unit", "Required. The time unit to use (years, months, or days)."] + ], + "INDEX": [ + ["Array", "Required. A range of cells, or an array constant."], + ["Row_num", "Required. The row position in the reference or array."], + ["Col_num", "Optional. The column position in the reference or array."], + ["Area_num", "Optional. The range in reference that should be used."] + ], + "XMATCH": [ + ["Lookup_value", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "XLOOKUP": [ + ["Lookup", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Return_array", "Required. The array or range to return."], + ["Not_found", "Optional. Value to return if no match found."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "LOOKUP": [ + ["Lookup_value", "Required. The value to search for."], + ["Lookup_vector", "Required. The one-row, or one-column range to search."], + ["Result_vector", "Optional. The one-row, or one-column range of results."] + ], + "HLOOKUP": [ + ["Lookup_value", "Required. The value to look up."], + ["Table_array", "Required. The table from which to retrieve data."], + ["Row_index", "Required. The row number from which to retrieve data."], + ["Range_lookup", "Optional. A Boolean to indicate exact match or approximate match. Default = TRUE = approximate match."] + ], + "VLOOKUP": [ + ["Lookup_value", "Required. The value to look for in the first column of a table."], + ["Table_array", "Required. The table from which to retrieve a value."], + ["Column_index_num", "Required. The column in the table from which to retrieve a value."], + ["Range_lookup", "Optional. TRUE = approximate match (default). FALSE = exact match."] + ], + "MATCH": [ + ["Lookup_value", "Required. The value to match in lookup_array."], + ["Lookup_array", "Required. A range of cells or an array reference."], + ["Match_type", "Optional. 1 = exact or next smallest (default), 0 = exact match, -1 = exact or next largest."] + ], + "CHOOSE": [ + ["Index_num", "Required. The value to choose. A number between 1 and 254."], + ["Value1", "Required. The first value from which to choose."], + ["Value2", "Optional. The second value from which to choose."] + ], + "ISBLANK": [ + ["Value", "Required. The value to check."] + ], + "ISBINARY": [ + ["Value", "Required. The value to check."] + ], + "ISEVEN": [ + ["Value", "Required. The numeric value to check."] + ], + "ISODD": [ + ["Value", "Required. The numeric value to check."] + ], + "ISNONTEXT": [ + ["Value", "Required. The value to check."] + ], + "ISNUMBER": [ + ["Value", "Required. The value to check."] + ], + "ISTEXT": [ + ["Value", "Required. The value to check."] + ], + "N": [ + ["Value", "Required. The value to convert to a number."] + ], + "IF": [ + ["Logical_test", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."], + ["Value_if_true", "Optional. The value to return when logical_test evaluates to TRUE."], + ["Value_if_false", "Optional. The value to return when logical_test evaluates to FALSE."] + ], + "AND": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "NOT": [ + ["Logical", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."] + ], + "OR": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "FALSE": [], + "TRUE": [], + "ACOS": [ + ["Number", "Required. The value to get the inverse cosine of. The number must be between -1 and 1 inclusive."] + ], + "ACOSH": [ + ["Number", "Required. Any real number equal to or greater than 1."] + ], + "ACOT": [ + ["Number", "Required. Number is the cotangent of the angle you want. This must be a real number."] + ], + "ACOTH": [ + ["Number", "Required. The absolute value of Number must be greater than 1."] + ], + "ADD": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Required. The second value to sum."] + ], + "ARABIC": [ + ["Roman_text", "Required. The Roman numeral in text that you want to convert."] + ], + "ASIN": [ + ["Number", "Required. The value to get the inverse sine of. The number must be between -1 and 1 inclusive."] + ], + "ASINH": [ + ["Number", "Required. Any real number."] + ], + "ATAN": [ + ["Number", "Required. The value to get the inverse tangent of."] + ], + "ATAN2": [ + ["X_num", "Required. The x coordinate of the input point."], + ["Y_num", "Required. The y coordinate of the input point."] + ], + "ATANH": [ + ["Number", "Required. Any real number between 1 and -1."] + ], + "AVEDEV": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "BASE": [ + ["Number", "Required. The number to convert to a given base."], + ["Radix", "Required. The base to convert to."], + ["Min_length", "Optional. The minimum string length to return, achieved by padding with zeros."] + ], + "BINOMDIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BINOM.INV": [ + ["Trials", "Required. The number of Bernoulli trials."], + ["Probability_s", "Required. The probability of a success on each trial."], + ["Alpha", "Required. The criterion value."] + ], + "BINOM.DIST.RANGE": [ + ["Trials", "Required. The number of independent trials. Must be greater than or equal to 0."], + ["Probability_s", "Required. The probability of success in each trial. Must be greater than or equal to 0 and less than or equal to 1."], + ["Number_s", "Required. The number of successes in trials. Must be greater than or equal to 0 and less than or equal to Trials."], + ["Number_s2", "Optional. If provided, returns the probability that the number of successful trials will fall between Number_s and number_s2. Must be greater than or equal to Number_s and less than or equal to Trials."] + ], + "BINOM.DIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BITAND": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITLSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift, if negative shifts bits to the right instead."] + ], + "BITOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITRSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift to the right, if negative shifts bits to the left instead."] + ], + "BITXOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "COMBIN": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMBINA": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMPLEX": [ + ["Real_num", "Required. The real number."], + ["I_num", "Required. The imaginary number."], + ["Suffix", "Optional. The suffix, either \"i\" or \"j\"."] + ], + "CORREL": [ + ["Array1", "Required. A range of cell values."], + ["Array2", "Required. A second range of cell values."] + ], + "COS": [ + ["Number", "Required. The angle in radians for which you want the cosine."] + ], + "COSH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "COT": [ + ["Number", "Required. The angle provided in radians."] + ], + "COTH": [ + ["Number", "Required."] + ], + "COUNTBLANK": [ + ["Range", "Required. The range in which to count blank cells."] + ], + "COVAR": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.P": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.S": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "CSC": [ + ["Number", "Required. The angle provided in radians."] + ], + "CSCH": [ + ["Number", "Required."] + ], + "DEC2BIN": [ + ["Number", "Required. The decimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2HEX": [ + ["Number", "Required. The decimal number you want to convert to hexadecimal."], + ["Places", "Optional. Pads the resulting number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2OCT": [ + ["Number", "Required. The decimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting octal number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DECIMAL": [ + ["Number", "Required. A text string representing a number."], + ["Radix", "Required. The base of the number to be converted, an integer between 2-36."] + ], + "DEGREES": [ + ["Angle", "Required. Angle in radians that you want to convert to degrees."] + ], + "DELTA": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "DEVSQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "DIVIDE": [ + ["Number1", "Required. The number we are dividing."], + ["Number2", "Required. The number by which we divide."] + ], + "EQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "ERF": [ + ["Lower_limit", "Required. The lower bound for integrating ERF."], + ["Upper_limit", "Optional. The upper bound for integrating ERF. If omitted, ERF integrates between zero and lower_limit."] + ], + "ERFC": [ + ["X", "Required. The lower bound for integrating ERFC."] + ], + "EVEN": [ + ["Number", "Required. The number to round up to an even integer."] + ], + "FACT": [ + ["Number", "Required. The number to get the factorial of."] + ], + "FACTDOUBLE": [ + ["Number", "Required. A number greater than or equal to -1."] + ], + "FISHER": [ + ["X", "Required. A numeric value for which you want the transformation."] + ], + "FISHERINV": [ + ["Y", "Required. The value for which you want to perform the inverse of the transformation."] + ], + "GAMMA": [ + ["Number", "Required. Returns a number."] + ], + "GCD": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "GEOMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "GESTEP": [ + ["Number", "Required. The value to test against step."], + ["Step", "Optional. The threshold value. If you omit a value for step, GESTEP uses zero."] + ], + "GT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "GTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "HARMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "HEX2BIN": [ + ["Number", "Required. The hexadecimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "HEX2DEC": [ + ["Number", "Required. The hexadecimal number you want to convert to decimal."] + ], + "HEX2OCT": [ + ["Number", "Required. The hexadecimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "IMABS": [ + ["Inumber", "Required. A complex number."] + ], + "IMAGINARY": [ + ["Inumber", "Required. A complex number."] + ], + "IMCONJUGATE": [ + ["Inumber", "Required. A complex number for which you want the conjugate."] + ], + "IMCOS": [ + ["Inumber", "Required. A complex number for which you want the cosine."] + ], + "IMCOSH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosine."] + ], + "IMCOT": [], + "IMCSC": [ + ["Inumber", "Required. A complex number for which you want the cosecant."] + ], + "IMCSCH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosecant."] + ], + "IMDIV": [ + ["Inumber1", "Required. The complex numerator or dividend."], + ["Inumber2", "Required. The complex denominator or divisor."] + ], + "IMEXP": [ + ["Inumber", "Required. A complex number for which you want the exponential."] + ], + "IMLN": [ + ["Inumber", "Required. A complex number for which you want the natural logarithm."] + ], + "IMPOWER": [ + ["Inumber", "Required. A complex number."], + ["Number", "Required. Power to raise number."] + ], + "IMPRODUCT": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMREAL": [ + ["Inumber", "Required. A complex number."] + ], + "IMSEC": [ + ["Inumber", "Required. A complex number for which you want the secant."] + ], + "IMSECH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic secant."] + ], + "IMSIN": [ + ["Inumber", "Required. A complex number for which you want the sine."] + ], + "IMSINH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic sine."] + ], + "IMSQRT": [ + ["Inumber", "Required. A complex number for which you want the square root."] + ], + "IMSUB": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Required. Complex number 2."] + ], + "IMSUM": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMTAN": [ + ["Inumber", "Required. A complex number for which you want the tangent."] + ], + "LARGE": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the largest value."] + ], + "LN": [ + ["Number", "Required. A number to take the natural logarithm of."] + ], + "LOG10": [ + ["Number", "Required. Number for which you want the logarithm."] + ], + "LT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "LTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "MEDIAN": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "MINUS": [ + ["Number1", "Required. The number from which we subtract."], + ["Number2", "Required. The number by which we subtract."] + ], + "MOD": [ + ["Number", "Required. The number to be divided."], + ["Divisor", "Required. The number to divide with."] + ], + "MROUND": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "MULTINOMIAL": [ + ["Number1, number2, ...", "Required. Number1 is required, subsequent numbers are optional. 1 to 255 values for which you want the multinomial."] + ], + "MULTIPLY": [ + ["Number1", "Required. The number to multiply."], + ["Number2", "Required. The number to multiply by."] + ], + "NE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "OCT2BIN": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 characters. The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2BIN uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "OCT2DEC": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."] + ], + "OCT2HEX": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2HEX uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "ODD": [ + ["Number", "Required. The number to round up to an odd integer."] + ], + "PERCENTILE": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.INC": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.EXC": [ + ["Array", "Required. Data values."], + ["K", "Required. A value between 0 and 1 that represents the k:th percentile."] + ], + "PERMUT": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "PI": [], + "POW": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "QUARTILE": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.INC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.EXC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return, 1-3."] + ], + "QUOTIENT": [ + ["Numerator", "Required. The number to be divided."], + ["Denominator", "Required. The number to divide by."] + ], + "RADIANS": [ + ["Angle", "Required. Angle in degrees to convert to radians."] + ], + "ROMAN": [ + ["Number", "Required. Number (in Arabic numeral) you want to convert to Roman numeral."], + ["Form", "Optional. The type of Roman numeral you want."] + ], + "SEC": [ + ["Number", "Required. The angle in radians for which you want the secant."] + ], + "SECH": [], + "SIGN": [ + ["Number", "Required. The number to get the sign of."] + ], + "SIN": [ + ["Number", "Required. The angle in radians for which you want the sine."] + ], + "SINH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "SMALL": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the smallest value."] + ], + "SQRTPI": [ + ["Number", "Required. The number by which pi is multiplied."] + ], + "STDEV": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.S": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.P": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVP": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVPA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STEYX": [ + ["Known_y's", "Required. An array or range of dependent data points."], + ["Known_x's", "Required. An array or range of independent data points."] + ], + "SUBTOTAL": [ + ["Function_num", "Required. A number that specifies which function to use in calculating subtotals within a list. See table below for full list."], + ["Ref1", "Required. A named range or reference to subtotal."], + ["Ref2", "Optional. A named range or reference to subtotal."] + ], + "SUMSQ": [ + ["Number1", "Required. The first argument containing numeric values."], + ["Number2", "Optional. The second argument containing numeric values."] + ], + "SUMX2MY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMX2PY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMXMY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "TAN": [ + ["Number", "Required. The angle in radians for which you want the tangent."] + ], + "TANH": [ + ["Number", "Required. Any real number."] + ], + "TRUNC": [ + ["Number", "Required. The number to truncate."], + ["Num_digits", "Optional. The precision of the truncation (default is 0)."] + ], + "VAR": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.S": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.P": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARP": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARPA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "WEIBULL": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "WEIBULL.DIST": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "CHAR": [ + ["Number", "Required. A number between 1 and 255."] + ], + "CLEAN": [ + ["Text", "Required. The text to clean."] + ], + "CODE": [ + ["Text", "Required. The text for which you want a numeric code."] + ], + "EXACT": [ + ["Text1", "Required. The first text string to compare."], + ["Text2", "Required. The second text string to compare."] + ], + "FIXED": [ + ["Number", "Required. The number to round and format."], + ["Decimals", "Optional. Number of decimals to use. Default is 2."], + ["No_commas", "Optional. Suppress commas. TRUE = no commas, FALSE = commas. Default is FALSE."] + ], + "NUMBERVALUE": [ + ["Text", "Required. The text to convert to a number."], + ["Decimal_separator", "Optional. The character for decimal values."], + ["Group_separator", "Optional. The character for grouping by thousands."] + ], + "REGEXEXTRACT": [ + ["Text", "Required. The input text."], + ["Regular_expression", "Required. The first part of text that matches this expression will be returned."] + ], + "REGEXMATCH": [ + ["Text", "Required. The text to be tested against the regular expression."], + ["Regular_expression", "Required. The regular expression to test the text against."] + ], + "REGEXREPLACE": [ + ["Text", "Required. The text, a part of which will be replaced."], + ["Regular_expression", "Required. The regular expression. All matching instances in text will be replaced."], + ["Replacement", "Required. The text which will be inserted into the original text."] + ], + "REPT": [ + ["Text", "Required. The text to repeat."], + ["Number_times", "Required. The number of times to repeat text."] + ], + "T": [ + ["Value", "Required. The value to return as text."] + ], + "JOIN": [ + ["Text1, text2, ...", "Text values you want to combine."] + ], + "ARRAYTOTEXT": [ + ["Array", "Required. The array or range to convert to text."], + ["Format", "Optional. Output format. 0 = concise (default), and 1 = strict."] + ], + "DATEVALUE": [ + ["Date_text", "Required. A valid date in text format."] + ], + "DAYS": [ + ["End_date", "Required. The end date."], + ["Start_date", "Required. The start date."] + ], + "DAYS360": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Method", "Optional. Day count method. FALSE (default) = US method, TRUE = European method."] + ], + "EDATE": [ + ["Start_date", "Required. Start date as a valid Excel date."], + ["Months", "Required. Number of months before or after start_date."] + ], + "EOMONTH": [ + ["Start_date", "Required. A date that represents the start date in a valid Excel serial number format."], + ["Months", "Required. The number of months before or after start_date."] + ], + "ISOWEEKNUM": [ + ["Date", "Required. A valid Excel date in serial number format."] + ], + "NETWORKDAYS": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Holidays", "Optional. A list of non-work days as dates."] + ], + "NETWORKDAYS.INTL": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A reference to dates that should be considered non-work days."] + ], + "TIMEVALUE": [ + ["Time_text", "Required. A date and/or time in a text format recognized by Excel."] + ], + "WEEKNUM": [ + ["Serial_num", "Required. A valid Excel date in serial number format."], + ["Return_type", "Optional. The day the week begins. Default is 1."] + ], + "WEEKDAY": [ + ["Serial_number", "Required. The date for which you want to get the day of week."], + ["Return_type", "Optional. A number representing day of week mapping scheme. Default is 1."] + ], + "WORKDAY": [ + ["Start_date", "Required. The date from which to start."], + ["Days", "Required. The working days before or after start_date."], + ["Holidays", "Optional. A list dates that should be considered non-work days."] + ], + "WORKDAY.INTL": [ + ["Start_date", "Required. The start date."], + ["Days", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A list of one or more dates that should be considered non-work days."] + ], + "YEARFRAC": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Basis", "Optional. The type of day count basis to use (see below)."] + ], + "ACCRINT": [ + ["Id", "Required. Issue date of the security."], + ["Fd", "Required. First interest date of security."], + ["Sd", "Required. Settlement date of security."], + ["Rate", "Required. Interest rate of security."], + ["Par", "Required. Par value of security."], + ["Freq", "Required. Coupon payments per year (annual = 1, semiannual = 2; quarterly = 4)."], + ["Basis", "Optional. Day count basis (see below, default = 0)."], + ["Calc", "Optional. Calculation method (see below, default = TRUE)."] + ], + "PMT": [ + ["Rate", "Required. The interest rate for the loan."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all loan payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0 (zero)."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "FV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The total number of payment periods."], + ["Pmt", "Required. The payment made each period. Must be entered as a negative number."], + ["Pv", "Optional. The present value of future payments. If omitted, assumed to be zero. Must be entered as a negative number."], + ["Type", "Optional. When payments are due. 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "DB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Month", "Optional. Number of months in the first year. Defaults to 12."] + ], + "DDB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Factor", "Optional. Rate at which the balance declines. If omitted, defaults to 2."] + ], + "DOLLAR": [ + ["Number", "Required. The number to convert."], + ["Decimals", "Required. The number of digits to the right of the decimal point. Default is 2."] + ], + "DOLLARDE": [ + ["Fractional_dollar", "Required. Dollar component in special fractional notation."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "DOLLARFR": [ + ["Decimal_dollar", "Required. Pricing as a normal decimal number."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "EFFECT": [ + ["Nominal_rate", "Required. The nominal or stated interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "FVSCHEDULE": [ + ["Principal", "Required. The initial investment sum."], + ["Schedule", "Required. Schedule of interest rates, provided as range or array."] + ], + "IRR": [ + ["Values", "Required. Array or reference to cells that contain values."], + ["Guess", "Optional. An estimate for expected IRR. Default is .1 (10%)."] + ], + "IPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payment periods."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "ISPMT": [ + ["Rate", "Required. Interest rate."], + ["Per", "Required. Period (starts with zero, not 1)."], + ["Nper", "Required. Number of periods."], + ["Pv", "Required. Present value."] + ], + "NPV": [ + ["Rate", "Required. Discount rate over one period."], + ["Value1", "Required. First value(s) representing cash flows."], + ["Value2", "Optional. Second value(s) representing cash flows."] + ], + "NOMINAL": [ + ["Effect_rate", "Required. The effective annual interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "NPER": [ + ["Rate", "Required. The interest rate per period."], + ["Pmt", "Required. The payment made each period."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PDURATION": [ + ["Rate", "Required. Interest rate per period."], + ["Pv", "Required. Present value of the investment."], + ["Fv", "Required. Future value of the investment."] + ], + "PPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The number of payment periods."], + ["Pmt", "Required. The payment made each period."], + ["Fv", "Optional. Future value. If omitted, defaults to zero."], + ["Type", "Optional. Payment type, 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "SYD": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."] + ], + "TBILLPRICE": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Discount", "Required. The discount rate for the security."] + ], + "TBILLYIELD": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Price", "Required. Price per $100."] + ], + "UNIQUE": [ + ["Array", "Required. Range or array from which to extract unique values."], + ["By_col", "Optional. How to compare and extract. By row = FALSE (default); by column = TRUE."], + ["Exactly_once", "Optional. TRUE = values that occur once, FALSE = all unique values (default)."] + ], + "RANDARRAY": [ + ["Rows", "Optional. Row count. Default = 1."], + ["Columns", "Optional. Column count. Default = 1."], + ["Min", "Optional. Minimum value. Default = 0."], + ["Max", "Optional. Maximum value. Default = 1."], + ["Integer", "Optional. Whole numbers. Boolean, TRUE or FALSE. Default = FALSE."] + ], + "TOROW": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Control to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TOCOL": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Setting to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TEXTSPLIT": [ + ["Text", "Required. The text string to split."], + ["Col_delimiter", "Required. The character(s) to delimit columns."], + ["Row_delimiter", "Optional. The character(s) to delimit rows."], + ["Ignore_empty", "Optional. Ignore empty values. TRUE = ignore, FALSE = preserve. Default is FALSE."], + ["Match_mode", "Optional. Case-sensitivity. 0 = enabled, 1 = disabled. Default is 0."], + ["Pad_with", "Optional. Value to pad missing values in 2d arrays."] + ], + "WRAPROWS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each row."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "WRAPCOLS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each column."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "TAKE": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to return as an integer."], + ["Columns", "Optional. Number of columns to return as an integer."] + ], + "DROP": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to drop."], + ["Columns", "Optional. Number of columns to drop."] + ], + "SEQUENCE": [ + ["Rows", "Required. Number of rows to return."], + ["Columns", "Optional. Number of columns to return."], + ["Start", "Optional. Starting value (defaults to 1)."], + ["Step", "Optional. Increment between each value (defaults to 1)."] + ], + "CHOOSEROWS": [ + ["Array", "Required. The array to extract rows from."], + ["Row_num1", "Required. The numeric index of the first row to return."], + ["Row_num2", "Optional. The numeric index of the second row to return."] + ], + "CHOOSECOLS": [ + ["Array", "Required. The array to extract columns from."], + ["Col_num1", "Required. The numeric index of the first column to return."], + ["Col_num2", "Optional. The numeric index of the second column to return."] + ], + "EXPAND": [ + ["Array", "Required. The array to expand."], + ["Rows", "Optional. The final number of rows. Default is total rows."], + ["Columns", "Optional. The final number of columns. Default is total columns."], + ["Pad_with", "Optional. Value to use for new cells. Default is #N/A."] + ], + "SORT": [ + ["Array", "Required. Range or array to sort."], + ["Sort_index", "Optional. Column index to use for sorting. Default is 1."], + ["Sort_order", "Optional. 1 = Ascending, -1 = Descending. Default is ascending order."], + ["By_col", "Optional. TRUE = sort by column. FALSE = sort by row. Default is FALSE."] + ], + "SORTBY": [ + ["Array", "Required. Range or array to sort."], + ["By_array", "Required. Range or array to sort by."], + ["Sort_order", "Optional. Sort order. 1 = ascending (default), -1 = descending."], + ["Array/order", "Optional. Additional array and sort order pairs."] + ] +}; +~~~ + +**관련 샘플**: [Spreadsheet. 현지화](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/functions.md b/i18n/ko/docusaurus-plugin-content-docs/current/functions.md new file mode 100644 index 00000000..97747d1c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/functions.md @@ -0,0 +1,1476 @@ +--- +sidebar_label: 수식 및 함수 +title: 수식 및 함수 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 수식 및 함수에 대해 문서에서 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 확인하며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 수식 및 함수 {#formulas-and-functions} + +v4.0부터 DHTMLX Spreadsheet 패키지에는 문자열과 숫자의 다양한 계산을 위한 사전 정의된 수식 세트가 포함됩니다. 이 수식은 Excel 및 Google Sheets와 호환됩니다. + +:::note +수식의 소문자는 자동으로 대문자로 변환됩니다. +::: + + + +## 함수 {#functions} + +사용 가능한 모든 함수의 목록과 상세 설명입니다. + +### 불리언 연산자 {#boolean-operators} + +두 값을 논리 표현식으로 비교하여 TRUE 또는 FALSE를 반환할 수 있습니다. + +| Operator | Example | Description | +| :------- | :------------ | :------------------------------------------------------------------------------------------------------- | +| = | =A1=B1 | 셀 A1의 값이 셀 B1의 값과 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | +| <> | =A1<>B1 | 셀 A1의 값이 셀 B1의 값과 같지 않으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | +| > | =A1>B1 | 셀 A1의 값이 셀 B1의 값보다 크면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | +| < | =A1<B1 | 셀 A1의 값이 셀 B1의 값보다 작으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | +| >= | =A1>=B1 | 셀 A1의 값이 셀 B1의 값보다 크거나 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | +| <= | =A1<=B1 | 셀 A1의 값이 셀 B1의 값보다 작거나 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다. | + +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하세요. + +### 날짜 함수 {#date-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionFormulaDescription
DATE=DATE(year,month,day)연도, 월, 일의 세 가지 개별 값을 결합하여 날짜를 반환합니다.
DATEDIF=DATEDIF(start_date,end_date,unit)두 날짜 사이의 일수, 월수 또는 연수를 반환합니다.
unit 인수는 반환할 정보의 유형을 정의하는 데 사용됩니다.
DATEVALUE=DATEVALUE(date_text)텍스트로 저장된 날짜를 일련 번호로 변환합니다.
DAY=DAY(date)지정된 날짜에서 1~31 사이의 숫자로 해당 월의 일을 반환합니다.
DAYS=DAYS(end_date, start_date)두 날짜 사이의 일수를 반환합니다.
DAYS360=DAYS360(start_date,end_date,[method]])360일 기준 연도(30일짜리 월 12개)를 기반으로 두 날짜 사이의 일수를 반환합니다.
EDATE=EDATE(start_date, months)시작 날짜로부터 n개월 이전 또는 이후의 같은 월 같은 날의 날짜를 반환합니다.
EOMONTH=EOMONTH(start_date, months)지정된 시작 날짜로부터 n개월 이전 또는 이후 해당 월의 마지막 날 날짜를 반환합니다.
ISOWEEKNUM=ISOWEEKNUM(date)지정된 날짜에 대한 연도의 ISO 주 번호를 반환합니다.
MONTH=MONTH(date)지정된 날짜의 연도 내 월을 반환합니다.
NETWORKDAYS=NETWORKDAYS(start_date, end_date, [holidays])두 날짜 사이의 전체 근무일 수를 반환합니다. 근무일에는 주말과 holidays에 지정된 날짜가 제외됩니다.
NETWORKDAYSINTL=NETWORKDAYSINTL(start_date, end_date, [weekend], [holidays])두 날짜 사이의 전체 근무일 수를 반환합니다.
선택적 weekend 매개변수는 주중 어느 요일을 주말로 간주할지 지정하는 데 사용됩니다.
주말과 holidays는 근무일로 간주되지 않습니다.
NOW=NOW()현재 날짜를 반환합니다.
TIMEVALUE
added in v4.3		=TIMEVALUE(time_text)텍스트 문자열로 표현된 시간의 소수점 숫자를 반환합니다.
WEEKDAY=WEEKDAY(date,[return_type])지정된 날짜의 요일을 반환합니다.
return_type 인수는 주의 첫 번째 날로 간주되는 요일을 정의하는 데 사용됩니다.
WEEKNUM=WEEKNUM(date,[return_type])지정된 날짜의 주 번호를 반환합니다.
return_type 인수는 주의 첫 번째 날로 간주되는 요일을 정의하는 데 사용됩니다.
WORKDAY=WORKDAY(start_date, days, [holidays])미래 또는 과거 n일 후의 가장 가까운 근무일 날짜를 반환합니다.
근무일에는 주말과 holidays에 지정된 날짜가 제외됩니다.
WORKDAYINTL=WORKDAYINTL(start_date, days, [weekend], [holidays])미래 또는 과거 n일 후의 가장 가까운 근무일 날짜를 반환합니다.
선택적 weekend 매개변수는 주중 어느 요일을 주말로 간주할지 지정하는 데 사용됩니다.
주말과 holidays는 근무일로 간주되지 않습니다.
YEAR=YEAR(date)지정된 날짜의 연도를 반환합니다.
YEARFRAC=YEARFRAC(start_date, end_date, [basis])지정된 날짜의 연도를 반환합니다.
선택적 basis 인수는 일수 계산 기준의 유형을 정의하는 데 사용됩니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하세요. +### 재무 함수 {#financial-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
ACCRINT =ACCRINT(issue, id, sd, rate, par, frequency, [basis], [calc_method]),

where:
  • issue - the issue date of the security;
  • id - the security's first interest date;
  • sd - the security's settlement date;
  • rate - the security's annual coupon rate;
  • par - the security's par value, $1,000 by default;
  • frequency - the number of coupon payments per year (1 for annual payments);
  • basis - optional, the type of day count basis to use;
  • calc_method - optional, the way to calculate the total accrued interest when the date of settlement is later than the date of first interest (0 or 1(default)).
정기적으로 이자를 지급하는 유가증권의 경과 이자를 반환합니다.
BINOM.DIST
added in v4.3		=BINOM.DIST(number_s, trials, probability_s, cumulative),

where:
  • number_s - the number of successes in trials;
  • trials - the number of independent trials;
  • probability_s - the probability of success on each trial;
  • cumulative - if TRUE, then BINOM.DIST returns the cumulative distribution function; if FALSE (use 0), it returns the probability mass function.
개별 이항 분포 확률을 반환합니다.
BINOM.DIST.RANGE
added in v4.3		=BINOM.DIST.RANGE(trials, probability_s, number_s, [number_s2]),

where:
  • trials - the number of independent trials (must be ≥ 0);
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • number_s - the number of successes in trials (must be ≥ 0 and ≤ trials);
  • number_s2 - optional. If provided, returns the probability that the number of successful trials will fall between number_s and number_s2
    ([number_s2] must be ≥ number_s and ≤ trials).
이항 분포를 사용하여 시행 결과의 확률을 반환합니다.
BINOM.INV
added in v4.3		=BINOM.INV(trials, probability_s, alpha),

where:
  • trials - the number of Bernoulli trials;
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • alpha - the criterion value (must be ≥ 0 and ≤ 1);
누적 이항 분포가 기준값 이상이 되는 최솟값을 반환합니다.
BITLSHIFT
added in v4.3		=BITLSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0
  • shift_amount - the amount of bits to shift, if negative, shifts bits to the right instead
지정한 비트 수만큼 왼쪽으로 이동한 숫자를 반환합니다.
BITOR
added in v4.3		=BITOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
두 숫자의 비트 OR 연산 결과를 10진수로 반환합니다.
BITRSHIFT
added in v4.3		=BITRSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0);
  • shift_amount - the amount of bits to shift, if negative shifts bits to the left instead;
지정한 비트 수만큼 오른쪽으로 이동한 숫자를 반환합니다.
BITXOR
added in v4.3		=BITXOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
두 숫자의 비트 XOR 연산 결과를 10진수로 반환합니다.
COMPLEX
added in v4.3		=COMPLEX(real_num, i_num, [suffix]),

where:
  • real_num - the real coefficient of the complex number;
  • i_num - the imaginary coefficient of the complex number;
  • suffix - optional ("i" by default) - the suffix for the imaginary component of the complex number;
    (must be lowercase "i" or "j") .
실수 계수와 허수 계수를 x + yi 또는 x + yj 형식의 복소수로 변환합니다.
CORREL
added in v4.3		=CORREL(array1, array2),

where:
  • array1 - a range of cell values;
  • array2 - a second range of cell values;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
두 셀 범위의 상관 계수를 반환합니다.
COVAR
added in v4.3		=COVAR(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
두 데이터 집합의 각 데이터 포인트 쌍에 대한 편차의 곱의 평균인 공분산을 반환합니다.
COVARIANCE.P
added in v4.3		=COVARIANCE.P(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
두 데이터 집합의 각 데이터 포인트 쌍에 대한 편차의 곱의 평균인 모집단 공분산을 반환합니다.
COVARIANCE.S
added in v4.3		=COVARIANCE.S(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
두 데이터 집합의 각 데이터 포인트 쌍에 대한 편차의 곱의 평균인 표본 공분산을 반환합니다.
DB=DB(cost, salvage, life, period, [month]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • month - optional, the number of months in the first year, 12 by default.
고정 체감 잔액법을 사용하여 지정된 기간 동안 자산의 감가상각액을 계산합니다.
DDB=DDB(cost, salvage, life, period, [factor]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • factor - optional, the rate at which the balance declines, 2 (the double-declining balance method) by default
이중 체감 잔액법 또는 직접 지정한 방법을 사용하여 지정된 기간 동안 자산의 감가상각액을 계산합니다.
DEC2BIN
added in v4.3		=DEC2BIN(number),

where:
  • number - the decimal integer you want to convert (must be greater than -512 but less than 511);
10진수를 2진수로 변환합니다.
DEC2HEX
added in v4.3		=DEC2HEX(number),

where:
  • number - the decimal integer you want to convert (must be greater than -549755813888 but less than 549755813887);
10진수를 16진수로 변환합니다.
DEC2OCT
added in v4.3		=DEC2OCT(number),

where:
  • number - the decimal integer you want to convert (must be greater than -536870912 but less than 536870911);
10진수를 8진수로 변환합니다.
DELTA
added in v4.3		=DELTA(number1, [number2]),

where:
  • number1 - the first number;
  • number2 - optional, the second number. If omitted, number2 is assumed to be zero.
두 숫자가 같은지 검사합니다. number1 = number2이면 1을 반환하고, 그렇지 않으면 0을 반환합니다.
DEVSQ
added in v4.3		=DEVSQ(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the sum of squared deviations;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
데이터 포인트의 표본 평균으로부터의 편차 제곱합을 반환합니다.
DOLLARDE=DOLLARDE(fractional_dollar, fraction)정수 부분과 분수 부분으로 표현된 달러 가격을 소수로 표시된 달러 가격으로 변환합니다.
DOLLARFR=DOLLARFR(decimal_dollar, fraction)소수 형식의 달러 숫자를 분수 형식의 달러 숫자로 변환합니다.
EFFECT=EFFECT(nominal_rate, npery)

nominal_rate must be >= 0, npery must be > 1.		명목 연이율과 연간 복리 계산 횟수를 기반으로 유효 연이율을 반환합니다.
숫자 값을 사용합니다.
ERF
added in v4.3		=ERF(lower_limit, [upper_limit]),

where:
  • lower_limit - the lower bound for integrating ERF;
  • upper_limit - the upper bound for integrating ERF. If omitted, ERF integrates between 0 and lower_limit.
lower_limit와 upper_limit 사이에서 적분된 오차 함수를 반환합니다.
ERFC
added in v4.3		=ERFC(x),

where:
  • x - the lower bound for integrating ERFC
x와 무한대 사이에서 적분된 여오차 함수(ERF)를 반환합니다.
EXP
added in v4.3		=EXP(number),

where:
  • number - the power that e is raised to
상수 e(2.71828182845904)를 지정한 숫자만큼 거듭제곱한 결과를 반환합니다.
FISHER
added in v4.3		=FISHER(x),

where:
  • x - the value for which you want to calculate the transformation
지정한 값에 대한 Fisher 변환을 계산합니다.
FISHERINV
added in v4.3		=FISHERINV(y),

where:
  • y - the value for which you want to perform the inverse of the transformation
Fisher 변환의 역변환을 계산하여 -1과 +1 사이의 값을 반환합니다.
FV=FV(rate, nper, pmt, [pv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period;
  • pv - optional, the present value, or the lump-sum amount that a series of future payments is worth right now, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
투자의 미래 가치를 계산합니다.
FVSCHEDULE=FVSCHEDULE(principal, schedule),

where:
  • principal - the present value;
  • schedule - an array of interest rates to apply. The values in the array can be numbers or blank cells; any other value produces the error value. Blank cells are taken as zeros.
일련의 복리 이자율을 적용한 후 초기 원금(=현재 가치)의 미래 가치를 반환합니다.
GAMMA
added in v4.3		=GAMMA(number)

+ If Number is a negative integer or 0, GAMMA returns the #Error value.		감마 함수 값을 반환합니다.
GEOMEAN
added in v4.3		=GEOMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
양수 데이터 배열 또는 범위의 기하 평균을 반환합니다.
GESTEP
added in v4.3		=GESTEP(number, [step])

where:
  • number - the value to test against step;
  • step - optional, the threshold value. If you omit a value for step, GESTEP uses zero;
number ≥ step이면 1을 반환하고, 그렇지 않으면 0을 반환합니다.
HARMEAN
added in v4.3		=HARMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
데이터 집합의 조화 평균을 반환합니다.
HEX2BIN
added in v4.3		=HEX2BIN(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
16진수를 2진수로 변환합니다.
HEX2DEC
added in v4.3		=HEX2DEC(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
16진수를 10진수로 변환합니다.
HEX2OCT
added in v4.3		=HEX2OCT(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
16진수를 8진수로 변환합니다.
IMABS
added in v4.3		=IMABS(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식의 복소수의 절댓값을 반환합니다.
IMAGINARY
added in v4.3		=IMAGINARY(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 허수 계수를 반환합니다.
IMCONJUGATE
added in v4.3		=IMCONJUGATE(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 켤레 복소수를 반환합니다.
IMCOS
added in v4.3		=IMCOS(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 코사인을 반환합니다.
IMCOSH
added in v4.3		=IMCOSH(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 쌍곡 코사인을 반환합니다.
IMCOT
added in v4.3		=IMCOT(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 코탄젠트를 반환합니다.
IMCSC
added in v4.3		=IMCSC(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 코시컨트를 반환합니다.
IMCSCH
added in v4.3		=IMCSCH(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 쌍곡 코시컨트를 반환합니다.
IMDIV
added in v4.3		=IMDIV(inumber1, inumber2)

where:
  • inumber1 - the complex numerator or dividend
  • inumber2 - the complex denominator or divisor
x + yi 또는 x + yj 형식으로 주어진 두 복소수의 몫을 반환합니다.
IMEXP
added in v4.3		=IMEXP(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 지수를 반환합니다.
IMLN
added in v4.3		=IMLN(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 자연 로그를 반환합니다.
IMPOWER
added in v4.3		=IMPOWER(inumber, number)

where:
  • inumber - a complex number
  • number - the power to which you want to raise the complex number
x + yi 또는 x + yj 텍스트 형식의 복소수를 지정한 거듭제곱으로 올린 결과를 반환합니다.
IMPRODUCT
added in v4.3		=IMPRODUCT(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to multiply
x + yi 또는 x + yj 형식으로 주어진 1~255개의 복소수의 곱을 반환합니다.
IMREAL
added in v4.3		=IMREAL(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 실수 계수를 반환합니다.
IMSEC
added in v4.3		=IMSEC(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 시컨트를 반환합니다.
IMSECH
added in v4.3		=IMSECH(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 쌍곡 시컨트를 반환합니다.
IMSIN
added in v4.3		=IMSIN(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 사인을 반환합니다.
IMSINH
added in v4.3		=IMSINH(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 쌍곡 사인을 반환합니다.
IMSQRT
added in v4.3		=IMSQRT(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 제곱근을 반환합니다.
IMSUB
added in v4.3		=IMSUB(inumber1, inumber2)

where:
  • inumber1 - a complex number from which to subtract inumber2;
  • inumber2 - the complex number to subtract from inumber1
x + yi 또는 x + yj 형식으로 주어진 두 복소수의 차를 반환합니다.
IMSUM
added in v4.3		=IMSUB(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to add
x + yi 또는 x + yj 형식으로 주어진 두 개 이상의 복소수의 합을 반환합니다.
IMTAN
added in v4.3		=IMTAN(inumber)

where:
  • inumber - a complex number
x + yi 또는 x + yj 형식으로 주어진 복소수의 탄젠트를 반환합니다.
IPMT=IPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
정기적이고 일정한 지급액과 고정 이자율을 기반으로 특정 기간의 투자에 대한 이자 지급액을 반환합니다.
IRR=IRR(values, [guess]),

where:
  • values - an array or reference to cells that contain values. The array must contain at least one positive value and one negative value;
  • guess - optional, an estimate for expected IRR, .1 (=10%) by default.
정기적인 간격으로 발생하는 일련의 현금 흐름에 대한 내부 수익률(IRR)을 반환합니다.
ISPMT=ISPMT(rate, per, nper, pv),

where:
  • rate - the interest rate for the investment. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods for the investment. For monthly payments, nper=nper*12;
  • pv - the present value of the investment. For a loan, pv is the loan amount.
균등 원금 상환 방식의 대출(또는 투자)에서 지정된 기간에 지급(또는 수취)한 이자를 계산합니다.
LARGE
added in v4.3		=LARGE(array, k),

where:
  • array - the array or range of data for which you want to determine the k-th largest value;
  • k - the position (from the largest) in the array or cell range of data to return.
배열에서 k번째로 큰 값을 반환합니다.
MEDIAN
added in v4.3		=MEDIAN(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 numbers for which you want to calculate the median;
주어진 숫자들의 중앙값을 반환합니다.
NOMINAL=NOMINAL(effect_rate, npery),

effect_rate must be >= 0, npery must be > 1. 		유효 이율과 연간 복리 계산 횟수를 기반으로 명목 연이율을 반환합니다.
NPER=NPER(rate,pmt,pv,[fv],[type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pmt - the payment made each period;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
정기적이고 일정한 지급액과 고정 이자율을 기반으로 투자의 기간 수를 반환합니다.
NPV=NPV(rate,value1,[value2],...),

where:
  • rate - the rate of discount over one year;
  • value1, value2,... - from 1 to 254 values representing cash flows (future payments and income).
    Empty cells, logical values, text, or error values are ignored.
할인율과 일련의 미래 지급액(음수 값) 및 수입(양수 값)을 사용하여 투자의 순현재가치를 계산합니다.
OCT2BIN
added in v4.3		=OCT2BIN(number),

where:
  • number - the octal number you want to convert. It can't contain more than 10 characters;
8진수를 2진수로 변환합니다.
OCT2DEC
added in v4.3		=OCT2DEC(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
8진수를 10진수로 변환합니다.
OCT2HEX
added in v4.3		=OCT2HEX(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
8진수를 16진수로 변환합니다.
PDURATION=PDURATION(rate, pv, fv),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pv - the present value of the investment;
  • fv - the desired future value of the investment.

All arguments must be positive values.		투자가 지정한 값에 도달하는 데 필요한 기간 수를 반환합니다.
PERCENTILE
added in v4.3		=PERCENTILE(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
범위에서 k번째 백분위수 값을 반환합니다.
PERCENTILE.EXC
added in v4.3		=PERCENTILE.EXC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, exclusive.
범위에서 k번째 백분위수 값을 반환합니다.
PERCENTILE.INC
added in v4.3		=PERCENTILE.INC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
범위에서 k번째 백분위수 값을 반환합니다.
PERMUT
added in v4.3		=PERMUT(number, number_chosen),

where:
  • number - the total number of items;
  • number_chosen - the number of items in each combination.
주어진 개수의 항목에 대한 순열의 수를 반환합니다.
PMT=PMT(rate, nper, pv, [fv], [type]),

where:
  • rate - the interest rate for the loan. For monthly payments, rate = rate/12;
  • nper - the total number of months of payments for the loan. For monthly payments, nper=nper*12;
  • pv - the present value (or the current total amount of loan);
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
일정한 지급액과 고정 이자율을 기반으로 대출의 월 납입금을 계산합니다.
PPMT=PPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value - the total amount that a series of future payments is worth now;
  • fv - the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
정기적이고 일정한 지급액과 고정 이자율을 기반으로 지정된 기간의 원금 상환액을 반환합니다.
PV=PV(rate, nper, pmt, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period. If pmt is omitted, you must include the fv argument;
  • fv - optional, the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
고정 이자율을 기반으로 대출 또는 투자의 현재 가치를 반환합니다.
QUARTILE
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
데이터 집합의 사분위수를 반환합니다.
QUARTILE.EXC
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (1-3).
0..1 범위의 백분위수 값(양 끝값 제외)을 기반으로 데이터 집합의 사분위수를 반환합니다.
QUARTILE.INC
added in v4.3		=QUARTILE.INC(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
0..1 범위의 백분위수 값(양 끝값 포함)을 기반으로 데이터 집합의 사분위수를 반환합니다.
SIGN
added in v4.3		=SIGN(number),

where:
  • number - any real number
숫자의 부호를 반환합니다. 양수이면 1, 0이면 0, 음수이면 -1을 반환합니다.
SMALL
added in v4.3		=SMALL(array, k),

where:
  • array - an array or range of numeric values;
  • k - the position (from 1 - the smallest value) in the data set.
데이터 집합에서 위치를 기준으로 k번째로 작은 값을 반환합니다.
STEYX
added in v4.3		=STEYX(known_y's, known_x's),

where:
  • known_y's - an array or range of dependent data points;
  • known_x's - an array or range of independent data points.

Text, logical values, or empty cells are ignored. Zero values are included.		회귀 분석에서 각 x에 대한 예측 y값의 표준 오차를 반환합니다.
SYD
added in v4.3		=SYD(cost, salvage, life, per),

where:
  • cost - the initial cost of the asset;
  • salvage - the asset value at the end of the depreciation;
  • life - the number of periods over which the asset is depreciated;
  • per - the period and must use the same units as life.
지정된 기간 동안 자산의 연수합계법 감가상각액을 반환합니다.
TBILLPRICE
added in v4.3		=TBILLPRICE(settlement, maturity, discount),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • discount - the Treasury bill's percentage discount rate.
재무성 단기 채권의 액면가 $100당 가격을 반환합니다.
TBILLYIELD
added in v4.3		=TBILLYIELD(settlement, maturity, pr),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • pr - the Treasury bill's price per $100 face value.
재무성 단기 채권의 수익률을 반환합니다.
WEIBULL
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
와이블 분포를 반환합니다.
WEIBULL.DIST
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
와이블 분포를 반환합니다.
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. +### 정보 함수 {#information-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
ISBINARY=ISBINARY(value)값이 이진수이면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
ISBLANK=ISBLANK(A1)셀이 비어 있으면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
ISEVEN=ISEVEN(number)숫자가 짝수이면 TRUE를 반환하고, 홀수이면 FALSE를 반환합니다.
정수에 사용할 수 있습니다.
ISNONTEXT=ISNONTEXT(value)셀에 텍스트 이외의 값이 포함되어 있으면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
ISNUMBER=ISNUMBER(value)셀에 숫자가 포함되어 있으면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
ISODD=ISODD(number)숫자가 홀수이면 TRUE를 반환하고, 짝수이면 FALSE를 반환합니다.
정수에 사용할 수 있습니다.
ISTEXT=ISTEXT(value)값이 텍스트이면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
N=N(value)값을 숫자로 변환하여 반환합니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예시를 확인하십시오. + +### 조회 함수 {#lookup-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
HLOOKUP
added in v4.3		=HLOOKUP(lookup_value, table_array, row_index, [range_lookup]),

where:
  • lookup_value - the value to search for;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the row number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
가로 방향 표에서 값을 조회합니다.
INDEX
added in v4.3		=INDEX(array, row_num, [column_num]),

where:
  • array - a range of cells or an array constant;
  • row_num - the row position in the reference or array;
  • column_num - optional, the column position in the reference or array.
범위 또는 배열의 지정된 위치에 있는 값을 반환합니다.
LOOKUP
added in v4.3		=LOOKUP(lookup_value, lookup_vector, [result_vector]),

where:
  • lookup_value - the value to search for;
  • lookup_vector - the one-row, or one-column range to search;
  • result_vector - optional, the one-row, or one-column range of results.
단일 열 또는 단일 행 범위에서 값을 조회하고, 다른 단일 열 또는 단일 행 범위의 동일한 위치에서 값을 가져옵니다.
MATCH
added in v4.3		=MATCH(lookup_value, lookup_array, [match_type]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_type - optional (1 by default):
    1- finds the largest value that is less than or equal to lookup_value
    0 - finds the value that is exactly equal to lookup_value
    -1 - finds the smallest value that is greater than or equal to lookup_value
셀 범위에서 지정된 항목을 검색하고, 해당 범위 내에서 그 항목의 상대적 위치를 반환합니다.
VLOOKUP
added in v4.3		=VLOOKUP(lookup_value, table_array, column_index_num, [range_lookup]),

where:
  • lookup_value - the value to search for in the first column of a table;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the column number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
첫 번째 열을 기준으로 세로 방향 표에서 값을 조회합니다.
XLOOKUP
added in v4.3		=XLOOKUP(lookup_value, lookup_array, return_array, [if_not_found], [match_mode]),

where:
  • lookup_value - the value to search for;
  • lookup_array - the array or range to search;
  • return_array - the array or range to return;
  • if_not_found - optional, if a valid match is not found, returns the [if_not_found] text you supply;
  • match_mode - optional (0 by default):
    0 - Exact match
    -1 - Exact match. If not found, returns the next smaller item
    1 - Exact match. If not found, returns the next larger item
범위 또는 배열을 검색하고 첫 번째 일치 항목에 해당하는 값을 반환합니다. 일치 항목이 없을 경우 XLOOKUP은 가장 가까운 (근사) 일치 항목을 반환할 수 있습니다.
XMATCH
added in v4.3		=XMATCH(lookup_value, lookup_array, [match_mode]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_mode - optional, 0 - exact match (default), -1 - exact match or next smallest, 1 - exact match or next larger
조회를 수행하고 세로 또는 가로 범위 내의 위치를 반환합니다.
+
+ +### 수학 함수 {#math-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABS숫자의 절댓값을 반환합니다. 절댓값은 항상 양수입니다.
ACOS숫자의 아크코사인(역코사인)을 반환합니다. 아크코사인은 코사인 값이 number인 각도입니다. 숫자는 -1 이상 1 이하여야 합니다. 반환되는 각도는 0에서 pi 범위의 라디안 값입니다.
ACOSH숫자의 역쌍곡코사인을 반환합니다. 숫자는 1 이상이어야 합니다.
ACOT숫자의 아크코탄젠트(역코탄젠트)의 주값을 반환합니다. 반환되는 각도는 0에서 pi 범위의 라디안 값입니다.
ACOTH숫자의 역쌍곡코탄젠트를 반환합니다. 숫자의 절댓값은 1보다 커야 합니다.
ADD두 값의 합을 반환합니다.
빈 셀, TRUE와 같은 논리값, 또는 텍스트는 무시됩니다.
ARABIC로마 숫자를 아라비아 숫자로 변환합니다.
ASIN숫자의 아크사인(역사인)을 반환합니다. 아크사인은 사인 값이 number인 각도입니다. 숫자는 -1 이상 1 이하여야 합니다. 반환되는 각도는 -pi/2에서 pi/2 범위의 라디안 값입니다.
ASINH숫자의 역쌍곡사인을 반환합니다. 역쌍곡사인은 쌍곡사인 값이 number인 값입니다. 실수에 적용됩니다.
ATAN숫자의 아크탄젠트(역탄젠트)를 반환합니다. 아크탄젠트는 탄젠트 값이 number인 각도입니다. 반환되는 각도는 -pi/2에서 pi/2 범위의 라디안 값입니다. 원하는 각도의 탄젠트 값을 인수로 사용합니다.
ATAN2(x,y) 좌표의 아크탄젠트를 반환합니다. 반환되는 아크탄젠트는 -pi에서 pi 사이(단, -pi 제외)의 라디안 값입니다.
ATANH숫자의 역쌍곡탄젠트를 반환합니다. 숫자는 -1에서 1 사이여야 합니다(-1과 1은 제외). 실수에 적용됩니다.
AVEDEV
added in v4.3		데이터 요소의 평균으로부터의 절대 편차의 평균을 반환합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다. 값이 0인 셀은 포함됩니다.
AVERAGE숫자 그룹의 평균(산술 평균)을 계산합니다.
배열 또는 참조 영역의 논리값, 빈 셀, 텍스트가 포함된 셀은 무시됩니다.
단, 값이 0인 셀은 포함됩니다.
AVERAGEA
added in v4.3		인수 목록에 있는 값의 평균(산술 평균)을 계산합니다.
인수는 숫자; 숫자를 포함하는 이름, 배열, 또는 참조; 숫자의 텍스트 표현; 또는 참조 내의 TRUE 및 FALSE와 같은 논리값이 될 수 있습니다.
배열 또는 참조 영역의 빈 셀과 텍스트 값은 무시됩니다.
AVERAGEIF
added in v6.0		주어진 조건을 충족하는 범위 내 모든 셀의 평균(산술 평균)을 반환합니다.
두 개의 필수 인수(평가할 범위와 조건) 및 하나의 선택적 인수(평가 범위와 다를 경우 평균을 구할 셀 범위)를 사용합니다.
AVERAGEIFS
added in v6.0		여러 조건을 충족하는 모든 셀의 평균(산술 평균)을 반환합니다.
필수 평균 범위와 하나 이상의 조건 범위 및 조건 인수 쌍을 사용합니다.
BASE숫자를 지정된 진수(기수)로 변환합니다.
숫자는 정수여야 하며 0 이상 2^53 미만이어야 합니다.
기수는 변환할 대상 진법으로, 2 이상 36 이하의 정수여야 합니다.
BITAND
added in v4.3		두 숫자의 비트 단위 'AND'를 반환합니다.
숫자는 정수여야 하며 0 이상 (2^48)-1 이하여야 합니다.
CEILING숫자를 가장 가까운 정수 또는 지정된 유효 자릿수의 가장 가까운 배수로 올림하여 반환합니다.
COMBIN두 정수에 대한 조합의 수를 반환합니다: 항목 수(number)와 각 조합의 항목 수(number_chosen):
  • number는 0 이상이어야 하며 number_chosen 이상이어야 합니다.
  • number_chosen은 0 이상이어야 합니다.
COMBINA반복을 포함하여 두 정수에 대한 조합의 수를 반환합니다. 숫자는 항목 수(number)와 각 조합의 항목 수(number_chosen)입니다:
  • number는 0 이상이어야 하며 number_chosen 이상이어야 합니다.
  • number_chosen은 0 이상이어야 합니다.
COS라디안으로 지정된 각도의 코사인을 반환합니다.
COSH실수의 쌍곡코사인을 반환합니다.
CSC라디안으로 지정된 각도의 코시컨트를 반환합니다.
CSCH라디안으로 지정된 각도의 쌍곡코시컨트를 반환합니다.
COT라디안으로 지정된 각도의 코탄젠트를 반환합니다.
COTH쌍곡각도의 쌍곡코탄젠트를 반환합니다.
COUNT숫자가 들어 있는 셀의 수를 세고, 인수 목록에 있는 숫자를 셉니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 계산되지 않습니다.
COUNTA숫자, 텍스트, 논리값, 오류 값, 빈 텍스트("")가 들어 있는 셀의 수를 셉니다. 값이 0인 셀은 제외됩니다.
빈 셀은 계산되지 않습니다.
COUNTBLANK지정된 범위에서 빈 셀의 수를 반환합니다.
값이 0인 셀은 계산되지 않습니다.
COUNTIF
added in v6.0		주어진 조건을 충족하는 범위 내 셀의 수를 셉니다.
두 개의 인수를 사용합니다: 평가할 셀 범위와 셀 개수를 결정하는 조건.
COUNTIFS
added in v6.0		여러 조건을 충족하는 셀의 수를 셉니다.
하나 이상의 범위와 조건 인수 쌍을 사용하며, 모든 조건을 충족하는 셀만 계산됩니다.
DECIMAL주어진 진수(기수)로 표현된 숫자의 텍스트 표현을 십진수로 변환합니다.
기수는 2 이상 36 이하의 정수여야 합니다.
DEGREES라디안을 도(°)로 변환합니다.
DIVIDE한 숫자를 다른 숫자로 나눈 결과를 반환합니다.
EQ첫 번째 인수가 두 번째 인수와 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
EVEN숫자를 가장 가까운 짝수 정수로 올림하여 반환합니다.
FACT숫자의 팩토리얼을 반환합니다. 숫자는 1에서 n까지여야 합니다. 숫자가 정수가 아닌 경우 소수 부분이 잘립니다.
FACTDOUBLE숫자의 이중 팩토리얼을 반환합니다. 숫자는 1에서 n까지여야 합니다. 숫자가 정수가 아닌 경우 소수 부분이 잘립니다.
FLOOR숫자를 지정된 유효 자릿수의 가장 가까운 배수로 0 방향으로 내림합니다. 유효 자릿수는 1에서 n까지여야 합니다.
숫자가 양수이면 값을 내림하여 0 방향으로 조정합니다. 숫자가 음수이면 값을 내림하여 0에서 멀어지는 방향으로 조정합니다.
GCD두 개 이상의 정수의 최대공약수를 반환합니다. 함수는 정수로 예상되는 1에서 255개의 숫자 값을 사용합니다. 값이 정수가 아닌 경우 소수 부분이 잘립니다.
GT첫 번째 인수가 두 번째 인수보다 크면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
GTE첫 번째 인수가 두 번째 인수보다 크거나 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
INT숫자를 가장 가까운 정수로 내림하여 반환합니다.
LN양의 실수의 자연로그를 반환합니다.
LOG지정한 밑수에 대한 양의 실수의 로그를 반환합니다. 밑수를 생략하면 10으로 간주합니다.
LOG10양의 실수의 상용로그(밑수 10)를 반환합니다.
LT첫 번째 인수가 두 번째 인수보다 작으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
LTE첫 번째 인수가 두 번째 인수보다 작거나 같으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
MAX값 집합에서 가장 큰 값을 반환합니다.
함수는 빈 셀, 논리값 TRUE 및 FALSE, 텍스트 값을 무시합니다. 인수에 숫자가 없으면 MAX는 0을 반환합니다.
MAXIFS
added in v6.0		주어진 조건 집합으로 지정된 셀 중 최댓값을 반환합니다.
필수 최대값 범위와 하나 이상의 조건 범위 및 조건 인수 쌍을 사용합니다.
MIN값 집합에서 가장 작은 숫자를 반환합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트는 무시됩니다. 인수에 숫자가 없으면 MIN은 0을 반환합니다.
MINIFS
added in v6.0		주어진 조건 집합으로 지정된 셀 중 최솟값을 반환합니다.
필수 최솟값 범위와 하나 이상의 조건 범위 및 조건 인수 쌍을 사용합니다.
MINUS두 숫자의 차를 반환합니다.
MOD숫자를 제수로 나눈 후의 나머지를 반환합니다. 결과의 부호는 제수의 부호와 같습니다.
MROUND지정된 유효 자릿수의 가장 가까운 배수로 반올림한 숫자를 반환합니다. number와 multiple의 값은 부호가 같아야 합니다.
MULTINOMIAL값의 합에 대한 팩토리얼과 팩토리얼의 곱 사이의 비율을 반환합니다. 함수는 0 이상이어야 하는 1에서 255개의 숫자 값을 사용합니다.
MULTIPLY두 숫자를 곱한 결과를 반환합니다.
NE첫 번째 인수가 두 번째 인수와 같지 않으면 TRUE를, 그렇지 않으면 FALSE를 반환합니다.
ODD숫자를 가장 가까운 홀수 정수로 올림하여 반환합니다.
PI3.14159265358979(15자리까지 정확한 수학 상수 pi)를 반환합니다.
POW숫자를 지정된 거듭제곱으로 올린 결과를 반환합니다.
실수에 적용됩니다.
POWER숫자를 지정된 거듭제곱으로 올린 결과를 반환합니다.
실수에 적용됩니다.
PRODUCT인수로 지정된 모든 숫자를 곱하고 그 결과를 반환합니다.
+배열 또는 참조 영역의 숫자만 곱해집니다. 빈 셀, 논리값, 텍스트는 무시됩니다.
QUOTIENT나머지 없이 정수 나눗셈의 결과를 반환합니다.
실수에 적용됩니다.
RADIANS도(°)를 라디안으로 변환합니다.
RAND0 이상 1 미만의 난수를 반환합니다.
스프레드시트가 재계산될 때마다 새로운 난수를 반환합니다.
RANDBETWEEN두 지정된 숫자 사이의 난수를 반환합니다.
스프레드시트가 재계산될 때마다 새로운 난수를 반환합니다.
ROMAN아라비아 숫자를 로마 숫자로 변환합니다.
ROUND지정된 자릿수로 반올림한 숫자를 반환합니다.
ROUNDDOWN지정된 자릿수로 내림한 숫자를 반환합니다.
ROUNDUP지정된 자릿수로 올림한 숫자를 반환합니다.
SEC라디안으로 지정된 각도의 시컨트를 반환합니다.
숫자 값에 적용됩니다.
SECH라디안으로 지정된 각도의 쌍곡시컨트를 반환합니다.
숫자 값에 적용됩니다.
SIN라디안으로 지정된 각도의 사인을 반환합니다.
SINH실수의 쌍곡사인을 반환합니다.
SQRT숫자의 양의 제곱근을 반환합니다.
SQRTPI숫자와 pi를 곱한 값의 제곱근을 반환합니다. 숫자는 0 이상이어야 합니다.
STDEV모집단의 표본을 나타내는 데이터를 기반으로 표준 편차를 계산합니다.
표준 편차는 값이 평균값(mean)에서 얼마나 퍼져 있는지를 나타내는 척도입니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
STDEVA표본을 기반으로 표준 편차를 계산합니다.
표준 편차는 값이 평균값(mean)에서 얼마나 퍼져 있는지를 나타내는 척도입니다.
배열 또는 참조 영역의 빈 셀과 텍스트 값은 무시됩니다.
STDEVP전체 모집단의 숫자를 기반으로 표준 편차를 계산합니다.
표준 편차는 값이 평균값(mean)에서 얼마나 퍼져 있는지를 나타내는 척도입니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
STDEVPA텍스트(0으로 평가) 및 논리값(TRUE는 1, FALSE는 0으로 평가)을 포함하여 인수로 지정된 전체 모집단을 기반으로 표준 편차를 계산합니다.
표준 편차는 값이 평균값(mean)에서 얼마나 퍼져 있는지를 나타내는 척도입니다.
인수가 배열 또는 참조인 경우 해당 배열 또는 참조의 값만 사용됩니다. 빈 셀과 텍스트 값은 무시됩니다.
오류 값은 오류를 발생시킵니다.
STDEV.S
added in v4.3		표본을 기반으로 표준 편차를 추정합니다(표본의 논리값과 텍스트는 무시).
표준 편차는 값이 평균값(mean)에서 얼마나 퍼져 있는지를 나타내는 척도입니다.
인수가 배열 또는 참조인 경우 해당 배열 또는 참조의 값만 사용됩니다. 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
오류 값은 오류를 발생시킵니다.
SUBTOTAL목록 또는 데이터베이스에서 부분합을 반환합니다.
SUM제공된 값의 합을 반환합니다.
빈 셀, TRUE와 같은 논리값, 또는 텍스트는 무시됩니다.
SUMIF
added in v6.0		지정된 조건을 충족하는 범위 내의 셀을 더합니다.
두 개의 필수 인수(평가할 범위와 조건) 및 하나의 선택적 인수(평가 범위와 다를 경우 합산할 셀 범위)를 사용합니다.
SUMIFS
added in v6.0		여러 조건을 충족하는 범위 내의 셀을 더합니다.
필수 합산 범위와 하나 이상의 조건 범위 및 조건 인수 쌍을 사용하며, 모든 조건을 충족하는 셀만 합산에 포함됩니다.
SUMPRODUCT셀 범위 또는 배열을 곱하고 그 합을 반환합니다.
유효한 곱에 대해서는 숫자만 곱해집니다.
빈 셀, 논리값, 텍스트는 무시됩니다.
숫자가 아닌 배열 항목은 0으로 처리됩니다.
SUMSQ인수의 제곱의 합을 반환합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
SUMX2MY2두 배열의 해당 값의 제곱 차이의 합을 반환합니다.
인수는 숫자이거나 숫자를 포함하는 이름, 배열, 또는 참조여야 합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다. 0인 값은 포함됩니다.
SUMX2PY2두 배열의 해당 값의 제곱 합의 합을 반환합니다.
인수는 숫자이거나 숫자를 포함하는 이름, 배열, 또는 참조여야 합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다. 0인 값은 포함됩니다.
SUMXMY2두 배열의 해당 값의 차이의 제곱 합을 반환합니다.
인수는 숫자이거나 숫자를 포함하는 이름, 배열, 또는 참조여야 합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다. 0인 값은 포함됩니다.
TAN라디안으로 지정된 각도의 탄젠트를 반환합니다.
TANH실수의 쌍곡탄젠트를 반환합니다.
TRUNC소수 부분을 제거하여 숫자를 정수로 자릅니다.
VAR표본을 기반으로 분산을 반환합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
VARA텍스트(0으로 평가) 및 논리값(TRUE는 1, FALSE는 0으로 평가)을 포함하여 모집단 표본을 기반으로 분산을 반환합니다.
배열 또는 참조 영역의 빈 셀과 텍스트 값은 무시됩니다.
VARP전체 모집단의 숫자를 기반으로 모집단의 분산을 반환합니다.
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
VARPA텍스트(0으로 평가) 및 논리값(TRUE는 1, FALSE는 0으로 평가)을 포함하여 전체 모집단을 기반으로 모집단의 분산을 반환합니다.
배열 또는 참조 영역의 빈 셀과 텍스트 값은 무시됩니다.
VAR.S
added in v4.3		표본을 기반으로 분산을 반환합니다(표본의 논리값과 텍스트는 무시).
배열 또는 참조 영역의 빈 셀, 논리값, 텍스트, 오류 값은 무시됩니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하세요. +### 배열 함수 {#array-functions} + +다음 배열 함수는 v6.0에서 추가되었습니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
CHOOSECOLS=CHOOSECOLS(array, col_num1, [col_num2], ...)배열 또는 범위에서 지정한 열을 반환합니다.
CHOOSEROWS=CHOOSEROWS(array, row_num1, [row_num2], ...)배열 또는 범위에서 지정한 행을 반환합니다.
DROP=DROP(array, [rows], [columns])배열의 시작 또는 끝에서 지정한 수의 행 또는 열을 제거합니다.
EXPAND=EXPAND(array, [rows], [columns], [pad_with])배열을 지정한 행 및 열 크기로 확장하거나 채웁니다.
RANDARRAY=RANDARRAY([rows], [columns], [min], [max], [integer])기본적으로 0과 1 사이의 난수 배열을 반환합니다. 채울 행 및 열 수, 최솟값과 최댓값, 정수 또는 소수 반환 여부를 지정할 수 있습니다.
SEQUENCE=SEQUENCE(rows, [columns], [start], [step])1, 2, 3, 4와 같이 배열에서 연속적인 숫자 목록을 생성합니다.
SORT=SORT(array, [sort_index], [sort_order], [by_col])범위 또는 배열의 내용을 정렬합니다. 기본적으로 첫 번째 열을 기준으로 오름차순으로 정렬합니다.
SORTBY=SORTBY(array, by_array, [sort_order], ...)대응하는 범위 또는 배열의 값을 기준으로 범위 또는 배열의 내용을 정렬합니다.
TAKE=TAKE(array, [rows], [columns])배열의 시작 또는 끝에서 지정한 수의 연속된 행 또는 열을 반환합니다.
TEXTSPLIT=TEXTSPLIT(text, col_delimiter, [row_delimiter], [ignore_empty], [match_mode], [pad_with])지정한 구분 기호를 사용하여 텍스트 문자열을 행과 열로 분할합니다.
TOCOL=TOCOL(array, [ignore], [scan_by_column])배열 또는 범위를 단일 열로 변환합니다.
TOROW=TOROW(array, [ignore], [scan_by_column])배열 또는 범위를 단일 행으로 변환합니다.
UNIQUE=UNIQUE(array, [by_col], [exactly_once])범위 또는 배열에서 고유한 값 목록을 반환합니다.
WRAPCOLS=WRAPCOLS(vector, wrap_count, [pad_with])지정한 값 수 이후에 행 또는 열 벡터를 열 기준으로 2D 배열로 줄 바꿈합니다.
WRAPROWS=WRAPROWS(vector, wrap_count, [pad_with])지정한 값 수 이후에 행 또는 열 벡터를 행 기준으로 2D 배열로 줄 바꿈합니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. +### 정규식 함수 {#regex-functions} + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
REGEXREPLACE=REGEXREPLACE(text, regular_expression, replacement)정규 표현식을 사용하여 텍스트 문자열의 일부를 다른 텍스트 문자열로 대체합니다.
REGEXMATCH=REGEXMATCH(text, regular_expression)텍스트 문자열이 정규 표현식의 패턴과 일치하면 TRUE를 반환하고, 일치하지 않으면 FALSE를 반환합니다.
REGEXEXTRACT=REGEXEXTRACT(text, regular_expression)정규 표현식의 패턴과 일치하는 문자열 부분을 반환합니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. + +### 문자열 함수 {#string-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수수식설명
ARRAYTOTEXT
added in v4.3		=ARRAYTOTEXT(array, [format])지정된 형식(0 - 간결 (기본값) 또는 1 - 엄격한 형식)에 따라 지정한 범위에서 텍스트 값 배열을 반환합니다.
CHAR=CHAR(number)숫자로 지정된 문자(컴퓨터에서 사용하는 문자 집합에서)를 반환합니다. 숫자는 1과 255 사이여야 합니다.
CLEAN=CLEAN(text)인쇄 옵션 사용 시 인쇄되지 않는 문자를 텍스트에서 제거합니다.
CODE=CODE(text)텍스트 문자열의 첫 번째 문자에 대한 숫자 코드를 반환합니다.
CONCATENATE=CONCATENATE(A1,"",B2:C3)둘 이상의 텍스트 문자열을 하나의 문자열로 결합합니다.
DOLLAR=DOLLAR(number, decimals)지정한 소수점 오른쪽/왼쪽 자릿수(기본값 2)를 기준으로 통화 형식을 사용하여 숫자를 텍스트로 변환합니다.
EXACT=EXACT(text1, text2)두 문자열을 비교하여 완전히 동일하면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
FIND=FIND(find_text, within_text, [start_num])지정한 위치(기본값 1)부터 시작하여 한 텍스트 문자열 내에서 다른 텍스트 문자열의 위치(숫자)를 반환합니다.
FIXED=FIXED(number, [decimals], [no_commas])숫자를 지정된 소수 자릿수로 반올림하고, 마침표와 쉼표를 사용하는 십진수 형식으로 숫자를 포맷한 다음 결과를 텍스트로 변환합니다. no_commas를 1로 설정하면 반환된 텍스트에 쉼표가 포함되지 않습니다.
JOIN=JOIN(separator, value1, value2,...)지정된 구분자를 사용하여 값을 연결합니다.
LEFT=LEFT(text, count)지정한 문자 수를 기준으로 텍스트 문자열의 첫 번째 문자 또는 문자들을 반환합니다.
LEN=LEN(text)지정된 문자열의 길이를 반환합니다.
LOWER=LOWER(text)지정된 문자열의 모든 문자를 소문자로 변환합니다.
MID=MID(text, start, count)지정한 위치에서 시작하여 지정한 문자 수만큼 텍스트 문자열에서 특정 수의 문자를 반환합니다.
NUMBERVALUE=NUMBERVALUE (text, [decimal_separator], [group_separator])지정된 소수점 구분자와 그룹 구분자를 사용하여 텍스트 형식의 숫자를 숫자 값으로 변환합니다.
PROPER=PROPER(text)각 단어의 첫 번째 문자를 대문자로 설정하고
나머지 모든 문자를 소문자로 변환합니다.
REPLACE
added in v4.3		=REPLACE(old_text, start_num, num_chars, new_text),

where:
  • old_text - the text in which you want to replace some characters;
  • start_num - the position of the character in old_text that you want to replace with new_text;
  • num_chars - the number of characters to be replaced in old_text;
  • new_text - the text that will replace characters in old_text.
지정한 문자 수를 기준으로 텍스트 문자열의 일부를 다른 텍스트 문자열로 대체합니다.
REPT=REPT(text, number_times)텍스트를 지정된 횟수만큼 반복합니다.
RIGHT=RIGHT(text, count)지정한 문자 수를 기준으로 텍스트 문자열의 마지막 문자 또는 문자들(가장 오른쪽)을 반환합니다.
SEARCH=SEARCH(find_text, within_text, [start_num])지정한 위치(기본값 1)부터 시작하여 within_text 내에서 find_text의 첫 번째 문자 위치(숫자)를 반환합니다.
SUBSTITUTE=SUBSTITUTE(text, old_text, new_text, [instance_num])텍스트 문자열에서 이전 텍스트를 새 텍스트로 대체합니다. instance_num을 지정하면 해당 old_text 인스턴스만 대체되고, 그렇지 않으면 모든 인스턴스가 대체됩니다.
T=T(value)텍스트 값이 주어지면 텍스트를 반환하고, 숫자, 날짜, 논리값 TRUE/FALSE에 대해서는 빈 문자열("")을 반환합니다.
TRIM=TRIM(text)단어 사이의 단일 공백을 제외하고 텍스트의 모든 공백을 제거합니다.
UPPER=UPPER(text)텍스트를 대문자로 변환합니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. + +### 기타 함수 {#other-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
함수예시설명
AND=AND(logical1, [logical2], ...)여러 조건이 충족되는지 여부에 따라
TRUE 또는 FALSE를 반환합니다.
CHOOSE=CHOOSE(index_num, value1, [value2], ...)지정한 위치 또는 인덱스를 기준으로 값 인수 목록에서 값을 반환합니다.
FALSE=FALSE()논리값 FALSE를 반환합니다.
IF=IF(condition, [value_if_true], [value_if_false])조건이 TRUE이면 한 값을 반환하고
FALSE이면 다른 값을 반환합니다.
NOT=NOT(logical)주어진 논리값 또는 Boolean 값의 반대를 반환합니다.
OR=OR(logical1, [logical2], ...)논리 표현식 중 하나 이상이 TRUE이면 TRUE를 반환하고, 그렇지 않으면 FALSE를 반환합니다.
TRUE=TRUE()논리값 TRUE를 반환합니다.
+
+ +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. + +## 셀 수식 가져오기 {#getting-cell-formula} + +v4.1부터 [`getFormula()`](api/spreadsheet_getformula_method.md) 메서드를 사용하여 셀에 적용된 수식을 검색할 수 있습니다. 이 메서드는 셀의 id를 매개변수로 받습니다. + +~~~js +var formula = spreadsheet.getFormula("B2"); +// -> "ABS(C2)" +~~~ + +## 수식 설명 팝업 {#popup-with-formula-description} + +수식을 입력하면 함수와 해당 매개변수에 대한 설명이 포함된 팝업이 나타납니다. + +![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) + +[스니펫 도구](https://snippet.dhtmlx.com/wux2b35b)에서 예제를 확인하십시오. + +팝업의 기본 로케일을 수식 매개변수와 함께 수정하고 사용자 지정 로케일을 추가할 수 있습니다. [지역화](localization.md#default-locale-for-formulas) 가이드에서 자세한 내용을 확인하십시오. + +## 사용자 정의 수식 {#custom-formulas} + +v6.0부터 [`addFormula()`](api/spreadsheet_addformula_method.md) 메서드를 사용하여 사용자 정의 수식 함수를 등록할 수 있습니다. 등록 후에는 대문자 이름으로 모든 셀에서 해당 수식을 사용할 수 있습니다. + +이 메서드는 두 개의 매개변수를 받습니다. 수식 이름과 해석된 셀 값을 인수로 받아 결과를 반환하는 동기 핸들러 함수입니다. + +~~~js +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); +~~~ + +그 후에는 내장 함수처럼 셀에서 해당 수식을 사용할 수 있습니다. + +~~~js +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +:::note +핸들러 함수는 동기적이어야 합니다. 함수 내에서 `Promise` 또는 `fetch`를 사용하는 것은 허용되지 않습니다. +::: + +**관련 샘플:** [Spreadsheet. Add custom formula](https://snippet.dhtmlx.com/wvxdlahp) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides.md new file mode 100644 index 00000000..4ff5ec2b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides.md @@ -0,0 +1,52 @@ +--- +sidebar_label: 가이드 개요 +title: 개발자 및 사용자 가이드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 개발자 및 사용자 가이드를 학습할 수 있습니다. API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 가이드 {#guides} + +DHTMLX Spreadsheet는 다양한 형식의 데이터 가져오기 및 내보내기, 셀 내용 및 스타일 작업의 편의성, 유연한 스프레드시트 구조, 읽기 전용 모드, 광범위한 외관 커스터마이징, 인기 프레임워크와의 통합 등 폭넓은 기능을 제공합니다. + +## 개발자 가이드 {#developer-guides} + +### Spreadsheet 생성하기 {#creating-spreadsheet} + +페이지에서 Spreadsheet를 설치하고 생성하는 주요 단계, 구성 조정 및 원하는 언어로 레이블 설정에 대해 설명합니다. + +- [초기화](initialization.md) +- [구성](configuration.md) +- [현지화](localization.md) + +### Spreadsheet 기능 탐색하기 {#exploring-spreadsheet-features} + +Spreadsheet에 데이터를 로드하고, 이벤트를 처리하며, 주요 기능을 사용하는 방법을 설명합니다. Spreadsheet의 주요 부분을 커스터마이징하는 방법도 다룹니다. + +- [데이터 로드 및 내보내기](loading_data.md) +- [Spreadsheet 작업](working_with_ssheet.md) +- [시트 작업](working_with_sheets.md) +- [셀 작업](category/work-with-cells.md) +- [숫자 형식](number_formatting.md) +- [수식과 함수](functions.md) +- [이벤트 처리](handling_events.md) +- [커스터마이징](customization.md) + +### 프레임워크 및 통합 {#frameworks--integrations} + +- [React Spreadsheet](react.md) - props, events, TypeScript 지원이 포함된 공식 React 컴포넌트 +- [Angular와의 통합](angular_integration.md) - Angular 앱에서 Spreadsheet를 사용하는 GitHub 데모 +- [Svelte와의 통합](svelte_integration.md) - Svelte 앱에서 Spreadsheet를 사용하는 GitHub 데모 +- [Vue.js와의 통합](vuejs_integration.md) - Vue 앱에서 Spreadsheet를 사용하는 GitHub 데모 + +## 사용자 가이드 {#user-guides} + +사용자 가이드를 통해 사용자가 Spreadsheet를 쉽게 사용할 수 있습니다. + +- [단축키 목록](hotkeys.md) +- [시트 작업](work_with_sheets.md) +- [행 및 열 작업](work_with_rows_cols.md) +- [셀 작업](work_with_cells.md) +- [데이터 검색](data_search.md) +- [데이터 정렬](sorting_data.md) +- [데이터 필터링](filtering_data.md) +- [Excel 가져오기/내보내기](excel_import_export.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/handling_events.md b/i18n/ko/docusaurus-plugin-content-docs/current/handling_events.md new file mode 100644 index 00000000..c8124efd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/handling_events.md @@ -0,0 +1,43 @@ +--- +sidebar_label: 이벤트 처리 +title: 이벤트 처리 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 이벤트 처리에 대해 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 이벤트 처리 {#event-handling} + + + +## 이벤트 리스너 연결하기 {#attaching-event-listeners} + +[`spreadsheet.events.on()`](api/eventsbus_on_method.md) 메서드를 사용하여 이벤트 리스너를 연결할 수 있습니다. + +~~~jsx +spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +~~~ + +## 이벤트 리스너 해제하기 {#detaching-event-listeners} + +이벤트를 해제하려면 [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md)를 사용하십시오. + +~~~jsx +var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +spreadsheet.events.detach(addcolumn); +~~~ + +## 이벤트 호출하기 {#calling-events} + +이벤트를 호출하려면 [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md)를 사용하십시오. + +~~~jsx +spreadsheet.events.fire("name",args); +// where args is an array of arguments +~~~ + +이벤트 목록은 [API 섹션](api/api_overview.md#spreadsheet-events)에서 확인할 수 있습니다. + +{{note 이벤트 이름은 대소문자를 구분하지 않습니다.}} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/hotkeys.md b/i18n/ko/docusaurus-plugin-content-docs/current/hotkeys.md new file mode 100644 index 00000000..3b6bcd03 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/hotkeys.md @@ -0,0 +1,241 @@ +--- +sidebar_label: 단축키 목록 +title: 단축키 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 단축키에 대해 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 단축키 목록 {#hot-keys-list} + +다음은 DHTMLX Spreadsheet 사용 시 활용할 수 있는 단축키 목록입니다. + +## 편집 {#editing} + + + + + + + + + + + + + + + + + + + + +
Enter셀의 편집기를 활성화합니다
Ctrl (Cmd) + Enter셀 편집을 중지하고 해당 셀에 선택 상태를 유지합니다
F2선택된 셀에서 편집기를 엽니다
Esc변경 사항을 저장하지 않고 셀 편집기를 닫습니다
+ +## 셀 서식 지정 {#formatting-cells} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + C셀의 값을 복사합니다
Ctrl (Cmd) + V선택된 내용을 대체하여 셀에 값을 붙여넣습니다
Ctrl (Cmd) + X셀의 값을 잘라냅니다
Ctrl (Cmd) + Z시트에서 마지막 작업을 실행 취소합니다
Ctrl (Cmd) + Y시트에서 마지막 작업을 반복합니다
Ctrl (Cmd) + Shift + Z시트에서 마지막 작업을 반복합니다
Ctrl (Cmd) + B셀의 값을 굵게 표시합니다
Ctrl (Cmd) + I셀의 값을 기울임꼴로 표시합니다
Ctrl (Cmd) + U셀의 값에 밑줄을 표시합니다
Alt + Shift + 5 (Cmd + Shift + X)셀의 값에 취소선을 표시합니다
Ctrl (Cmd) + Shift + E셀의 값을 가로 방향으로 가운데 정렬합니다
Ctrl (Cmd) + Shift + R셀의 값을 오른쪽 정렬합니다
Ctrl (Cmd) + Shift + L셀의 값을 왼쪽 정렬합니다
Ctrl (Cmd) + K셀에 하이퍼링크를 삽입합니다
Delete적용된 스타일을 유지한 채 셀 내용을 삭제합니다
Backspace적용된 스타일을 유지한 채 셀 내용을 삭제합니다
+ +## 탐색 {#navigation} + +{{note 탐색은 셀이 편집 중이지 않은 경우에만 작동합니다.}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enter셀의 편집기를 활성화합니다. 편집기를 닫고 선택을 한 셀 아래로 이동합니다(열 방향). 셀 범위가 선택된 경우 범위 내에서 한 셀 아래로 이동합니다.
Shift + Enter선택을 한 셀 위로 이동합니다(열 방향). 셀 범위가 선택된 경우 범위 내에서 한 셀 위로 이동합니다. 열의 첫 번째 셀에 도달하면 비활성화됩니다.
Tab선택을 한 셀 오른쪽으로 이동합니다(행 방향). 셀 범위가 선택된 경우 범위 내에서 한 셀 오른쪽으로 이동합니다. 행의 가장 오른쪽 셀에 도달하면 비활성화됩니다.
Tab + Shift선택을 한 셀 왼쪽으로 이동합니다(행 방향). 셀 범위가 선택된 경우 범위 내에서 한 셀 왼쪽으로 이동합니다. 행의 가장 왼쪽 셀에 도달하면 비활성화됩니다.
화살표 키시트의 셀 간 탐색을 제공합니다
Home선택을 행의 첫 번째 셀로 이동합니다
End선택을 행의 마지막 셀로 이동합니다
Ctrl (Cmd) + 왼쪽 화살표 키선택을 행의 첫 번째 셀로 이동합니다
Ctrl (Cmd) + 오른쪽 화살표 키선택을 행의 마지막 셀로 이동합니다
Ctrl (Cmd) + 위쪽 화살표 키선택을 열의 첫 번째 셀로 이동합니다
Ctrl (Cmd) + 아래쪽 화살표 키선택을 열의 마지막 셀로 이동합니다
Ctrl (Cmd) + Home선택을 시트의 시작 부분(왼쪽 상단 셀)으로 이동합니다
Ctrl (Cmd) + End선택을 시트의 끝 부분(오른쪽 하단 셀)으로 이동합니다
Shift + 위쪽/아래쪽/왼쪽/오른쪽 화살표 키선택된 셀에서 선택 영역을 확장합니다
Page Up시트를 한 화면 위로 스크롤합니다
Page Down시트를 한 화면 아래로 스크롤합니다
+ +## 검색 {#search} + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + F스프레드시트 오른쪽 상단에 검색 상자를 엽니다
Ctrl (Cmd) + G선택을 다음 검색 결과로 이동합니다
Ctrl (Cmd) + Shift + G선택을 이전 검색 결과로 이동합니다
+ +## 선택 {#selection} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + A시트의 모든 셀을 선택합니다
Ctrl (Cmd) + 왼쪽 클릭여러 셀을 분산 선택할 수 있습니다
왼쪽 Shift + 왼쪽 클릭선택된 셀을 범위의 첫 번째 셀, 클릭한 셀을 범위의 마지막 셀로 하여 셀 범위를 선택할 수 있습니다
Ctrl (Cmd) + Shift + 왼쪽 클릭여러 분산된 셀 범위를 선택할 수 있습니다
Ctrl (Cmd) + Space열 전체를 선택합니다
Shift + Space행 전체를 선택합니다
+ +## 시트 작업 {#work-with-sheets} + + + + + + + + + + + + +
Shift + F11스프레드시트에 새 시트를 추가합니다
Alt + 위쪽 화살표 / 아래쪽 화살표다음/이전 시트로 전환합니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 00000000..3b61f264 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,147 @@ +--- +sidebar_label: 시작하는 방법 +title: DHTMLX Spreadsheet 시작하는 방법 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 시작 방법을 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 시작하는 방법 {#how-to-start} + +이 튜토리얼은 페이지에서 완전한 기능을 갖춘 DHTMLX Spreadsheet를 구현하는 단계를 안내합니다. 이 컴포넌트는 계산 결과를 저장하고 재현해야 할 때 대량의 데이터를 관리하는 데 특히 효과적입니다. + +![브라우저 창에서 샘플 데이터 테이블로 초기화된 DHTMLX Spreadsheet](/img/how_to_start.png) + +## 1단계. 소스 파일 포함하기 {#step-1-including-source-files} + +*index.html*이라는 HTML 파일을 만드는 것부터 시작하십시오. 그런 다음 Spreadsheet 소스 파일을 포함하십시오. [DHTMLX Spreadsheet 패키지에 대한 자세한 설명은 여기에 있습니다](initialization.md#including-source-files). + +필요한 파일은 두 가지입니다. + +- DHTMLX Spreadsheet의 *JS* 파일 +- DHTMLX Spreadsheet의 *CSS* 파일 + +그리고 + +- 올바른 글꼴 렌더링을 위한 Google Fonts 소스 파일 링크. + +~~~html {5-8} title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + + + + +~~~ + +### npm 또는 yarn을 통해 Spreadsheet 설치하기 {#installing-spreadsheet-via-npm-or-yarn} + +`yarn` 또는 `npm` 패키지 매니저를 사용하여 JavaScript Spreadsheet를 프로젝트에 가져올 수 있습니다. + +#### npm 또는 yarn을 통해 평가판 Spreadsheet 설치하기 {#installing-trial-spreadsheet-via-npm-or-yarn} + +:::info +평가판 Spreadsheet를 사용하려면 [**평가판 Spreadsheet 패키지**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml)를 다운로드하고 *README* 파일의 단계를 따르십시오. 평가판 Spreadsheet는 30일 동안만 사용 가능합니다. +::: + +#### npm 또는 yarn을 통해 PRO Spreadsheet 설치하기 {#installing-pro-spreadsheet-via-npm-or-yarn} + +:::info +[고객 영역](https://dhtmlx.com/clients/)에서 **npm** 로그인 및 비밀번호를 생성하여 DHTMLX 비공개 **npm**에 직접 접근할 수 있습니다. 자세한 설치 가이드도 그곳에서 확인할 수 있습니다. 비공개 **npm** 접근은 독점 Spreadsheet 라이선스가 활성화된 동안에만 가능합니다. +::: + +## 2단계. Spreadsheet 생성하기 {#step-2-creating-spreadsheet} + +이제 페이지에 Spreadsheet를 추가할 준비가 되었습니다. 먼저 DIV 컨테이너를 만들고 DHTMLX Spreadsheet를 그 안에 배치합니다. 단계는 다음과 같습니다. + +- *index.html* 파일에 DIV 컨테이너를 지정합니다 +- `dhx.Spreadsheet` 생성자를 사용하여 DHTMLX Spreadsheet를 초기화합니다 + +생성자 함수는 Spreadsheet를 배치할 HTML 컨테이너와 Spreadsheet 구성 객체를 매개변수로 받습니다. + +~~~html title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + +
+ + + +~~~ + +## 3단계. Spreadsheet 구성 설정하기 {#step-3-setting-spreadsheet-configuration} + +다음으로 초기화 시 기본값 외에 Spreadsheet 컴포넌트에 적용할 추가 구성 옵션을 지정할 수 있습니다. + +예를 들어 `toolbarBlocks`, `rowsCount`, `colsCount` 등 여러 옵션으로 Spreadsheet의 외관을 조정할 수 있습니다. [자세한 내용 확인하기](configuration.md). + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + toolbarBlocks: ["columns", "rows", "clear"], + rowsCount: 10, + colsCount: 10 +}); +~~~ + +DHTMLX Spreadsheet의 구성은 매우 유연하므로 언제든지 변경할 수 있습니다. Spreadsheet 구성의 기본 사항을 알아보려면 [관련 가이드를 읽어보십시오](configuration.md). + +## 4단계. Spreadsheet에 데이터 로드하기 {#step-4-loading-data-into-spreadsheet} + +마지막 단계는 Spreadsheet에 데이터를 채우는 것입니다. DHTMLX Spreadsheet는 JSON 형식의 데이터를 받습니다. 데이터 외에도 데이터 세트에 필요한 스타일을 전달할 수 있습니다. 인라인 데이터를 로드할 때는 `parse()` 메서드를 사용하고 아래 예제와 같이 데이터 객체를 전달해야 합니다. + +~~~jsx title="data.json" +const data = [ + { "cell": "a1", "value": "Country" }, + { "cell": "b1", "value": "Product" }, + { "cell": "c1", "value": "Price" }, + { "cell": "d1", "value": "Amount" }, + { "cell": "e1", "value": "Total Price" }, + + { "cell": "a2", "value": "Ecuador" }, + { "cell": "b2", "value": "Banana" }, + { "cell": "c2", "value": 6.68 }, + { "cell": "d2", "value": 430 }, + { "cell": "e2", "value": 2872.4 }, + + { "cell": "a3", "value": "Belarus" }, + { "cell": "b3", "value": "Apple" }, + { "cell": "c3", "value": 3.75 }, + { "cell": "d3", "value": 600 }, + { "cell": "e3", "value": 2250 } +] + +// initializing spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + //config +}); +// loading data into spreadsheet +spreadsheet.parse(data); +~~~ + +**관련 샘플**: [Spreadsheet. 사용자 정의 셀 수](https://snippet.dhtmlx.com/vc3mstsw) + +## 다음 단계 {#whats-next} + +이것으로 완료됩니다. 네 단계만으로 표 형식 데이터 작업에 유용한 도구를 얻을 수 있습니다. 이제 데이터 작업을 시작하거나 DHTMLX Spreadsheet를 계속 탐색할 수 있습니다. + +- [Spreadsheet 개요](/) +- [](guides.md) +- [](api/api_overview.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 00000000..14782f26 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Spreadsheet 개요 +title: DHTMLX Spreadsheet 개요 +slug: / +description: DHTMLX 문서에서 JavaScript Spreadsheet 라이브러리의 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# DHTMLX Spreadsheet 개요 {#dhtmlx-spreadsheet-overview} + +DHTMLX Spreadsheet는 온라인에서 스프레드시트 데이터를 편집하고 서식 지정하기 위한 클라이언트 측 JavaScript 컴포넌트입니다. 구성 가능한 툴바, 편리한 메뉴 및 컨텍스트 메뉴, 조정 가능한 그리드를 포함하며, 단축키 탐색을 지원하고, 외부 및 로컬 소스에서 데이터를 로드하며, 인터페이스를 원하는 언어로 현지화할 수 있습니다. + +:::tip +[사용자 가이드](guides.md#user-guides)를 통해 사용자가 Spreadsheet를 쉽게 활용할 수 있습니다. +::: + +## Spreadsheet 구조 {#spreadsheet-structure} + +### 툴바 {#toolbar} + +**툴바** 섹션은 매우 유연합니다. "undo", "colors", "decoration", "align", "cell", "format", "actions" 등 여러 기본 컨트롤 블록이 포함되어 있습니다. [툴바 구조를 변경하여](configuration.md#toolbar) 블록을 추가하거나 블록의 순서를 직접 설정할 수 있습니다. + +![undo, 색상, 데코레이션, 정렬, 셀, 형식, 작업 컨트롤이 있는 DHTMLX Spreadsheet 툴바](/img/overview_toolbar.png) + +자체 컨트롤을 추가하고 컨트롤 구성을 업데이트하여 [툴바를 커스터마이징할](customization.md#toolbar) 수도 있습니다. + +### 편집 표시줄 {#editing-line} + +**편집 표시줄**은 두 가지 목적으로 사용됩니다. + +- 선택된 셀의 내용을 편집합니다 +- 현재 편집 중인 셀의 변경 사항을 제어합니다 + +![선택된 셀 내용 편집 및 변경 사항 추적을 위한 DHTMLX Spreadsheet 편집 표시줄](/img/overview_editline.png) + +필요한 경우 해당 [구성 옵션](configuration.md#editing-bar)을 통해 편집 표시줄을 끌 수 있습니다. + +### 그리드 {#grid} + +**그리드**는 열이 문자로 정의되고 행이 숫자로 정의된 테이블입니다. 따라서 그리드의 셀은 열의 문자와 행의 번호로 정의됩니다. 예를 들어 C3와 같이 표현됩니다. + +![문자로 레이블된 열과 번호가 매겨진 행이 있는 DHTMLX Spreadsheet 그리드](/img/spreadsheet_init.png) + +### 컨텍스트 메뉴 {#context-menu} + +**컨텍스트 메뉴** 섹션에는 하위 항목이 있는 **잠금**, **지우기**, **열**, **행**, **정렬**, **링크 삽입** 등 6개의 항목이 포함되어 있습니다. + +![잠금, 지우기, 열, 행, 정렬, 링크 삽입 옵션이 있는 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/overview_contextmenu.png) + +[컨텍스트 메뉴 구조도 커스터마이징 가능합니다](customization.md#context-menu). 사용자 정의 컨트롤을 추가하고, 컨트롤 구성을 업데이트하며, 불필요한 컨트롤을 제거할 수 있습니다. + +### 메뉴 {#menu} + +**메뉴** 섹션에는 빠른 접근을 위해 툴바와 컨텍스트 메뉴에서 가장 자주 사용되는 옵션들을 결합한 여러 블록이 포함되어 있습니다. + +기본적으로 **메뉴** 섹션은 숨겨져 있지만 관련 [구성 옵션](configuration.md#menu)을 통해 활성화할 수 있습니다. + +![자주 사용하는 툴바 및 컨텍스트 메뉴 옵션을 결합한 DHTMLX Spreadsheet 메뉴 섹션](/img/overview_menu.png) + +사용자 정의 컨트롤을 사용하고, 컨트롤 구성을 업데이트하며, 불필요한 컨트롤을 제거하여 [메뉴 구조를 수정할](customization.md#menu) 수 있습니다. + +## 다음 단계 {#whats-next} + +이제 애플리케이션에서 DHTMLX Spreadsheet를 사용하기 시작할 수 있습니다. 지침을 따르려면 [시작하는 방법](how_to_start.md) 튜토리얼을 참고하십시오. + +DHTMLX Spreadsheet에 대해 더 알아보려면 다음 가이드를 참고하십시오. + +- [API 개요](api/api_overview.md) +- [가이드](guides.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/initialization.md new file mode 100644 index 00000000..6bcc2df3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/initialization.md @@ -0,0 +1,68 @@ +--- +sidebar_label: 초기화 +title: 초기화 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 초기화에 대해 문서에서 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 초기화 {#initialization} + +이 가이드는 페이지에서 DHTMLX Spreadsheet를 생성하고 애플리케이션에 완전한 기능을 갖춘 워크시트를 추가하는 방법을 설명합니다. 사용 가능한 컴포넌트를 얻으려면 다음 단계를 따르십시오. + +1. [페이지에 DHTMLX Spreadsheet 소스 파일 포함하기](#including-source-files). +2. [DHTMLX Spreadsheet용 컨테이너 만들기](#creating-container). +3. [객체 생성자로 DHTMLX Spreadsheet 초기화하기](#initializing-dhtmlx-spreadsheet). + + + +## 소스 파일 포함하기 {#including-source-files} + +[패키지를 다운로드](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml)하여 프로젝트 폴더에 압축을 해제하십시오. + +DHTMLX Spreadsheet를 생성하려면 페이지에 2개의 소스 파일을 포함해야 합니다. + +- spreadsheet.js +- spreadsheet.css + +이 파일들에 올바른 상대 경로를 설정했는지 확인하십시오. + +~~~html title="index.html" + + +~~~ + +Spreadsheet 패키지의 구조는 다음과 같습니다. + +- *sources* - 라이브러리의 소스 코드 파일로, 읽기 쉽고 주로 디버깅 목적으로 사용됩니다. +- *codebase* - 라이브러리의 난독화된 코드 파일로, 훨씬 작고 프로덕션 환경에서 사용하기 위한 것입니다. **앱이 준비되면 이 파일들을 포함하십시오.** +- *samples* - 코드 샘플. +- *docs* - 컴포넌트의 전체 문서. + +## 컨테이너 만들기 {#creating-container} + +Spreadsheet용 컨테이너를 추가하고 예를 들어 "spreadsheet"와 같은 id를 지정하십시오. + +~~~html title="index.html" +
+~~~ + +## DHTMLX Spreadsheet 초기화하기 {#initializing-dhtmlx-spreadsheet} + +`dhx.Spreadsheet` 객체 생성자로 DHTMLX Spreadsheet를 초기화하십시오. 생성자는 두 가지 매개변수를 받습니다. + +- Spreadsheet를 위한 HTML 컨테이너, +- 구성 속성을 가진 객체. [아래에서 전체 목록을 확인하십시오](#configuration-properties). + +~~~jsx title="index.js" +// creating DHTMLX Spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config options +}); +~~~ + +### 구성 속성 {#configuration-properties} + +Spreadsheet 구성 객체에 지정할 수 있는 [속성](api/api_overview.md#spreadsheet-properties)의 전체 목록을 확인하십시오. + +초기화 시 생성자의 두 번째 매개변수로 구성 옵션을 설정할 수 있습니다. + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/loading_data.md b/i18n/ko/docusaurus-plugin-content-docs/current/loading_data.md new file mode 100644 index 00000000..7e2f626d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/loading_data.md @@ -0,0 +1,355 @@ +--- +sidebar_label: 데이터 로드 및 내보내기 +title: 데이터 로드하기 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 데이터 로드에 대해 학습할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보고, DHTMLX Spreadsheet 무료 30일 평가판을 다운로드하십시오. +--- + +# 데이터 로드 및 내보내기 {#data-loading-and-export} + +셀 데이터와 스타일을 모두 포함할 수 있는 준비된 데이터 세트로 DHTMLX Spreadsheet를 채울 수 있습니다. 컴포넌트는 두 가지 데이터 로드 방법을 지원합니다. + +- 외부 파일에서 로드 +- 로컬 소스에서 로드 + +컴포넌트는 또한 [Excel 파일로 데이터 내보내기](#exporting-data)를 지원합니다. + +## 데이터 준비하기 {#preparing-data} + +DHTMLX Spreadsheet는 JSON 형식의 데이터를 받습니다. + +셀 객체의 단순 배열일 수 있습니다. 하나의 시트에 대한 데이터 세트만 만들어야 하는 경우 이 방법을 사용하십시오. + +~~~jsx title="하나의 시트를 위한 데이터 준비" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, format:"currency" }, + { cell: "D2", value: 430, format:"percent" }, + // "myFormat" is the id of a custom format + { cell: "E2", value: 2872.4, format:"myFormat" }, + + // add drop-down lists to cells + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // more cell objects +]; +~~~ + +또는 여러 시트에 한 번에 로드할 데이터를 가진 객체일 수 있습니다. 예를 들어: + +~~~jsx title="여러 시트를 위한 데이터 준비" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ], + merged: [ + // merge cells A1 and B1 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // merge cells A2, A3, A4, and A5 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } }, + ] + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ] + }, + // more sheet objects + ] +}; +~~~ + +두 가지 방법에 사용 가능한 속성의 전체 목록은 [API 레퍼런스](api/spreadsheet_parse_method.md)에서 확인하십시오. + +:::tip +병합된 셀을 로드하는 기능은 시트 객체 형태로 데이터를 준비한 경우에만 사용 가능합니다. +::: + +### 셀 스타일 설정하기 {#setting-styles-for-cells} + +데이터 세트에서 셀 스타일을 정의해야 할 수도 있습니다. 이 경우 데이터는 데이터 객체와 특정 셀에 적용되는 CSS 클래스를 별도의 속성으로 설명하는 객체여야 합니다. + +`css` 속성으로 셀에 CSS 클래스를 설정하십시오. + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430, css: "someclass" }, + { cell: "E2", value: 2872.4 } + ], +} +~~~ + +:::info +[셀 스타일 지정에 사용할 수 있는 속성 목록 확인하기](api/spreadsheet_parse_method.md#list-of-properties) +::: + +### 셀 잠금 상태 설정하기 {#setting-the-locked-state-for-a-cell} + +데이터 세트에 잠긴 셀을 지정하려면 셀의 `locked` 속성을 사용하여 `true`로 설정하십시오. + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country", locked: true }, //locks a cell + { cell: "b1", value: "Product", locked: true }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + // more cells +]; +~~~ + +사용 가능한 셀 속성의 전체 목록은 [API 레퍼런스](api/spreadsheet_parse_method.md#parameters)에서 확인하십시오. + +**관련 샘플**: [Spreadsheet. 잠긴 셀](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet) + +### 셀에 링크 추가하기 {#adding-a-link-into-a-cell} + +데이터 세트에서 직접 셀에 대한 링크를 지정할 수 있습니다. 이를 위해 `link` 속성을 객체로 설정하고 필요한 설정을 제공하십시오. + +- `text` - (선택 사항) 링크의 텍스트 +- `href` - (필수) 링크 대상을 정의하는 URL + +데이터 세트에서의 모습은 다음과 같습니다. + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country"}, //locks a cell + { cell: "b1", value: "Product"}, + + { cell: "a2", value: "Ecuador"}, + { + cell: "b2", + value: "Banana", + link:{ + href:"http://localhost:8080/" + } + }, + // more cells +]; +~~~ + +:::note +`cell` 객체의 `value` 속성과 `link` 객체의 `text` 속성은 상호 배타적이므로 동시에 사용하지 마십시오. +::: + +**관련 샘플**: [Spreadsheet. JSON 가져오기 및 내보내기](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) + +## 외부 데이터 로드 {#external-data-loading} + +### JSON 데이터 로드하기 {#loading-json-data} + +기본적으로 Spreadsheet는 JSON 형식의 데이터를 받습니다. 외부 소스에서 데이터를 로드하려면 [](api/spreadsheet_load_method.md) 메서드를 사용하십시오. 이 메서드는 데이터 파일의 URL을 매개변수로 받습니다. + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.json"); +~~~ + +**관련 샘플**: [Spreadsheet. 데이터 로드](https://snippet.dhtmlx.com/ih9zmc3e?tag=spreadsheet) + + +:::info +사용자가 파일 탐색기를 통해 JSON 파일을 스프레드시트로 가져올 수 있게 하려면 [JSON 파일 로드하기](api/spreadsheet_load_method.md#loading-json-files)를 참고하십시오. +::: + +### CSV 데이터 로드하기 {#loading-csv-data} + +CSV 형식의 데이터도 로드할 수 있습니다. 이를 위해 [](api/spreadsheet_load_method.md) 메서드를 호출하고 두 번째 매개변수로 형식 이름("csv")을 전달하십시오. + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.csv", "csv"); +~~~ + +**관련 샘플**: [Spreadsheet. CSV 로드](https://snippet.dhtmlx.com/1f87y71v?tag=spreadsheet) + +### Excel 파일(.xlsx) 로드하기 {#loading-excel-file-xlsx} + +`.xlsx` 확장자의 Excel 형식 파일을 스프레드시트로 로드할 수 있습니다. 사용자 인터페이스의 툴바와 메뉴에 해당 컨트롤이 있습니다. + +- 메뉴: 파일 -> 다음으로 가져오기.. -> Microsoft Excel(.xlsx) + +![Microsoft Excel XLSX 파일을 위한 가져오기 옵션이 있는 DHTMLX Spreadsheet 파일 메뉴](/img/file_import.png) + +- 툴바: 가져오기 -> Microsoft Excel(.xlsx) + +![Microsoft Excel XLSX 파일을 위한 가져오기 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/import_xlsx.png) + +#### 데이터를 가져오는 방법 {#how-to-import-data} + +{{note 가져오기 기능은 Internet Explorer에서 작동하지 않습니다.}} + +DHTMLX Spreadsheet는 WebAssembly 기반 라이브러리인 [Excel2Json](https://github.com/dhtmlx/excel2json)을 사용하여 Excel에서 데이터를 가져옵니다. Excel 데이터를 Spreadsheet로 로드하려면 다음을 수행해야 합니다. + +- **Excel2Json** 라이브러리를 설치합니다 +- Spreadsheet 구성에 [](api/spreadsheet_importmodulepath_config.md) 옵션을 지정하고 다음 두 가지 방법 중 하나로 *worker.js* 파일 경로를 설정합니다. + - 컴퓨터의 파일에 대한 로컬 경로 제공: `"../libs/excel2json/1.0/worker.js"` + - CDN의 파일에 대한 링크 제공: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + importModulePath: "../libs/excel2json/1.0/worker.js" +}); +~~~ + +**관련 샘플**: [Spreadsheet. 사용자 정의 가져오기 내보내기 경로](https://snippet.dhtmlx.com/wykwzfhm) + +Excel 파일에서 데이터를 로드하려면 [](api/spreadsheet_load_method.md) 메서드의 두 번째 매개변수로 확장자 유형 문자열("xlsx")을 전달하십시오. + +~~~jsx +// .xlsx only +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +{{note 컴포넌트는 `.xlsx` 확장자를 가진 Excel 파일에서만 가져오기를 지원합니다.}} + +**관련 샘플**: [Spreadsheet. Xlsx 가져오기](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) + +필요한 경우 [스프레드시트 데이터를 Excel 파일로 내보낼](#exporting-data) 수도 있습니다. + +### 로드 후 코드 처리하기 {#processing-after-loading-code} + +컴포넌트는 AJAX 호출을 수행하며 원격 URL이 유효한 데이터를 제공할 것으로 기대합니다. 데이터 로드는 비동기적으로 이루어지므로 로드 후 코드는 promise로 래핑해야 합니다. + +~~~jsx +spreadsheet.load("/some/data").then(function(){ + // do something +}); +~~~ + +## 로컬 소스에서 로드하기 {#loading-from-local-source} + +로컬 소스에서 데이터를 로드하려면 [](api/spreadsheet_parse_method.md) 메서드를 사용하십시오. 이 메서드의 매개변수로 [미리 정의된 데이터 세트](#preparing-data)를 전달하십시오. + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.parse(data); +~~~ + +**관련 샘플**: [Spreadsheet. 사용자 정의 셀 수](https://snippet.dhtmlx.com/vc3mstsw) + +여러 시트를 스프레드시트로 로드하는 방법에 대한 자세한 내용은 [시트 작업](working_with_sheets.md#loading-multiple-sheets) 문서를 참고하십시오. + +## 상태 저장 및 복원 {#saving-and-restoring-state} + +스프레드시트의 현재 상태를 저장하려면 [](api/spreadsheet_serialize_method.md) 메서드를 사용하십시오. 이 메서드는 데이터를 JSON 객체 배열로 변환합니다. 각 JSON 객체에는 셀의 구성이 포함됩니다. + +~~~jsx +// saving state of the spreadsheet1 +var state = spreadsheet1.serialize(); +~~~ + +그런 다음 저장된 상태 배열에 저장된 데이터를 다른 스프레드시트로 파싱할 수 있습니다. 예를 들어: + +~~~jsx +// creating a new spreadsheet +var spreadsheet2 = new dhx.Spreadsheet(document.body); +// parsing the state of the spreadsheet1 into spreadsheet2 +spreadsheet2.parse(state); +~~~ + +## 데이터 내보내기 {#exporting-data} + +### Excel로 내보내기 {#export-into-excel} + +DHTMLX Spreadsheet는 스프레드시트 데이터를 Excel 파일로 내보낼 수 있습니다. 사용자 인터페이스의 툴바와 메뉴에 해당 컨트롤이 있습니다. + +- 메뉴: 파일 -> 다음으로 다운로드.. -> Microsoft Excel(.xlsx) + +![Microsoft Excel XLSX 내보내기를 위한 다른 이름으로 다운로드 옵션이 있는 DHTMLX Spreadsheet 파일 메뉴](/img/file_export.png) + +- 툴바: 내보내기 -> Microsoft Excel(.xlsx) + +![Microsoft Excel XLSX로 저장하기 위한 내보내기 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/export_xlsx.png) + +#### 데이터를 내보내는 방법 {#how-to-export-data} + +:::note +내보내기 기능은 Internet Explorer에서 작동하지 않습니다. +::: + +라이브러리는 WebAssembly 기반 라이브러리인 [Json2Excel](https://github.com/dhtmlx/json2excel)을 사용하여 데이터를 Excel로 내보냅니다. 내보내기는 **Json2Excel** 라이브러리의 *worker.js* 파일에서 처리됩니다(기본 링크: `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). 공개 내보내기 서버 또는 로컬 내보내기 서버를 사용할 수 있습니다. 파일을 내보내려면 다음을 수행해야 합니다. + +- Spreadsheet 구성에 [](api/spreadsheet_exportmodulepath_config.md) 옵션을 지정하고 *worker.js* 파일 경로를 설정합니다. + - 공개 내보내기 서버를 사용하는 경우 기본값으로 사용되므로 링크를 지정할 필요가 없습니다 + - 자체 내보내기 서버를 사용하는 경우: + - [**Json2Excel**](https://github.com/dhtmlx/json2excel) 라이브러리를 설치합니다 + - 특정 버전에 대해 `"../libs/json2excel/x.x/worker.js?vx"`를 사용합니다(`x.x`를 서버에 배포된 버전으로 교체하십시오) + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // the path to the export module, if a local export server is used +}); +~~~ + +**관련 샘플**: [Spreadsheet. 사용자 정의 가져오기 내보내기 경로](https://snippet.dhtmlx.com/wykwzfhm) + +필요한 소스를 조정했으면 Export 객체의 관련 [](api/export_xlsx_method.md) API 메서드를 사용하여 컴포넌트 데이터를 내보낼 수 있습니다. + +~~~jsx +spreadsheet.export.xlsx(); +~~~ + +**관련 샘플**: [Spreadsheet. Xlsx 내보내기](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +:::note +컴포넌트는 `.xlsx` 확장자를 가진 Excel 파일로만 내보내기를 지원합니다. +::: + +#### 내보낸 파일의 사용자 정의 이름 설정하기 {#how-to-set-a-custom-name-for-an-exported-file} + +기본적으로 내보낸 파일의 이름은 "data"입니다. 내보낸 파일에 사용자 정의 이름을 지정할 수 있습니다. 이를 위해 [](api/export_xlsx_method.md) 메서드의 매개변수로 사용자 정의 이름을 전달하십시오. + +~~~jsx +spreadsheet.export.xlsx("MyData"); +~~~ + +**관련 샘플**: [Spreadsheet. Xlsx 내보내기](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +[Excel 파일에서 Spreadsheet로 데이터를 가져오는 단계](#loading-excel-file-xlsx)를 확인하십시오. + +### JSON으로 내보내기 {#export-into-json} + +v4.3부터 라이브러리는 스프레드시트 데이터를 JSON 파일로도 내보낼 수 있습니다. Export 객체의 [json()](api/export_json_method.md) 메서드를 사용하십시오. + +~~~jsx +spreadsheet.export.json(); +~~~ + +**관련 샘플**: [Spreadsheet. JSON 내보내기/가져오기](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/localization.md new file mode 100644 index 00000000..5e600ab2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/localization.md @@ -0,0 +1,276 @@ +--- +sidebar_label: 로컬라이제이션 +title: 로컬라이제이션 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 로컬라이제이션에 대한 문서를 확인하세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 로컬라이제이션 {#localization} + +DHTMLX Spreadsheet 인터페이스의 레이블을 현지화하여 원하는 언어로 인터페이스를 표시할 수 있습니다. 이를 위해 레이블에 대한 현지화된 문자열을 제공하고 해당 로케일을 컴포넌트에 적용하세요. + + + +## 기본 로케일 {#default-locale} + +기본적으로 영어 로케일이 사용됩니다: + +~~~jsx +const en = { + // Toolbar + undo: "Undo", + redo: "Redo", + + textColor: "Text color", + backgroundColor: "Background color", + + bold: "Bold", + italic: "Italic", + underline: "Underline", + strikethrough: "Strikethrough", + + link: "Link", + + halign: "Horizontal align", + valign: "Vertical align", + left: "Left", + right: "Right", + center: "Center", + top: "Top", + bottom: "Bottom", + multiline: "Text wrapping", + clip: "Clip", + wrap: "Wrap", + merge: "Merge", + unmerge: "Unmerge", + + lockCell: "Lock cell", + unlockCell: "Unlock cell", + + clear: "Clear", + clearValue: "Clear value", + clearStyles: "Clear styles", + clearAll: "Clear all", + + columns: "Columns", + rows: "Rows", + addColumn: "Add column left", + removeColumn: "Remove column {col}", + removeColumns: "Remove columns {col}", + fitToData: "Fit to data", + addRow: "Add row above", + removeRow: "Remove row {row}", + removeRows: "Remove rows {row}", + row: "row", + col: "col", + freeze: "Freeze", + freezeToCol: "Freeze up to column {col}", + freezeToRow: "Freeze up to row {row}", + unfreezeRows: "Unfreeze rows", + unfreezeCols: "Unfreeze columns", + hideCol: "Hide column {col}", + hideCols: "Hide columns {col}", + showCols: "Show columns", + hideRows: "Hide rows {row}", + hideRow: "Hide row {row}", + showRows: "Show rows", + + format: "Format", + common: "Common", + number: "Number", + currency: "Currency", + percent: "Percent", + text: "Text", + date: "Date", + time: "Time", + + filter: "Filter", + + help: "Help", + + custom: "Custom", + + border: "Border", + border_all: "All borders", + border_inner: "Inner borders", + border_horizontal: "Horizontal borders", + border_vertical: "Vertical borders", + border_outer: "Outer borders", + border_color: "Border color", + border_left: "Left border", + border_top: "Top border", + border_right: "Right border", + border_bottom: "Bottom border", + border_clear: "Clear borders", + border_style: "Border style", + + // Tabbar + deleteSheet: "Delete", + renameSheet: "Rename", + renameSheetAlert: "A sheet with the name $name already exists. Please enter another name. ", + + // Menu + file: "File", + import: "Import", + export: "Export", + downloadAs: "Download as...", + importAs: "Import as...", + + data: "Data", + validation: "Data validation", + search: "Search", + sort: "Sort", + ascSort: "Sort A to Z", + descSort: "Sort Z to A", + + //Actions + copy: "Copy", + edit: "Edit", + insert: "Insert", + remove: "Remove", + linkCopied: "Link copied to clipboard", + + + //filter + e: "Is empty", + ne: "Is not empty", + tc: "Text contains", + tdc: "Text doesn't contain", + ts: "Text starts with", + te: "Text ends with", + tex: "Text is exactly", + d: "Date is", + db: "Date is before", + da: "Date is after", + gt: "Greater than", + geq: "Greater or equal to", + lt: "Less than", + leq: "Less or equal to", + eq: "Is equal to", + neq: "Is not equal to", + ib: "Is between", + inb: "Is not between", + + none: "None", + value: "Value", + values: "By values", + condition: "By condition", + and: "And", + + blank: "(Blank)", + + // Buttons + cancel: "Cancel", + save: "Save", + removeValidation: "Remove validation", + selectAll: "Select all", + unselectAll: "Unselect all", + apply: "Apply", + ok: "Ok", + + // Messages + alertTitle: "There was a problem!", + mergeAlertMessage: "You can't $action a range containing merges!", + spanMergeAlert: "You can't merge frozen and non-frozen cells!", + dontShowAgain: "Don't show again", + spanPasteError: "You can't paste merges that cross the boundary of a frozen region", + spanMergeLockedError: "You can't merge locked cells!", + spanUnmergeLockedError: "You can't unmerge locked cells!", + spanOverFilteredRow: "You can't merge cells over a filtered row.", + removeAlert: "You can't remove last $name!", +}; +~~~ + +## 사용자 정의 로케일 {#custom-locale} + +다른 로케일을 적용하려면 다음을 수행해야 합니다: + +- Spreadsheet의 모든 텍스트 레이블에 대한 번역을 제공합니다. 예를 들어 러시아어 로케일의 경우: + +~~~jsx +const ru = { + // 언어 설정 +}; +~~~ + +- Spreadsheet를 초기화하기 전에 `dhx.i18n.setLocale()` 메서드를 호출하여 새 로케일을 적용합니다: + +~~~jsx +dhx.i18n.setLocale("spreadsheet", ru); +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); +~~~ + +## 수식의 기본 로케일 {#default-locale-for-formulas} + +`dhx.i18n.formulas` 객체에는 Spreadsheet 수식 팝업의 i18n 로케일이 포함되어 있습니다. 수식의 기본 로케일은 다음과 같습니다: + +~~~jsx +const en = { + SUM: [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + AVERAGE: [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + // 더 많은 수식 설명 +}; +~~~ + +[수식의 전체 기본 로케일 확인하기](formulas_locale.md). + +**관련 샘플**: [Spreadsheet. 로컬라이제이션](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) + +## 수식의 사용자 정의 로케일 {#custom-locale-for-formulas} + +Spreadsheet 수식에 사용자 정의 로케일을 적용하려면 다음과 같이 `dhx.i18n.setLocale()` 메서드를 사용해야 합니다: + +~~~jsx +dhx.i18n.setLocale( + "formulas", + locale: { + // 로케일의 수식 구조 + name: [param: string, description: string][] + } +): void; +~~~ + +메서드에 다음 매개변수를 전달해야 합니다: + + + + + + + + + + + + + + + + +
매개변수설명
"formulas"(*필수*) 수식 로케일의 이름
locale(*필수*) 수식의 설명을 key:value 쌍으로 포함하는 로케일 객체. 여기서:
  • key는 함수의 이름
  • value는 함수가 받는 매개변수 배열. 각 매개변수는 두 요소의 배열로 구성:
    • 첫 번째 요소는 매개변수의 이름
    • 두 번째 요소는 매개변수의 설명
+ +아래 예제를 확인하세요: + +~~~jsx +const de = { + AVERAGE: [ + ["Zahl1", "Erforderlich. Eine Zahl oder Zellreferenz, die sich auf numerische Werte bezieht."], + ["Zahl2", "Optional. Eine Zahl oder Zellreferenz, die auf numerische Werte verweist."] + ], + // 다른 수식 설명 +}; + +dhx.i18n.setLocale("formulas", de); +~~~ + +## 예제 {#example} + +이 스니펫에서 로케일 간 전환 방법을 확인할 수 있습니다: + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/merge_cells.md b/i18n/ko/docusaurus-plugin-content-docs/current/merge_cells.md new file mode 100644 index 00000000..92e57cb7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/merge_cells.md @@ -0,0 +1,47 @@ +--- +sidebar_label: 셀 병합 +title: 셀 병합 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 셀 병합에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 셀 병합 {#merging-cells} + +## 셀 병합하기 {#merge-cells} + +셀을 병합하려면 다음 단계를 수행하세요: + +1\. 병합할 셀 범위를 선택합니다 + +2\. 툴바에서 **Merge** 버튼을 클릭합니다 + +![셀 범위를 병합하는 Merge 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/merge_cells.png) + +또는 + +1\. 병합할 셀 범위를 선택합니다 + +2\. 메뉴에서 *Format -> Merge*로 이동합니다 + +![셀 병합을 위한 Merge 옵션이 있는 DHTMLX Spreadsheet Format 메뉴](/img/merge_cells_via_menu.png) + +:::info +병합된 셀은 선택된 범위의 왼쪽 상단 셀의 내용을 표시합니다. +::: + +## 셀 분리하기 {#split-cells} + +병합된 셀을 분리하려면 다음 단계를 수행하세요: + +1\. 병합된 셀을 선택합니다 + +2\. 툴바에서 **Unmerge** 버튼을 클릭합니다 + +![병합된 셀을 분리하는 Unmerge 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/unmerge_cells.png) + +또는 + +1\. 병합된 셀을 선택합니다 + +2\. 메뉴에서 *Format -> Unmerge*로 이동합니다 + +![병합된 셀을 분리하는 Unmerge 옵션이 있는 DHTMLX Spreadsheet Format 메뉴](/img/unmerge_cells_via_menu.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/migration.md b/i18n/ko/docusaurus-plugin-content-docs/current/migration.md new file mode 100644 index 00000000..61822885 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/migration.md @@ -0,0 +1,335 @@ +--- +sidebar_label: 최신 버전으로 마이그레이션 +title: 마이그레이션 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 마이그레이션에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 최신 버전으로 마이그레이션 {#migration-to-newer-versions} + +## 5.2 -> 6.0 {#52---60} + +### 더 이상 사용되지 않는 속성 {#deprecated-properties} + +`ISpreadsheetConfig`의 다음 속성들은 더 이상 사용되지 않으며 제거되었습니다. 아래에서 현재 사용법을 확인하세요: + +- `dateFormat` 구성 속성. [`localization`](api/spreadsheet_localization_config.md) 구성 객체에서 다음과 같이 설정하세요: + - `{ localization: { dateFormat: "%d/%m/%Y" } }` +- `timeFormat` 구성 속성. [`localization`](api/spreadsheet_localization_config.md) 구성 객체에서 다음과 같이 설정하세요: + - `{ localization: { timeFormat: 12 } }` + +### 더 이상 사용되지 않는 메서드 {#deprecated-methods} + +`ISpreadsheet` 인스턴스의 다음 메서드들은 더 이상 사용되지 않으며 제거되었습니다. + +대신 새로운 [`sheets` 모듈 (Sheet Manager) API](api/overview/sheetmanager_overview.md)를 사용하세요: + +
+ +| 더 이상 사용되지 않는 메서드 | 시그니처 | 새로운 사용법 | 새 시그니처 | +| --- | --- | --- | --- | +| `clearSheet(id?)` | `(id?: string) => void` | [`sheets.clear(id?)`](api/sheetmanager_clear_method.md) | `(id?: Id) => void` | +| `removeSheet(id)` | `(id: string) => void` | [`sheets.remove(id)`](api/sheetmanager_remove_method.md) | `(id: Id) => void` | +| `addSheet(name?)` | `(name?: string) => string` | [`sheets.add(name?)`](api/sheetmanager_add_method.md) | `(name?: string) => Id` | +| `getSheets()` | `() => ISheet[]` | [`sheets.getAll()`](api/sheetmanager_getall_method.md) | `() => ISheet[]` | +| `getActiveSheet()` | `() => ISheet` | [`sheets.getActive()`](api/sheetmanager_getactive_method.md) | `() => ISheet` | +| `setActiveSheet(id)` | `(id: Id) => void` | [`sheets.setActive(id)`](api/sheetmanager_setactive_method.md) | `(id: Id) => void` | + +
+ +### 더 이상 사용되지 않는 이벤트 {#deprecated-events} + +다음 이벤트들은 더 이상 사용되지 않으며 제거되었습니다. 대신 일반 [`beforeAction`](api/spreadsheet_beforeaction_event.md) / [`afterAction`](api/spreadsheet_afteraction_event.md) 이벤트 쌍을 사용하세요. + +
+ +| 더 이상 사용되지 않는 이벤트 | 콜백 시그니처 | 새로운 사용법 | +| --- | --- | --- | +| `beforeValueChange` | `(cell: string, value: string) => void \| boolean` | `"setCellValue"` 액션과 함께 `beforeAction` 사용 | +| `afterValueChange` | `(cell: string, value: string) => void` | `"setCellValue"` 액션과 함께 `afterAction` 사용 | +| `beforeStyleChange` | `(cell: string, style: ...) => void \| boolean` | `"setCellStyle"` 액션과 함께 `beforeAction` 사용 | +| `afterStyleChange` | `(cell: string, style: ...) => void` | `"setCellStyle"` 액션과 함께 `afterAction` 사용 | +| `beforeFormatChange` | `(cell: string, format: string) => void \| boolean` | `"setCellFormat"` 액션과 함께 `beforeAction` 사용 | +| `afterFormatChange` | `(cell: string, format: string) => void` | `"setCellFormat"` 액션과 함께 `afterAction` 사용 | +| `beforeRowAdd` | `(cell: string) => void \| boolean` | `"addRow"` 액션과 함께 `beforeAction` 사용 | +| `afterRowAdd` | `(cell: string) => void` | `"addRow"` 액션과 함께 `afterAction` 사용 | +| `beforeRowDelete` | `(cell: string) => void \| boolean` | `"deleteRow"` 액션과 함께 `beforeAction` 사용 | +| `afterRowDelete` | `(cell: string) => void` | `"deleteRow"` 액션과 함께 `afterAction` 사용 | +| `beforeColumnAdd` | `(cell: string) => void \| boolean` | `"addColumn"` 액션과 함께 `beforeAction` 사용 | +| `afterColumnAdd` | `(cell: string) => void` | `"addColumn"` 액션과 함께 `afterAction` 사용 | +| `beforeColumnDelete` | `(cell: string) => void \| boolean` | `"deleteColumn"` 액션과 함께 `beforeAction` 사용 | +| `afterColumnDelete` | `(cell: string) => void` | `"deleteColumn"` 액션과 함께 `afterAction` 사용 | +| `beforeSheetAdd` | `(name: string) => void \| boolean` | `"addSheet"` 액션과 함께 `beforeAction` 사용 | +| `afterSheetAdd` | `(sheet: ISheet) => void` | `"addSheet"` 액션과 함께 `afterAction` 사용 | +| `beforeSheetRemove` | `(sheet: ISheet) => void \| boolean` | `"deleteSheet"` 액션과 함께 `beforeAction` 사용 | +| `afterSheetRemove` | `(sheet: ISheet) => void` | `"deleteSheet"` 액션과 함께 `afterAction` 사용 | +| `beforeSheetRename` | `(sheet: ISheet, value: string) => void \| boolean` | `"renameSheet"` 액션과 함께 `beforeAction` 사용 | +| `afterSheetRename` | `(sheet: ISheet) => void` | `"renameSheet"` 액션과 함께 `afterAction` 사용 | +| `beforeSheetClear` | `(sheet: ISheet) => void \| boolean` | `"clearSheet"` 액션과 함께 `beforeAction` 사용 | +| `afterSheetClear` | `() => void` | `"clearSheet"` 액션과 함께 `afterAction` 사용 | + +
+ +## 5.1 -> 5.2 {#51---52} + +### 고정/해제 기능 {#freezingunfreezing-functionality} + +v5.2에서는 열과 행의 고정/해제 방식이 변경되었습니다: + +- 열과 행을 고정하는 데 사용되었던 `leftSplit` 및 `topSplit` 구성 속성이 더 이상 사용되지 않으며 제거되었습니다 + +~~~jsx title="v5.2 이전" +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + topSplit: 1, // 고정할 행 수 + leftSplit: 1 // 고정할 열 수 +}); +~~~ + +- 새 API 메서드 추가: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +~~~jsx title="v5.2부터" +// 행의 경우 +spreadsheet.freezeRows("B2"); // 두 번째 행까지의 행이 고정됩니다 +spreadsheet.freezeRows("sheet2!B2"); // "sheet2"의 두 번째 행까지의 행이 고정됩니다 +spreadsheet.unfreezeRows(); // 현재 시트의 고정된 행이 해제됩니다 +spreadsheet.unfreezeRows("sheet2!A1"); // "sheet2"의 고정된 행이 해제됩니다 + +// 열의 경우 +spreadsheet.freezeCols("B2"); // "B" 열까지의 열이 고정됩니다 +spreadsheet.freezeCols("sheet2!B2"); // "sheet2"의 "B" 열까지의 열이 고정됩니다 +spreadsheet.unfreezeCols(); // 현재 시트의 고정된 열이 해제됩니다 +spreadsheet.unfreezeCols("sheet2!A1"); // "sheet2"의 고정된 열이 해제됩니다 +~~~ + +- 새 액션 추가: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + +~~~jsx title="v5.2부터" +// beforeAction/afterAction 이벤트와 함께 `toggleFreeze` 액션 사용 +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); +~~~ + +- [`parse()`](api/spreadsheet_parse_method.md) 메서드의 *sheets* 객체에 새 `freeze` 속성이 추가되었습니다. 이를 통해 데이터를 Spreadsheet에 파싱할 때 특정 시트의 행과 열을 고정할 수 있습니다: + +~~~jsx {10-13} title="v5.2부터" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // "sheet_1"의 추가 설정 + }, + // 추가 시트 구성 객체 + ] +}; + +spreadsheet.parse(data); +~~~ + +## 4.3 -> 5.0 {#43---50} + +v5.0에서는 [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 속성의 `"help"` 옵션이 `"helpers"`로 이름이 변경되었습니다. 또한 기본 옵션 세트에 새로운 `"actions"` 옵션이 추가되었습니다. + +~~~jsx title="v5.0 이전" {8} +// 기본 구성 +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "help" +] +~~~ + +~~~jsx title="v5.0부터" {8,9} +// 기본 구성 +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "actions", + "helpers" +] +~~~ + + +## 4.2 -> 4.3 {#42---43} + +:::info +버전 4.3은 IE 지원을 제공하는 마지막 버전입니다 +::: + +버전 4.3은 스프레드시트에서 변경 사항을 수행할 때 수행된 액션을 추적하고 처리하는 새로운 방식을 도입합니다. + +새로운 [`beforeAction`](api/spreadsheet_beforeaction_event.md) 및 [`afterAction`](api/spreadsheet_afteraction_event.md) 이벤트는 액션이 실행되기 직전/직후에 발생하며 어떤 액션이 수행되었는지 나타냅니다. 이 접근 방식을 사용하면 이 두 이벤트만으로 여러 액션에 필요한 로직을 한 번에 추가할 수 있습니다. 예를 들어: + +~~~jsx +spreadsheet.events.on("BeforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return true; + } + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + ... +}); + +spreadsheet.events.on("AfterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config) + } + if (actionName === "addColumn") { + console.log(actionName, config); + }, + ... +}); +~~~ + +이 접근 방식은 각각의 개별 액션에 대해 쌍으로 된 [**before-** 및 **after-**](api/overview/events_overview.md) 이벤트 세트를 추가할 필요가 없으므로 코드 크기를 줄일 수 있습니다. + +기존 접근 방식도 이전과 같이 계속 작동합니다. 자세한 내용은 [Spreadsheet 액션](api/overview/actions_overview.md)을 확인하세요. + +:::info +현재 액션으로 대체할 수 없어 기존 방식으로 사용해야 하는 이벤트 세트가 있습니다: *beforeEditEnd, afterEditEnd, beforeEditStart, afterEditStart, beforeFocusSet, afterFocusSet, beforeSheetChange, afterSheetChange, groupFill*. +::: + +## 4.1 -> 4.2 {#41---42} + +v4.2에서는 Spreadsheet 툴바의 [정렬](customization.md#default-controls) 블록이 두 개의 하위 블록으로 분리되었습니다: 가로 정렬과 세로 정렬. 따라서 정렬 블록의 기본 컨트롤 id 목록이 변경되고 확장되었습니다: + +`v4.2 이전`: + +**정렬** 블록: + +- *왼쪽 정렬* 버튼 (id: "align-left") +- *가운데 정렬* 버튼 (id: "align-center") +- *오른쪽 정렬* 버튼 (id: "align-right") + +`v4.2부터`: + +**정렬** 블록의 **가로 정렬** 하위 블록: + +- *왼쪽* 버튼 (id: "halign-left") +- *가운데* 버튼 (id: "halign-center") +- *오른쪽* 버튼 (id: "halign-right") + +**정렬** 블록의 **세로 정렬** 하위 블록: + +- *위* 버튼 (id: "valign-top") +- *가운데* 버튼 (id: "valign-center") +- *아래* 버튼 (id: "valign-bottom") + +### 로컬라이제이션 {#localization} + +**정렬** 블록의 [로케일 옵션](localization.md)도 업데이트되었다는 점에 유의하세요: + +`v4.2 이전`: + +~~~jsx +const locale = { + align: "Align", + ... +} +~~~ + +`v4.2부터`: + +~~~jsx +const locale = { + halign: "Horizontal align", + valign: "Vertical align", + ... +} +~~~ + +## 2.1 -> 3.0 {#21---30} + +이 변경 사항 목록은 PHP 기반이었던 버전 2.1에서 완전히 JavaScript로 재구축된 버전 3.0으로 마이그레이션하는 데 도움이 됩니다. 모든 변경 사항을 살펴보려면 아래 목록을 확인하세요. + +:::info +**버전 2.1의 API**는 여전히 사용 가능하지만 [**버전 3.0부터의 API**](api/api_overview.md)와 호환되지 않습니다. 버전 2.1에 대한 문서가 필요하시면 [문의하기](https://dhtmlx.com/docs/contact.shtml)를 통해 연락해 주시면 보내드리겠습니다. +::: + +### 변경된 API {#changed-api} + +- getStyle -> [spreadsheet.getStyle](api/spreadsheet_getstyle_method.md) - 셀에 적용된 스타일을 반환합니다 +- getValue -> [spreadsheet.getValue](api/spreadsheet_getvalue_method.md) - 셀의 값을 포함하는 객체를 반환합니다 +- setStyle -> [spreadsheet.setStyle](api/spreadsheet_setstyle_method.md) - 셀 또는 셀 범위에 스타일을 설정합니다 +- setValue -> [spreadsheet.setValue](api/spreadsheet_setvalue_method.md) - 셀 또는 셀 범위에 값을 설정합니다 +- lock -> [spreadsheet.lock](api/spreadsheet_lock_method.md) - 셀 또는 셀 범위를 잠급니다 +- unlock -> [spreadsheet.unlock](api/spreadsheet_unlock_method.md) - 잠긴 셀 또는 셀 범위를 잠금 해제합니다 + +### 제거된 API {#removed-api} + +#### Spreadsheet 클래스 {#spreadsheet-class} + +- getCell +- getCells +- isCell +- setSheetId + +#### SpreadsheetCell {#spreadsheetcell} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting.md b/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting.md new file mode 100644 index 00000000..0c921faa --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting.md @@ -0,0 +1,204 @@ +--- +sidebar_label: 숫자 서식 +title: 숫자 서식 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 숫자 서식에 대한 개발자 가이드를 확인하세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 숫자 서식 {#number-formatting} + +DHTMLX Spreadsheet는 셀의 숫자 값에 적용할 수 있는 숫자 서식을 지원합니다. + +![공통, 숫자, 통화, 퍼센트, 날짜, 시간, 텍스트 옵션이 있는 DHTMLX Spreadsheet 숫자 서식 드롭다운](/img/number_format_options.png) + +:::note +[사용자 가이드](number_formatting_guide.md)를 통해 사용자들이 Spreadsheet를 더 쉽게 사용할 수 있습니다. +::: + +## 기본 숫자 서식 {#default-number-formats} + +숫자 서식은 다음 속성 세트를 포함하는 객체입니다: + +- `id` - [`setFormat()`](api/spreadsheet_setformat_method.md) 메서드로 셀에 서식을 설정할 때 사용하는 서식의 id +- `mask` - 숫자 서식의 마스크. [아래](#the-structure-of-a-mask)에서 마스크에 사용할 수 있는 문자 목록을 확인하세요 +- `name` - 툴바 및 메뉴 드롭다운 목록에 표시되는 서식의 이름 +- `example` - 서식이 적용된 숫자가 어떻게 보이는지 보여주는 예제. 기본적으로 서식 예제에는 2702.31이 사용됩니다 + +기본 숫자 서식은 다음과 같습니다: + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // localization.timeFormat 구성에 따라 다름 + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" }, + { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" } +]; +~~~ + +다양한 숫자 서식이 적용된 스프레드시트의 모습은 다음과 같습니다: + + + +## 날짜 서식 {#date-format} + +[`localization`](api/spreadsheet_localization_config.md) 속성의 `dateFormat` 옵션으로 스프레드시트에 표시되는 날짜 서식을 정의할 수 있습니다. 기본 서식은 "%d/%m/%Y"입니다. + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + dateFormat: "%D/%M/%Y", + } +}); + +spreadsheet.parse({ + styles: { + // 스타일 세트 + }, + data: [ + {cell: "B1", value: "03/10/2022", format: "date"}, + {cell: "B2", value: new Date(), format: "date"}, + ] +}); +~~~ + +[날짜 서식 설정에 사용할 수 있는 전체 문자 목록](api/spreadsheet_localization_config.md#characters-for-setting-date-format)을 확인하세요. + +## 시간 서식 {#time-format} + +스프레드시트 셀에 시간이 표시되는 서식을 정의하려면 [`localization`](api/spreadsheet_localization_config.md) 속성의 `timeFormat` 옵션을 사용하세요: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + timeFormat: 24, + } +}); + +spreadsheet.parse({ + styles: { + // 스타일 세트 + }, + data: [ + { cell: "A1", value: "18:30", format: "time" }, + { cell: "A2", value: 44550.5625, format: "time" }, + { cell: "A3", value: new Date(), format: "time" }, + ] +}); +~~~ + +## 숫자, 날짜, 시간, 통화 로컬라이제이션 {#number-date-time-currency-localization} + +Spreadsheet 구성 옵션을 사용하면 시간과 날짜를 현지화하고, 필요한 통화 기호를 지정하며, 원하는 소수점 및 천단위 구분자를 제공할 수 있습니다. 이러한 설정은 모두 [`localization`](api/spreadsheet_localization_config.md) 속성에서 사용할 수 있습니다. 다음 속성을 포함하는 객체입니다: + +- `decimal` - (선택) 소수점 구분자로 사용하는 기호, 기본값은 `"."` (마침표)
가능한 값: `"." | ","` +- `thousands` - (선택) 천단위 구분자로 사용하는 기호, 기본값은 `","` (쉼표)
가능한 값: `"." | "," | " " | ""` +- `currency` - (선택) 통화 기호, 기본값은 `"$"` +- `dateFormat` - (선택) 문자열로 설정된 날짜 표시 서식, 기본값은 `"%d/%m/%Y"`. [`localization`](api/spreadsheet_localization_config.md) API 페이지에서 자세한 내용을 확인하세요 +- `timeFormat` - (선택) `12` 또는 `24`로 설정된 시간 표시 서식, 기본값은 `12` + +예를 들어, 아래와 같이 기본 로컬라이제이션 설정을 변경할 수 있습니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +Spreadsheet의 `localization` 객체 구성 결과는 다음과 같습니다: + + + +## 과학적 숫자 서식 {#scientific-number-format} + +과학적(지수) 표기법은 기본 서식으로 제공되며 매우 크거나 작은 숫자를 간결하게 표현하는 데 유용합니다. 내장된 `"scientific"` 서식은 마스크 `0.00E+00`을 사용하며, 예를 들어 1500.31을 `1.50E+03`으로 표시합니다. + +셀에 적용하려면 [`setFormat()`](api/spreadsheet_setformat_method.md) 메서드를 사용하세요: + +~~~jsx +spreadsheet.setFormat("A1", "scientific"); +~~~ + +[`formats`](api/spreadsheet_formats_config.md) 구성 옵션을 통해 다른 마스크로 사용자 정의 과학적 서식을 정의할 수도 있습니다. 예를 들어 `0.###E+0`은 더 간결한 출력을 생성합니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + formats: [ + { id: "scientific_compact", mask: "0.###E+0", name: "Scientific (compact)", example: "1.5E+3" } + ] +}); +~~~ + +## 서식 사용자 정의 {#formats-customization} + +[기본 숫자 서식](#default-number-formats)에만 국한되지 않습니다. 두 가지 방법으로 서식을 사용자 정의할 수 있습니다: + +- 기본 숫자 서식의 설정 변경 +- 스프레드시트에 사용자 정의 숫자 서식 추가 + + + +이러한 모든 수정은 [`formats`](api/spreadsheet_formats_config.md) 구성 옵션으로 할 수 있습니다. 서식 객체 배열이며, 각 객체는 다음 속성 세트를 포함합니다: + +- `id` - (*string*) 필수, [`setFormat()`](api/spreadsheet_setformat_method.md) 메서드로 셀에 서식을 설정할 때 사용하는 서식의 id +- `mask` - (*string*) 필수, 숫자 서식의 마스크. [아래](#the-structure-of-a-mask)에서 마스크에 사용할 수 있는 문자 목록을 확인하세요 +- `name` - (*string*) 선택, 툴바 및 메뉴 드롭다운 목록에 표시되는 서식의 이름 +- `example` - (*string*) 선택, 서식이 적용된 숫자가 어떻게 보이는지 보여주는 예제 + +### 마스크의 구조 {#the-structure-of-a-mask} + +마스크에는 숫자 자리 표시자, 구분자, 퍼센트 및 통화 기호, 유효 문자를 포함하는 공통 구문 문자 세트가 포함될 수 있습니다: + +- **0** - 숫자의 한 자리. 숫자가 서식의 0 수보다 적은 경우 의미 없는 0을 표시하는 데 사용됩니다. 예를 들어 2를 2.0으로 표시하려면 서식 0.0을 사용하세요. +- **#** - 숫자의 한 자리. 유효한 숫자만 표시하는 데 사용됩니다(숫자가 서식의 # 기호 수보다 적은 경우 의미 없는 0은 생략됩니다). +- **$** - 숫자를 달러 값으로 서식 지정합니다. 다른 통화 기호를 사용하려면 마스크에서 **[$ your_currency_sign]**#,##0.00으로 정의해야 합니다. 예를 들어 [$ €]#,##0.00. +{{note [$와 ] 사이의 모든 문자는 통화 기호로 해석됩니다.}} +- **.(마침표)** - 숫자에 소수점을 적용합니다. +- **,(쉼표)** - 숫자에 천단위 구분자를 적용합니다. +- **[날짜 서식 설정 문자](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/)** - 날짜 및 시간 마스크를 만드는 데 사용됩니다. 예를 들어 27.09.2023을 27, Sep 2023으로 표시하려면 서식 "%d, %M %Y"를 사용하세요. +- **E+ / E-** - 숫자를 과학적(지수) 표기법으로 서식 지정합니다. `E` 뒤의 자릿수는 지수 자릿수의 최솟값을 정의합니다. `E+`는 항상 지수 부호를 표시하고, `E-`는 음수 지수에 대해서만 표시합니다. 예를 들어 마스크 `0.00E+00`은 1500.31을 `1.50E+03`으로 표시합니다. + +## 서식 설정 {#setting-format} + +숫자 값에 필요한 서식을 적용하려면 [`setFormat()`](api/spreadsheet_setformat_method.md) 메서드를 사용하세요. 두 개의 매개변수를 받습니다: + +- `cell` - (*string*) 값의 서식을 지정할 셀의 id +- `format` - (*string*) 셀 값에 적용할 [기본 숫자 서식](#default-number-formats)의 이름 + +예를 들어: + +~~~jsx +// A1 셀에 퍼센트 서식을 적용합니다 +spreadsheet.setFormat("A1","percent"); +~~~ + +## 서식 가져오기 {#getting-format} + +[`getFormat()`](api/spreadsheet_getformat_method.md) 메서드로 셀 값에 적용된 숫자 서식을 검색할 수 있습니다. 이 메서드는 셀의 id를 매개변수로 받습니다. + +~~~jsx +var format = spreadsheet.getFormat("A1"); +// ->"percent" +~~~ + +## 이벤트 {#events} + +이벤트 쌍을 사용하여 셀 서식 변경을 제어할 수 있습니다: + +- [`beforeAction`](api/spreadsheet_beforeaction_event.md) - `setCellFormat` 액션이 실행되기 전에 발생합니다 +- [`afterAction`](api/spreadsheet_afteraction_event.md) - `setCellFormat` 액션이 실행된 후에 발생합니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting_guide.md b/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting_guide.md new file mode 100644 index 00000000..3fcafdac --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/number_formatting_guide.md @@ -0,0 +1,61 @@ +--- +sidebar_label: 숫자 서식 +title: 숫자 서식 가이드 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 숫자 서식에 대한 사용자 가이드를 확인하세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 숫자 서식 {#number-formatting} + +## 지원되는 숫자 서식 {#supported-number-formats} + +셀 값에 여러 숫자 서식을 적용할 수 있습니다: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
공통서식 없이 숫자가 그대로 표시됩니다
숫자지정된 구분자로 십, 백, 천 단위가 구분되어 숫자가 표시됩니다
통화통화 기호($)와 함께 숫자가 표시됩니다
퍼센트퍼센트 기호(%)와 함께 숫자가 표시됩니다
날짜지정된 서식의 날짜로 숫자가 표시됩니다
시간12시간 또는 24시간 서식의 시간으로 숫자가 표시됩니다
텍스트입력한 그대로 텍스트로 숫자가 표시됩니다
과학적지수 표기법으로 숫자가 표시됩니다 (예: 1500.31의 경우 1.50E+03); 매우 크거나 작은 숫자에 유용합니다
+ +## 서식 설정 방법 {#how-to-set-format} + +툴바를 통해 Spreadsheet 데이터에 특정 숫자 서식을 적용하려면 다음 단계를 따르세요: + +- 서식을 지정할 하나 또는 여러 셀을 선택합니다. +- **숫자 서식** 버튼을 클릭합니다: + +![숫자 서식 적용을 위한 숫자 서식 버튼이 있는 DHTMLX Spreadsheet 툴바](/img/number_format_button.png) + +- 제안된 옵션 중에서 적용할 서식을 선택합니다: + +![공통, 숫자, 통화, 퍼센트, 날짜, 시간, 텍스트 옵션이 있는 DHTMLX Spreadsheet 숫자 서식 드롭다운](/img/number_format_options.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/events.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/events.md new file mode 100644 index 00000000..49e09763 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/events.md @@ -0,0 +1,219 @@ +--- +sidebar_label: Events +title: Events 레퍼런스 +description: "ReactSpreadsheet의 이벤트 콜백 props: 액션, 선택, 편집, 시트, 파생 상태." +--- + +# Events 레퍼런스 {#events-reference} + +모든 이벤트 콜백은 선택적 props입니다. "Before" 콜백은 `false`를 반환하여 작업을 취소할 수 있습니다. + +:::note +React 래퍼는 `onCamelCase` 형식의 prop 이름을 사용합니다(예: `onAfterAction`). 반면 JS Spreadsheet API는 event bus에서 `camelCase` 이벤트 이름을 사용합니다(예: `afterAction`). 명령형 API에 대해서는 [JS API Events 레퍼런스](api/overview/events_overview.md)를 참조하십시오. +::: + +## 액션 이벤트 {#action-events} + +셀 편집, 서식 지정, 구조 변경 등 사용자 액션 발생 시 실행됩니다. + +| Prop | 취소 가능 | 설명 | +|------|:-----------:|-------------| +| `onBeforeAction` | 예 | 사용자 액션이 실행되기 전에 발생합니다. `false`를 반환하면 취소됩니다. 핸들러: [`BeforeActionHandler`](react/types.md#handler-type-aliases). JS API: [`beforeAction`](api/spreadsheet_beforeaction_event.md). | +| `onAfterAction` | 아니오 | 사용자 액션이 완료된 후 발생합니다. 핸들러: [`AfterActionHandler`](react/types.md#handler-type-aliases). JS API: [`afterAction`](api/spreadsheet_afteraction_event.md). | + +**예시: 행 삭제 차단** + +~~~tsx +import { Actions } from "@dhtmlx/trial-react-spreadsheet"; + + { + if (action === Actions.deleteRow) return false; + }} +/> +~~~ + +**예시: 모든 사용자 액션 로그** + +~~~tsx + { + console.log("Action:", action, "Cell:", config.cell); + }} +/> +~~~ + +## 선택 이벤트 {#selection-events} + +셀 선택 또는 포커스가 변경될 때 발생합니다. + +| Prop | 취소 가능 | 설명 | +|------|:-----------:|-------------| +| `onBeforeSelectionSet` | 예 | 셀이 선택 영역에 추가되기 전에 발생합니다. 핸들러: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSelectionSet`](api/spreadsheet_beforeselectionset_event.md). | +| `onAfterSelectionSet` | 아니오 | 셀이 선택 영역에 추가된 후 발생합니다. 핸들러: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterSelectionSet`](api/spreadsheet_afterselectionset_event.md). | +| `onBeforeSelectionRemove` | 예 | 셀이 선택 영역에서 제거되기 전에 발생합니다. 핸들러: [`BeforeCellHandler`](react/types.md#handler-type-aliases). | +| `onAfterSelectionRemove` | 아니오 | 셀이 선택 영역에서 제거된 후 발생합니다. 핸들러: [`AfterCellHandler`](react/types.md#handler-type-aliases). | +| `onBeforeFocusSet` | 예 | 포커스된 셀이 변경되기 전에 발생합니다. 핸들러: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeFocusSet`](api/spreadsheet_beforefocusset_event.md). | +| `onAfterFocusSet` | 아니오 | 포커스된 셀이 변경된 후 발생합니다. 핸들러: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterFocusSet`](api/spreadsheet_afterfocusset_event.md). | + +**예시: 선택된 셀 추적** + +~~~tsx +const [selectedCell, setSelectedCell] = useState(""); + + setSelectedCell(cell)} +/> + +

Current cell: {selectedCell}

+~~~ + +## 편집 이벤트 {#edit-events} + +셀 편집이 시작되거나 종료될 때 발생합니다. + +| Prop | 취소 가능 | 설명 | +|------|:-----------:|-------------| +| `onBeforeEditStart` | 예 | 셀 편집이 시작되기 전에 발생합니다. 핸들러: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditStart`](api/spreadsheet_beforeeditstart_event.md). | +| `onAfterEditStart` | 아니오 | 셀 편집이 시작된 후 발생합니다. 핸들러: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditStart`](api/spreadsheet_aftereditstart_event.md). | +| `onBeforeEditEnd` | 예 | 셀 편집이 종료되기 전에 발생합니다. `false`를 반환하면 편집 상태가 유지됩니다. 핸들러: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditEnd`](api/spreadsheet_beforeeditend_event.md). | +| `onAfterEditEnd` | 아니오 | 셀 편집이 종료되고 값이 확정된 후 발생합니다. 핸들러: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditEnd`](api/spreadsheet_aftereditend_event.md). | + +**예시: 값 확정 전 유효성 검사** + +~~~tsx + { + if (cell.startsWith("B") && isNaN(Number(value))) { + return false; // Cancel: column B must be numeric + } + }} +/> +~~~ + +## 시트 이벤트 {#sheet-events} + +활성 시트 탭이 변경될 때 발생합니다. + +| Prop | 취소 가능 | 설명 | +|------|:-----------:|-------------| +| `onBeforeSheetChange` | 예 | 활성 시트가 변경되기 전에 발생합니다. 핸들러: [`BeforeSheetHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSheetChange`](api/spreadsheet_beforesheetchange_event.md). | +| `onAfterSheetChange` | 아니오 | 활성 시트가 변경된 후 발생합니다. 핸들러: [`AfterSheetHandler`](react/types.md#handler-type-aliases). JS API: [`afterSheetChange`](api/spreadsheet_aftersheetchange_event.md). | + +**예시: 활성 시트 추적** + +~~~tsx + { + console.log("Switched to sheet:", sheet.name); + }} +/> +~~~ + +## 데이터 이벤트 {#data-events} + +스프레드시트 데이터가 로드될 때 발생합니다. + +| Prop | 설명 | +|------|-------------| +| `onAfterDataLoaded` | 데이터 로드가 완료된 후 발생합니다(`sheets` 또는 `loadUrl` 사용 시). JS API: [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md). | + +**예시: 로딩 상태 표시** + +~~~tsx +const [loading, setLoading] = useState(true); + + setLoading(false)} +/> +~~~ + +## 입력 이벤트 {#input-events} + +셀 또는 수식 입력줄에 사용자가 입력할 때 발생합니다. + +| Prop | 설명 | +|------|-------------| +| `onGroupFill` | 자동 채우기(드래그 채우기) 작업 중 발생합니다. 핸들러: `(focusedCell: string, selectedCell: string) => void`. JS API: [`groupFill`](api/spreadsheet_groupfill_event.md). | +| `onEditLineInput` | 수식/편집줄에 입력 시 발생합니다. 핸들러: `(value: string) => void`. | +| `onCellInput` | 편집 중 셀에 입력 시 발생합니다. 핸들러: `(cell: string, value: string) => void`. | + +## 파생 상태 콜백 {#derived-state-callbacks} + +직접적인 사용자 액션이 아닌 계산된 상태 변경을 알립니다. + +| Prop | 설명 | +|------|-------------| +| `onStateChange` | 실행 취소/다시 실행 가능 여부가 변경될 때 알립니다. 핸들러: `(state: { canUndo: boolean; canRedo: boolean }) => void`. | +| `onSearchResults` | `search` prop이 활성화된 경우 일치하는 셀 참조를 알립니다. 핸들러: `(cells: string[]) => void`. | +| `onFilterChange` | 사용자가 UI를 통해 필터를 변경할 때 알립니다. 핸들러: `(filter: SheetFilter) => void`. | + +**예시: 실행 취소/다시 실행 버튼** + +~~~tsx +import { useRef, useState } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + return ( + <> + + + + + ); +} +~~~ + +**예시: 결과가 있는 제어된 검색** + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +**예시: 필터 상태 동기화** + +~~~tsx +const [activeFilter, setActiveFilter] = useState(null); + + setActiveFilter(filter)} +/> +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/index.md new file mode 100644 index 00000000..7054ed24 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/index.md @@ -0,0 +1,45 @@ +--- +sidebar_label: React Spreadsheet +title: React Spreadsheet +description: "공식 선언형 래퍼를 사용하여 React에서 DHTMLX Spreadsheet를 설치, 구성 및 사용하는 방법." +--- + +# React Spreadsheet {#react-spreadsheet} + +DHTMLX Spreadsheet의 공식 선언형 React 래퍼입니다. 컴포넌트 기반 API로 스프레드시트 UI를 구축하십시오. 데이터를 props로 전달하고, 이벤트 콜백을 통해 변경 사항에 응답하며, 필요한 경우 ref를 통해 기본 위젯에 접근할 수 있습니다. + +## 시작하기 {#get-started} + +- [설치](react/installation.md) - 평가판 또는 상용 패키지 설치 +- [빠른 시작](react/quick-start.md) - 단계별로 첫 번째 스프레드시트 앱 만들기 +- [온라인 예시](https://dhtmlx.com/react/demos/spreadsheet/) - React Spreadsheet 기능의 라이브 데모 확인 + +:::info +완전한 동작 예시는 [GitHub 데모 저장소](https://github.com/DHTMLX/react-spreadsheet-examples)를 참조하십시오. +::: + +## API 참조 {#api-reference} + +- [Props 레퍼런스](react/props.md) - 타입과 기본값이 포함된 모든 컴포넌트 props +- [Events 레퍼런스](react/events.md) - 카테고리별로 분류된 이벤트 콜백 props +- [Types 레퍼런스](react/types.md) - TypeScript 인터페이스, 열거형, 타입 별칭 + +## 데이터 모델 {#data-model} + +[`sheets`](react/props.md#data-props) prop은 모든 스프레드시트 데이터의 단일 정보 소스입니다. 각 시트는 셀, 행/열 구성, 병합 범위, 고정 창, 필터, 정렬을 포함하는 [`SheetData`](react/types.md#sheetdata) 객체입니다. + +## 상태 관리 {#state-management} + +스프레드시트 데이터와 애플리케이션 상태를 동기화하는 방법을 알아보십시오. + +- [상태 관리 기초](react/state/state-management-basics.md) - 제어된 props, 이벤트 콜백, ref 탈출구 +- [Redux toolkit](react/state/redux-toolkit.md) - 단계별 통합 가이드 + +## 프레임워크 통합 {#framework-integrations} + +- [Next.js](react/nextjs.md) - Next.js App Router에서 React Spreadsheet 사용 + +## 테마 및 로컬라이제이션 {#theming-and-localization} + +- [테마](react/themes.md) - 내장 테마 및 사용자 정의 CSS 재정의 +- [로컬라이제이션](react/localization.md) - UI 번역 및 숫자/날짜 형식 지정 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/installation.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/installation.md new file mode 100644 index 00000000..5b617425 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/installation.md @@ -0,0 +1,84 @@ +--- +sidebar_label: Installation +title: React Spreadsheet 설치 +description: "npm을 통해 DHTMLX React Spreadsheet의 평가판 또는 상용 버전을 설치하는 방법." +--- + +# React Spreadsheet 설치 {#react-spreadsheet-installation} + +React Spreadsheet는 세 가지 변형의 npm 패키지로 배포됩니다. 공개 평가판 빌드, 비공개 평가판 빌드, 그리고 상용 버전입니다. 이 페이지에서는 각 변형의 설치 방법, 필수 CSS 스타일시트 가져오기, TypeScript 지원 설정 방법을 설명합니다. + +:::info 사전 요구 사항 +- [Node.js](https://nodejs.org/en/) (LTS 버전 권장) +- React 18 이상 +::: + +## 평가판 (공개 npm) {#evaluation-version-public-npm} + +평가판 패키지는 추가 구성 없이 공개 npm 레지스트리에서 사용할 수 있습니다. 30일 무료 평가판이 포함되어 있습니다. + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +또는 yarn 사용 시: + +~~~bash +yarn add @dhtmlx/trial-react-spreadsheet +~~~ + +## 평가판 (비공개 npm) {#evaluation-version-private-npm} + +평가판은 DHTMLX 비공개 레지스트리에 있습니다. 먼저 프로젝트를 구성하십시오. + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +그런 다음 설치하십시오. + +~~~bash +npm install @dhx/trial-react-spreadsheet +~~~ + +## 상용 버전 (비공개 npm) {#commercial-version-private-npm} + +상용 버전은 동일한 비공개 레지스트리를 사용합니다. 자격 증명을 얻으려면 [고객 영역](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses)에서 계정에 로그인하십시오. + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +~~~bash +npm install @dhx/react-spreadsheet +~~~ + +## 패키지 변형 {#package-variants} + +| 변형 | 패키지 이름 | 레지스트리 | +|---------|-------------|----------| +| 평가판 (공개 npm) | `@dhtmlx/trial-react-spreadsheet` | npmjs.org (공개) | +| 평가판 (비공개 npm) | `@dhx/trial-react-spreadsheet` | npm.dhtmlx.com (비공개) | +| 상용 | `@dhx/react-spreadsheet` | npm.dhtmlx.com (비공개) | + +## CSS 가져오기 {#css-import} + +애플리케이션 진입점 또는 컴포넌트에서 스타일시트를 가져오십시오. + +~~~tsx +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +상용 버전의 경우: + +~~~tsx +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +## TypeScript {#typescript} + +TypeScript 타입 정의가 패키지에 포함되어 있습니다. 별도의 `@types/` 패키지가 필요하지 않습니다. + +## 다음 단계 {#next-steps} + +- [빠른 시작](react/quick-start.md) - 단계별로 첫 번째 스프레드시트 앱 만들기 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/localization.md new file mode 100644 index 00000000..0756a722 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/localization.md @@ -0,0 +1,75 @@ +--- +sidebar_label: Localization +title: React Spreadsheet 로컬라이제이션 +description: "React Spreadsheet에서 UI 레이블, 수식 이름, 숫자/날짜 형식을 로컬라이즈하는 방법." +--- + +# React Spreadsheet 로컬라이제이션 {#react-spreadsheet-localization} + +React Spreadsheet는 UI의 서로 다른 측면을 위한 두 가지 별개의 로컬라이제이션 메커니즘을 제공합니다. + +## 두 가지 로컬라이제이션 메커니즘 {#two-localization-mechanisms} + +| 메커니즘 | Prop | 제어 대상 | +|-----------|------|-----------------| +| UI 로컬라이제이션 | `spreadsheetLocale` | 메뉴 레이블, 툴바 툴팁, 대화 상자 텍스트, 로컬라이즈된 수식 이름 | +| 숫자/날짜 형식 지정 | `localization` | 소수점 구분 기호, 통화 기호, 날짜/시간 표시 형식 | + +이 props는 독립적입니다. 하나 또는 둘 다 사용할 수 있습니다. + +## UI 로컬라이제이션 (spreadsheetLocale) {#ui-localization-spreadsheetlocale} + +`spreadsheetLocale` prop은 두 가지 속성을 가진 [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) 객체를 받습니다. + +- `locale` - UI 문자열 재정의의 `Record` +- `formulas` - 카테고리별로 그룹화된 로컬라이즈된 수식 이름의 `Record` + +~~~tsx +const locale: SpreadsheetLocale = { + locale: { + "File": "Datei", + "Edit": "Bearbeiten", + "Insert": "Einfügen", + "Undo": "Rückgängig", + "Redo": "Wiederherstellen", + // ... 더 많은 UI 문자열 + }, + formulas: { + "MATCH": [ + ["Suchwert", "Erforderlich. Der Wert, der im Sucharray abgeglichen werden soll."], + ["Sucharray", "Erforderlich. Ein Zellbereich oder ein Array-Bezug."], + ], + // ... 더 많은 수식 카테고리 + }, +}; + + +~~~ + +:::warning +`spreadsheetLocale`은 초기화 전용 prop입니다. 초기 렌더링 후 이 값을 변경하면 위젯이 소멸되고 재생성됩니다. 실행 취소/다시 실행 기록과 UI 상태(선택 영역, 스크롤 위치)가 초기화됩니다. +::: + +## 숫자/날짜 형식 지정 (localization) {#numberdate-formatting-localization} + +`localization` prop은 숫자와 날짜의 표시 방식을 제어합니다. 소수점 구분 기호, 통화 기호, 날짜 패턴을 설정합니다. DHTMLX Spreadsheet [`localization`](api/spreadsheet_localization_config.md) 구성 속성과 동일한 형식을 사용합니다. + +~~~tsx + +~~~ + +:::warning +`localization`도 초기화 전용 prop입니다. 값을 변경하면 전체 소멸/재생성 주기가 실행됩니다. +::: + +## 관련 API 및 가이드 {#related-api-and-guides} + +- [로컬라이제이션](localization.md) - DHTMLX Spreadsheet 로컬라이제이션 가이드 +- [SpreadsheetLocale 타입](react/types.md#spreadsheetlocale) - TypeScript 인터페이스 레퍼런스 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/nextjs.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/nextjs.md new file mode 100644 index 00000000..710ef297 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/nextjs.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Next.js +title: Next.js에서 React Spreadsheet 사용 +description: "Next.js 애플리케이션의 App Router에서 DHTMLX React Spreadsheet를 사용하는 방법." +--- + +# Next.js에서 React Spreadsheet 사용 {#react-spreadsheet-in-nextjs} + +DHTMLX Spreadsheet는 브라우저 DOM에 대한 접근이 필요한 클라이언트 사이드 위젯입니다. App Router를 사용하는 Next.js에서는 서버 컴포넌트가 기본값이므로 `"use client"` 지시어를 사용하여 스프레드시트를 클라이언트 컴포넌트로 감싸야 합니다. + +:::note +React Spreadsheet 래퍼의 JS 출력에는 이미 `"use client"` 배너가 포함되어 있지만, 이를 가져오는 자체 컴포넌트 파일에도 지시어를 추가해야 합니다. +::: + +## 설정 {#setup} + +새 Next.js 프로젝트를 생성하고 React Spreadsheet를 설치하십시오. + +~~~bash +npx create-next-app@latest my-spreadsheet-app +cd my-spreadsheet-app +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +## 클라이언트 컴포넌트 생성 {#creating-a-client-component} + +`"use client"` 지시어를 포함한 스프레드시트 컴포넌트를 위한 새 파일을 생성하십시오. + +~~~tsx title="src/components/SpreadsheetView.tsx" +"use client"; + +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +const initialSheets: SheetData[] = [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Name", css: "bold" }, + B1: { value: "Value", css: "bold" }, + A2: { value: "Item 1" }, + B2: { value: 100 }, + }, + }, +]; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +export default function SpreadsheetView() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} +~~~ + +## CSS 가져오기 {#css-import} + +위와 같이 클라이언트 컴포넌트에 직접 CSS 파일을 가져오거나 루트 레이아웃에서 가져오십시오. + +~~~tsx title="src/app/layout.tsx" +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +## 컨테이너 크기 지정 {#container-sizing} + +컨테이너에 명시적인 크기를 지정해야 합니다. 전체 페이지 스프레드시트를 위해서는 전역 CSS에 다음 스타일을 추가하십시오. + +~~~css title="src/app/globals.css" +html, +body { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## 전체 예시 {#complete-example} + +서버 페이지에서 클라이언트 컴포넌트를 사용하십시오. + +~~~tsx title="src/app/page.tsx" +import SpreadsheetView from "@/components/SpreadsheetView"; + +export default function Home() { + return ; +} +~~~ + +## 관련 API 및 가이드 {#related-api-and-guides} + +- [Props 레퍼런스](react/props.md) - 타입과 기본값이 포함된 모든 컴포넌트 props +- [Events 레퍼런스](react/events.md) - 사용자 액션에 응답하기 +- [상태 관리 기초](react/state/state-management-basics.md) - React 상태에서 스프레드시트 데이터 관리 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/overview.md new file mode 100644 index 00000000..5b85ed99 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/overview.md @@ -0,0 +1,207 @@ +--- +sidebar_label: Overview +title: React Spreadsheet 개요 +description: "공식 React 래퍼 개요: 선언형 데이터 모델, props, 테마, 이벤트, ref 접근." +--- + +# React Spreadsheet 개요 {#react-spreadsheet-overview} + +`ReactSpreadsheet`는 DHTMLX Spreadsheet 위젯의 선언형 React 래퍼입니다. props가 스프레드시트 상태를 기술하는 컴포넌트 기반 API를 제공하며, 래퍼가 기본 위젯과의 동기화를 처리합니다. + +:::note +React Spreadsheet 래퍼는 DHTMLX Spreadsheet **Commercial**, **Enterprise**, **Ultimate** 라이선스에서 사용할 수 있습니다. 평가를 위해서는 30일 무료 평가판 패키지를 사용하십시오. 설정 지침은 [설치](react/installation.md)를 참조하십시오. +::: + +## 스프레드시트 기능 {#spreadsheet-features} + +React 래퍼는 DHTMLX Spreadsheet의 전체 기능 세트에 접근할 수 있습니다. + +- 시트 탭이 있는 멀티 시트 스프레드시트(추가, 삭제, 이름 변경) +- 셀 값, 수식(90개 이상의 내장 함수), 숫자 형식 지정 +- 셀 스타일 지정, 셀 병합, 고정 창, 데이터 유효성 검사 +- 정렬, 필터링, 검색 +- 행/열 작업(추가, 삭제, 숨기기/표시, 크기 조정, 자동 맞춤) +- WebAssembly 모듈을 통한 Excel(XLSX) 가져오기 및 내보내기 +- 사용자 정의 가능한 툴바 및 컨텍스트 메뉴 +- 셀 잠금 및 읽기 전용 모드 +- CSS 변수 커스터마이징이 가능한 4가지 내장 테마(light, dark, contrast-light, contrast-dark) +- UI 레이블, 수식 이름, 숫자/날짜 형식 로컬라이제이션 +- 실행 취소/다시 실행 기록 +- 번들된 타입 정의 및 JSDoc 설명이 포함된 TypeScript 지원 + +## 래퍼 설계 원칙 {#wrapper-design-principles} + +- **Props는 액션이 아닌 상태를 기술합니다.** "트리거" props는 없습니다. 데이터를 전달하면 컴포넌트가 위젯을 그에 맞게 업데이트합니다. +- **`sheets`는 모든 스프레드시트 데이터의 단일 정보 소스입니다.** 셀, 병합 범위, 고정 창, 필터, 정렬이 포함됩니다. +- **Ref는 탈출구입니다.** 선언형 props에 매핑되지 않는 작업(내보내기, 프로그래밍 방식 선택, 실행 취소/다시 실행)의 경우 ref를 통해 기본 위젯 인스턴스에 접근하십시오. +- **모든 위젯 이벤트는 타입이 지정된 `onXxx` 콜백 props로 노출됩니다.** "Before" 콜백은 `false`를 반환하여 작업을 취소할 수 있습니다. + +## 버전 요구 사항 {#version-requirements} + +- React 18+ +- ESM 전용 패키지 + +## 빠른 시작 {#quick-start} + +하나의 시트와 서식이 지정된 셀로 스프레드시트를 렌더링하는 최소 동작 예시입니다. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + }, + }, + ]); + + const styles = { + bold: { "font-weight": "bold" }, + }; + + return ; +} +~~~ + +## 가져오기 경로 {#import-paths} + +**평가판** (공개 npm, 30일 무료 평가판): + +~~~tsx +import { ReactSpreadsheet } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +**상용** (비공개 npm, 라이선스 필요): + +~~~tsx +import { ReactSpreadsheet } from "@dhx/react-spreadsheet"; +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +레지스트리 구성 및 사용 가능한 모든 패키지 변형은 [설치](react/installation.md)를 참조하십시오. + +## Prop 업데이트 동작 {#prop-update-behavior} + +Props는 컴포넌트가 변경 사항을 처리하는 방식에 따라 분류됩니다. + +| 카테고리 | Props | 변경 시 동작 | +|----------|-------|----------------------| +| **초기화 전용** | `menu`, `editLine`, `toolbarBlocks`, `multiSheets`, `formats`, `localization`, `importModulePath`, `exportModulePath`, `spreadsheetLocale` | 위젯이 소멸되고 재생성됩니다. 스프레드시트 데이터는 보존되지만 실행 취소/다시 실행 기록과 UI 상태(선택 영역, 스크롤 위치)는 초기화됩니다. | +| **런타임** | `readonly`, `rowsCount`, `colsCount` | 데이터 손실이나 UI 상태 초기화 없이 즉시 적용됩니다. | +| **데이터** | `sheets`, `activeSheet` | 증분 방식으로 적용됩니다. 변경된 셀, 범위 또는 설정만 업데이트됩니다. | +| **재파싱** | `styles` | 스타일 변경 시 전체 데이터 재로드가 필요합니다. 스프레드시트 데이터는 보존되지만 실행 취소/다시 실행 기록과 UI 상태는 초기화됩니다. | +| **상태** | `search`, `theme`, `loadUrl` | 전용 위젯 API를 통해 부작용 없이 적용됩니다. | +| **컨테이너** | `className`, `style` | 래퍼 `
`에 적용되는 표준 React DOM props입니다. | + +## 예시 {#examples} + +### 수식이 있는 멀티 시트 {#multi-sheet-with-formulas} + +시트 탭이 활성화된 상태에서 셀 값과 `SUM` 수식이 있는 두 개의 시트입니다. + +~~~tsx +const [sheets] = useState([ + { + id: "revenue", + name: "Revenue", + cells: { + A1: { value: "Q1" }, B1: { value: "Q2" }, C1: { value: "Q3" }, D1: { value: "Q4" }, + A2: { value: 12000 }, B2: { value: 15000 }, C2: { value: 18000 }, D2: { value: 21000 }, + A3: { value: "Total" }, B3: { value: "=SUM(A2:D2)", format: "currency" }, + }, + }, + { + id: "expenses", + name: "Expenses", + cells: { + A1: { value: "Category" }, B1: { value: "Amount", format: "currency" }, + A2: { value: "Marketing" }, B2: { value: 5000, format: "currency" }, + A3: { value: "Operations" }, B3: { value: 8000, format: "currency" }, + }, + }, +]); + + +~~~ + +### 사용자 정의 툴바 {#custom-toolbar} + +`toolbarBlocks`에 블록 식별자 배열을 전달하여 필요한 툴바 섹션만 표시하십시오. + +~~~tsx + +~~~ + +### 잠긴 셀이 있는 읽기 전용 {#read-only-with-locked-cells} + +`readonly={true}`를 설정하면 위젯 수준에서 모든 편집이 비활성화됩니다. 셀에 `locked: true`를 추가하면 스프레드시트가 읽기 전용 모드가 아닐 때 개별 셀을 보호합니다. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Report", + cells: { + A1: { value: "Metric", locked: true }, + B1: { value: "Value", locked: true }, + A2: { value: "Revenue", locked: true }, + B2: { value: 50000, format: "currency", locked: true }, + }, + }, +]; + + +~~~ + +## ref를 통한 명령형 접근 {#imperative-access-via-ref} + +`SpreadsheetRef`를 사용하여 데이터 직렬화, 실행 취소/다시 실행 트리거, 프로그래밍 방식의 선택 설정과 같이 선언형 props에 매핑되지 않는 작업에 기본 위젯 인스턴스에 접근하십시오. + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + + const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); + }; + + const handleUndo = () => { + ref.current?.instance?.undo(); + }; + + return ( + <> + + + + + ); +} +~~~ + +`instance` 속성은 위젯이 초기화되기 전과 언마운트 후에는 `null`입니다. + +## API 참조 {#api-reference} + +| 문서 | 내용 | +|----------|----------| +| [Props 레퍼런스](react/props.md) | 타입, 기본값, 예시가 포함된 모든 컴포넌트 props | +| [Events 레퍼런스](react/events.md) | 카테고리별로 분류된 이벤트 콜백 props | +| [Types 레퍼런스](react/types.md) | TypeScript 인터페이스, 열거형, 타입 별칭 | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/props.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/props.md new file mode 100644 index 00000000..38d055cc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/props.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Props +title: Props 레퍼런스 +description: "타입과 예시가 포함된 ReactSpreadsheet 컴포넌트의 모든 props에 대한 완전한 레퍼런스." +--- + +# Props 레퍼런스 {#props-reference} + +모든 props는 선택 사항입니다. props가 제공되지 않으면 컴포넌트는 기본 설정으로 빈 스프레드시트를 렌더링합니다. + +## 초기화 전용 props {#init-only-props} + +이 props 중 하나라도 변경하면 위젯이 소멸되고 재생성됩니다. 스프레드시트 데이터는 보존되지만 실행 취소/다시 실행 기록과 UI 상태(선택 영역, 스크롤 위치)는 초기화됩니다. + +
+ +| Prop | 타입 | 설명 | +|------|------|-------------| +| `menu` | `boolean` | 컨텍스트 메뉴를 표시합니다. JS API: [`menu`](api/spreadsheet_menu_config.md) 참조. | +| `editLine` | `boolean` | 그리드 위에 수식/편집줄을 표시합니다. JS API: [`editLine`](api/spreadsheet_editline_config.md) 참조. | +| `toolbarBlocks` | `ToolbarBlocks[]` | 표시할 툴바 블록입니다. JS API: [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 참조. | +| `multiSheets` | `boolean` | 여러 시트 탭을 활성화합니다. JS API: [`multisheets`](api/spreadsheet_multisheets_config.md) 참조. | +| `formats` | `IFormats[]` | 사용자 정의 숫자 형식 정의입니다. JS API: [`formats`](api/spreadsheet_formats_config.md) 참조. | +| `localization` | `ISpreadsheetConfig["localization"]` | 소수점 구분 기호 및 통화 기호와 같은 숫자/날짜 형식 지정 로케일입니다. `spreadsheetLocale`과는 별개입니다. JS API: [`localization`](api/spreadsheet_localization_config.md) 참조. | +| `importModulePath` | `string` | XLSX 가져오기 모듈의 경로입니다. JS API: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) 참조. | +| `exportModulePath` | `string` | XLSX 내보내기 모듈의 경로입니다. JS API: [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md) 참조. | +| `spreadsheetLocale` | [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) | UI 번역 및 로컬라이즈된 수식 이름입니다. `localization`과는 별개입니다. | + +
+ +:::warning +초기화 전용 prop을 변경하면 전체 소멸/재생성 주기가 실행됩니다. 실행 취소/다시 실행 기록, 선택 영역, 스크롤 위치가 초기화됩니다. +::: + +## 런타임 props {#runtime-props} + +이 props는 위젯을 소멸시키지 않고 즉시 적용됩니다. 데이터 손실이나 UI 상태 초기화가 없습니다. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `rowsCount` | `number` | 그리드의 행 수입니다. JS API: [`rowsCount`](api/spreadsheet_rowscount_config.md) 참조. | +| `colsCount` | `number` | 그리드의 열 수입니다. JS API: [`colsCount`](api/spreadsheet_colscount_config.md) 참조. | +| `readonly` | `boolean` | 읽기 전용 모드를 활성화합니다. JS API: [`readonly`](api/spreadsheet_readonly_config.md) 참조. | + +## 데이터 props {#data-props} + +`sheets` prop은 모든 스프레드시트 콘텐츠의 단일 정보 소스입니다. 변경 사항은 증분 방식으로 적용됩니다. 수정된 셀, 범위 또는 설정만 위젯에서 업데이트됩니다. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `sheets` | [`SheetData[]`](react/types.md#sheetdata) | 모든 스프레드시트 데이터의 단일 정보 소스입니다. 각 항목은 셀, 구조, 메타데이터가 있는 시트를 나타냅니다. 변경 사항은 증분 방식으로 적용됩니다. | +| `styles` | `Record>` | `CellData.css`에서 참조하는 공유 CSS 스타일 정의입니다. 키는 클래스 이름이고 값은 CSS 속성 맵입니다. [스타일 예시](#styles-example) 참조. | +| `activeSheet` | `Id` | 활성(표시) 시트의 Id입니다. 이 값을 변경하면 표시되는 시트 탭이 전환됩니다. | + +:::warning +`styles`를 변경하면 전체 데이터 재로드가 실행됩니다. 스프레드시트 데이터는 보존되지만 실행 취소/다시 실행 기록과 UI 상태(선택 영역, 스크롤 위치)는 초기화됩니다. +::: + +## 검색 props {#search-props} + +컴포넌트 외부에서 검색 표시줄 상태를 제어합니다. 사용자 정의 검색 UI를 구축하려면 `onSearchResults`와 함께 사용하십시오. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `search` | [`SearchConfig`](react/types.md#searchconfig) | 제어된 검색 상태입니다. 검색을 트리거/업데이트하려면 `SearchConfig` 객체를 전달하십시오. 검색 표시줄을 닫으려면 `undefined`를 전달하십시오. | + +## 데이터 로딩 props {#data-loading-props} + +`sheets` prop을 통해 데이터를 제공하는 대신 원격 URL에서 스프레드시트 데이터를 로드합니다. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `loadUrl` | `string` | 스프레드시트 데이터를 로드할 URL입니다. `loadUrl`과 `sheets`가 모두 제공된 경우 `sheets`가 우선합니다. | +| `loadFormat` | `FileFormat` | `loadUrl`의 파일 형식 힌트입니다. 기본값: `"json"`. | + +## 테마 prop {#theme-prop} + +스프레드시트에 적용되는 시각적 테마를 제어합니다. `theme`은 런타임 prop이므로 값이 변경되면 위젯이 즉시 업데이트됩니다. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `theme` | [`SpreadsheetTheme`](react/types.md#spreadsheettheme) | 색상 테마입니다. 내장 값: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. 사용자 정의 테마 이름 문자열도 허용합니다. [테마](react/themes.md) 참조. | + +## 컨테이너 props {#container-props} + +스프레드시트를 포함하는 래퍼 `
`에 적용되는 표준 React DOM props입니다. 크기 및 레이아웃을 제어하는 데 사용하십시오. + +| Prop | 타입 | 설명 | +|------|------|-------------| +| `className` | `string` | 래퍼 `
`에 추가되는 CSS 클래스 이름입니다. | +| `style` | `React.CSSProperties` | 래퍼 `
`에 적용되는 인라인 스타일입니다. | + +--- + +## 예시 {#examples} + +### 셀 데이터가 있는 시트 {#sheets-with-cell-data} + +셀, 행/열 크기, 병합 범위, 고정된 헤더 행이 있는 전체 `SheetData` 예시입니다. + +~~~tsx +const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Budget", + cells: { + A1: { value: "Item", css: "header" }, + B1: { value: "Amount", css: "header", format: "currency" }, + A2: { value: "Rent" }, + B2: { value: 2000, format: "currency" }, + A3: { value: "=SUM(B2:B3)" }, + }, + rows: { 0: { height: 40 } }, + cols: { 0: { width: 150 }, 1: { width: 120 } }, + merged: [{ + from: { row: 0, column: 0 }, + to: { row: 0, column: 1 } + }], + freeze: { row: 1 }, + }, +]); + + +~~~ + +### 스타일 예시 {#styles-example} + +`styles` prop에서 CSS 속성 맵으로 명명된 스타일을 정의한 후 `CellData.css`를 통해 이름으로 참조하십시오. + +~~~tsx +const styles = { + header: { + "font-weight": "bold", + "background": "#e3f2fd", + "color": "#1565c0", + }, + highlight: { + "background": "#ffeb3b", + "color": "#333", + }, +}; + + +~~~ + +### 툴바 커스터마이징 {#toolbar-customization} + +~~~tsx + +~~~ + +### 멀티 시트 모드 {#multi-sheet-mode} + +`multiSheets={true}`로 시트 탭을 활성화하십시오. `false`를 전달하면 탭 표시줄이 완전히 숨겨집니다. + +~~~tsx + +~~~ + +~~~tsx + +~~~ + +### Excel 가져오기/내보내기 {#excel-importexport} + +~~~tsx + +~~~ + +특정 버전을 사용하려면 `next`를 버전 번호로 교체하십시오([Excel2Json](https://github.com/dhtmlx/excel2json) 및 [Json2Excel](https://github.com/dhtmlx/json2excel) GitHub 저장소 확인). + +### 유럽식 숫자 형식 {#european-number-formatting} + +~~~tsx + +~~~ + +### 제어된 검색 {#controlled-search} + +`SearchConfig` 객체를 전달하여 프로그래밍 방식으로 검색 표시줄을 열 수 있습니다. 일치하는 셀 참조를 받으려면 `onSearchResults`를 사용하십시오. + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} /> + +

Found in: {results.join(", ")}

+ + +~~~ + +### 테마 전환 {#theme-switching} + +~~~tsx +const [theme, setTheme] = useState("light"); + + + + +~~~ + +### 읽기 전용 모드 {#read-only-mode} + +~~~tsx + +~~~ + +### URL에서 데이터 로드 {#loading-data-from-url} + +~~~tsx + +~~~ + +### 잠긴 셀 {#locked-cells} + +`locked: true`로 개별 셀을 편집 불가능하게 표시합니다. `readonly`와 달리 이 옵션은 나머지 시트를 편집 가능한 상태로 유지하면서 특정 셀을 보호합니다. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Protected", + cells: { + A1: { value: "Header", locked: true }, + A2: { value: "Editable" }, + }, + }, +]; + + +~~~ + +### 셀 유효성 검사 {#cell-validation} + +`CellData.validation`에 문자열 배열을 전달하여 셀을 허용된 값의 드롭다운으로 제한하십시오. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Form", + cells: { + A1: { value: "Status" }, + B1: { validation: ["Active", "Inactive", "Pending"] }, + }, + }, +]; + + +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/quick-start.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/quick-start.md new file mode 100644 index 00000000..1472266e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/quick-start.md @@ -0,0 +1,107 @@ +--- +sidebar_label: 빠른 시작 +title: React Spreadsheet 빠른 시작 +description: "DHTMLX React Spreadsheet 컴포넌트를 처음 렌더링하기 위한 단계별 가이드입니다." +--- + +# React Spreadsheet 빠른 시작 {#quick-start-with-react-spreadsheet} + +이 튜토리얼은 DHTMLX Spreadsheet를 사용하여 React 애플리케이션을 처음부터 만드는 방법을 안내합니다. + +## 새 프로젝트 만들기 {#create-a-new-project} + +~~~bash +npm create vite@latest my-spreadsheet-app -- --template react-ts +cd my-spreadsheet-app +~~~ + +## React Spreadsheet 설치 {#install-react-spreadsheet} + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +다른 패키지 변형에 대해서는 [설치](react/installation.md)를 참조하십시오. + +## 데모 데이터 만들기 {#create-demo-data} + +샘플 스프레드시트 데이터가 담긴 `src/data.ts` 파일을 만드십시오. + +~~~ts title="src/data.ts" +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +export const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + A3: { value: "Gadget" }, + B3: { value: 22000, format: "currency" }, + A4: { value: "Total" }, + B4: { value: "=SUM(B2:B3)", format: "currency" }, + }, + }, +]; + +export const styles = { + bold: { "font-weight": "bold" }, +}; +~~~ + +## 컴포넌트 만들기 {#create-the-component} + +`src/App.tsx`의 내용을 다음으로 교체하십시오. + +~~~tsx title="src/App.tsx" +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import { sheets as initialSheets, styles } from "./data"; + +function App() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## 스타일 추가 {#add-styles} + +전체 높이 레이아웃을 위해 `src/index.css`를 업데이트하십시오. + +~~~css title="src/index.css" +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## 앱 시작 {#start-the-app} + +~~~bash +npm run dev +~~~ + +터미널에 표시된 URL(일반적으로 `http://localhost:5173`)을 열어 스프레드시트를 확인하십시오. + +## 관련 API 및 가이드 {#related-api-and-guides} + +- [Props 레퍼런스](react/props.md) - 스프레드시트 동작 구성 +- [이벤트 레퍼런스](react/events.md) - 사용자 동작에 응답 +- [타입 레퍼런스](react/types.md) - TypeScript 인터페이스 및 열거형 +- [데이터 & 상태 관리](react/state/state-management-basics.md) - 애플리케이션 상태에서 스프레드시트 데이터 관리 + +전체 동작 예제는 [GitHub 데모 저장소](https://github.com/DHTMLX/react-spreadsheet-examples)에서도 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/state/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/index.md new file mode 100644 index 00000000..3eaf0ba4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/index.md @@ -0,0 +1,21 @@ +--- +sidebar_label: "데이터 & 상태" +title: "데이터 & 상태 관리" +description: "React 상태 또는 상태 관리 라이브러리에서 DHTMLX Spreadsheet 데이터를 관리하기 위한 패턴입니다." +--- + +# 데이터 & 상태 관리 {#data--state-management} + +이 섹션에서는 기본 React `useState`부터 상태 관리 라이브러리까지, 스프레드시트 데이터를 애플리케이션 상태와 동기화하여 관리하는 패턴을 다룹니다. + +## 시작하기 {#start-here} + +- [상태 관리 기초](react/state/state-management-basics.md) - 핵심 패턴: 제어 props, 이벤트 콜백, ref 탈출구, 그리고 성능 팁 + +## 상태 라이브러리 가이드 {#state-library-guides} + +- [Redux Toolkit](react/state/redux-toolkit.md) - Redux Toolkit을 사용한 단계별 연동 방법 + +## 핵심 개념 {#key-concept} + +`sheets` prop은 모든 스프레드시트 데이터의 **단일 정보 출처(single source of truth)**입니다. [`SheetData`](react/types.md#sheetdata) 객체 배열을 전달하면 래퍼가 데이터를 현재 위젯 상태와 비교하여 변경 사항만 적용합니다. React가 변경 사항을 효율적으로 감지할 수 있도록 불변 업데이트(spread 연산자, 함수형 `setState` updater)를 사용하십시오. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md new file mode 100644 index 00000000..bb3550fe --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md @@ -0,0 +1,183 @@ +--- +sidebar_label: Redux toolkit +title: Redux Toolkit을 사용한 React Spreadsheet +description: "DHTMLX React Spreadsheet와 Redux Toolkit의 단계별 연동 방법입니다." +--- + +# Redux Toolkit을 사용한 React Spreadsheet {#react-spreadsheet-with-redux-toolkit} + +이 튜토리얼은 Redux Toolkit 스토어에서 스프레드시트 데이터를 관리하는 방법을 설명합니다. + +## 사전 요구 사항 {#prerequisites} + +- React, TypeScript, 그리고 [Redux Toolkit](https://redux-toolkit.js.org/) 기초에 대한 이해 +- [상태 관리 기초](react/state/state-management-basics.md) 가이드 완료 + +## 설정 {#setup} + +Vite 프로젝트를 만들고 의존성을 설치하십시오. + +~~~bash +npm create vite@latest my-rtk-spreadsheet -- --template react-ts +cd my-rtk-spreadsheet +npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux +~~~ + +## slice 만들기 {#create-the-slice} + +Redux Toolkit slice에서 스프레드시트 상태 형태, 초기 데이터, 그리고 reducer를 정의하십시오. + +~~~ts title="src/store/spreadsheetSlice.ts" +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +interface SpreadsheetState { + sheets: SheetData[]; + activeSheet: string; +} + +const initialState: SpreadsheetState = { + sheets: [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Price", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 25.99, format: "currency" }, + }, + }, + ], + activeSheet: "sheet1", +}; + +const spreadsheetSlice = createSlice({ + name: "spreadsheet", + initialState, + reducers: { + setSheets(state, action: PayloadAction) { + state.sheets = action.payload; + }, + setActiveSheet(state, action: PayloadAction) { + state.activeSheet = action.payload; + }, + updateCell( + state, + action: PayloadAction<{ sheetId: string; cell: string; value: string | number }> + ) { + const { sheetId, cell, value } = action.payload; + const sheet = state.sheets.find((s) => s.id === sheetId); + if (sheet) { + sheet.cells[cell] = { ...sheet.cells[cell], value }; + } + }, + }, +}); + +export const { setSheets, setActiveSheet, updateCell } = spreadsheetSlice.actions; +export default spreadsheetSlice.reducer; +~~~ + +## 스토어 구성 {#configure-the-store} + +Redux 스토어에 slice를 등록하고 타입이 지정된 `RootState` 및 `AppDispatch` 헬퍼를 내보내십시오. + +~~~ts title="src/store/index.ts" +import { configureStore } from "@reduxjs/toolkit"; +import spreadsheetReducer from "./spreadsheetSlice"; + +export const store = configureStore({ + reducer: { + spreadsheet: spreadsheetReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +앱을 provider로 감싸십시오. + +~~~tsx title="src/main.tsx" +import React from "react"; +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import { store } from "./store"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + +); +~~~ + +## 컴포넌트 만들기 {#create-the-component} + +상태를 읽기 위해 `useSelector`를, 각 사용자 동작 후 변경 사항을 동기화하기 위해 `useDispatch`를 사용하여 `ReactSpreadsheet`를 Redux 스토어에 연결하십시오. + +~~~tsx title="src/App.tsx" +import { useRef } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import type { RootState } from "./store"; +import { setSheets } from "./store/spreadsheetSlice"; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +function App() { + const ref = useRef(null); + const dispatch = useDispatch(); + const sheets = useSelector((state: RootState) => state.spreadsheet.sheets); + const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data?.sheets) { + dispatch(setSheets(data.sheets)); + } + }; + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## ref를 통한 데이터 읽기 {#reading-data-via-ref} + +직렬화(serialization)나 셀 값 가져오기와 같은 읽기 전용 작업에는 `ref.current.instance`를 사용하십시오. + +~~~tsx +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + // API 전송, 다운로드 등 +}; + +const getCellValue = (cell: string) => { + return ref.current?.instance?.getValue(cell); +}; +~~~ + +## 관련 API 및 가이드 {#related-api-and-guides} + +- [Props 레퍼런스](react/props.md) - 모든 컴포넌트 props +- [이벤트 레퍼런스](react/events.md) - 이벤트 콜백 props +- [상태 관리 기초](react/state/state-management-basics.md) - 핵심 패턴 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md new file mode 100644 index 00000000..eced2be1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md @@ -0,0 +1,172 @@ +--- +sidebar_label: 기초 +title: 데이터 바인딩 & 상태 관리 기초 +description: "React에서 스프레드시트 데이터를 관리하기 위한 핵심 패턴: 제어 props, 이벤트 콜백, ref 탈출구." +--- + +# 데이터 바인딩 & 상태 관리 기초 {#data-binding--state-management-basics} + +## 선언적 모델 {#the-declarative-model} + +React Spreadsheet는 선언적 접근 방식을 따릅니다. 시트 데이터를 React 상태에 저장하고 props로 전달하면, 래퍼가 데이터를 현재 위젯 상태와 자동으로 비교하여 변경 사항만 적용합니다. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Hello" }, + }, + }, + ]); + + return ; +} +~~~ + +## 셀 업데이트 {#updating-cells} + +함수형 `setState` updater를 사용하여 불변 상태 업데이트를 수행하십시오. + +~~~tsx +const updateCell = (sheetId: string, cell: string, value: string | number) => { + setSheets((prev) => + prev.map((sheet) => + sheet.id === sheetId + ? { + ...sheet, + cells: { + ...sheet.cells, + [cell]: { ...sheet.cells[cell], value }, + }, + } + : sheet + ) + ); +}; +~~~ + +## 사용자 동작에 응답 {#responding-to-user-actions} + +`onAfterAction`을 사용하여 사용자 변경에 반응하십시오. `ref`와 함께 사용하면 현재 위젯 데이터를 읽을 수 있습니다. + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [sheets, setSheets] = useState([/* ... */]); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data) { + // 위젯 상태를 React 상태로 동기화 + console.log("Spreadsheet data:", data); + } + }; + + return ( + + ); +} +~~~ + +## ref 탈출구 {#the-ref-escape-hatch} + +선언적 props에 매핑되지 않는 작업의 경우, [`SpreadsheetRef`](react/types.md#spreadsheetref)를 사용하여 기본 위젯 인스턴스에 접근하십시오. + +- **데이터 직렬화:** `ref.current?.instance?.serialize()` +- **실행 취소/다시 실행:** `ref.current?.instance?.undo()` / `ref.current?.instance?.redo()` +- **셀 값 가져오기:** `ref.current?.instance?.getValue("A1")` +- **프로그래밍 방식 선택:** `ref.current?.instance?.selection.setSelectedCell("A1:C5")` + +~~~tsx +const ref = useRef(null); + +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); +}; + + +~~~ + +:::warning +명령형 쓰기(예: `instance.setValue()`)를 선언적 `sheets` prop과 혼용하지 마십시오. 래퍼가 다음 렌더 사이클에서 명령형 변경 사항을 덮어쓸 수 있습니다. ref는 데이터 **읽기** 및 실행 취소/다시 실행, 선택, 내보내기와 같은 작업에만 사용하십시오. +::: + +## 제어 검색 {#controlled-search} + +제어 검색을 위해 `search` prop을 `onSearchResults`와 함께 사용하십시오. + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +## 실행 취소 / 다시 실행 {#undo--redo} + +`onStateChange`를 사용하여 실행 취소/다시 실행 가능 여부를 추적하고, ref를 통해 `undo()`/`redo()`를 호출하십시오. + +~~~tsx +const ref = useRef(null); +const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + + + + +~~~ + +## 성능 {#performance} + +- 불필요한 재계산을 방지하기 위해 파생 시트에 `useMemo`를 사용하십시오. + +~~~tsx +const filteredSheets = useMemo( + () => sheets.filter((s) => s.name !== "Hidden"), + [sheets] +); + + +~~~ + +- 렌더링마다 `styles` 객체가 새로 생성되지 않도록 컴포넌트 외부에 정의하거나 `useMemo`로 감싸십시오. +- 이벤트 콜백에서 오래된 클로저 문제를 피하기 위해 함수형 `setState` updater를 사용하십시오. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/themes.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/themes.md new file mode 100644 index 00000000..ab21cae1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/themes.md @@ -0,0 +1,93 @@ +--- +sidebar_label: 테마 +title: React Spreadsheet 테마 +description: "DHTMLX React Spreadsheet에 내장 테마 또는 커스텀 테마를 적용합니다." +--- + +# React Spreadsheet 테마 {#react-spreadsheet-themes} + +React Spreadsheet는 네 가지 내장 테마를 제공하며 CSS 변수를 통한 커스텀 테마를 지원합니다. `theme` prop을 사용하여 내장 테마를 선택하거나 직접 정의한 테마를 적용하십시오. + +## 내장 테마 {#built-in-themes} + +[`SpreadsheetTheme`](react/types.md#spreadsheettheme) 타입은 네 가지 내장 테마를 정의합니다. + +- `"light"` (기본값) +- `"dark"` +- `"contrast-light"` +- `"contrast-dark"` + +커스텀 테마 이름을 문자열로 전달할 수도 있습니다. + +## 테마 적용 {#applying-a-theme} + +`ReactSpreadsheet`에 `theme` prop으로 사용하려는 테마 이름을 전달하십시오. + +~~~tsx + +~~~ + +## 런타임 전환 {#switching-at-runtime} + +React 상태를 사용하여 테마를 동적으로 전환하십시오. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData, type SpreadsheetTheme } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([/* ... */]); + const [theme, setTheme] = useState("light"); + + return ( + <> + + + + + ); +} +~~~ + +## 커스텀 CSS 변수 {#custom-css-variables} + +DHTMLX Spreadsheet는 레이어드 CSS 변수 시스템을 사용합니다. 이 변수를 재정의하여 내장 테마 이상으로 외관을 커스터마이즈할 수 있습니다. + +### 커스텀 테마 만들기 {#creating-a-custom-theme} + +커스텀 `data-dhx-theme` 선택자를 정의하고, 필요한 변수를 재정의한 뒤 테마 이름을 prop으로 전달하십시오. + +~~~css title="src/custom-theme.css" +[data-dhx-theme='corporate'] { + /* 색상 체계 */ + --dhx-h-primary: 220; + --dhx-s-primary: 60%; + --dhx-l-primary: 45%; + + /* 툴바 및 그리드 */ + --dhx-s-toolbar-background: #f0f4f8; + --dhx-s-grid-header-background: #e2e8f0; + + /* 스프레드시트 범위 색상 */ + --dhx-spreadsheet-range-background-1: #bee3f8; + --dhx-spreadsheet-range-color-1: #2b6cb0; +} +~~~ + +~~~tsx +import "./custom-theme.css"; + + +~~~ + +## 관련 가이드 {#related-guides} + +- [테마](/themes/) - DHTMLX Spreadsheet의 내장 테마 개요 +- [기본 테마 구성](themes/base_themes_configuration.md) - 기본 테마 구성 +- [커스텀 테마](themes/custom_theme.md) - 커스텀 테마 만들기 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/react/types.md b/i18n/ko/docusaurus-plugin-content-docs/current/react/types.md new file mode 100644 index 00000000..204812a6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/react/types.md @@ -0,0 +1,276 @@ +--- +sidebar_label: 타입 +title: 타입 레퍼런스 +description: "@dhx/react-spreadsheet에서 내보내는 TypeScript 인터페이스, 열거형, 타입 별칭입니다." +--- + +# 타입 레퍼런스 {#types-reference} + +모든 타입은 `@dhx/react-spreadsheet` 또는 `@dhtmlx/trial-react-spreadsheet`에서 내보냅니다. + +~~~tsx +import type { SheetData, CellData, SpreadsheetRef /* ... */ } from "@dhtmlx/trial-react-spreadsheet"; +~~~ + +## CellData {#celldata} + +단일 셀의 선언적 상태입니다. 모든 속성은 선택 사항이며, 생략된 속성은 업데이트 시 현재 값을 유지합니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `value` | `string \| number` | 셀 값: 텍스트, 숫자, 또는 수식 문자열(`=`로 시작). | +| `css` | `string` | 최상위 `styles` 맵의 키를 참조하는 CSS 클래스 이름. | +| `format` | `string` | 숫자 형식 마스크 또는 별칭(예: `"currency"` 또는 `"#,##0.00"`). | +| `locked` | `boolean` | 셀 잠금 여부(편집 보호). | +| `validation` | `string \| string[]` | 데이터 유효성 검사 드롭다운 옵션. | + +## RowConfig {#rowconfig} + +행 메타데이터입니다. 기본값이 아닌 행만 항목을 추가하면 됩니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `height` | `number` | 행 높이(픽셀). | +| `hidden` | `boolean` | 행 숨김 여부. | + +## ColConfig {#colconfig} + +열 메타데이터입니다. 기본값이 아닌 열만 항목을 추가하면 됩니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `width` | `number` | 열 너비(픽셀). | +| `hidden` | `boolean` | 열 숨김 여부. | + +## MergedRange {#mergedrange} + +0-인덱스 행/열 좌표를 사용하여 병합된 셀 범위를 정의합니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `from` | `{ row: number; column: number }` | 병합의 좌상단 모서리(0-인덱스). | +| `to` | `{ row: number; column: number }` | 병합의 우하단 모서리(0-인덱스). | + +**예시:** + +~~~ts +// A1:B2 병합 +const merge: MergedRange = { + from: { row: 0, column: 0 }, + to: { row: 1, column: 1 }, +}; +~~~ + +## FreezeConfig {#freezeconfig} + +시트의 고정 창(freeze pane) 구성입니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `col` | `number` | 이 0-인덱스 열 번호까지 열을 고정합니다. `undefined` = 열 고정 없음. | +| `row` | `number` | 이 0-인덱스 행 번호까지 행을 고정합니다. `undefined` = 행 고정 없음. | + +## SheetFilter {#sheetfilter} + +시트 내 열의 필터 구성입니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `cell` | `string` | 필터링된 열을 식별하는 셀 참조(예: `"A1"`). | +| `rules` | `IFilterRules[]` | 적용할 필터 규칙. 빈 배열은 필터를 지웁니다. | + +## SheetSort {#sheetsort} + +시트 내 열의 정렬 구성입니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `cell` | `string` | 정렬 작업을 위한 셀 참조 또는 범위(예: `"B1"` 또는 `"A1:E8"`). 범위를 사용하면 행 무결성을 유지하면서 여러 열을 함께 정렬할 수 있습니다. | +| `dir` | `1 \| -1` | 정렬 방향: `1` = 오름차순, `-1` = 내림차순. | + +## SheetData {#sheetdata} + +단일 스프레드시트 시트의 완전한 선언적 상태입니다. + +| 속성 | 타입 | 필수 여부 | 설명 | +|----------|------|:--------:|-------------| +| `id` | `Id` | 예 | 고유 시트 식별자. 렌더링 간에 안정적이어야 합니다. | +| `name` | `string` | 예 | 시트 탭에 표시되는 이름. | +| `cells` | `Record` | 예 | 셀 참조를 키로 하는 셀 데이터(예: `"A1"` 또는 `"B2"`). 기본값이 아닌 셀만 항목을 추가하면 됩니다. | +| `rows` | `Record` | 아니요 | 0-인덱스 행 번호를 키로 하는 행 구성. | +| `cols` | `Record` | 아니요 | 0-인덱스 열 번호를 키로 하는 열 구성. | +| `merged` | `MergedRange[]` | 아니요 | 병합된 셀 범위. | +| `freeze` | `FreezeConfig` | 아니요 | 고정 창 구성. | +| `filter` | `SheetFilter` | 아니요 | 열 필터 구성. 지우려면 `undefined`로 설정하십시오. | +| `sort` | `SheetSort` | 아니요 | 정렬 구성. | + +**예시:** + +~~~ts +const sheet: SheetData = { + id: "sheet1", + name: "Inventory", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Quantity", css: "bold" }, + A2: { value: "Laptop" }, + B2: { value: 42 }, + }, + cols: { 0: { width: 200 } }, + freeze: { row: 1 }, +}; +~~~ + +## SearchConfig {#searchconfig} + +제어 검색 상태입니다. 검색을 트리거/업데이트하려면 객체를 전달하고, 닫으려면 `undefined`를 전달하십시오. + +| 속성 | 타입 | 필수 여부 | 설명 | +|----------|------|:--------:|-------------| +| `query` | `string` | 예 | 검색할 텍스트. | +| `open` | `boolean` | 아니요 | 내장 검색 UI 열기 여부. 기본값: `false`. | +| `sheetId` | `Id` | 아니요 | id로 특정 시트에 검색을 제한합니다. | + +## SpreadsheetLocale {#spreadsheetlocale} + +UI 레이블과 수식 이름의 현지화 구성입니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `locale` | `Record` | UI 문자열 재정의. 키는 라이브러리의 로케일 사전과 일치합니다. | +| `formulas` | `Record` | 카테고리별로 그룹화된 현지화된 수식 이름. 각 항목은 튜플: `[localizedName, optionalDescription?]`. | + +## SpreadsheetTheme {#spreadsheettheme} + +~~~ts +type SpreadsheetTheme = "light" | "dark" | "contrast-light" | "contrast-dark" | string; +~~~ + +내장 색상 테마입니다. 커스텀 테마 이름 문자열도 허용합니다. + +## IExecuteConfig {#iexecuteconfig} + +[`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events)에 전달되는 액션 실행 구성입니다. 형태는 액션 타입에 따라 다릅니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `row` | `number` | 대상 행 인덱스. | +| `col` | `number` | 대상 열 인덱스. | +| `target` | `unknown` | 액션별 대상. | +| `val` | `unknown` | 새 값. | +| `prev` | `unknown` | 이전 값. | +| `action` | `Actions \| string` | 액션 식별자. | +| `groupAction` | `Actions \| string` | 상위 그룹 액션 식별자. | +| `cell` | `string` | 셀 참조(예: `"A1"`). | +| `pageId` | `Id` | 대상 시트 id. | +| `pageName` | `string` | 대상 시트 이름. | +| `[key: string]` | `unknown` | 추가적인 액션별 속성. | + +## SpreadsheetRef {#spreadsheetref} + +`React.forwardRef`를 통해 노출되는 명령형 핸들입니다. 선언적 props에 매핑되지 않는 작업을 위해 기본 DHTMLX Spreadsheet 인스턴스에 직접 접근할 수 있습니다. + +| 속성 | 타입 | 설명 | +|----------|------|-------------| +| `instance` | `ISpreadsheet \| null` | 기본 위젯 인스턴스. 초기화 전과 언마운트 후에는 `null`. | + +**예시:** + +~~~tsx +const ref = useRef(null); + +// 데이터 직렬화 +const data = ref.current?.instance?.serialize(); + +// 프로그래밍 방식 선택 +ref.current?.instance?.selection.setSelectedCell("A1:C5"); + +// 실행 취소/다시 실행 +ref.current?.instance?.undo(); +ref.current?.instance?.redo(); +~~~ + +## Actions 열거형 {#actions-enum} + +알려진 스프레드시트 액션 식별자입니다. 타입 안전 액션 매칭을 위해 [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events)에서 사용합니다. 핸들러 파라미터의 `| string` 유니온은 향후 추가될 액션과의 하위 호환성을 보장합니다. + +| 값 | 설명 | +|-------|-------------| +| `setCellStyle` | 셀에 CSS 스타일 적용. | +| `setCellValue` | 셀 값 설정. | +| `setCellFormat` | 셀에 숫자 형식 설정. | +| `removeCellStyles` | 셀에서 CSS 스타일 제거. | +| `lockCell` | 셀 잠금 또는 잠금 해제. | +| `deleteRow` | 행 삭제. | +| `addRow` | 행 삽입. | +| `deleteColumn` | 열 삭제. | +| `addColumn` | 열 삽입. | +| `groupAction` | 일괄 액션(여러 하위 액션). | +| `groupRowAction` | 일괄 행 액션. | +| `groupColAction` | 일괄 열 액션. | +| `addSheet` | 새 시트 추가. | +| `deleteSheet` | 시트 삭제. | +| `renameSheet` | 시트 이름 변경. | +| `clearSheet` | 시트의 모든 데이터 지우기. | +| `clear` | 선택한 셀 지우기. | +| `resizeCol` | 열 너비 조정. | +| `resizeRow` | 행 높이 조정. | +| `setValidation` | 셀에 데이터 유효성 검사 설정. | +| `sortCells` | 셀 정렬. | +| `insertLink` | 하이퍼링크 삽입. | +| `fitColumn` | 내용에 맞게 열 너비 자동 조정. | +| `filter` | 열 필터 적용 또는 변경. | +| `merge` | 셀 병합. | +| `unmerge` | 셀 병합 해제. | +| `toggleFreeze` | 고정 창 전환. | +| `toggleVisibility` | 행/열 표시 여부 전환. | + +## 핸들러 타입 별칭 {#handler-type-aliases} + +이벤트 콜백 props에서 사용하는 함수 시그니처의 편의 별칭입니다. 핸들러 함수에 명시적으로 주석을 달기 위해 가져와서 사용하십시오. + +
+ +| 타입 | 시그니처 | 사용 위치 | +|------|-----------|---------| +| `BeforeActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => boolean \| void` | `onBeforeAction` | +| `AfterActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => void` | `onAfterAction` | +| `BeforeCellHandler` | `(cell: string) => boolean \| void` | `onBeforeSelectionSet`, `onBeforeSelectionRemove`, `onBeforeFocusSet` | +| `AfterCellHandler` | `(cell: string) => void` | `onAfterSelectionSet`, `onAfterSelectionRemove`, `onAfterFocusSet` | +| `BeforeEditHandler` | `(cell: string, value: string) => boolean \| void` | `onBeforeEditStart`, `onBeforeEditEnd` | +| `AfterEditHandler` | `(cell: string, value: string) => void` | `onAfterEditStart`, `onAfterEditEnd` | +| `BeforeSheetHandler` | `(sheet: ISheet) => boolean \| void` | `onBeforeSheetChange` | +| `AfterSheetHandler` | `(sheet: ISheet) => void` | `onAfterSheetChange` | + +
+ +## SpreadsheetConfigProps {#spreadsheetconfigprops} + +~~~ts +type SpreadsheetConfigProps = Omit< + ISpreadsheetConfig, + "leftSplit" | "topSplit" | "dateFormat" | "timeFormat" +>; +~~~ + +컴포넌트 props의 기본 타입입니다. 모든 `ISpreadsheetConfig` 생성자 옵션을 플랫 props로 노출합니다. + +## 재내보내기된 상위 타입 {#re-exported-upstream-types} + +편의를 위해 `@dhx/ts-spreadsheet`에서 재내보내기된 타입들입니다. + +| 타입 | 설명 | +|------|-------------| +| `ISpreadsheet` | 메인 스프레드시트 위젯 인스턴스 인터페이스. | +| `ISpreadsheetConfig` | 생성자 구성 인터페이스. | +| `ISheet` | 시트 인스턴스 인터페이스(시트 이벤트 콜백에서 사용). | +| `IFormats` | 커스텀 숫자 형식 정의. | +| `IFilterRules` | 필터 규칙 구성. | +| `IFilter` | 필터 인스턴스 인터페이스. | +| `IStylesList` | 스타일 정의 맵. | +| `IDataWithStyles` | 스타일이 포함된 데이터 구조(`serialize()`/`parse()`에서 사용). | +| `ICellInfo` | 위젯 메서드가 반환하는 셀 정보. | +| `FileFormat` | 데이터 로딩을 위한 파일 형식(예: `"json"` 또는 `"xlsx"`). | +| `ToolbarBlocks` | 툴바 블록 식별자(예: `"default"`, `"undo"`, 또는 `"font"`). | +| `FilterConditions` | 사용 가능한 필터 조건 타입 열거형. | +| `Id` | 일반 식별자 타입(*string \| number*). | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/sorting_data.md b/i18n/ko/docusaurus-plugin-content-docs/current/sorting_data.md new file mode 100644 index 00000000..94885a03 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/sorting_data.md @@ -0,0 +1,41 @@ +--- +sidebar_label: 데이터 정렬 +title: 데이터 정렬 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 데이터 정렬에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# 데이터 정렬 {#sorting-data} + +## 열별 데이터 정렬 {#sorting-data-by-a-column} + +열을 기준으로 스프레드시트 데이터를 정렬하려면 다음 단계를 수행하세요: + +1\. 데이터를 정렬할 열의 헤더를 마우스 오른쪽 버튼으로 클릭합니다 + +2\. *정렬* -> *오름차순 정렬* 또는 *내림차순 정렬*을 선택합니다 + +![오름차순 정렬 및 내림차순 정렬 옵션이 있는 DHTMLX Spreadsheet 열 헤더 컨텍스트 메뉴](/img/sort_col.png) + +또는 + +1\. 열 헤더를 클릭하여 해당 열을 선택합니다 + +2\. 메뉴에서 *데이터* -> *정렬* -> *오름차순 정렬* 또는 *내림차순 정렬*로 이동합니다 + +![오름차순 정렬 및 내림차순 정렬이 있는 정렬 서브메뉴가 표시된 DHTMLX Spreadsheet 데이터 메뉴](/img/sort_col_menu.png) + +## 범위별 데이터 정렬 {#sorting-data-by-a-range} + +별도의 범위를 기준으로 스프레드시트 데이터를 정렬하려면 다음 단계를 수행하세요: + +1\. 데이터를 정렬할 열에서 셀 범위를 선택합니다 + +2\. 다음 두 가지 작업 중 하나를 선택합니다: + +- 선택된 범위의 셀을 마우스 오른쪽 버튼으로 클릭하고 *정렬* -> *오름차순 정렬* 또는 *내림차순 정렬*을 선택합니다 + +![정렬 서브메뉴가 있는 선택된 범위의 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/sort_range_menu.png) + +- 또는 메뉴에서 *데이터* -> *정렬* -> *오름차순 정렬* 또는 *내림차순 정렬*로 이동합니다 + +![선택된 셀 범위를 정렬하는 정렬 서브메뉴가 있는 DHTMLX Spreadsheet 데이터 메뉴](/img/sort_range.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/svelte_integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/svelte_integration.md new file mode 100644 index 00000000..abbee58c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/svelte_integration.md @@ -0,0 +1,259 @@ +--- +sidebar_label: Svelte와의 통합 +title: Svelte 통합 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 Svelte 통합에 대한 문서를 확인하세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# Svelte와의 통합 {#integration-with-svelte} + +:::tip +이 문서를 읽기 전에 **Svelte**의 기본 개념과 패턴을 숙지하고 있어야 합니다. 지식을 복습하려면 [**Svelte 문서**](https://svelte.dev/)를 참조하세요. +::: + +DHTMLX Spreadsheet는 **Svelte**와 호환됩니다. DHTMLX Spreadsheet를 **Svelte**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 [**GitHub 예제**](https://github.com/DHTMLX/svelte-spreadsheet-demo)를 참조하세요. + +## 프로젝트 생성 {#creating-a-project} + +:::info +새 프로젝트 생성을 시작하기 전에 [**Vite**](https://vite.dev/) (선택)와 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +::: + +**Svelte** JS 프로젝트를 생성하려면 다음 명령어를 실행하세요: + +~~~json +npm create vite@latest +~~~ + +프로젝트 이름을 **my-svelte-spreadsheet-app**으로 지정하겠습니다. + +### 의존성 설치 {#installation-of-dependencies} + +앱 디렉토리로 이동합니다: + +~~~json +cd my-svelte-spreadsheet-app +~~~ + +그런 다음 의존성을 설치하고 앱을 실행합니다. 패키지 관리자를 사용하세요: + +- [**yarn**](https://yarnpkg.com/)을 사용하는 경우 다음 명령어를 실행합니다: + +~~~jsx +yarn +yarn dev // 또는 yarn dev +~~~ + +- [**npm**](https://www.npmjs.com/)을 사용하는 경우 다음 명령어를 실행합니다: + +~~~json +npm install +npm run dev +~~~ + +앱이 localhost에서 실행됩니다 (예: `http://localhost:3000`). + +## Spreadsheet 생성 {#creating-spreadsheet} + +이제 DHTMLX Spreadsheet 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 Spreadsheet 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-package-installation} + +[**평가판 Spreadsheet 패키지**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르세요. 평가판 Spreadsheet는 30일 동안만 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 {#step-2-component-creation} + +이제 애플리케이션에 Spreadsheet를 추가하기 위한 Svelte 컴포넌트를 생성해야 합니다. *src/* 디렉토리에 새 파일을 생성하고 이름을 *Spreadsheet.svelte*로 지정합니다. + +#### 소스 파일 가져오기 {#importing-source-files} + +*Spreadsheet.svelte* 파일을 열고 Spreadsheet 소스 파일을 가져옵니다. 참고: + +- PRO 버전을 사용하고 로컬 폴더에서 Spreadsheet 패키지를 설치하는 경우 가져오기 경로는 다음과 같습니다: + +~~~html title="Spreadsheet.svelte" + +~~~ + +사용하는 패키지에 따라 소스 파일이 축소될 수 있습니다. 이 경우 CSS 파일을 *spreadsheet.min.css*로 가져오고 있는지 확인하세요. + +- Spreadsheet 평가판을 사용하는 경우 다음 경로를 지정합니다: + +~~~html title="Spreadsheet.svelte" + +~~~ + +이 튜토리얼에서는 Spreadsheet **평가판** 구성 방법을 확인할 수 있습니다. + +#### 컨테이너 설정 및 Spreadsheet 추가 {#setting-the-container-and-adding-spreadsheet} + +페이지에 Spreadsheet를 표시하려면 Spreadsheet 컨테이너를 생성하고 해당 생성자를 사용하여 이 컴포넌트를 초기화해야 합니다: + +~~~html {3,6,10-11,19} title="Spreadsheet.svelte" + + +
+~~~ + +#### 스타일 추가 {#adding-styles} + +Spreadsheet를 올바르게 표시하려면 프로젝트의 메인 css 파일에 Spreadsheet와 해당 컨테이너에 대한 중요한 스타일을 지정해야 합니다: + +~~~css title="app.css" +/* 초기 페이지 스타일 지정 */ +html, +body, +#app { /* #app 루트 컨테이너를 사용하는지 확인하세요 */ + height: 100%; + padding: 0; + margin: 0; +} + +/* Spreadsheet 컨테이너 스타일 지정 */ +.widget { + height: 100%; +} +~~~ + +#### 데이터 로드 {#loading-data} + +Spreadsheet에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. *src/* 디렉토리에 *data.js* 파일을 생성하고 데이터를 추가합니다: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // 데이터가 있는 추가 셀 + ] + } +} +~~~ + +그런 다음 *App.svelte* 파일을 열고, 데이터를 가져와서 새로 생성된 `` 컴포넌트에 **props**로 전달합니다: + +~~~html {3,5,8} title="App.svelte" + + + +~~~ + +*Spreadsheet.svelte* 파일로 이동하여 [`parse()`](api/spreadsheet_parse_method.md) 메서드를 사용하여 전달된 **props**를 Spreadsheet에 적용합니다: + +~~~html {6,13} title="Spreadsheet.svelte" + + +
+~~~ + +이제 Spreadsheet 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 Spreadsheet를 초기화합니다. 필요한 구성 설정도 제공할 수 있습니다. 사용 가능한 속성의 전체 목록은 [Spreadsheet API 문서](api/overview/properties_overview.md)를 참조하세요. + +#### 이벤트 처리 {#handling-events} + +사용자가 Spreadsheet에서 작업을 수행하면 위젯이 이벤트를 호출합니다. 이러한 이벤트를 사용하여 작업을 감지하고 원하는 코드를 실행할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 확인하세요. + +*Spreadsheet.svelte*를 열고 다음과 같이 `onMount()` 메서드를 완성합니다: + +~~~html {8-11} title="Spreadsheet.svelte" + + +// ... +~~~ + +그 후 앱을 시작하면 페이지에 데이터가 로드된 Spreadsheet가 표시됩니다. + +![샘플 데이터와 함께 Svelte 애플리케이션에서 초기화된 DHTMLX Spreadsheet](/img/integrations/trial_spreadsheet.png) + +이제 DHTMLX Spreadsheet와 Svelte를 통합하기 위한 기본 설정이 완료되었습니다. 특정 요구 사항에 맞게 코드를 사용자 정의할 수 있습니다. 최종 예제는 [**GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo)에서 찾을 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md new file mode 100644 index 00000000..6cd152ad --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md @@ -0,0 +1,101 @@ +--- +sidebar_label: 내장 테마 구성 +title: 내장 테마 구성 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 테마를 구성하는 방법을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 직접 사용해 보거나, DHTMLX Spreadsheet 30일 무료 평가판을 다운로드하십시오. +--- + +# 내장 테마 구성 {#configuring-built-in-themes} + +## 모든 테마 구성 {#configuring-all-themes} + +[기본](/themes/#light-theme-default) 테마의 CSS 변수에는 색상 체계 변수가 포함되어 있습니다. + +~~~css +--dhx-h-primary: 200; +--dhx-s-primary: 98%; +--dhx-l-primary: 40%; + +--dhx-h-secondary: 0; +--dhx-s-secondary: 0%; +--dhx-l-secondary: 30%; + +--dhx-h-danger: 0; +--dhx-s-danger: 100%; +--dhx-l-danger: 60%; + +--dhx-h-success: 154; +--dhx-s-success: 89%; +--dhx-l-success: 37%; + +--dhx-h-background: 0; +--dhx-s-background: 0%; +--dhx-l-background: 100%; +--dhx-a-background: 0.5; +~~~ + +:::tip +색상 값은 [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) 형식으로 지정됩니다. + +- *hue(색조)*는 색상 휠의 각도(0~360)입니다. 0은 빨강, 120은 초록, 240은 파랑입니다. +- *saturation(채도)*은 퍼센트 값입니다. 0%는 완전히 무채색(회색), 100%는 완전히 포화된 상태입니다. +- *lightness(명도)*는 퍼센트 값입니다. 100%는 흰색, 0%는 검정, 50%는 "보통"입니다. +::: + +이러한 CSS 변수 덕분에 색상 체계가 자동으로 계산됩니다. 즉, root에서 색상 체계 값을 변경하면 `"contrast-light"`, `"dark"`, `"contrast-dark"` 테마의 값이 실시간으로 자동 재계산됩니다. + +예를 들어, 다음과 같이 모든 Spreadsheet 테마의 기본 색상을 한 번에 재정의할 수 있습니다. + +~~~html + +~~~ + +또한, 기본 색상에서 계산된 변수 값도 이에 맞게 재계산됩니다. 예를 들어, 포커스 색상의 값은 다음과 같이 계산됩니다. + +~~~jsx +--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); +~~~ + +## 개별 테마 구성 {#configuring-a-separate-theme} + +특정 [Spreadsheet 테마](/themes/)에 대해 일부 색상 값을 재정의하려면 `data-dhx-theme` 속성에서 재정의하십시오. + +~~~html {1-27,39} + + + +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/themes/custom_theme.md b/i18n/ko/docusaurus-plugin-content-docs/current/themes/custom_theme.md new file mode 100644 index 00000000..4325e769 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/themes/custom_theme.md @@ -0,0 +1,97 @@ +--- +sidebar_label: 커스텀 테마 +title: 커스텀 테마 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 커스텀 테마를 만드는 방법을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 직접 사용해 보거나, DHTMLX Spreadsheet 30일 무료 평가판을 다운로드하십시오. +--- + +# 커스텀 테마 {#custom-theme} + +기본 Spreadsheet 테마가 프로젝트에 맞지 않는 경우 직접 색상 테마를 구성할 수 있습니다. +아래 스니펫에서 **커스텀 라이트** 및 **커스텀 다크** 테마를 확인하십시오. + + + +커스텀 테마를 만들려면 다음과 같이 내부 CSS 변수 값을 재정의하십시오. + +~~~html + + + +~~~ + +**관련 샘플:** [Spreadsheet. 커스텀 테마 (스킨)](https://snippet.dhtmlx.com/59nt1rcb?mode=wide) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/themes/themes.md b/i18n/ko/docusaurus-plugin-content-docs/current/themes/themes.md new file mode 100644 index 00000000..57111f0b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/themes/themes.md @@ -0,0 +1,487 @@ +--- +sidebar_label: 내장 테마 +title: 내장 테마 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 내장 테마에 대해 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 직접 사용해 보거나, DHTMLX Spreadsheet 30일 무료 평가판을 다운로드하십시오. +--- + +# 내장 테마 {#built-in-themes} + +DHTMLX Spreadsheet 라이브러리는 4가지 사전 정의된 테마를 제공합니다. + +- [라이트 테마](#light-theme-default) ("light") - 기본값으로 사용 +- [다크 테마](#dark-theme) ("dark") +- [라이트 고대비 테마](#light-high-contrast-theme) ("contrast-light") +- [다크 고대비 테마](#dark-high-contrast-theme) ("contrast-dark") + +Spreadsheet 테마는 국제 표준에 따라 개발되었습니다. 고대비 테마는 시각 장애가 있는 사용자를 돕습니다. 자세한 내용은 [접근성 지원](https://docs.dhtmlx.com/suite/common_features/accessibility_support/) 문서를 참조하십시오. + +아래 예제에서 모든 테마를 직접 사용해 볼 수 있습니다. + + + +## 라이트 테마 (기본값) {#light-theme-default} + +![흰색 배경과 어두운 텍스트가 있는 DHTMLX Spreadsheet 기본 라이트 테마](/img/themes/default_theme.png) + +기본 `"light"` 테마는 아래 나열된 CSS 변수를 사용하여 구성됩니다. + +~~~css +:root, [data-dhx-theme] { + /* 기본 색상 */ + --dhx-color-white: #fff; + --dhx-color-gray-100: #e6e6e6; + --dhx-color-gray-200: #ccc; + --dhx-color-gray-300: #b3b3b3; + --dhx-color-gray-400: #999; + --dhx-color-gray-500: #808080; + --dhx-color-gray-600: #666; + --dhx-color-gray-700: #4d4d4d; + --dhx-color-gray-800: #333; + --dhx-color-gray-900: #1a1a1a; + --dhx-color-black: #000; + /* 기본 색상 끝 */ + + /* 폰트 */ + --dhx-font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; + + --dhx-font-weight-regular: 400; + --dhx-font-weight-medium: 500; + --dhx-font-weight-bold: 700; + + --dhx-font-size-small: 12px; + --dhx-font-size-normal: 14px; + --dhx-font-size-large: 16px; + + --dhx-line-height-small: 16px; + --dhx-line-height-normal: 20px; + --dhx-line-height-large: 24px; + + --dhx-font-color-primary: rgba(0, 0, 0, .7); + --dhx-font-color-secondary: rgba(0, 0, 0, .5); + --dhx-font-color-additional: rgba(0, 0, 0, .3); + --dhx-font-color-disabled: rgba(0, 0, 0, .3); + + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-color-white); + /* 폰트 끝 */ + + /* 아이콘 */ + --dhx-icon-size-small: 16px; + --dhx-icon-size-normal: 20px; + --dhx-icon-size-large: 24px; + /* 아이콘 끝 */ + + /* 테두리 */ + --dhx-border-width: 1px; + --dhx-border-radius: 2px; + --dhx-border-color: rgba(0, 0, 0, .1); + --dhx-border-color-focused: rgba(0, 0, 0, .3); + --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color); + /* 테두리 끝 */ + + /* 테두리 그림자 */ + --dhx-border-shadow-small: 0 2px 4px rgba(0, 0, 0, .15); + --dhx-border-shadow-normal: 0 2px 5px rgba(0, 0, 0, .3); + --dhx-border-shadow-large: 0px 1px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1); + + --dhx-shadow-input-size: inset 0px 0px 0px var(--dhx-border-width); + /* 테두리 그림자 끝 */ + + /* 전환 효과 */ + --dhx-transition-time: 0.2s; + --dhx-transition-in: ease-in; + --dhx-transition-out: ease-out; + /* 전환 효과 끝 */ + + /* z-index */ + --dhx-z-index-up: 1; + --dhx-z-index-force-up: 10; + --dhx-z-index-overlay: 999; + --dhx-z-index-overlay-total: 10000000; + /* z-index 끝 */ + + /* 서비스 색상 체계 전용 */ + --dhx-l-contrast-offset: 0%; /* 명도 대비 테마 오프셋 */ + --dhx-l-h-offset: 10%; /* 명도 호버 오프셋 */ + --dhx-s-d-offset: 30%; /* 채도 비활성화 오프셋 */ + --dhx-l-d: 70%; /* 명도 비활성화 값 */ + --dhx-a-l-h: .15; /* 알파 라이트 호버 값 */ + --dhx-a-l-a: .3; /* 알파 라이트 활성화 값 */ + /* 서비스 색상 체계 전용 끝 */ + + /* 색상 체계 */ + --dhx-h-primary: 200; + --dhx-s-primary: 98%; + --dhx-l-primary: 40%; + + --dhx-h-secondary: 0; + --dhx-s-secondary: 0%; + --dhx-l-secondary: 30%; + + --dhx-h-danger: 0; + --dhx-s-danger: 100%; + --dhx-l-danger: 60%; + + --dhx-h-success: 154; + --dhx-s-success: 89%; + --dhx-l-success: 37%; + + --dhx-h-background: 0; + --dhx-s-background: 0%; + --dhx-l-background: 100%; + --dhx-a-background: 0.5; + /* 색상 체계 끝 */ + + /* 테마 색상 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 3%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 10%)); + --dhx-background-overlay: hsla(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) * -1), var(--dhx-a-background)); + --dhx-background-overlay-light: rgba(255, 255, 255, .5); + + --dhx-tooltip-background-dark: var(--dhx-color-gray-800); + --dhx-tooltip-background-light: var(--dhx-color-white); + + --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); + + --dhx-color-primary: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-hover: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-active: var(--dhx-color-primary); + --dhx-color-primary-disabled: hsl(var(--dhx-h-primary), calc(var(--dhx-s-primary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-primary-light-hover: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-primary-light-active: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-secondary: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-hover: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-active: var(--dhx-color-secondary); + --dhx-color-secondary-disabled: hsl(var(--dhx-h-secondary), calc(var(--dhx-s-secondary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-secondary-light-hover: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-secondary-light-active: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-danger: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-hover: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-active: var(--dhx-color-danger); + --dhx-color-danger-disabled: hsl(var(--dhx-h-danger), calc(var(--dhx-s-danger) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-danger-light-hover: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-danger-light-active: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-success: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset))); + --dhx-color-success-hover: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-success-active: var(--dhx-color-success); + --dhx-color-success-disabled: hsl(var(--dhx-h-success), calc(var(--dhx-s-success) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-success-light-hover: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-success-light-active: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + /* 테마 색상 끝 */ + + /* DHTMLX Toolbar 서비스 변수*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* DHTMLX Toolbar 서비스 변수 끝 */ + + /* DHTMLX Grid 서비스 변수*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* DHTMLX Grid 서비스 변수 끝*/ + + /* DHTMLX Calendar 서비스 변수*/ + --dhx-s-calendar-muffled: .6; + /* DHTMLX Calendar 서비스 변수 끝*/ + + /* DHTMLX Slider 서비스 변수*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* DHTMLX Slider 서비스 변수 끝*/ +} +~~~ + +## 라이트 고대비 테마 {#light-high-contrast-theme} + +![접근성을 위해 더 큰 폰트와 강한 테두리가 있는 DHTMLX Spreadsheet 라이트 고대비 테마](/img/themes/light_high_contrast_theme.png) + +`"contrast-light"` 테마는 [루트 CSS 변수](#light-theme-default)와 아래 나열된 변수를 모두 사용하여 구성됩니다. + +~~~css +[data-dhx-theme='contrast-light'] { + /* 폰트 */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-secondary: rgba(0, 0, 0, .66); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + /* 폰트 끝 */ + + /* 테두리 */ + --dhx-border-color: rgba(0, 0, 0, .4); + /* 테두리 끝 */ + + /* 색상 체계 */ + --dhx-l-contrast-offset: 14%; + /* 색상 체계 끝 */ + + /* DHTMLX Toolbar 서비스 변수*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* DHTMLX Toolbar 서비스 변수 끝 */ + + /* DHTMLX Grid 서비스 변수*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* DHTMLX Grid 서비스 변수 끝*/ + + /* DHTMLX Calendar 서비스 변수*/ + --dhx-s-calendar-muffled: .8; + /* DHTMLX Calendar 서비스 변수 끝*/ + + /* DHTMLX Slider 서비스 변수*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* DHTMLX Slider 서비스 변수 끝*/ +} +~~~ + +## 다크 테마 {#dark-theme} + +![저조도 환경을 위한 어두운 배경과 밝은 텍스트가 있는 DHTMLX Spreadsheet 다크 테마](/img/themes/dark_theme.png) + +`"dark"` 테마는 [루트 CSS 변수](#light-theme-default)와 아래 나열된 변수를 모두 사용하여 구성됩니다. + +~~~css +[data-dhx-theme='dark'] { + /* 폰트 */ + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, .7); + --dhx-font-color-additional: rgba(255, 255, 255, .5); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* 폰트 끝 */ + + /* 테두리 */ + --dhx-border-color: rgba(255, 255, 255, 0.3); + --dhx-border-color-focused: rgba(255, 255, 255, 0.5); + /* 테두리 끝 */ + + /* 색상 체계 */ + --dhx-l-secondary: 60%; /* 명도 대비 테마 오프셋 */ + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* 색상 체계 끝 */ + + /* 테마 색상 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* 테마 색상 끝 */ + + /* DHTMLX Toolbar 서비스 변수*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* DHTMLX Toolbar 서비스 변수 끝 */ + + /* DHTMLX Grid 서비스 변수*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* DHTMLX Grid 서비스 변수 끝*/ + + /* DHTMLX Calendar 서비스 변수*/ + --dhx-s-calendar-muffled: .6; + /* DHTMLX Calendar 서비스 변수 끝*/ + + /* DHTMLX Slider 서비스 변수*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* DHTMLX Slider 서비스 변수 끝*/ +} +~~~ + +## 다크 고대비 테마 {#dark-high-contrast-theme} + +![접근성을 위해 향상된 텍스트 대비가 있는 DHTMLX Spreadsheet 다크 고대비 테마](/img/themes/dark_contrast.png) + +`"contrast-dark"` 테마는 [루트 CSS 변수](#light-theme-default)와 아래 나열된 변수를 모두 사용하여 구성됩니다. + +~~~css +[data-dhx-theme='contrast-dark'] { + /* 폰트 */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, 0.86); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-black); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* 폰트 끝 */ + + /* 테두리 */ + --dhx-border-color: rgba(255, 255, 255, 0.5); + --dhx-border-color-focused: rgba(255, 255, 255, 0.7); + /* 테두리 끝 */ + + /* 색상 체계 */ + --dhx-l-contrast-offset: -12%; /* 명도 대비 테마 오프셋 */ + + --dhx-l-secondary: 60%; + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* 색상 체계 끝 */ + + /* 테마 색상 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* 테마 색상 끝 */ + + /* DHTMLX Toolbar 서비스 변수*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* DHTMLX Toolbar 서비스 변수 끝 */ + + /* DHTMLX Grid 서비스 변수*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* DHTMLX Grid 서비스 변수 끝*/ + + /* DHTMLX Calendar 서비스 변수*/ + --dhx-s-calendar-muffled: .8; + /* DHTMLX Calendar 서비스 변수 끝*/ + + /* DHTMLX Slider 서비스 변수*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* DHTMLX Slider 서비스 변수 끝*/ +} +~~~ + +## Spreadsheet 전용 스타일 {#spreadsheet-specific-styles} + +Spreadsheet 컴포넌트에 특화된 변수 목록은 다음과 같습니다. + +- **기본 라이트** 테마 및 **라이트 고대비** 스킨의 경우: + +~~~css +:root, [data-dhx-theme],[data-dhx-theme='contrast-light'] { + + --dhx-spreadsheet-range-background-1: #8be3c9; + --dhx-spreadsheet-range-background-2: #f6f740; + --dhx-spreadsheet-range-background-3: #f7b69e; + --dhx-spreadsheet-range-background-4: #e0fcff; + --dhx-spreadsheet-range-background-5: #8fe9ff; + --dhx-spreadsheet-range-background-6: #d8ffa6; + --dhx-spreadsheet-range-background-7: #e4e4e4; + --dhx-spreadsheet-range-background-8: #ecb6ff; + + --dhx-spreadsheet-range-color-1: #00815a; + --dhx-spreadsheet-range-color-2: #bfc000; + --dhx-spreadsheet-range-color-3: #c55933; + --dhx-spreadsheet-range-color-4: #0cc1d6; + --dhx-spreadsheet-range-color-5: #0080a3; + --dhx-spreadsheet-range-color-6: #529a0a; + --dhx-spreadsheet-range-color-7: #6d767b; + --dhx-spreadsheet-range-color-8: #ba38e7; + +} +~~~ + +- **다크** 및 **다크 고대비** 테마의 경우: + +~~~css +[data-dhx-theme='contrast-dark'], +[data-dhx-theme='dark'] { + --dhx-spreadsheet-range-background-1: #00815a; + --dhx-spreadsheet-range-background-2: #bfc000; + --dhx-spreadsheet-range-background-3: #c55933; + --dhx-spreadsheet-range-background-4: #0cc1d6; + --dhx-spreadsheet-range-background-5: #0080a3; + --dhx-spreadsheet-range-background-6: #529a0a; + --dhx-spreadsheet-range-background-7: #6d767b; + --dhx-spreadsheet-range-background-8: #ba38e7; + + --dhx-spreadsheet-range-color-1: #8be3c9; + --dhx-spreadsheet-range-color-2: #f6f740; + --dhx-spreadsheet-range-color-3: #f7b69e; + --dhx-spreadsheet-range-color-4: #e0fcff; + --dhx-spreadsheet-range-color-5: #8fe9ff; + --dhx-spreadsheet-range-color-6: #d8ffa6; + --dhx-spreadsheet-range-color-7: #e4e4e4; + --dhx-spreadsheet-range-color-8: #ecb6ff; + +} +~~~ + +## 테마 설정 {#setting-themes} + +내장 Spreadsheet 테마나 [커스텀](themes/custom_theme.md) 테마를 적용하려면 아래 설명된 방법 중 하나를 사용하십시오. + +### `data-dhx-theme` 속성 사용 {#using-the-data-dhx-theme-attribute} + +다음 중 하나를 선택하십시오. + +- 선택한 컨테이너에 `data-dhx-theme` 속성 설정: + +~~~html title="index.html" + +
+~~~ + +- HTML 요소(예: `documentElement`)에 `data-dhx-theme` 속성 설정: + +~~~jsx title="index.js" +document.documentElement.setAttribute("data-dhx-theme", "dark"); +~~~ + +### `dhx.setTheme()` 메서드 사용 {#using-the-dhxsettheme-method} + +`dhx.setTheme()` 메서드는 다음 파라미터를 받습니다. + +- `theme: string` - (필수) 테마 이름. 다음 중 하나일 수 있습니다. + - Spreadsheet 테마 이름: `"light" | "contrast-light" | "dark" | "contrast-dark"` + - [커스텀 테마](themes/custom_theme.md) 이름 + - `"light"` - 기본값 +- `container: string | HTMLElement` - (선택) 테마를 적용할 컨테이너. 다음 중 하나일 수 있습니다. + - HTMLElement + - 컨테이너 ID 또는 Layout 셀 ID를 가진 문자열 값 + - `document.documentElement` - 기본값 + +아래 예제는 `dhx.setTheme()` 메서드를 사용하는 방법을 보여줍니다. + +- body 또는 컨테이너에 테마 설정 + +~~~html +
+
Other content
+ + +~~~ + +- HTMLElement로 지정된 컨테이너에 테마 설정 + +~~~html +
+
Other content
+ + +~~~ + +**관련 예제:** + +- [Spreadsheet. 라이트, 다크, 라이트 고대비, 다크 고대비 테마 (스킨)](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet) +- [Spreadsheet. 커스텀 테마 (스킨)](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/using_typescript.md b/i18n/ko/docusaurus-plugin-content-docs/current/using_typescript.md new file mode 100644 index 00000000..7124293b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/using_typescript.md @@ -0,0 +1,27 @@ +--- +sidebar_label: TypeScript 지원 +title: TypeScript 지원 +description: DHTMLX JavaScript Spreadsheet 라이브러리와 TypeScript 사용에 대한 문서를 확인하세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해보며, DHTMLX Spreadsheet의 30일 무료 평가판을 다운로드하세요. +--- + +# TypeScript 지원 {#typescript-support} + +v4.0부터 DHTMLX Spreadsheet는 TypeScript 정의를 지원합니다. 내장된 TypeScript 지원은 바로 사용할 수 있습니다. + +{{note 스니펫 도구에서 직접 기능을 사용해볼 수 있습니다.}} + +![IDE에서 타입 검사 및 자동 완성 기능이 있는 DHTMLX Spreadsheet TypeScript 지원](/img/typescript.png) + +## TypeScript 사용의 장점 {#advantages-of-using-typescript} + +DHTMLX Spreadsheet와 TypeScript를 함께 사용해야 하는 이유는 무엇인가요? + +TypeScript의 가장 큰 이점은 개발 효율성을 크게 향상시킨다는 점입니다. + +타입 검사와 자동 완성 기능이 잠재적인 실수를 방지하므로 애플리케이션 구축이 더욱 안정적이 됩니다. 또한 TypeScript는 DHTMLX Spreadsheet API를 사용할 때 어떤 데이터 타입을 사용해야 하는지 알려줍니다. + +## JSDoc 힌트 {#jsdoc-hints} + +DHTMLX Spreadsheet 타입 정의에는 전체 API에 대한 JSDoc 어노테이션이 포함되어 있습니다. 즉, IDE에서 라이브러리를 사용할 때 에디터를 벗어나지 않고도 메서드 설명을 읽고, 매개변수 타입을 확인하며, 코드 예제를 볼 수 있습니다. 메서드나 속성 위에 마우스를 올려 인라인 문서를 확인하세요. + +![IDE에서 인라인 메서드 문서를 표시하는 DHTMLX Spreadsheet JSDoc 힌트](/img/jsdoc_hints.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/vuejs_integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/vuejs_integration.md new file mode 100644 index 00000000..72ec8868 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/vuejs_integration.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Vue 통합 +title: Vue 통합 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 Vue 통합에 대한 내용을 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# Vue 통합 {#integration-with-vue} + +:::tip +이 문서를 읽기 전에 [**Vue**](https://vuejs.org/)의 기본 개념과 패턴을 숙지하시기 바랍니다. 내용을 복습하려면 [**Vue 3 문서**](https://vuejs.org/guide/introduction.html#getting-started)를 참고하세요. +::: + +DHTMLX Spreadsheet는 **Vue**와 호환됩니다. **Vue 3**에서 DHTMLX Spreadsheet를 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 [**GitHub 예제**](https://github.com/DHTMLX/vue-spreadsheet-demo)를 참고하세요. + +## 프로젝트 생성 {#creating-a-project} + +:::info +새 프로젝트를 생성하기 전에 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +::: + +**Vue** 프로젝트를 생성하려면 다음 명령어를 실행하세요: + +~~~json +npm create vue@latest +~~~ + +이 명령어는 공식 **Vue** 프로젝트 스캐폴딩 도구인 `create-vue`를 설치하고 실행합니다. 자세한 내용은 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)에서 확인하세요. + +프로젝트 이름을 **my-vue-spreadsheet-app**으로 지정합니다. + +### 의존성 설치 {#installation-of-dependencies} + +앱 디렉토리로 이동하세요: + +~~~json +cd my-vue-spreadsheet-app +~~~ + +의존성을 설치하고 개발 서버를 시작하세요. 패키지 매니저를 사용하세요: + +- [**yarn**](https://yarnpkg.com/)을 사용하는 경우 다음 명령어를 실행하세요: + +~~~jsx +yarn +yarn start // 또는 yarn dev +~~~ + +- [**npm**](https://www.npmjs.com/)을 사용하는 경우 다음 명령어를 실행하세요: + +~~~json +npm install +npm run dev +~~~ + +앱은 로컬호스트(예: `http://localhost:3000`)에서 실행됩니다. + +## Spreadsheet 생성 {#creating-spreadsheet} + +이제 DHTMLX Spreadsheet 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 Spreadsheet 패키지를 설치하세요. + +### 1단계. 패키지 설치 {#step-1-package-installation} + +[**평가판 Spreadsheet 패키지**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르세요. 평가판 Spreadsheet는 30일 동안만 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 {#step-2-component-creation} + +이제 애플리케이션에 Spreadsheet를 추가하기 위한 Vue 컴포넌트를 생성해야 합니다. *src/components/* 디렉토리에 새 파일을 생성하고 *Spreadsheet.vue*로 이름을 지정하세요. + +#### 소스 파일 가져오기 {#import-source-files} + +*Spreadsheet.vue* 파일을 열고 Spreadsheet 소스 파일을 가져오세요. 다음 사항에 유의하세요: + +- PRO 버전을 사용하고 로컬 폴더에서 Spreadsheet 패키지를 설치하는 경우 가져오기 경로는 다음과 같습니다: + +~~~html title="Spreadsheet.vue" + +~~~ + +사용하는 패키지에 따라 소스 파일이 압축되어 있을 수 있습니다. 이 경우 CSS 파일을 *spreadsheet.min.css*로 가져오고 있는지 확인하세요. + +- Spreadsheet 평가판을 사용하는 경우 다음 경로를 지정하세요: + +~~~html title="Spreadsheet.vue" + +~~~ + +이 튜토리얼에서는 Spreadsheet **평가판** 버전을 구성하는 방법을 설명합니다. + +#### 컨테이너 설정 및 Spreadsheet 추가 {#setting-the-container-and-adding-spreadsheet} + +페이지에 Spreadsheet를 표시하려면 Spreadsheet용 컨테이너를 생성하고 해당 생성자를 사용하여 이 컴포넌트를 초기화해야 합니다: + +~~~html {2,7-8,18} title="Spreadsheet.vue" + + + +~~~ + +#### 스타일 추가 {#adding-styles} + +Spreadsheet를 올바르게 표시하려면 프로젝트의 메인 CSS 파일에서 Spreadsheet와 그 컨테이너에 대한 중요한 스타일을 지정해야 합니다: + +~~~css title="main.css" +/* 초기 페이지 스타일 지정 */ +html, +body, +#app { /* #app 루트 컨테이너를 사용하는지 확인하세요 */ + height: 100%; + padding: 0; + margin: 0; +} + +/* Spreadsheet 컨테이너 스타일 지정 */ +.widget { + height: 100%; +} +~~~ + +#### 데이터 로드 {#loading-data} + +Spreadsheet에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. *src/* 디렉토리에 *data.js* 파일을 생성하고 데이터를 추가할 수 있습니다: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // 데이터가 있는 더 많은 셀 + ] + } +} +~~~ + +그런 다음 *App.vue* 파일을 열고, 데이터를 가져온 후 내부 `data()` 메서드로 초기화하세요. 이후 새로 생성한 `` 컴포넌트에 **props**로 데이터를 전달할 수 있습니다: + +~~~html {3,7-9,14} title="App.vue" + + + + +~~~ + +*Spreadsheet.vue* 파일로 이동하여 [`parse()`](api/spreadsheet_parse_method.md) 메서드로 전달된 **props**를 Spreadsheet에 적용하세요: + +~~~html {6,10} title="Spreadsheet.vue" + + + +~~~ + +이제 Spreadsheet 컴포넌트를 사용할 준비가 되었습니다. 페이지에 요소가 추가되면 데이터와 함께 Spreadsheet가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. 사용 가능한 속성의 전체 목록은 [Spreadsheet API 문서](api/overview/properties_overview.md)를 참고하세요. + +#### 이벤트 처리 {#handling-events} + +사용자가 Spreadsheet에서 동작을 수행하면 위젯이 이벤트를 호출합니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [이벤트 전체 목록](api/overview/events_overview.md)을 참고하세요. + +*Spreadsheet.vue*를 열고 `mounted()` 메서드를 완성하세요: + +~~~html {8-11} title="Spreadsheet.vue" + + +//... +~~~ + +그런 다음 앱을 시작하면 페이지에 데이터가 로드된 Spreadsheet를 볼 수 있습니다. + +![샘플 데이터와 함께 Vue 3 애플리케이션에서 초기화된 DHTMLX Spreadsheet](/img/integrations/trial_spreadsheet.png) + +이제 DHTMLX Spreadsheet를 Vue와 통합하는 방법을 알게 되었습니다. 특정 요구 사항에 맞게 코드를 사용자 정의할 수 있습니다. 최종 예제는 [**GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 00000000..47fa236d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,803 @@ +--- +sidebar_label: 새로운 기능 +title: DHTMLX Spreadsheet의 새로운 기능 +description: DHTMLX JavaScript Spreadsheet 라이브러리의 새로운 기능에 대한 내용을 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 새로운 기능 {#whats-new} + +이전 버전에서 Spreadsheet를 업그레이드하는 경우 [최신 버전으로 마이그레이션](migration.md)에서 자세한 내용을 확인하세요. + +## 버전 6.0.2 {#version-602} + +2026년 7월 1일 출시 + +### 수정 사항 {#fixes} + +- "Excel에서 복사 → Spreadsheet에 붙여넣기 → 내보내기/가져오기" 사이클 후 셀 테두리가 사라지는 문제 +- 마지막 행 아래에 붙여넣은 데이터가 표시되지 않는 문제 — 그리드가 데이터에 맞게 새 행을 추가하지 않았기 때문 + +## 버전 6.0 {#version-60} + +2026년 5월 20일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/meet-dhtmlx-spreadsheet-6-0/) + +### 주요 변경 사항 {#breaking-changes} + +새 릴리스에서는 Spreadsheet API에 중요한 변경 사항이 도입되었습니다: 더 이상 사용되지 않는 메서드, 속성 및 이벤트 세트가 있습니다. 최신 버전을 유지하려면 [마이그레이션 가이드](migration.md#52---60)를 확인하세요. + +### 새로운 기능 {#new-functionality} + +- [React Spreadsheet 래퍼](react.md)가 도입되었습니다. [GitHub 데모 리포지토리](https://github.com/DHTMLX/react-spreadsheet-examples)의 관련 예제를 확인하세요. +- [`SheetManager`](api/overview/sheetmanager_overview.md) 모듈이 도입되었습니다. Spreadsheet의 시트를 관리하는 중앙화된 API로, `spreadsheet.sheets` 속성을 통해 접근할 수 있으며 루트 Spreadsheet 인스턴스에 있던 [더 이상 사용되지 않는 시트 관련 메서드](migration.md#deprecated-methods)를 대체합니다. + - 새 메서드: [`sheets.add()`](api/sheetmanager_add_method.md), [`sheets.remove()`](api/sheetmanager_remove_method.md), [`sheets.getAll()`](api/sheetmanager_getall_method.md), [`sheets.getActive()`](api/sheetmanager_getactive_method.md), [`sheets.setActive()`](api/sheetmanager_setactive_method.md), [`sheets.clear()`](api/sheetmanager_clear_method.md), [`sheets.get()`](api/sheetmanager_get_method.md) +- 새로운 [`addFormula()`](api/spreadsheet_addformula_method.md) 메서드를 통해 [사용자 정의(user-defined) 수식](functions.md#custom-formulas)을 지정하는 기능 +- [과학적(지수) 표기법](number_formatting.md#scientific-number-format)으로 숫자를 표시하는 기능 + +### 업데이트 {#updates} + +- 셀 내용의 글꼴 크기를 조정하는 기능: + - [내장 툴바 컨트롤](customization.md#default-controls)을 통해 기본 글꼴 크기 옵션 설정 + - 툴바 컨트롤에 [사용자 정의 글꼴 크기](customization.md#custom-font-size) 설정 +- 새로운 조건부 집계 함수가 [수식 엔진](functions.md#math-functions)에 추가되었습니다: `COUNTIF`, `COUNTIFS`, `SUMIF`, `SUMIFS`, `AVERAGEIF`, `AVERAGEIFS`, `MAXIFS`, `MINIFS` +- 새로운 동적 배열 함수가 [수식 엔진](functions.md#array-functions)에 추가되었습니다: `CHOOSECOLS`, `CHOOSEROWS`, `DROP`, `EXPAND`, `RANDARRAY`, `SEQUENCE`, `SORT`, `SORTBY`, `TAKE`, `TEXTSPLIT`, `TOCOL`, `TOROW`, `UNIQUE`, `WRAPCOLS`, `WRAPROWS` +- Spreadsheet의 렌더링 프로세스를 감지하고 컴포넌트 렌더링 완료 후 원하는 코드를 실행하기 위한 [`awaitRedraw()`](awaitredraw.md) 헬퍼가 추가되었습니다. +- 인라인 API 설명, 파라미터 타입, 코드 예제를 IDE에서 직접 제공하는 [JSDoc 어노테이션](using_typescript.md#jsdoc-hints)이 타입 정의에 추가되었습니다. + +### 수정 사항 {#fixes-60} + +- API를 통해 활성 시트를 전환한 후 포커스가 사라지는 문제 +- 전치 모드에서 변경된 셀 배열 반환 문제 +- 붙여넣기 후 의존 수식이 재계산되지 않는 문제 +- 붙여넣기 작업 중 잠긴 셀에 수식이 덮어쓰이는 문제 +- 잠긴 셀에서 수학 수식을 실행할 때의 문제 +- 셀 참조와 유사하거나, 숫자로 시작하거나, 특수 문자가 포함된 시트 이름 이스케이프 처리 문제 +- 셀 id가 0(첫 번째 시트의 첫 번째 셀)일 때 동적 배열 관련 문제 + +## 버전 5.2.9 {#version-529} + +2026년 1월 8일 출시 + +### 수정 사항 {#fixes-529} + +- 열린 편집기에서 타이핑 시 편집기 드롭다운 필터링이 이제 `includes` 대신 `startsWith`를 사용합니다. +- Excel 셀 테두리가 내보내기 및 가져오기 후에도 유지됩니다. +- 외부 테이블에서 붙여넣기 시 글꼴 크기가 재정의되는 문제를 방지합니다. + +## 버전 5.2.8 {#version-528} + +2025년 12월 15일 출시 + +### 수정 사항 {#fixes-528} + +- 수식 편집 중 다른 셀을 선택할 때 포커스가 사라지는 문제 +- 키보드 탐색 관련 문제 + +## 버전 5.2.7 {#version-527} + +2025년 12월 9일 출시 + +### 수정 사항 {#fixes-527} + +- 시트에 데이터 유효성 검사 목록이 포함된 셀이 있을 때 Excel로 내보내기가 실패하는 문제 +- 초기 셀 값이 `%`일 때 데이터 유효성 검사 목록이 있는 드롭다운이 작동하지 않는 문제 +- 수식 표시줄에 포커스를 설정한 후 `INDEX/MATCH` 수식이 깨지는 문제 + +## 버전 5.2.6 {#version-526} + +2025년 11월 19일 출시 + +### 수정 사항 {#fixes-526} + +- 텍스트가 줄바꿈된 셀이 포함된 .xlsx 파일을 가져올 때 추가 DOM 요소가 나타나는 문제 +- 열 관리 중 열 컨텍스트 메뉴에서 열/행 레이블이 잘못 표시되는 문제 +- 병합된 셀이 포함된 범위를 고정할 때 시트 구조가 깨지는 문제 +- 병합된 셀이 있는 시트에서 키보드 탐색이 개선되었습니다. + +## 버전 5.2.5 {#version-525} + +2025년 10월 23일 출시 + +### 수정 사항 {#fixes-525} + +- 열 너비에 맞는 내용에 "줄바꿈" 옵션을 적용할 때 행 높이가 줄어드는 문제 + +## 버전 5.2.4 {#version-524} + +2025년 9월 24일 출시 + +### 수정 사항 {#fixes-524} + +- 다중 행 셀에 대한 내보내기/가져오기 지원이 추가되었습니다. + +## 버전 5.2.3 {#version-523} + +2025년 9월 10일 출시 + +### 수정 사항 {#fixes-523} + +- 배열을 삽입할 때 셀 내 숫자 정렬이 잘못되는 문제 +- 아시아 언어 입력이 개선되었습니다. + +## 버전 5.2.2 {#version-522} + +2025년 8월 18일 출시 + +### 업데이트 {#updates-522} + +- 내장 드롭다운 편집기에서 타입-어헤드 필터링을 위한 `setValidation()` 기능이 향상되었습니다. +- .xlsx 파일에서 숨겨진/고정된 열/행, 데이터 유효성 검사 선택 상자 및 Excel 링크에 대한 내보내기/가져오기 지원이 추가되었습니다. + +### 수정 사항 {#fixes-522} + +- 고정된 열/행에서 병합된 셀을 분리할 때의 문제 +- 내장 테마 적용 관련 문제 +- 중국어 입력 관련 문제 +- MacOS에서 일본어 입력 관련 문제: 자동완성 확인 시 편집기가 닫히는 문제 +- `spreadsheet.d.ts` 파일 컴파일 관련 문제 + +## 버전 5.2.1 {#version-521} + +2025년 6월 30일 출시 + +### 업데이트 {#updates-521} + +- 컨텍스트 메뉴를 통해 한 번에 여러 열/행을 제거하는 기능 + +### 수정 사항 {#fixes-521} + +- 복사/붙여넣기 스크립트 오류 +- 시트에서 마지막 두 개 이상의 행이 선택된 상태에서 행을 삭제할 때 발생하는 오류 +- 툴바 사용자 정의 시 경고가 표시되는 문제 +- 날짜 선택기 현지화가 누락되는 문제 +- 툴바에서 세로 스크롤이 불필요하게 표시되는 문제 +- 수식의 올바른 계산을 위한 수학 수정 + +## 버전 5.2 {#version-52} + +2025년 5월 20일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/) + +### 주요 변경 사항 {#breaking-changes-52} + +새 릴리스에서는 열과 행의 고정/해제 기능에 일부 변경 사항이 도입되었습니다. 최신 버전을 유지하려면 [마이그레이션 가이드](migration.md#51---52)를 확인하세요. + +### 더 이상 사용되지 않는 항목 {#deprecated} + +- `leftSplit` 및 `topSplit` 구성 속성이 제거되었습니다. + +### 새로운 기능 {#new-functionality-52} + +- 셀 편집: + - [UI를 통해 셀 그룹에 스타일이 적용된 테두리를 생성하는 기능](data_formatting.md#styled-borders-for-cells) +- 열/행 고정/해제: + - [UI](work_with_rows_cols.md#freezingunfreezing-rows-and-columns)를 통해 열과 행을 고정/해제하는 기능 + - [API](working_with_ssheet.md#freezingunfreezing-rows-and-columns)를 통해 열과 행을 고정/해제하는 기능 + - 새 메서드: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + - 새 액션: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + - [`parse()`](api/spreadsheet_parse_method.md) 메서드의 *sheets* 객체에 새로운 `freeze` 속성 추가 +- 열/행 숨기기/표시: + - [UI](work_with_rows_cols.md#hidingshowing-rows-and-columns)를 통해 열과 행을 숨기거나 표시하는 기능 + - [API](working_with_ssheet.md#hidingshowing-rows-and-columns)를 통해 열과 행을 숨기거나 표시하는 기능 + - 새 메서드: [`hideCols()`](api/spreadsheet_hidecols_method.md), [`showCols()`](api/spreadsheet_showcols_method.md), [`hideRows()`](api/spreadsheet_hiderows_method.md), [`showRows()`](api/spreadsheet_showrows_method.md) + - 새 액션: [`toggleVisibility`](api/overview/actions_overview.md#list-of-actions) + - [`parse()`](api/spreadsheet_parse_method.md) 메서드의 *sheets* 객체 내 *cols* 및 *rows* 구성에 새로운 `hidden` 속성 추가 +- 수식 작업: + - [수식에 대한 설명 팝업](functions.md#popup-with-formula-description)이 추가되었습니다. + - 새로운 로케일: [`formulas`](localization.md#default-locale-for-formulas)가 추가되었습니다. +- 파일 가져오기: + - Spreadsheet로의 데이터 로딩 완료를 나타내는 새로운 [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md) 이벤트가 추가되었습니다. + +### 수정 사항 {#fixes-52} + +- 정렬 관련 문제 +- 필터가 새 열로 이동하는 문제 +- "addSheet" 액션으로 시트 추가를 차단할 때 발생하는 오류 +- 빈 셀 필터링 관련 문제 +- 크게 병합된 테이블 편집 관련 문제 +- 셀에서 동작을 취소할 때 발생하는 오류 +- IF 수식이 있는 셀을 입력/편집할 때 발생하는 오류 +- 링크를 잘라내어 붙여넣은 후 발생하는 스크립트 오류 +- .xlsx 파일 내보내기/가져오기 시 텍스트 정렬이 변경되는 문제 +- 일부 동작 후 Spreadsheet 포커스가 사라지는 문제 +- 성능 개선 + +## 버전 5.1.8 {#version-518} + +2024년 12월 10일 출시 + +### 수정 사항 {#fixes-518} + +- 프레임워크로 가져올 때 로컬 평가판 패키지 관련 문제 + +## 버전 5.1.7 {#version-517} + +2024년 11월 27일 출시 + +### 수정 사항 {#fixes-517} + +- "항목을 찾을 수 없음" 경고가 제거되었습니다. +- 파싱 최적화 +- 열린 셀 편집기가 (Shift)+Tab 단축키로 인접한 셀로 이동해도 닫히지 않습니다. + +## 버전 5.1.6 {#version-516} + +2024년 7월 25일 출시 + +### 수정 사항 {#fixes-516} + +- 삽입된 행/열이 데이터를 로드할 때 직렬화된 데이터에서 누락되는 문제 +- 빈 날짜 셀이 날짜 선택기와 시간 선택기에 마지막으로 선택한 날짜를 표시하는 문제 +- 숫자 현지화 및 셀의 빈 문자열 값 관련 문제 +- 셀 편집 중 검색이 포커스를 받지 못하는 문제 +- Spreadsheet 컨테이너에 `ngIf/ngFor`를 사용하면 컴포넌트가 중단되는 문제 + +## 버전 5.1.5 {#version-515} + +2024년 2월 13일 출시 + +### 수정 사항 {#fixes-515} + +- 0이 포함된 셀을 붙여넣으면 빈 셀이 생성되는 문제 +- 빈 셀을 복사한 후 붙여넣으면 오류가 발생하는 문제 +- 공통 형식에 대한 `setValue()` 기능 수정 +- 직렬화 중 시트 id를 저장하고 `afterAction` 이벤트로 반환하는 문제 수정 +- UI를 통한 크로스 시트 수식 사용 수정 +- Ctrl+F 검색 수정 + +## 버전 5.1.4 {#version-514} + +2024년 1월 31일 출시 + +### 수정 사항 {#fixes-514} + +- 병합된 셀을 잘못 붙여넣는 문제 + +## 버전 5.1.3 {#version-513} + +2024년 1월 29일 출시 + +### 수정 사항 {#fixes-513} + +- "common" 형식에서 숫자 값을 잘못 파싱하는 문제 +- Spreadsheet를 Suite와 함께 사용할 때 현지화 i18n 관련 문제 +- 많은 수의 병합 영역이 포함된 테이블을 로드할 때의 성능 문제 +- 병합된 셀을 잘못 붙여넣는 문제 + +## 버전 5.1.2 {#version-512} + +2024년 1월 16일 출시 + +### 수정 사항 {#fixes-512} + +- Excel에서 Spreadsheet로 날짜가 포함된 셀을 복사하여 붙여넣으면 문자열로 표시되는 문제 수정 +- "common" 형식의 숫자 값이 숫자로 형식화되는 문제 수정 +- 초기 데이터 세트를 변경하는 데이터 파싱 관련 문제 수정 +- 병합된 셀 붙여넣기 관련 문제 수정 + +## 버전 5.1.1 {#version-511} + +2023년 12월 14일 출시 + +### 수정 사항 {#fixes-511} + +- `fixColumn()` 메서드가 선택 편집기의 화살표 아이콘을 무시하는 문제 수정 +- 셀 스타일이 범위 스타일보다 우선하는 문제 수정 +- 스타일이 적용된 셀의 내용을 복사/붙여넣기하고 실행 취소 기능을 사용할 때의 문제 수정 +- 다른 셀에 붙여넣는 동안 링크가 변경되는 문제 수정 +- 병합된 셀 복사/붙여넣기 관련 문제 수정 +- 스타일 직렬화 관련 문제 수정 +- `setSelectedCell()` 또는 `setFocusedCell()` 메서드를 호출할 때 해당 셀로 스크롤하는 문제 수정 + +## 버전 5.1 {#version-51} + +2023년 12월 7일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-1/) + +### 새로운 기능 {#new-functionality-51} + +- [새로운 테마 지원](/themes/): 다크, 라이트 고대비, 다크 고대비 +- [숫자, 날짜, 시간 및 통화 형식 현지화 지원 확장](number_formatting.md#number-date-time-currency-localization) +- [Svelte 프레임워크 통합](svelte_integration.md) +- [내보낸 .xlsx 파일에 사용자 정의 이름 제공](loading_data.md#how-to-set-a-custom-name-for-an-exported-file)하는 기능 +- 데이터 세트에서 ["잠긴" 셀 상태를 저장](loading_data.md#setting-the-locked-state-for-a-cell)하고 [셀에 링크를 지정](loading_data.md#adding-a-link-into-a-cell)하는 기능 + +### 업데이트 {#updates-51} + +- [React, Angular 및 Vue.js 통합 갱신](/integrations/) +- 수식에서 소문자를 대문자로 자동 [변환](functions.md) +- 수식 자동 닫기 + +### 수정 사항 {#fixes-51} + +- 셀에 설정된 값에 실행 취소를 적용할 때의 문제 수정 +- 붙여넣을 수 있는 행 수 제한 수정 +- 편집 줄의 수식에서 공백이 ` ` 기호로 대체되는 문제 수정 +- 날짜 형식의 값이 있는 Excel 가져오기가 잘못 작동하는 문제 수정 +- 셀 블록 편집이 잘못 작동하는 문제 수정 +- 필터링 중 `getExcelDate()`를 호출할 때 나타나는 스크립트 오류 수정 +- 셀 내용을 붙여넣을 때 텍스트 값이 숫자로 변환되는 문제 수정 +- 열 너비가 수정된 Excel 파일에서 데이터를 붙여넣을 때 잘못 붙여넣어지는 문제 수정 + +## 버전 5.0.10 {#version-5010} + +2023년 11월 27일 출시 + +### 수정 사항 {#fixes-5010} + +- 타입 관련 문제 수정 + +## 버전 5.0.9 {#version-509} + +2023년 10월 24일 출시 + +### 수정 사항 {#fixes-509} + +- before/afterSelectionSet 이벤트를 트리거하는 setStyle() 메서드의 잘못된 호출 수정 +- 잘못된 내용 줄바꿈 수정 +- 타입 관련 문제 수정 + +## 버전 5.0.7 {#version-507} + +2023년 9월 21일 출시 + +### 수정 사항 {#fixes-507} + +- Excel로 수식을 내보낼 때의 문제 수정 +- 실행 취소 버튼을 클릭할 때 잘라낸 셀 내용이 복원되지 않는 문제 수정 + +## 버전 5.0.6 {#version-506} + +2023년 9월 18일 출시 + +### 수정 사항 {#fixes-506} + +- 0을 렌더링할 때의 문제 수정 +- 문자열 값으로 설정된 색상 스타일을 적용할 때의 문제 수정 +- XSS 취약점 관련 문제 수정 +- 비활성 시트에서 값을 변경하면 활성 시트의 값이 수정되는 문제 수정 + +## 버전 5.0.5 {#version-505} + +2023년 8월 10일 출시 + +### 수정 사항 {#fixes-505} + +- XSS 취약점 관련 문제 수정 +- 셀 병합 영역이 포함된 데이터를 잘못 붙여넣는 문제 수정 + +## 버전 5.0.4 {#version-504} + +2023년 6월 5일 출시 + +### 수정 사항 {#fixes-504} + +- 읽기 전용 모드에서 블록 선택 또는 컨텍스트 메뉴 호출 시 오류 수정 +- 읽기 전용 모드에서 편집 메뉴가 표시되는 문제 수정 +- 숫자 반올림이 잘못되는 문제 수정 +- 셀 병합 후 편집 줄에서 수식이 결과로 대체되는 문제 수정 + +## 버전 5.0.3 {#version-503} + +2023년 4월 26일 출시 + +### 수정 사항 {#fixes-503} + +- 병합할 마지막 셀 계산이 잘못되는 문제 수정 +- Excel 가져오기/내보내기 관련 문제 수정 +- 데이터 유효성 검사를 적용한 후 데이터가 바뀌는 문제 수정 +- ":" 기호가 포함된 텍스트가 링크로 해석되는 문제 수정 +- 여러 줄 데이터를 로드하는 문제 수정. 이제 [`styles`](api/spreadsheet_parse_method.md#parsing-styled-data) 객체에 `multiline: "wrap"` 속성을 설정할 수 있습니다. +- [`multiSheets`](api/spreadsheet_multisheets_config.md)가 `false`로 설정된 경우 Spreadsheet 초기화 시 셀 병합 관련 문제 수정 +- 테이블 헤더의 열 간 크기 조정 커서를 더블 클릭한 후 스크롤 위치가 재설정되는 문제 수정 + +## 버전 5.0.2 {#version-502} + +2023년 2월 14일 출시 + +### 수정 사항 {#fixes-502} + +- 셀 값을 복사하여 붙여넣은 후 셀 정렬이 저장되지 않는 문제 수정 +- 데이터를 정렬한 후 필터링 결과가 변경되는 문제 수정 +- 시간 선택기에서 12시간 형식 표시 관련 문제 수정 +- 셀이 자동 채우기된 후 링크 스타일이 제거되는 문제 수정 +- 이제 날짜에 [여러 사용자 정의 형식](number_formatting.md#formats-customization)을 추가할 수 있습니다. +- 이제 [제한된 열과 행](configuration.md#number-of-rows-and-columns)에 속하더라도 열과 행을 제거할 수 있습니다. + +## 버전 5.0.1 {#version-501} + +2023년 1월 19일 출시 + +### 수정 사항 {#fixes-501} + +- 통화 형식의 셀에 입력된 값이 숫자가 아닌 문자열로 저장되는 문제 수정 +- 이전에 검색된 셀의 선택이 지워지지 않는 문제 수정 +- 스프레드시트로 파싱한 후 데이터 표시 관련 문제 수정 +- 열을 제거한 후 그리드 다시 그리기 관련 문제 수정 +- 빈 값 정렬 관련 문제 수정 +- 드롭다운 목록 사용 시 숫자 값 유효성 검사 관련 문제 수정 +- 영숫자 값이 포함된 셀의 자동 채우기 기능 작동 수정 +- 숫자 형식 마스크 작업 개선 +- 이제 셀의 모든 숫자 값이 기본적으로 오른쪽 정렬됩니다. + +## 버전 5.0 {#version-50} + +2022년 11월 21일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-0/) + +### 주요 변경 사항 {#breaking-changes-50} + +새 릴리스에서는 [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 속성에 일부 변경 사항이 도입되었습니다. 최신 버전을 유지하려면 [마이그레이션 문서](migration.md#43---50)를 확인하세요. + +### 새로운 기능 {#new-functionality-50} + +- 데이터 검색: + - [UI](data_search.md)를 통해 데이터를 검색하는 기능 + - [API](working_with_ssheet.md#searching-for-data)를 통해 데이터를 검색하는 기능: + - 새 메서드: [`search()`](api/spreadsheet_search_method.md) 및 [`hideSearch()`](api/spreadsheet_hidesearch_method.md) +- 데이터 필터링: + - [UI](filtering_data.md)를 통해 데이터를 필터링하는 기능 + - [API](working_with_ssheet.md#filtering-data)를 통해 데이터를 필터링하는 기능: + - 새 메서드: [`setFilter()`](api/spreadsheet_setfilter_method.md) 및 [`getFilter()`](api/spreadsheet_getfilter_method.md) + - 새 액션: [`filter`](api/overview/actions_overview.md#list-of-actions) +- 셀 병합/분리: + - [UI](merge_cells.md)를 통해 셀을 병합/분리하는 기능 + - [API](working_with_cells.md#merging-cells)를 통해 셀을 병합/분리하는 기능: + - 시트 객체의 새 속성: [`merged`](api/spreadsheet_parse_method.md) + - 새 메서드: [`mergeCells()`](api/spreadsheet_mergecells_method.md) + - 새 액션: [`merge`](api/overview/actions_overview.md#list-of-actions) 및 [`unmerge`](api/overview/actions_overview.md#list-of-actions) +- 열 너비 자동 맞춤: + - [UI](work_with_rows_cols.md#autofit-column-width)를 통해 열 너비를 자동으로 맞추는 기능 + - [API](working_with_ssheet.md#autofit-column-width)를 통해 열 너비를 자동으로 맞추는 기능: + - 새 메서드: [`fitColumn()`](api/spreadsheet_fitcolumn_method.md) + - 새 액션: [`fitColumn`](api/overview/actions_overview.md#list-of-actions) +- 하이퍼링크 삽입: + - [UI](work_with_cells.md#inserting-a-hyperlink-into-a-cell)를 통해 셀에 하이퍼링크를 삽입하는 기능 + - [API](working_with_cells.md#inserting-a-hyperlink-into-a-cell)를 통해 셀에 하이퍼링크를 삽입하는 기능: + - 새 메서드: [`insertLink()`](api/spreadsheet_insertlink_method.md) + - 새 액션: [`insertLink`](api/overview/actions_overview.md#list-of-actions) +- [데이터 취소선 형식](data_formatting.md#color-and-style) + +### 업데이트 {#updates-50} + +- [로케일 옵션 확장 목록](localization.md#default-locale) +- [단축키 조합 확장 목록](hotkeys.md): + - 데이터 검색용 + - `Ctrl (Cmd) + F` + - `Ctrl (Cmd) + G` + - `Ctrl (Cmd) + Shift + G` + - 전체 열/행 선택용 + - `Ctrl (Cmd) + Space` + - `Shift + Space` + - 셀 내용 왼쪽/오른쪽/가운데 정렬용 + - `Ctrl (Cmd) + Shift + L` + - `Ctrl (Cmd) + Shift + R` + - `Ctrl (Cmd) + Shift + E` + - 셀 내용에 취소선 적용용 + - `Alt + Shift + 5 (Cmd + Shift + X)` + - 새 시트 추가 및 시트 간 전환용 + - `Shift + F11` + - `Alt + Arrow Up/ Arrow Down` + - 셀에 하이퍼링크 삽입용 + - `Ctrl (Cmd) + K` + +## 버전 4.3 {#version-43} + +2022년 5월 23일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-3/) + +### 주요 변경 사항 {#breaking-changes-43} + +버전 4.3은 주요 변경 사항을 도입하지 않지만 스프레드시트에서 수행된 작업을 처리하는 새로운 방법을 소개합니다. 자세한 내용은 [마이그레이션 문서](migration.md#42---43)에서 확인하세요. + +### 새로운 기능 {#new-functionality-43} + +- [`setValidation()`](api/spreadsheet_setvalidation_method.md) 메서드 또는 [UI](work_with_cells.md#using-drop-down-lists-in-cells)를 통해 셀에 드롭다운 옵션 목록을 추가하는 기능 +- `topSplit` 속성을 통해 스프레드시트 상단에 행을 고정하는 기능 +- [`sortCells()`](api/spreadsheet_sortcells_method.md) 메서드 또는 [UI](sorting_data.md)를 통해 데이터를 정렬하는 기능 +- [긴 텍스트를 여러 줄로 분할하는 기능](data_formatting.md#wrap-text-in-a-cell) (*텍스트 줄바꿈* 버튼이 툴바에 추가됨) +- 지원되는 [날짜, 금융, 수학, 문자열 함수](functions.md#information-functions)의 목록이 크게 확장되었습니다 (*v4.3에 추가됨* 레이블로 표시됨) +- [조회 함수](functions.md#lookup-functions) 지원 +- [시간 형식](number_formatting.md#default-number-formats)이 추가되었습니다. +- [`timeFormat`](api/spreadsheet_localization_config.md) 속성을 통해 스프레드시트 셀의 시간 형식을 정의하는 기능 +- 시간 선택기를 통해 셀에 시간을 입력하는 기능 +- [JSON으로 내보내기](api/export_json_method.md) +- [JSON에서 가져오기](api/spreadsheet_load_method.md#loading-json-files) +- 새 이벤트 추가: [beforeAction](api/spreadsheet_beforeaction_event.md) 및 [afterAction](api/spreadsheet_afteraction_event.md) +- 새 [액션 시스템](api/overview/actions_overview.md) + +### 업데이트 {#updates-43} + +- [`parse()`](api/spreadsheet_parse_method.md) 메서드가 업데이트되었습니다. 셀 객체의 새로운 **editor** 속성이 추가되었습니다. + +## 버전 4.2 {#version-42} + +2021년 11월 29일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-2-with130-new-functions-boolean-operators-date-format-row-resizing-much/) + +### 새로운 기능 {#new-functionality-42} + +- [날짜](functions.md#date-functions), [금융](functions.md#financial-functions), [정보](functions.md#information-functions), [정규식](functions.md#regex-functions) 및 [기타](functions.md#other-functions) 함수 지원 +- [불리언 연산자](functions.md#boolean-operators) 지원 +- UI에서 행 크기 조정 기능 +- 툴바에 새로운 [세로 정렬](data_formatting.md#alignment) 버튼이 추가되었습니다. +- `setActiveSheet()` 메서드를 통해 활성 시트를 설정하는 기능 +- Selection 객체의 [`removeSelectedCell()`](api/selection_removeselectedcell_method.md) 메서드를 통해 지정된 셀에서 선택을 제거하는 기능 +- [`clear()`](api/spreadsheet_clear_method.md) 또는 `clearSheet()` 메서드를 통해 스프레드시트 또는 해당 시트를 지우는 기능 +- 새 이벤트 추가: [`beforeClear`](api/spreadsheet_beforeclear_event.md), [`afterClear`](api/spreadsheet_afterclear_event.md), `beforeSheetClear`, `afterSheetClear` +- [`dateFormat`](api/spreadsheet_localization_config.md) 속성을 통해 스프레드시트에서 날짜 형식을 정의하는 기능 +- [기본 숫자 형식에 날짜 형식이 추가되었습니다](number_formatting.md#default-number-formats) + +### 업데이트 {#updates-42} + +- [로케일 옵션](localization.md) 확장 목록 +- [수학](functions.md#math-functions) 및 [문자열](functions.md#string-functions) 함수 확장 목록 +- Spreadsheet 툴바의 정렬 블록이 업데이트되었습니다. 자세한 내용은 [마이그레이션 문서](migration.md#41---42)에서 확인하세요. +- [`parse()`](api/spreadsheet_parse_method.md) 및 [`serialize()`](api/spreadsheet_serialize_method.md) 메서드가 업데이트되었습니다. 시트 객체의 새로운 **rows** 및 **cols** 속성을 통해 각 시트의 행 높이와 열 너비 상태를 저장할 수 있습니다. + +### 수정 사항 {#fixes-42} + +- CTRL-X 단축키 관련 문제 +- [편집 표시줄](api/spreadsheet_editline_config.md)이 숨겨진 스프레드시트에서 셀을 편집할 때 스크립트 오류가 발생하는 문제 + +## 버전 4.1.3 {#version-413} + +2021년 8월 31일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-6-scheduler-5-3-12-suite-7-2-1/) + +### 수정 사항 {#fixes-413} + +- 행/열을 제거한 후 되돌릴 때 실행 취소 작업이 잘못 동작하는 문제 수정 +- 숫자 형식 객체에 지정된 "mask" 속성이 잘못 작동하는 문제 수정 +- Excel에서 스프레드시트로 데이터를 붙여넣을 때 선택 범위 상단의 빈 셀/행이 잘려지는 문제 수정 +- 절대 수식이 참조하는 셀이 표시되지 않는 문제 수정 +- 셀 범위를 선택한 후 "afterSelectionSet" 이벤트가 두 번 발생하는 문제 수정 +- TypeScript 정의 관련 문제 수정 +- "text" 숫자 형식 관련 문제 수정 + +## 버전 4.1.2 {#version-412} + +2021년 6월 3일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/maintenance-release-suite-7-1-9-spreadsheet-4-1-2/) + +### 수정 사항 {#fixes-412} + +- 여러 열에 자동 채우기를 적용할 때 수학 함수가 포함된 셀이 잘못 자동 채워지는 문제 수정 +- "Ctrl + Click"으로 셀을 클릭한 후 선택된 셀이 선택 해제되지 않는 문제 수정 +- 키 탐색을 사용하여 수식을 선택한 후 셀에 수식을 적용할 때의 문제 수정 +- "Ctrl + Click"으로 셀을 선택할 때 셀 잠금/해제 관련 문제 수정 +- "0" 값이 직렬화되지 않는 "serialize()" 메서드 관련 문제 수정 +- 테이블 헤더의 열 간 경계를 클릭할 때 열 너비 자동 조정 관련 문제 수정 +- 편집 줄에서 0 값이 표시되지 않는 문제 수정 +- 긴 셀 내용 편집 관련 문제 수정 +- 스프레드시트를 Excel 파일로 내보낼 때의 문제 수정 +- 많은 열이 포함된 스프레드시트에서 가로 스크롤바와 열 표시가 잘못 동작하는 문제 수정 +- 빈 스프레드시트에서 키 탐색 사용 시 스크립트 오류 수정 + +## 버전 4.1.1 {#version-411} + +2021년 4월 14일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-2-suite-7-1-5-spreadsheet-4-1-1/) + +### 수정 사항 {#fixes-411} + +- TypeScript 정의 관련 문제 수정 +- 절대 참조 관련 문제 수정 +- ".xlsx" 확장자를 가진 파일에서 로드된 데이터로 작업할 때 발생하는 문제 수정 +- Excel 파일에서 복사한 데이터를 잘못 붙여넣는 문제 수정 +- 부동 소수점 숫자를 합산할 때 잘못된 결과가 반환되는 문제 수정 + +## 버전 4.1 {#version-41} + +2021년 3월 24일 출시 + +[블로그에서 릴리스 리뷰 보기](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-1-multiple-sheets/) + +### 새로운 기능 {#new-functionality-41} + +- 새로운 [multiSheets](api/spreadsheet_multisheets_config.md) 구성 옵션이 추가되었습니다. +- 스프레드시트에서 [여러 시트로 작업](work_with_sheets.md)하는 기능 +- [여러 시트에서 상호 참조](work_with_sheets.md#cross-references-between-sheets) 사용 기능 +- 스프레드시트에 [여러 시트를 한 번에 로드](working_with_sheets.md#loading-multiple-sheets)하는 기능 +- [여러 시트](working_with_sheets.md)로 작업하기 위한 새 메서드가 추가되었습니다: `addSheet()`, `removeSheet()`, `getActiveSheet()`, `getSheets()` +- 새 이벤트가 추가되었습니다: `BeforeSheetAdd`, `AfterSheetAdd`, [`BeforeSheetChange`](api/spreadsheet_beforesheetchange_event.md), [`AfterSheetChange`](api/spreadsheet_aftersheetchange_event.md), `BeforeSheetRemove`, `AfterSheetRemove`, `BeforeSheetRename`, `AfterSheetRename` +- [getFormula()](api/spreadsheet_getformula_method.md) 메서드를 통해 셀의 수식을 가져오는 기능 + +### 업데이트 {#updates-41} + +- [getValue()](api/spreadsheet_getvalue_method.md), [setValue()](api/spreadsheet_setvalue_method.md), [getStyle()](api/spreadsheet_getstyle_method.md), [setStyle()](api/spreadsheet_setstyle_method.md), [getFormat()](api/spreadsheet_getformat_method.md), [setFormat()](api/spreadsheet_setformat_method.md), [isLocked()](api/spreadsheet_islocked_method.md), [lock()](api/spreadsheet_lock_method.md), [unlock()](api/spreadsheet_unlock_method.md) 메서드의 "cell" 파라미터 형식이 업데이트되었습니다. 이제 셀 또는 셀 범위에 대한 참조에 탭 이름을 포함할 수 있습니다. + +## 버전 4.0.5 {#version-405} + +2021년 2월 3일 출시 + +### 수정 사항 {#fixes-405} + +- 성능 문제 수정 +- 사용자가 셀에서 마지막 동작을 되돌릴 때 발생하는 스크립트 오류 수정 +- 소멸자를 호출한 후 발생하는 스크립트 오류 수정 +- 단일 셀에 붙여넣을 때 셀 범위의 값이 잘리는 문제 수정 +- 셀을 잘라내어 두 번째로 붙여넣은 후 셀 형식이 인식되지 않는 문제 수정 + +## 버전 4.0.4 {#version-404} + +2021년 1월 12일 출시 + +### 수정 사항 {#fixes-404} + +- 2개 이상의 숫자로 작업할 때 "SUM" 함수가 잘못 작동하는 문제 수정 +- "destructor()"를 호출한 후 스프레드시트 초기화 관련 문제 수정 +- 타입 관련 문제 수정 + +## 버전 4.0.3 {#version-403} + +2020년 12월 28일 출시 + +### 수정 사항 {#fixes-403} + +- 데이터 세트 내 셀 값의 형식을 설정할 때의 문제 수정 +- 스프레드시트를 레이아웃에 연결할 때 발생하는 오류 수정 +- 결과가 계산된 후 셀에 설정된 수식이 편집되지 않는 문제 수정 +- [setFocusedCell()](api/selection_setfocusedcell_method.md) 메서드가 잘못 작동하는 문제 수정 +- 수식으로 작업할 때 포커스의 잘못된 동작 수정 +- "ctrl" 키를 사용하여 셀 범위를 선택할 때의 문제 수정 +- 수식이 있는 셀에 "ctrl+click"으로 셀 범위를 추가할 때의 문제 수정 +- 수학 함수가 잘못 작동하는 문제 수정 +- 팝업과 마우스 클릭으로 SUM() 수식을 선택할 때의 문제 수정 + +## 버전 4.0.2 {#version-402} + +2020년 12월 21일 출시 + +### 수정 사항 {#fixes-402} + +- 페이지에 2개 이상의 스프레드시트 객체를 생성할 때 키 탐색이 잘못 동작하는 문제 수정 +- types.d.ts 파일에서 오류가 발생하는 문제 수정 +- 셀 범위를 복사하고 붙여넣을 때의 문제 수정 + +## 버전 4.0.1 {#version-401} + +2020년 12월 2일 출시 + +### 수정 사항 {#fixes-401} + +- 툴바에서 실행 취소/다시 실행 버튼 위에 마우스를 올릴 때 툴팁이 잘못 표시되는 문제 +- 스프레드시트 크기보다 큰 데이터를 가져온 후 마지막 열을 제거할 때 발생하는 문제 +- 선택된 셀의 수식이 수식 표시줄에 표시되지 않는 [setSelectedCell()](api/selection_setselectedcell_method.md) 메서드 관련 문제 +- TypeScript 정의 생성 관련 문제 +- 셀 내용 정렬의 시각적 문제 +- 빈 셀 또는 0 값을 가진 셀을 직렬화할 때의 문제 + +## 버전 4.0 {#version-40} + +2020년 10월 19일 출시 + +### 새로운 기능 {#new-functionality-40} + +- [수학 함수](functions.md) +- [TypeScript 지원](using_typescript.md) +- `leftSplit` 구성 속성을 통해 스프레드시트 왼쪽에 열을 고정하는 기능 +- [셀 내용을 텍스트로 표시하는 텍스트 형식이 기본 숫자 형식에 추가되었습니다](number_formatting.md#default-number-formats) +- ["Ctrl+Shift+Left Click"](hotkeys.md#selection) 조합을 사용하여 여러 흩어진 셀 범위를 선택하는 기능 + +### 수정 사항 {#fixes-40} + +- 셀 범위에 배경색을 적용할 때 색상 선택기가 잘못 작동하는 문제 수정 +- Excel 파일을 가져올 때 숫자가 잘못 파싱되는 문제 수정 +- Google 또는 Excel 테이블에서 복사한 모든 데이터가 스프레드시트의 하나의 셀에 삽입되는 문제 수정 +- 편집 작업이 콘솔 오류로 완료되는 [editLine:false](api/spreadsheet_editline_config.md) 속성이 잘못 작동하는 문제 수정 +- `AfterValueChange` 이벤트가 두 번 호출되는 문제 수정 + +## 버전 3.1.4 {#version-314} + +2019년 9월 19일 출시 + +### 수정 사항 {#fixes-314} + +- 스타일 수정 + +## 버전 3.1.3 {#version-313} + +2019년 9월 19일 출시 + +### 수정 사항 {#fixes-313} + +- Spreadsheet가 레이아웃에 연결될 때 셀 포커스 관련 문제 + +## 버전 3.1.2 {#version-312} + +2019년 3월 25일 출시 + +### 수정 사항 {#fixes-312} + +- Excel 내보내기에서 텍스트 스타일 관련 문제 +- 오른쪽 정렬된 텍스트의 밑줄 관련 문제 + +## 버전 3.1.1 {#version-311} + +2019년 3월 25일 출시 + +### 수정 사항 {#fixes-311} + +- Excel로 내보내기 관련 문제 + +## 버전 3.1 {#version-31} + +2019년 3월 21일 출시 + +### 새로운 기능 {#new-functionality-31} + +- [Excel에서 가져오기](loading_data.md#loading-excel-file-xlsx) +- [Excel로 내보내기](loading_data.md#exporting-data) +- [숫자 형식](number_formatting.md) +- [셀 자동 채우기](work_with_cells.md#auto-filling-cells-with-content) + +### 업데이트 {#updates-31} + +- [셀 범위에서의 단축키 동작](hotkeys.md) + +### 수정 사항 {#fixes-31} + +- 활성 셀에서의 단축키 관련 문제 + +## 버전 3.0.3 {#version-303} + +2018년 12월 13일 출시 + +### 수정 사항 {#fixes-303} + +- 사용자 정의 읽기 전용 모드에서 잘못된 동작 +- 열/행 제거 메서드 관련 문제 +- 편집 줄에서 포커스가 사라지는 문제 +- 활성 셀에서의 단축키 관련 문제 + +## 버전 3.0.2 {#version-302} + +2018년 12월 6일 출시 + +### 수정 사항 {#fixes-302} + +- 단축키 동작 관련 문제 +- 선택 핸들 위치 관련 문제 +- 활성 셀에서 포커스가 사라지는 문제 +- 활성 셀에서 선택이 잘못 동작하는 문제 +- 활성 셀에서 단축키가 잘못 동작하는 문제 +- 화살표 키로 스크롤이 잘못 동작하는 문제 + +## 버전 3.0.1 {#version-301} + +2018년 11월 8일 출시 + +### 수정 사항 {#fixes-301} + +- 실행 취소 작업이 잘못 동작하는 문제 +- 셀 그룹에서 잘라내기-붙여넣기 작업이 잘못 동작하는 문제 + +## 버전 3.0 {#version-30} + +2018년 10월 25일 출시 + +### 주요 변경 사항 {#breaking-change} + +{{note 버전 3.0의 API는 API v2.1과 호환되지 않습니다.}} + +이전 PHP 기반 버전과 비교하여 버전 3.0의 DHTMLX Spreadsheet는 완전한 클라이언트 측 JavaScript 컴포넌트입니다. + +새 API 사용에 대한 자세한 내용은 [마이그레이션](migration.md#21---30) 문서를 확인하세요. + +### 새로운 기능 {#new-functionality-30} + +Spreadsheet의 API가 변경되어 더욱 편리하게 사용할 수 있게 되었습니다. 또 다른 중요한 업데이트는 컴포넌트의 전체 재설계로 Spreadsheet 인터페이스에 모던한 외관을 제공합니다. 새로운 외관과 함께 DHTMLX Spreadsheet의 사용성이 크게 향상되었습니다. + +- [Spreadsheet 개요](/) +- [완전히 사용자 정의 가능한 구조와 조정 가능한 외관](customization.md) +- [완전히 새로워진 API](api/api_overview.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/work_with_cells.md b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_cells.md new file mode 100644 index 00000000..d2d112c4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_cells.md @@ -0,0 +1,173 @@ +--- +sidebar_label: 셀 편집 +title: 셀 편집 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 셀 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 셀 편집 {#editing-cells} + +## 셀에 내용 입력 {#entering-content-in-a-cell} + +### 수동으로 데이터 입력 {#entering-data-manually} + +- 시트에서 원하는 셀을 클릭하세요. +- 텍스트, 숫자, 날짜 또는 시간을 입력하고 **Enter**를 누르세요. + +### 수식 입력 {#entering-a-formula} + +- 수식 결과를 표시할 셀을 클릭하세요. +- `=` 기호를 입력하세요. +- 수식을 작성하세요. 다음을 사용할 수 있습니다: + - 상수와 계산 연산자, 예: `=3-2*5+12` + - 셀 참조와 계산 연산자, 예: `=A1/A2` + - [내장 함수](functions.md), 예: `=MAX(C46;D46)` +- **Enter**를 누르세요. + +:::note +수식에서 소문자는 자동으로 대문자로 변환됩니다. +::: + +## 셀에 하이퍼링크 삽입 {#inserting-a-hyperlink-into-a-cell} + +### 링크 추가 {#adding-a-link} + +셀에 하이퍼링크를 삽입하려면 아래에 설명된 방법 중 하나를 사용하세요. + +#### 컨텍스트 메뉴 사용 {#using-context-menu} + +- 셀을 마우스 오른쪽 버튼으로 클릭하고 *링크 삽입*을 선택하세요. + +![링크 삽입 옵션이 강조 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/link/via_context_menu.png) + +- 나타나는 창에서 텍스트와 링크를 입력하고 *저장*을 클릭하세요. + +![텍스트 및 링크 입력 필드가 있는 DHTMLX Spreadsheet 링크 삽입 대화 상자](/img/link/popup_window.png) + +#### 툴바 버튼 사용 {#using-toolbar-button} + +- 셀을 선택하고 툴바에서 **링크 삽입** 버튼을 클릭하세요. + +![링크 삽입 버튼이 강조 표시된 DHTMLX Spreadsheet 툴바](/img/link/via_toolbar.png) + +- 나타나는 창에서 텍스트와 링크를 입력하고 *저장*을 클릭하세요. + +#### 메뉴 사용 {#using-menu} + +- 셀을 선택하고 메뉴에서 *삽입 -> 링크 삽입*으로 이동하세요. + +![링크 삽입 옵션이 있는 DHTMLX Spreadsheet 삽입 메뉴](/img/link/via_menu.png) + +- 나타나는 창에서 텍스트와 링크를 입력하고 *저장*을 클릭하세요. + +### 링크 복사 {#copying-a-link} + +- 복사할 링크가 포함된 셀을 선택하세요. +- 나타나는 팝업에서 **복사** 아이콘을 클릭하세요. + +![복사 아이콘이 강조 표시된 DHTMLX Spreadsheet 링크 팝업](/img/link/copy_link.png) + +### 링크 편집 {#editing-a-link} + +- 편집할 링크가 포함된 셀을 선택하세요. +- 나타나는 팝업에서 **편집** 아이콘을 클릭하세요. + +![편집 아이콘이 강조 표시된 DHTMLX Spreadsheet 링크 팝업](/img/link/edit.png) + +### 링크 제거 {#removing-a-link} + +- 제거할 링크가 포함된 셀을 선택하세요. +- 나타나는 팝업에서 **링크 제거** 아이콘을 클릭하세요. + +![링크 제거 아이콘이 강조 표시된 DHTMLX Spreadsheet 링크 팝업](/img/link/remove_link.png) + +## 셀에서 드롭다운 목록 사용 {#using-drop-down-lists-in-cells} + +셀에 드롭다운 목록을 만들어 사용자가 목록에서 필요한 항목을 선택할 수 있도록 할 수 있습니다. + +### 직접 입력으로 드롭다운 목록 만들기 {#creating-a-drop-down-list-by-typing-it-manually} + +- 목록을 만들 셀 또는 셀 범위를 선택하세요. + +- 메뉴에서 *데이터 -> 데이터 유효성 검사*로 이동하세요. + +- *항목 목록* 기준을 선택하세요. + +- 드롭다운 목록에 표시할 항목을 입력하세요. + +- **저장** 버튼을 누르세요. + +![항목 목록에서 드롭다운 목록을 만드는 DHTMLX Spreadsheet 데이터 유효성 검사 대화 상자](/img/data_validation.gif) + +### 범위를 사용하여 드롭다운 목록 만들기 {#creating-a-drop-down-list-by-using-a-range} + +- 드롭다운 목록에 표시할 항목을 입력하세요. + +- 목록을 만들 셀 또는 셀 범위를 선택하세요. + +- 메뉴에서 *데이터 -> 데이터 유효성 검사*로 이동하세요. + +- *범위의 목록* 기준을 선택하세요. + +- 목록 범위를 선택하세요. + +- **저장** 버튼을 누르세요. + +![셀 범위에서 드롭다운 목록을 만드는 DHTMLX Spreadsheet 데이터 유효성 검사 대화 상자](/img/data_validation_range.gif) + +### 셀에서 유효성 검사 제거 {#removing-validation-from-a-cell} + +셀에서 드롭다운 목록 사용을 중단할 수 있습니다. 이를 위해: + +- 드롭다운 목록을 제거할 셀 또는 셀 범위를 선택하세요. +- 메뉴에서 *데이터 -> 데이터 유효성 검사*로 이동하세요. +- *유효성 검사 제거* 옵션을 선택하세요. + +![데이터 유효성 검사 및 유효성 검사 제거 옵션이 있는 DHTMLX Spreadsheet 데이터 메뉴](/img/remove_validation.png) + +## 여러 셀에 동일한 데이터 입력 {#entering-the-same-data-in-several-cells} + +**채우기 핸들**을 사용하여 워크시트 셀에 데이터를 자동으로 채울 수 있습니다. 아래 내용을 참고하세요. + +### 셀 자동 채우기 {#auto-filling-cells-with-content} + +셀에 데이터를 자동으로 채울 수 있습니다. 작동 방식은 다음과 같습니다: + +1\. 더 많은 셀을 채우는 데 사용할 데이터가 있는 셀을 선택하세요. + +2\. 선택한 셀에 데이터를 입력하세요. 자동 채우기는 여러 가지 방법으로 작동합니다: + +- 값 복사 + +예를 들어 4,4,4,4... 시리즈를 만들려면 첫 번째 셀에만 4를 입력하세요. + +- 패턴 따르기 + - 1, 2, 3, 4, 5, ... 시리즈를 만들려면 처음 두 셀에 1과 2를 입력하세요. + - 1, 3, 5, 7, 9, ... 시리즈를 만들려면 처음 두 셀에 1과 3을 입력하세요. + - 2, 4, 6, 8, 10, ... 시리즈를 만들려면 처음 두 셀에 2와 4를 입력하세요. + - 숫자 외에도 패턴에 문자를 사용할 수 있습니다. 예를 들어 1, a, 2, b, 3, a, 4, b, ... 같은 시리즈를 만들려면 처음 네 셀에 1, a, 2, b를 입력하세요. + +3\. **채우기 핸들**을 드래그하세요. + +![셀 데이터를 복제하기 위해 채우기 핸들을 드래그하는 DHTMLX Spreadsheet 자동 채우기](/img/autofill.gif) + +## 셀 잠금 {#locking-cells} + +셀을 잠가 값이 변경되지 않도록 보호할 수 있습니다. 셀을 잠그면 오른쪽 상단 모서리에 회색 "열쇠" 아이콘이 표시됩니다. 잠긴 셀은 편집 시도에 응답하지 않습니다. + +![오른쪽 상단 모서리에 회색 열쇠 아이콘으로 표시된 DHTMLX Spreadsheet 잠긴 셀](/img/lockedcells.png) + +셀을 잠그거나 잠금 해제하려면 아래에 설명된 방법 중 하나를 사용하세요: + +### 툴바 버튼으로 셀 잠금 {#lock-cells-via-the-toolbar-button} + +- 잠그거나 잠금 해제할 셀을 선택하세요 (인접할 필요는 없습니다). +- 툴바에서 **셀 잠금** 버튼을 클릭하세요. + +![셀 잠금 버튼이 강조 표시된 DHTMLX Spreadsheet 툴바](/img/lock.png) + +### 컨텍스트 메뉴로 셀 잠금 {#lock-cells-via-the-context-menu} + +- 잠그거나 잠금 해제할 셀 또는 셀 범위를 마우스 오른쪽 버튼으로 클릭하세요. +- 나타나는 컨텍스트 메뉴에서 셀 잠금/잠금 해제 옵션을 선택하세요. + +![셀 잠금/잠금 해제 옵션이 강조 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/unlock.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/work_with_rows_cols.md b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_rows_cols.md new file mode 100644 index 00000000..2539f976 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_rows_cols.md @@ -0,0 +1,261 @@ +--- +sidebar_label: 행과 열 작업 +title: 행과 열 작업 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 행과 열 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 행과 열 작업 {#work-with-rows-and-columns} + +DHTMLX Spreadsheet를 사용하면 툴바 버튼, 메뉴 옵션, 셀 컨텍스트 메뉴 옵션을 통해 열과 행을 추가 및 제거하고, 열 너비를 내용에 자동으로 맞추고, 열과 행을 고정/해제하고, 열과 행을 숨기거나 표시할 수 있습니다. + +## 행과 열 추가/제거 {#addingremoving-rows-and-columns} + +### 행 추가 {#adding-rows} + +새 행을 추가하려면 다음 단계를 따르세요: + +1\. 행 헤더를 클릭하거나 해당 행의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **행** 버튼을 클릭하고 *위에 행 추가* 옵션을 선택하세요. + +![위에 행 추가 옵션이 강조 표시된 DHTMLX Spreadsheet 행 툴바 버튼](/img/add_row_button.png) + +- **삽입** 메뉴 옵션을 선택하고 *행 -> 위에 행 추가*를 선택하세요. + +![행 및 위에 행 추가 옵션이 표시된 DHTMLX Spreadsheet 삽입 메뉴](/img/add_row_menu.png) + +- 행 또는 행의 셀을 마우스 오른쪽 버튼으로 클릭하고 *행 -> 위에 행 추가*를 선택하세요. + +![위에 행 추가 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/add_row_context_menu.png) + +### 행 제거 {#removing-rows} + +행을 제거하려면 다음 단계를 따르세요: + +1\. 행 헤더를 클릭하거나 행의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **행** 버튼을 클릭하고 *행 제거* 옵션을 선택하세요. + +![행 제거 옵션이 강조 표시된 DHTMLX Spreadsheet 행 툴바 버튼](/img/remove_row_button.png) + +- **삽입** 메뉴 옵션을 선택하고 *행 -> 행 제거*를 선택하세요. + +![행 및 행 제거 옵션이 표시된 DHTMLX Spreadsheet 삽입 메뉴](/img/remove_row_menu.png) + +- 행 또는 행의 셀을 마우스 오른쪽 버튼으로 클릭하고 *행 -> 행 제거*를 선택하세요. + +![행 제거 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/remove_row_context_menu.png) + +:::note +여러 행을 한 번에 제거하려면 행들을 선택하고, 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 *행 -> 행 제거 [ids]*를 선택하세요. +::: + +### 열 추가 {#adding-columns} + +새 열을 추가하려면 다음 단계를 따르세요: + +1\. 열 헤더를 클릭하거나 해당 열의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **열** 버튼을 클릭하고 *왼쪽에 열 추가* 옵션을 선택하세요. + +![왼쪽에 열 추가 옵션이 강조 표시된 DHTMLX Spreadsheet 열 툴바 버튼](/img/add_column_button.png) + +- **삽입** 메뉴 옵션을 선택하고 *열 -> 왼쪽에 열 추가*를 선택하세요. + +![열 및 왼쪽에 열 추가 옵션이 표시된 DHTMLX Spreadsheet 삽입 메뉴](/img/add_column_menu.png) + +- 열 또는 열의 셀을 마우스 오른쪽 버튼으로 클릭하고 *열 -> 왼쪽에 열 추가*를 선택하세요. + +![열 추가 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/add_column_context_menu.png) + +### 열 제거 {#removing-columns} + +열을 제거하려면 다음 단계를 따르세요: + +1\. 열 헤더를 클릭하거나 열의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **열** 버튼을 클릭하고 *열 제거* 옵션을 선택하세요. + +![열 제거 옵션이 강조 표시된 DHTMLX Spreadsheet 열 툴바 버튼](/img/remove_column_button.png) + +- **삽입** 메뉴 옵션을 선택하고 *열 -> 열 제거*를 선택하세요. + +![열 및 열 제거 옵션이 표시된 DHTMLX Spreadsheet 삽입 메뉴](/img/remove_column_menu.png) + +- 열 또는 열의 셀을 마우스 오른쪽 버튼으로 클릭하고 *열 -> 열 제거*를 선택하세요. + +![열 제거 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/remove_column_context_menu.png) + +:::note +여러 열을 한 번에 제거하려면 열들을 선택하고, 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 *열 -> 열 제거 [ids]*를 선택하세요. +::: + +## 열 너비 자동 맞춤 {#autofit-column-width} + +열 너비를 열의 가장 긴 내용에 자동으로 맞추려면 다음 방법 중 하나를 사용할 수 있습니다: + +- 테이블 헤더에서 열의 크기 조정 커서를 더블 클릭하세요. + +![열 너비 자동 맞춤을 위한 크기 조정 커서가 있는 DHTMLX Spreadsheet 열 헤더](/img/resize_cursor.png) + +- 또는 다음 단계를 따르세요: + +1\. 열의 점 3개 아이콘을 왼쪽 클릭하세요. + +![점 3개 아이콘에서 열린 DHTMLX Spreadsheet 열 컨텍스트 메뉴](/img/column_context_menu.png) + +2\. *열 -> 데이터에 맞춤*을 선택하세요. + +![열 너비 자동 맞춤을 위한 데이터에 맞춤 옵션이 있는 DHTMLX Spreadsheet 열 하위 메뉴](/img/column_autofit.png) + +## 행과 열 고정/해제 {#freezingunfreezing-rows-and-columns} + +### 행 고정 {#freezing-rows} + +특정 행까지 행을 고정하려면 다음 단계를 따르세요: + +1\. 행 헤더를 클릭하거나 해당 행의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **행** 버튼을 클릭하고 *[id]행까지 고정* 옵션을 선택하세요. + +![행까지 고정 옵션이 강조 표시된 DHTMLX Spreadsheet 행 툴바 버튼](/img/freeze_rows_toolbar.png) + +- **편집** 메뉴 옵션을 선택하고 *고정 -> [id]행까지 고정*을 선택하세요. + +![행까지 고정 옵션이 있는 고정 하위 메뉴가 표시된 DHTMLX Spreadsheet 편집 메뉴](/img/freeze_rows_menu.png) + +- 행 또는 행의 셀을 마우스 오른쪽 버튼으로 클릭하고 *행 -> [id]행까지 고정*을 선택하세요. + +![행까지 고정 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/freeze_rows_context_menu.png) + +### 행 고정 해제 {#unfreezing-rows} + +(*아래 이미지에서 행은 5행까지 고정되어 있습니다*) + +행 고정을 해제하려면 다음 단계 중 하나를 따르세요: + +- 툴바에서 **행** 버튼을 클릭하고 *행 고정 해제* 옵션을 선택하세요. + +![행 고정 해제 옵션이 강조 표시된 DHTMLX Spreadsheet 행 툴바 버튼](/img/unfreeze_rows_toolbar.png) + +- **편집** 메뉴 옵션을 선택하고 *고정 -> 행 고정 해제*를 선택하세요. + +![행 고정 해제 옵션이 있는 고정 하위 메뉴가 표시된 DHTMLX Spreadsheet 편집 메뉴](/img/unfreeze_rows_menu.png) + +- 임의의 셀을 마우스 오른쪽 버튼으로 클릭하고 *행 -> 행 고정 해제*를 선택하세요. + +![행 고정 해제 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/unfreeze_rows_context_menu.png) + +### 열 고정 {#freezing-columns} + +특정 열까지 열을 고정하려면 다음 단계를 따르세요: + +1\. 열 헤더를 클릭하거나 해당 열의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **열** 버튼을 클릭하고 *[id]열까지 고정* 옵션을 선택하세요. + +![열까지 고정 옵션이 강조 표시된 DHTMLX Spreadsheet 열 툴바 버튼](/img/freeze_columns_toolbar.png) + +- **편집** 메뉴 옵션을 선택하고 *고정 -> [id]열까지 고정*을 선택하세요. + +![열까지 고정 옵션이 있는 고정 하위 메뉴가 표시된 DHTMLX Spreadsheet 편집 메뉴](/img/freeze_columns_menu.png) + +- 열 또는 열의 셀을 마우스 오른쪽 버튼으로 클릭하고 *열 -> [id]열까지 고정*을 선택하세요. + +![열까지 고정 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/freeze_columns_context_menu.png) + +### 열 고정 해제 {#unfreezing-columns} + +(*아래 이미지에서 열은 D열까지 고정되어 있습니다*) + +열 고정을 해제하려면 다음 단계 중 하나를 따르세요: + +- 툴바에서 **열** 버튼을 클릭하고 *열 고정 해제* 옵션을 선택하세요. + +![열 고정 해제 옵션이 강조 표시된 DHTMLX Spreadsheet 열 툴바 버튼](/img/unfreeze_columns_toolbar.png) + +- **편집** 메뉴 옵션을 선택하고 *고정 -> 열 고정 해제*를 선택하세요. + +![열 고정 해제 옵션이 있는 고정 하위 메뉴가 표시된 DHTMLX Spreadsheet 편집 메뉴](/img/unfreeze_columns_menu.png) + +- 임의의 셀을 마우스 오른쪽 버튼으로 클릭하고 *열 -> 열 고정 해제*를 선택하세요. + +![열 고정 해제 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/unfreeze_columns_context_menu.png) + +## 행과 열 숨기기/표시 {#hidingshowing-rows-and-columns} + +### 행 숨기기 {#hiding-rows} + +행을 숨기려면 다음 단계를 따르세요: + +1\. 행 헤더를 클릭하거나 해당 행의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **행** 버튼을 클릭하고 *행 숨기기 [id]* 옵션을 선택하세요. + +![행 숨기기 옵션이 강조 표시된 DHTMLX Spreadsheet 행 툴바 버튼](/img/hide_rows_toolbar.png) + +- 행 또는 행의 셀을 마우스 오른쪽 버튼으로 클릭하고 *행 -> 행 숨기기 [id]*를 선택하세요. + +![행 숨기기 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/hide_row_context_menu.png) + +### 행 표시 {#showing-rows} + +숨겨진 행을 표시하려면 다음 단계 중 하나를 따르세요: + +- 숨겨진 행/행들 대신 행 헤더에 나타나는 "화살표" 아이콘을 클릭하세요. + +(*아래 이미지에서 8행과 11행이 숨겨져 있습니다*) + +![숨겨진 행을 나타내는 화살표 아이콘이 있는 DHTMLX Spreadsheet 행 헤더](/img/show_rows.png) + +- 행이나 여러 셀을 선택하여 숨겨진 행이 선택 범위에 포함되도록 한 후, 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 *행 -> 행 표시*를 선택하세요. + +(*아래 이미지에서 8행이 숨겨져 있습니다*) + +![행 표시 옵션이 있는 행 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/show_rows_context_menu.png) + +### 열 숨기기 {#hiding-columns} + +열을 숨기려면 다음 단계를 따르세요: + +1\. 열 헤더를 클릭하거나 해당 열의 셀을 선택하세요. + +2\. 다음 작업 중 하나를 선택하세요: + +- 툴바에서 **열** 버튼을 클릭하고 *열 숨기기 [id]* 옵션을 선택하세요. + +![열 숨기기 옵션이 강조 표시된 DHTMLX Spreadsheet 열 툴바 버튼](/img/hide_columns_toolbar.png) + +- 열 또는 열의 셀을 마우스 오른쪽 버튼으로 클릭하고 *열 -> 열 숨기기 [id]*를 선택하세요. + +![열 숨기기 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/hide_columns_context_menu.png) + +### 열 표시 {#showing-columns} + +숨겨진 열을 표시하려면 다음 단계 중 하나를 따르세요: + +- 숨겨진 열/열들 대신 열 헤더에 나타나는 "화살표" 아이콘을 클릭하세요. + +(*아래 이미지에서 C열과 E열이 숨겨져 있습니다*) + +![숨겨진 열을 나타내는 화살표 아이콘이 있는 DHTMLX Spreadsheet 열 헤더](/img/show_columns.png) + +- 열이나 여러 셀을 선택하여 숨겨진 열이 선택 범위에 포함되도록 한 후, 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 *열 -> 열 표시*를 선택하세요. + +(*아래 이미지에서 C열이 숨겨져 있습니다*) + +![열 표시 옵션이 있는 열 하위 메뉴가 표시된 DHTMLX Spreadsheet 컨텍스트 메뉴](/img/show_columns_context_menu.png) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/work_with_sheets.md b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_sheets.md new file mode 100644 index 00000000..1638f507 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/work_with_sheets.md @@ -0,0 +1,53 @@ +--- +sidebar_label: 시트 작업 +title: 시트 작업 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 시트 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 시트 작업 {#work-with-sheets} + +## 새 시트 추가 {#adding-a-new-sheet} + +새 시트를 추가하려면 다음 단계를 따르세요: + +1. 시트 탭을 클릭하여 선택하세요. + +2. 하단 툴바에서 **시트 추가** 버튼을 클릭하세요. + +:::note +새 시트는 현재 활성 시트 뒤에 추가됩니다. +::: + +![시트 추가 버튼과 시트 탭이 있는 DHTMLX Spreadsheet 하단 툴바](/img/add_sheet.png) + +## 시트 제거 {#removing-a-sheet} + +스프레드시트에서 시트를 제거하려면 시트 탭을 마우스 오른쪽 버튼으로 클릭하고 *삭제*를 선택하세요. + +{{note 스프레드시트에 시트가 하나뿐인 경우 해당 시트는 제거할 수 없습니다.}} + +![삭제 옵션이 강조 표시된 DHTMLX Spreadsheet 시트 탭 컨텍스트 메뉴](/img/remove_sheet.png) + +## 활성 시트 변경 {#changing-the-active-sheet} + +현재 활성 시트를 변경하려면 다른 시트 탭을 클릭하세요. + +![활성 시트가 강조 표시된 DHTMLX Spreadsheet 하단 시트 탭](/img/change_active_sheet.png) + +## 시트 이름 변경 {#renaming-a-sheet} + +시트 이름을 변경하려면 시트 탭을 마우스 오른쪽 버튼으로 클릭하고 *이름 바꾸기*를 클릭한 후 새 이름을 입력하세요. + +![이름 바꾸기 옵션과 이름 입력 필드가 있는 DHTMLX Spreadsheet 시트 탭 컨텍스트 메뉴](/img/rename_sheet.png) + +## 시트 간 상호 참조 {#cross-references-between-sheets} + +상호 참조를 사용하여 여러 시트의 데이터를 하나로 통합할 수 있습니다.
이를 위해 다음 단계를 따르세요: + +1\. 셀에 등호(=)를 입력하세요. + +2\. 상호 참조할 시트 탭을 클릭하고 셀 또는 셀 범위를 선택하세요. + +3\. 수식 입력을 완료하고 Enter를 누르세요. + +![여러 시트 탭에 걸쳐 작성된 DHTMLX Spreadsheet 상호 참조 수식](/img/cross_reference.gif) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/working_with_cells.md b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_cells.md new file mode 100644 index 00000000..0a8466cf --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_cells.md @@ -0,0 +1,289 @@ +--- +sidebar_label: 셀 작업 +title: 셀 작업 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 셀 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 셀 작업 {#work-with-cells} + +## 셀 값 설정 {#setting-cell-value} + +### 값 설정 {#set-values} + +API를 통해 셀에 값을 설정하려면 [](api/spreadsheet_setvalue_method.md) 메서드를 사용하세요. 다음 파라미터를 전달하세요: + +- `cells` - (*string*) 셀 또는 셀 범위의 id +- `value` - (*string/number/array*) 셀에 설정할 값 + +~~~jsx +// 하나의 셀에 값 설정 +spreadsheet.setValue("A1",5); +// 셀 범위에 동일한 값 설정 +spreadsheet.setValue("A1:D1",5); +// 서로 다른 셀에 동일한 값 설정 +spreadsheet.setValue("B6,A1:D1",5); +// 배열의 값을 범위의 셀에 순서대로 설정 +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +:::note +이 메서드는 지정된 셀에 동일한(반복되는) 값을 설정합니다. 스프레드시트 셀에 서로 다른 값을 추가하려면 [`parse()`](api/spreadsheet_parse_method.md) 메서드를 사용하세요. +::: + + +### 값 가져오기 {#get-values} + +[](api/spreadsheet_getvalue_method.md) 메서드에 *필요한 셀의 id 또는 셀 범위*를 전달하여 셀에 설정된 값을 반환할 수도 있습니다. + +이 메서드는 문자열, 숫자 또는 배열로 값을 반환합니다: + +~~~jsx +// 하나의 셀 값 반환 +var cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// 셀 범위의 값 반환 +var rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// 서로 다른 셀의 값 반환 +var values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +## 셀 유효성 검사 {#validating-cells} + +v4.3부터 드롭다운 옵션 목록을 추가하여 셀에 데이터 유효성 검사를 적용할 수 있습니다. 이를 위해 [](api/spreadsheet_setvalidation_method.md) 메서드를 사용하세요: + +~~~jsx +spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]); +~~~ + +드롭다운 목록은 사용자의 선택을 제한합니다. 사용자가 셀에 예상치 못한 값을 입력하면 *잘못된 값* 메시지가 표시됩니다. + +:::info +[`setValidation()`](api/spreadsheet_setvalidation_method.md) 메서드는 지정된 셀에서 유효성 검사를 제거할 수도 있습니다. [자세한 내용 확인](api/spreadsheet_setvalidation_method.md#details). +::: + +## 셀에 하이퍼링크 삽입 {#inserting-a-hyperlink-into-a-cell} + +셀에 하이퍼링크를 삽입하려면 [`insertLink()`](api/spreadsheet_insertlink_method.md) 메서드를 사용하세요. 이 메서드는 하이퍼링크와 함께 표시될 텍스트도 추가할 수 있습니다: + +~~~jsx +// "A2" 셀에 링크 삽입 +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); +~~~ + +셀에서 링크를 제거해야 하는 경우 메서드에 셀 ID만 전달하세요: + +~~~jsx +// "A2" 셀에서 링크 제거 +spreadsheet.insertLink("A2"); +~~~ + +## 셀 스타일 지정 {#styling-cells} + +### 스타일 설정 {#set-styles} + +[](api/spreadsheet_setstyle_method.md) 메서드를 사용하여 셀 또는 셀 범위에 스타일을 적용할 수 있습니다. 두 개의 파라미터를 받습니다: + +- `cells` - (*string*) 셀 또는 셀 범위의 id +- `styles` - (*object/array*) 셀에 적용할 스타일 + +~~~jsx +// 하나의 셀에 스타일 설정 +spreadsheet.setStyle("A1", {background: "red"}); +// 셀 범위에 동일한 스타일 설정 +spreadsheet.setStyle("A1:D1", {color: "blue"}); +// 서로 다른 셀에 동일한 스타일 설정 +spreadsheet.setStyle("B6,A1:D1", {color: "blue"}); +// 배열의 스타일을 범위의 셀에 순서대로 설정 +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +:::note +이 메서드는 지정된 셀에 동일한 스타일을 설정합니다. 스프레드시트 셀에 서로 다른 스타일을 적용하려면 [`parse()`](api/spreadsheet_parse_method.md) 메서드를 사용하세요. +::: + +### 스타일 가져오기 {#get-styles} + +셀에 적용된 스타일을 가져오려면 [](api/spreadsheet_getstyle_method.md) 메서드를 사용하세요. *셀 또는 셀 범위의 id*를 전달하세요: + +~~~jsx +// 하나의 셀 스타일 가져오기 +var style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// 셀 범위의 스타일 가져오기 +var rangeStyles = spreadsheet.getStyle("A1:D1"); // -> 자세한 내용 참조 + +// 서로 다른 셀의 스타일 가져오기 +var values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +여러 셀의 경우 메서드는 각 셀에 적용된 스타일 객체 배열을 반환합니다: + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ + +## 셀 편집 {#editing-a-cell} + +### 셀 편집기 활성화 {#enable-cell-editor} + +[](api/spreadsheet_startedit_method.md) 메서드를 호출하여 셀에 입력 필드를 추가할 수 있습니다: + +~~~jsx +spreadsheet.startEdit(); +~~~ + +이 메서드는 두 개의 선택적 파라미터를 받을 수 있습니다: + +- `cell` - (*string*) 선택적, 셀의 id +- `value` - (*string*) 선택적, 셀 값 + +셀 id가 전달되지 않으면 현재 선택된 셀에 입력 필드가 추가됩니다. + +### 셀 편집기 비활성화 {#disable-cell-editor} + +셀 편집을 완료하려면 [](api/spreadsheet_endedit_method.md) 메서드를 사용하세요. 편집기를 닫고 입력된 값을 저장합니다. + +~~~jsx +spreadsheet.endEdit(); +~~~ + +## 셀 잠금 {#locking-cells} + +### 셀 잠금 {#lock-cells} + +사용자가 읽기 전용으로 만들기 위해 프로그래밍 방식으로 셀 또는 여러 셀을 잠글 수 있습니다. 이를 위해 [](api/spreadsheet_lock_method.md) 메서드를 사용하세요. 이 메서드는 잠글 *셀의 id* 또는 *셀 범위*를 파라미터로 받습니다. + +~~~jsx +// 셀 잠금 +spreadsheet.lock("A1"); + +// 셀 범위 잠금 +spreadsheet.lock("A1:C1"); + +// 지정된 셀 잠금 +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +**관련 샘플**: [Spreadsheet. 잠긴 셀](https://snippet.dhtmlx.com/czeyiuf8) + +### 셀 잠금 해제 {#unlock-cells} + +잠긴 셀의 잠금을 해제하려면 [](api/spreadsheet_unlock_method.md) 메서드를 사용하세요. *셀의 id* 또는 *잠긴 셀이 포함된 범위*를 파라미터로 전달하세요: + +~~~jsx +// 셀 잠금 해제 +spreadsheet.unlock("A1"); + +// 셀 범위 잠금 해제 +spreadsheet.unlock("A1:C1"); + +// 지정된 셀 잠금 해제 +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +### 셀 잠금 여부 확인 {#check-whether-a-cell-is-locked} + +셀 또는 여러 셀이 잠겨 있는지 확인하려면 [](api/spreadsheet_islocked_method.md) 메서드를 사용하고 *셀의 id* 또는 *셀 범위*를 전달하세요: + +~~~jsx +// 셀 잠금 여부 확인 +var cellLocked = spreadsheet.isLocked("A1"); + +// 여러 셀 잠금 여부 확인 +var rangeLocked = spreadsheet.isLocked("A1:C1"); + +// 흩어진 셀 잠금 여부 확인 +var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +이 메서드는 셀 상태에 따라 `true` 또는 `false`를 반환합니다. 여러 셀을 한 번에 확인하는 경우 지정된 셀 중 잠긴 셀이 하나 이상 있으면 `true`를 반환합니다. + +## 셀 병합 {#merging-cells} + +### 셀 병합 {#merge-cells} + +[`mergeCells()`](api/spreadsheet_mergecells_method.md) 메서드에 병합할 셀 범위를 전달하여 두 개 이상의 셀을 하나로 병합할 수 있습니다: + +~~~jsx +// A6, A7, A8 셀 병합 +spreadsheet.mergeCells("A6:A8"); + +// B2, C2, D2 셀 병합 +spreadsheet.mergeCells("B2:D2"); +~~~ + +### 셀 분리 {#split-cells} + +[`mergeCells()`](api/spreadsheet_mergecells_method.md) 메서드로 병합된 셀을 분리할 수도 있습니다. 셀 범위 외에 두 번째 파라미터로 `true`를 전달하면 지정된 셀이 병합 해제됩니다: + +~~~jsx +// B2, C2, D2 셀 병합 해제 +spreadsheet.mergeCells("B2:D2", true); +~~~ + +## 셀 선택 {#selecting-cells} + +### 셀 선택 {#select-cells} + +Spreadsheet는 `Selection` 객체의 API를 사용하여 셀 선택을 설정할 수 있습니다. + +[](api/selection_setselectedcell_method.md) 메서드에 셀 id를 전달하여 셀을 선택할 수 있습니다: + +~~~jsx +// 셀 선택 +spreadsheet.selection.setSelectedCell("B5"); +// 셀 범위 선택 +spreadsheet.selection.setSelectedCell("B1:B5"); +// 흩어진 셀 선택 +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +[](api/selection_getselectedcell_method.md) 메서드를 통해 선택된 셀의 id를 가져올 수도 있습니다: + +~~~jsx +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +### 셀 선택 해제 {#unselect-cells} + +셀에서 선택을 제거하려면 [](api/selection_removeselectedcell_method.md) 메서드에 셀 id를 전달하세요: + +~~~jsx +// 선택 설정 +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// 선택 제거 +spreadsheet.selection.removeSelectedCell("B7,D4,E5:E7"); + +const selected = spreadsheet.selection.getSelectedCell(); +console.log(selected); // -> "B3,D6,E4,E8" +~~~ + +**관련 샘플:** [Spreadsheet. 선택 제거](https://snippet.dhtmlx.com/u4j76cuh) + +## 셀에 포커스 설정 {#setting-focus-on-a-cell} + +`Selection` 객체를 사용하면 스프레드시트 셀에 포커스를 설정하고 포커스된 셀의 id를 가져올 수 있습니다. 이를 위해 해당 메서드를 사용하세요: + +- [](api/selection_setfocusedcell_method.md) + +~~~jsx +// 포커스를 설정할 셀의 id 전달 +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +- [](api/selection_getfocusedcell_method.md) + +~~~jsx +// 포커스된 셀 가져오기 +var focused = spreadsheet.selection.getFocusedCell(); // -> "D4" +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/working_with_sheets.md b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_sheets.md new file mode 100644 index 00000000..a442b538 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_sheets.md @@ -0,0 +1,149 @@ +--- +sidebar_label: 시트 작업 +title: 시트 작업 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 시트 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# 시트 작업 {#work-with-sheets} + +v4.1부터 스프레드시트에서 [여러 시트](api/spreadsheet_multisheets_config.md)로 작업할 수 있습니다. + +이 문서에서는 API 메서드를 사용하여 새 시트를 추가하고, 불필요한 시트를 제거하고, 모든 시트를 가져오고, 현재 활성 시트를 가져오는 방법을 설명합니다. 또한 스프레드시트에 여러 시트를 한 번에 로드하는 방법도 설명합니다. + +{{note 사용자 인터페이스를 통해 여러 시트와 상호 작용하는 방법을 알아보려면 [사용자 가이드](work_with_sheets.md)를 확인하세요. }} + +v6.0부터 **Sheet Manager** 모듈이 `spreadsheet.sheets` 속성을 통해 시트 관리를 처리합니다. 전용 [Sheet Manager API](api/overview/sheetmanager_overview.md)는 이전에 Spreadsheet 인스턴스에서 직접 사용할 수 있었던 시트 관련 메서드를 대체합니다. + +## 여러 시트 로드 {#loading-multiple-sheets} + +스프레드시트에 여러 시트를 로드하려면 원하는 수의 시트와 구성으로 데이터를 준비하고 [`parse()`](api/spreadsheet_parse_method.md) 메서드에 파라미터로 전달하세요. 데이터는 `object`여야 합니다. [객체에 포함할 수 있는 속성 목록 확인](api/spreadsheet_parse_method.md). + + + +{{note [`multiSheets`](api/spreadsheet_multisheets_config.md) 구성 옵션이 `false`로 설정된 경우 시트가 하나만 생성됩니다.}} + +## 새 시트 추가 {#adding-a-new-sheet} + +스프레드시트에 새 시트를 추가하려면 [`sheets.add()`](api/sheetmanager_add_method.md) 메서드를 사용하고 새 시트의 이름을 파라미터로 전달하세요: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 사용자 정의 이름으로 시트 추가 +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // 예: "sheet_2" + +// 자동 생성된 이름으로 시트 추가 +const anotherId = spreadsheet.sheets.add(); +~~~ + +이 메서드는 생성된 시트의 id를 반환합니다. + +## 시트 제거 {#removing-a-sheet} + +[`sheets.remove()`](api/sheetmanager_remove_method.md) 메서드를 통해 시트 id로 스프레드시트에서 시트를 제거할 수 있습니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// id로 시트 제거 +spreadsheet.sheets.remove("sheet_2"); +~~~ + +스프레드시트에 시트가 2개 미만인 경우 시트는 제거되지 않습니다. + +## 활성 시트 설정 {#setting-active-sheet} + +스프레드시트 초기화 후 활성 시트를 동적으로 변경하려면 [`sheets.setActive()`](api/sheetmanager_setactive_method.md) 메서드를 사용하세요. 시트의 id를 파라미터로 받습니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 두 번째 시트로 전환 +spreadsheet.sheets.setActive("sheet_2"); + +// 전환 확인 +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**관련 샘플:** [Spreadsheet. 활성 시트 설정](https://snippet.dhtmlx.com/iowl449t) + +## 활성 시트 가져오기 {#getting-active-sheet} + +[`sheets.getActive()`](api/sheetmanager_getactive_method.md) 메서드를 적용하여 현재 활성 시트를 가져올 수 있습니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +이 메서드는 현재 활성 시트의 name 및 id 속성을 가진 객체를 반환합니다. + +## 모든 시트 가져오기 {#getting-all-sheets} + +[`sheets.getAll()`](api/sheetmanager_getall_method.md) 메서드는 스프레드시트의 모든 시트를 시트 객체 배열로 반환합니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +## id로 시트 가져오기 {#getting-a-sheet-by-id} + +id로 단일 시트 객체를 검색하려면 [`sheets.get()`](api/sheetmanager_get_method.md) 메서드를 사용하세요: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +## 시트 지우기 {#clearing-sheets} + +[`sheets.clear()`](api/sheetmanager_clear_method.md) 메서드를 사용하여 id로 지정된 시트의 데이터를 지울 수 있습니다: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// id로 특정 시트 지우기 +spreadsheet.sheets.clear("sheet_1"); + +// 현재 활성 시트 지우기 +spreadsheet.sheets.clear(); +~~~ + +**관련 샘플:** [Spreadsheet. 지우기](https://snippet.dhtmlx.com/szmtjn72) + +전체 스프레드시트를 한 번에 지워야 하는 경우 [`clear()`](api/spreadsheet_clear_method.md) 메서드를 사용하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/working_with_ssheet.md b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_ssheet.md new file mode 100644 index 00000000..29d030e7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/working_with_ssheet.md @@ -0,0 +1,302 @@ +--- +sidebar_label: Spreadsheet 작업 +title: Spreadsheet 작업 +description: DHTMLX JavaScript Spreadsheet 라이브러리 문서에서 스프레드시트 작업에 대한 내용을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX Spreadsheet의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# Spreadsheet 작업 {#work-with-spreadsheet} + +사용자가 Spreadsheet 인터페이스를 통해 상호 작용하는 동안, [간단한 API](api/api_overview.md)를 사용하여 컴포넌트를 다룰 수 있습니다. + +## 실행 취소/다시 실행 {#undoredo-actions} + +[](api/spreadsheet_undo_method.md) API 메서드는 마지막 작업을 되돌립니다: + +~~~jsx +spreadsheet.undo(); +~~~ + +되돌린 작업을 다시 적용하려면 [](api/spreadsheet_redo_method.md) 메서드를 사용하세요: + +~~~jsx +spreadsheet.redo(); +~~~ + +## 행과 열 추가/제거 {#addingremoving-rows-and-columns} + +### 열 {#columns} + +열을 추가/삭제하려면 관련 API 메서드를 사용하세요: + +- [](api/spreadsheet_addcolumn_method.md) +- [](api/spreadsheet_deletecolumn_method.md) + +추가/삭제할 열의 id가 포함된 셀의 id를 메서드에 전달하세요. + +~~~jsx +// 빈 "C" 열 추가 +spreadsheet.addColumn("C1"); +// "C" 열 제거 +spreadsheet.deleteColumn("C1"); +~~~ + +새 열이 추가되면 인접한 열들이 오른쪽으로 이동합니다. + +:::note +`deleteColumn()` 메서드의 파라미터로 셀 id 범위(예: "A1:C3")를 제공하면 여러 열을 삭제할 수 있습니다. +::: + +### 행 {#rows} + +행을 추가/삭제하려면 아래 API 메서드를 사용하세요: + +- [](api/spreadsheet_addrow_method.md) +- [](api/spreadsheet_deleterow_method.md) + +추가/삭제할 행의 id가 포함된 셀의 id를 메서드에 전달하세요. + +~~~jsx +// 빈 두 번째 행 추가 +spreadsheet.addRow("A2"); +// 두 번째 행 제거 +spreadsheet.deleteRow("A2"); +~~~ + +새 행이 추가되면 인접한 행들이 한 셀씩 아래로 이동합니다. + +:::note +`deleteRow()` 메서드의 파라미터로 셀 id 범위(예: "A1:C3")를 제공하면 여러 행을 삭제할 수 있습니다. +::: + +## 열 너비 자동 맞춤 {#autofit-column-width} + +열의 가장 긴 내용에 자동으로 맞게 열 너비를 변경하려면 [`fitColumn()`](api/spreadsheet_fitcolumn_method.md) 메서드를 적용하세요. 이 메서드는 필요한 열의 이름이 포함된 셀의 id 하나를 파라미터로 받습니다. + +~~~jsx +// "G" 열의 너비 조정 +spreadsheet.fitColumn("G2"); +~~~ + +## 행과 열 고정/해제 {#freezingunfreezing-rows-and-columns} + +페이지를 스크롤할 때 일부 열이나 행을 고정("freeze")하여 정적으로 유지하면서 나머지 열과 행은 이동하도록 할 수 있습니다. + +### 열 {#columns-freeze} + +열을 고정/해제하려면 관련 API 메서드를 사용하세요: + +- [](api/spreadsheet_freezecols_method.md) +- [](api/spreadsheet_unfreezecols_method.md) + +열의 id를 정의하기 위해 셀의 id를 메서드에 전달하세요. 셀 id가 전달되지 않으면 현재 선택된 셀이 사용됩니다. + +~~~jsx +// 열 고정 +spreadsheet.freezeCols("B2"); // "B" 열까지의 열이 고정됩니다 +spreadsheet.freezeCols("sheet2!B2"); // "sheet2"에서 "B" 열까지의 열이 고정됩니다 + +// 열 고정 해제 +spreadsheet.unfreezeCols(); // 현재 시트의 고정된 열이 해제됩니다 +spreadsheet.unfreezeCols("sheet2!A1"); // "sheet2"의 고정된 열이 해제됩니다 +~~~ + +### 행 {#rows-freeze} + +행을 고정/해제하려면 관련 API 메서드를 사용하세요: + +- [](api/spreadsheet_freezerows_method.md) +- [](api/spreadsheet_unfreezerows_method.md) + +행의 id를 정의하기 위해 셀의 id를 메서드에 전달하세요. 셀 id가 전달되지 않으면 현재 선택된 셀이 사용됩니다. + +~~~jsx +// 행 고정 +spreadsheet.freezeRows("B2"); // "2" 행까지의 행이 고정됩니다 +spreadsheet.freezeRows("sheet2!B2"); // "sheet2"에서 "2" 행까지의 행이 고정됩니다 + +// 행 고정 해제 +spreadsheet.unfreezeRows(); // 현재 시트의 고정된 행이 해제됩니다 +spreadsheet.unfreezeRows("sheet2!A1"); // "sheet2"의 고정된 행이 해제됩니다 +~~~ + +### 데이터 세트에서 행/열 고정 {#freezing-rowscolumns-in-the-dataset} + +Spreadsheet에 데이터를 파싱하는 동안 특정 시트의 행과 열을 고정할 수도 있습니다. +이를 위해 [`parse()`](api/spreadsheet_parse_method.md) 메서드의 `sheets` 객체에서 `freeze` 속성을 사용하세요: + +~~~jsx {10-13} +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // "sheet_1"의 추가 설정 + }, + // 추가 시트 구성 객체 + ] +}; + +spreadsheet.parse(data); +~~~ + +## 행과 열 숨기기/표시 {#hidingshowing-rows-and-columns} + +해당 API 메서드를 통해 특정 행과 열을 숨기거나 표시할 수 있습니다. + +### 열 {#columns-hide} + +열을 숨기거나 표시하려면 다음 메서드를 사용하세요: + +- [](api/spreadsheet_hidecols_method.md) +- [](api/spreadsheet_showcols_method.md) + +열의 id를 정의하기 위해 셀의 id를 메서드에 전달하세요. 셀 id가 전달되지 않으면 현재 선택된 셀이 사용됩니다. + +~~~jsx +// 열 숨기기 +spreadsheet.hideCols("B2"); // "B" 열이 숨겨집니다 +spreadsheet.hideCols("sheet2!B2"); // "sheet2"의 "B" 열이 숨겨집니다 +spreadsheet.hideCols("B2:C2"); // "B"와 "C" 열이 숨겨집니다 + +// 열 표시 +spreadsheet.showCols("B2"); // "B" 열이 다시 표시됩니다 +spreadsheet.showCols("sheet2!B2"); // "sheet2"의 "B" 열이 다시 표시됩니다 +spreadsheet.showCols("B2:C2"); // "B"와 "C" 열이 다시 표시됩니다 +~~~ + +### 행 {#rows-hide} + +행을 숨기거나 표시하려면 아래 API 메서드를 사용하세요: + +- [](api/spreadsheet_hiderows_method.md) +- [](api/spreadsheet_showrows_method.md) + +행의 id를 정의하기 위해 셀의 id를 메서드에 전달하세요. 셀 id가 전달되지 않으면 현재 선택된 셀이 사용됩니다. + +~~~jsx +// 행 숨기기 +spreadsheet.hideRows("B2"); // "2" 행이 숨겨집니다 +spreadsheet.hideRows("sheet2!B2"); // "sheet2"의 "2" 행이 숨겨집니다 +spreadsheet.hideRows("B2:C4"); // "2"부터 "4"까지의 행이 숨겨집니다 + +// 행 표시 +spreadsheet.showRows("B2"); // "2" 행이 다시 표시됩니다 +spreadsheet.showRows("sheet2!B2"); // "sheet2"의 "2" 행이 다시 표시됩니다 +spreadsheet.showRows("B2:C2"); // "2"부터 "4"까지의 행이 다시 표시됩니다 +~~~ + +## 데이터 필터링 {#filtering-data} + +### 필터 설정 {#set-filter} + +스프레드시트에서 데이터를 필터링하고 지정된 기준을 충족하는 레코드만 렌더링할 수 있습니다. 이를 위해 [`setFilter()`](api/spreadsheet_setfilter_method.md) 메서드를 사용하고 필요한 열에 대한 필터링 규칙을 지정하세요. + +예를 들어 별도의 열에 대한 필터링 기준을 지정할 수 있습니다: + +~~~jsx +// A열에 지정된 기준으로 데이터 필터링 +spreadsheet.setFilter("A2", [{condition: { factor: "tc", value: "e" }, exclude: ["Peru"]}]); + +// C열에 지정된 기준으로 데이터 필터링 +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); +~~~ + +이 경우 데이터 범위의 각 열에 필터 아이콘이 나타납니다. + +또한 셀 범위에 대한 필터링 기준을 지정할 수도 있습니다: + +~~~jsx +// C열에 지정된 기준으로 데이터 필터링 +spreadsheet.setFilter("C1:C9", [{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); + +// A열과 C열에 지정된 기준으로 데이터 필터링 +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); +~~~ + +이 경우 지정된 범위 내의 열에만 필터 아이콘이 나타납니다. + +**관련 샘플:** [Spreadsheet. API를 통한 필터링](https://snippet.dhtmlx.com/effrcsg6) + +### 필터 초기화 {#reset-filter} + +필터링을 초기화하려면 파라미터 없이 [`setFilter()`](api/spreadsheet_setfilter_method.md) 메서드를 적용하거나 첫 번째 파라미터만 전달하세요: + +~~~jsx +spreadsheet.setFilter("A2"); +~~~ + +### 필터 가져오기 {#get-filter} + +시트에서 현재 데이터가 필터링되는 기준을 가져오려면 [`getFilter()`](api/spreadsheet_getfilter_method.md) 메서드를 적용하세요. 필요한 시트의 ID를 파라미터로 전달하세요. + +~~~jsx +const filter = spreadsheet.getFilter("Income"); +~~~ + +현재 활성 시트에 적용된 필터 기준을 가져오려면 시트 ID를 전달할 필요가 없습니다: + +~~~jsx +const filter = spreadsheet.getFilter(); +~~~ + +## 데이터 검색 {#searching-for-data} + +특정 레코드가 포함된 셀을 찾으려면 [`search()`](api/spreadsheet_search_method.md) 메서드에 검색할 값을 전달하세요. + +~~~jsx +spreadsheet.search("min"); // -> ['D1'] +~~~ + +두 번째 파라미터로 `true`를 전달하여 검색 표시줄을 열고 스프레드시트에서 찾은 셀을 강조 표시할 수도 있습니다: + +~~~jsx +spreadsheet.search("min", true); +~~~ + +기본적으로 스프레드시트는 현재 활성 시트의 셀을 검색합니다. 다른 시트에서 레코드를 검색하려면 해당 ID를 메서드의 세 번째 파라미터로 전달하세요: + +~~~jsx +spreadsheet.search("min", false, "Income"); +~~~ + +### 검색 표시줄 닫기 {#close-search-bar} + +검색 표시줄을 숨기려면 [`hideSearch()`](api/spreadsheet_hidesearch_method.md) 메서드를 사용하세요: + +~~~jsx +spreadsheet.hideSearch(); +~~~ + +## 데이터 정렬 {#sorting-data} + +v4.3부터 [`sortCells()`](api/spreadsheet_sortcells_method.md) 메서드를 사용하여 스프레드시트에서 데이터를 정렬할 수 있습니다. 메서드에 두 개의 파라미터를 전달하세요: +- `cell` - 스프레드시트 데이터를 정렬할 기준이 되는 셀 또는 셀 범위의 id +- `dir` - 정렬 방향: 1 - 오름차순, -1 - 내림차순 + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 구성 파라미터 +}); + +spreadsheet.sortCells("B2:B11", -1); +~~~ + +## 스프레드시트 지우기 {#clearing-spreadsheet} + +[`clear()`](api/spreadsheet_clear_method.md) 메서드를 사용하여 전체 스프레드시트를 한 번에 지울 수 있습니다: + +~~~jsx +spreadsheet.clear(); +~~~ + +**관련 샘플:** [Spreadsheet. 지우기](https://snippet.dhtmlx.com/szmtjn72) + +특정 시트를 지워야 하는 경우 [`sheets.clear()`](api/sheetmanager_clear_method.md) 메서드를 사용하세요. diff --git a/i18n/ko/docusaurus-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..44d80afa --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "개발 센터", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "커뮤니티", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "회사", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Spreadsheet": { + "message": "Spreadsheet 다운로드", + "description": "The label of footer link with label=Download Spreadsheet linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml" + }, + "link.item.label.Examples": { + "message": "예제", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/ihtkdcoc?tag=spreadsheet" + }, + "link.item.label.Blog": { + "message": "블로그", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/?s=spreadsheet" + }, + "link.item.label.Forum": { + "message": "포럼", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/spreadsheet/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "회사 소개", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "문의하기", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "라이선스", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses" + } +} diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 00000000..2502d0e1 --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Spreadsheet 문서", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Spreadsheet 문서", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "예제", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "포럼", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "지원", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "다운로드", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ru/code.json b/i18n/ru/code.json new file mode 100644 index 00000000..000e4bde --- /dev/null +++ b/i18n/ru/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "На странице произошёл сбой.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Прокрутка к началу", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "Архив", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Архив", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Навигация по странице списка блогов", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Следующие записи", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Предыдущие записи", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Навигация по странице поста блога", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Следующий пост", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Предыдущий пост", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "Посмотреть все теги", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "Системный режим", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "Светлый режим", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "Тёмный режим", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "Переключение между темным и светлым режимом (сейчас используется {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Навигационная цепочка текущей страницы", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} элемент|{count} элемента|{count} элементов", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Страница документа", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Предыдущая страница", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Следующая страница", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "Одна страница|{count} страницы|{count} страниц", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} с тегом \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Версия: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "Это документация для будущей версии {siteTitle} {versionLabel}.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "Это документация {siteTitle} для версии {versionLabel}, которая уже не поддерживается.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "Актуальная документация находится на странице {latestVersionLink} ({versionLabel}).", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "последней версии", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Отредактировать эту страницу", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Прямая ссылка на {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " от {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Последнее обновление{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Версии", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Страница не найдена", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Теги:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "Осторожно", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "Опасно", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "К сведению", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "Примечание", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "Подсказка", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "Предупреждение", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Закрыть", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Навигация по последним постам в блоге", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Развернуть категорию '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Свернуть категорию '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(открывается в новой вкладке)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "Главная навигация", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Языки", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "К сожалению, мы не смогли найти запрашиваемую вами страницу.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Пожалуйста, обратитесь к владельцу сайта, с которого вы перешли на эту ссылку, чтобы сообщить ему, что ссылка не работает.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "Содержание этой страницы", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Читать дальше", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Подробнее о {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "{readingTime} мин. чтения|{readingTime} мин. чтения|{readingTime} мин. чтения", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "Скопировать", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "Скопировано", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Скопировать в буфер обмена", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Переключить перенос по строкам", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "Главная страница", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Боковая панель документации", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Закрыть панель навигации", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Перейти к главному меню", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "Переключить навигационную панель", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Развернуть выпадающее меню", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Свернуть выпадающее меню", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "Посмотреть все результаты ({count})" + }, + "theme.SearchBar.label": { + "message": "Поиск", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Очистить", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Отменить", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Поиск по документации", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Задать другой вопрос...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Отвечаю...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "поиск", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "ввод", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Поиск", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Вернуться к поиску по ключевым словам", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Вернуться к поиску по ключевым словам", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Недавнее", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "Нет истории поиска", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Сохранить поисковый запрос", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Удалить запись из историю", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Избранное", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Удалить запись из избранное", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Недавние беседы", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Удалить эту беседу из истории", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Невозможно загрузить результаты поиска", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Проверьте подключение к интернету.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Спросить ИИ: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Ответы генерируются ИИ, который может ошибаться. Проверяйте ответы.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Похожие источники", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Думаю...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Скопировать", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Скопировано!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Скопировать", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Нравится", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Не нравится", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Спасибо за ваш отзыв!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Поиск...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Поиск: ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Искали:", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "выбрать", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Отправить вопрос", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Клавиша Enter", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "навигация", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Клавиша стрелка вверх", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Клавиша стрелка вниз", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "закрыть", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Клавиша Escape", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Поиск от", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Вернуться к поиску", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "Нет результатов по запросу", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Попробуйте", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Нет подходящего результата поиска?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Сообщите нам.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Поиск", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count} документ|{count} документа|{count} документов", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "Результаты поиска по запросу \"{query}\"", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Поиск по сайту", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Введите фразу для поиска", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "Поиск", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "При поддержке Algolia", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "По запросу ничего не найдено", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Загрузка новых результатов поиска...", + "description": "The paragraph for fetching new search results" + }, + "theme.blog.post.plurals": { + "message": "{count} запись|{count} записи|{count} записей", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} с тегом \"{tagName}\"", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "Авторы", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "Посмотреть всех авторов", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "Этот автор ещё не написал ни одного поста.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Скрытая страница", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "Эта страница скрыта. Поисковые системы не будут её индексировать, и доступ к ней есть только у пользователей с прямой ссылкой.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Черновик страницы", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "Эта страница является черновиком. Она будет видна только в режиме разработки и будет исключена из production-сборки.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Попробуйте ещё раз", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Перейти к основному содержимому", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "Теги", + "description": "The title of the tag list page" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-blog/options.json b/i18n/ru/docusaurus-plugin-content-blog/options.json new file mode 100644 index 00000000..9239ff70 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current.json b/i18n/ru/docusaurus-plugin-content-docs/current.json new file mode 100644 index 00000000..cf6ba12a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,106 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "Что нового и миграция", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "Что нового и миграция", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet methods": { + "message": "Методы Spreadsheet", + "description": "The label for category 'Spreadsheet methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet events": { + "message": "События Spreadsheet", + "description": "The label for category 'Spreadsheet events' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet properties": { + "message": "Свойства Spreadsheet", + "description": "The label for category 'Spreadsheet properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Sheet Manager API": { + "message": "API менеджера листов", + "description": "The label for category 'Sheet Manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Методы выделения", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Events Bus methods": { + "message": "Методы Event Bus", + "description": "The label for category 'Events Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "Методы экспорта", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Руководства", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides": { + "message": "Руководства для разработчиков", + "description": "The label for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides.link.generated-index.title": { + "message": "Руководства для разработчиков", + "description": "The generated-index page title for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Localization": { + "message": "Локализация", + "description": "The label for category 'Localization' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "Темы", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "Темы", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides": { + "message": "Руководства пользователя", + "description": "The label for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides.link.generated-index.title": { + "message": "Руководства пользователя", + "description": "The generated-index page title for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells": { + "message": "Работа с ячейками", + "description": "The label for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells.link.generated-index.title": { + "message": "Работа с ячейками", + "description": "The generated-index page title for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations": { + "message": "Фреймворки и интеграции", + "description": "The label for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations.link.generated-index.title": { + "message": "Фреймворки и интеграции", + "description": "The generated-index page title for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.React Spreadsheet": { + "message": "React Spreadsheet", + "description": "The label for category 'React Spreadsheet' in sidebar 'docs'" + }, + "sidebar.docs.category.API reference": { + "message": "Справочник API", + "description": "The label for category 'API reference' in sidebar 'docs'" + }, + "sidebar.docs.category.Data & state management": { + "message": "Управление данными и состоянием", + "description": "The label for category 'Data & state management' in sidebar 'docs'" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 00000000..751b6934 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +d7c878ba7e9fcba99fee1e5c47b09e95c5e6d255 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/angular_integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/angular_integration.md new file mode 100644 index 00000000..0844d46a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/angular_integration.md @@ -0,0 +1,284 @@ +--- +sidebar_label: Интеграция с Angular +title: Интеграция с Angular +description: Вы можете узнать об интеграции DHTMLX JavaScript Spreadsheet с Angular в документации. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Интеграция с Angular {#integration-with-angular} + +:::tip +Для работы с этой документацией вам необходимо знать основные концепции и паттерны **Angular**. Для освежения знаний обратитесь к [**документации Angular**](https://angular.dev/overview). +::: + +DHTMLX Spreadsheet совместим с **Angular**. Мы подготовили примеры кода по использованию DHTMLX Spreadsheet с **Angular**. Подробнее смотрите в соответствующем [**примере на GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). + +## Создание проекта {#creating-a-project} + +:::info +Перед созданием нового проекта установите [**Angular CLI**](https://angular.dev/tools/cli) и [**Node.js**](https://nodejs.org/en/). +::: + +Создайте новый проект *my-angular-spreadsheet-app* с помощью Angular CLI. Выполните следующую команду: + +~~~json +ng new my-angular-spreadsheet-app +~~~ + +:::note +Если вы хотите следовать этому руководству, при создании нового Angular-приложения отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering). +::: + +Команда выше устанавливает все необходимые инструменты, поэтому дополнительные команды запускать не нужно. + +### Установка зависимостей {#installation-of-dependencies} + +После этого перейдите в директорию приложения: + +~~~json +cd my-angular-spreadsheet-app +~~~ + +Установите зависимости и запустите сервер разработки. Для этого используйте менеджер пакетов [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +Приложение должно запуститься на localhost (например, `http://localhost:3000`). + +## Создание Spreadsheet {#creating-spreadsheet} + +Теперь необходимо получить исходный код DHTMLX Spreadsheet. Сначала остановите приложение и установите пакет Spreadsheet. + +### Шаг 1. Установка пакета {#step-1-package-installation} + +Скачайте [**ознакомительный пакет Spreadsheet**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) и следуйте инструкциям в файле README. Обратите внимание, что ознакомительная версия Spreadsheet доступна только 30 дней. + +### Шаг 2. Создание компонента {#step-2-component-creation} + +Теперь необходимо создать Angular-компонент для добавления Spreadsheet в приложение. Создайте папку *spreadsheet* в директории *src/app/*, добавьте в неё новый файл и назовите его *spreadsheet.component.ts*. Затем выполните описанные ниже шаги. + +#### Импорт исходных файлов {#importing-source-files} + +Откройте файл и импортируйте исходные файлы Spreadsheet. Обратите внимание: + +- если вы используете PRO-версию и устанавливаете пакет Spreadsheet из локальной папки, путь импорта выглядит следующим образом: + +~~~jsx +import { Spreadsheet } from 'dhx-spreadsheet-package'; +~~~ + +- если вы используете ознакомительную версию Spreadsheet, укажите следующий путь: + +~~~jsx +import { Spreadsheet } from '@dhx/trial-spreadsheet'; +~~~ + +В этом руководстве показана настройка **ознакомительной** версии Spreadsheet. + +#### Установка контейнера и инициализация Spreadsheet {#set-the-container-and-initialize-spreadsheet} + +Чтобы отобразить Spreadsheet на странице, необходимо задать контейнер для рендеринга компонента и инициализировать Spreadsheet с помощью соответствующего конструктора: + +~~~jsx {1,8,12-13,18-19} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', // имя шаблона, используемое в файле "app.component.ts" как + styleUrls: ['./spreadsheet.component.css'], // подключить css-файл + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + // инициализировать контейнер для Spreadsheet + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + // инициализировать компонент Spreadsheet + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); // уничтожить Spreadsheet + } +} +~~~ + +#### Добавление стилей {#adding-styles} + +Чтобы Spreadsheet отображался корректно, необходимо подключить соответствующие стили. Для этого создайте файл *spreadsheet.component.css* в директории *src/app/spreadsheet/* и укажите важные стили для Spreadsheet и его контейнера: + +~~~css title="spreadsheet.component.css" +/* импортировать стили Spreadsheet */ +@import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css"; + +/* задать стили для начальной страницы */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* задать стили для контейнера Spreadsheet */ +.widget { + height: 100%; +} +~~~ + +#### Загрузка данных {#loading-data} + +Чтобы добавить данные в Spreadsheet, необходимо подготовить набор данных. Создайте файл *data.ts* в директории *src/app/spreadsheet/* и добавьте в него данные: + +~~~jsx title="data.ts" +export function getData(): any { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // ещё ячейки с данными + ] + } +} +~~~ + +Затем откройте файл *spreadsheet.component.ts*. Импортируйте файл с данными и примените их с помощью метода [`parse()`](api/spreadsheet_parse_method.md) внутри метода `ngOnInit()`, как показано ниже. + +~~~jsx {2,18,21} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { getData } from "./data"; // импортировать данные +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', + styleUrls: ['./spreadsheet.component.css'], + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + const data = getData(); // инициализировать свойство data + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + + this._spreadsheet.parse(data); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); + } +} +~~~ + +Теперь компонент Spreadsheet готов к использованию. При добавлении элемента на страницу он инициализирует Spreadsheet с данными. Вы также можете задать необходимые параметры конфигурации. Посетите [документацию API Spreadsheet](api/overview/events_overview.md), чтобы ознакомиться с полным списком доступных свойств. + +#### Обработка событий {#handling-events} + +Когда пользователь выполняет действие в Spreadsheet, виджет вызывает соответствующее событие. Вы можете использовать эти события для обнаружения действий и выполнения нужного кода. Смотрите [полный список событий](api/overview/events_overview.md). + +Откройте файл *spreadsheet.component.ts* и дополните метод `ngOnInit()` следующим образом: + +~~~jsx {5-8} title="spreadsheet.component.ts" +// ... +ngOnInit() { + this._spreadsheet = new Spreadsheet(this.spreadsheet_container.nativeElement,{}); + + spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); + }); +} + +ngOnDestroy() { + this._spreadsheet.destructor(); +} +~~~ + +### Шаг 3. Добавление Spreadsheet в приложение {#step-3-adding-spreadsheet-into-the-app} + +Чтобы добавить компонент `SpreadsheetComponent` в приложение, откройте файл *src/app/app.component.ts* и замените код по умолчанию следующим: + +~~~jsx {5} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` // шаблон, созданный в файле "spreadsheet.component.ts" +}) +export class AppComponent { + name = ""; +} +~~~ + +Затем создайте файл *app.module.ts* в директории *src/app/* и укажите `SpreadsheetComponent`, как показано ниже: + +~~~jsx {4-5,8} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; + +@NgModule({ + declarations: [AppComponent, SpreadsheetComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +Последний шаг — открыть файл *src/main.ts* и заменить существующий код следующим: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +После этого можно запустить приложение и увидеть Spreadsheet с данными на странице. + +![DHTMLX Spreadsheet initialized with sample data in an Angular application](/img/integrations/trial_spreadsheet.png) + +Теперь вы знаете, как интегрировать DHTMLX Spreadsheet с Angular. Вы можете адаптировать код под свои конкретные требования. Финальный пример доступен на [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md new file mode 100644 index 00000000..02a18015 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -0,0 +1,140 @@ +--- +sidebar_label: Обзор API +title: Обзор API +description: Вы можете ознакомиться с обзором API библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор API {#api-overview} + +## Конструктор {#constructor} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + rowsCount: 20, + colsCount: 20 +}); +~~~ + +Параметры: + +- HTML-контейнер (или ID HTML-контейнера) +- хэш параметров конфигурации (см. ниже) + +## Методы Spreadsheet {#spreadsheet-methods} + +| Название | Описание | +| :------------------------------------------- | :-------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(api/spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(api/spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(api/spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(api/spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(api/spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(api/spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(api/spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(api/spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(api/spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(api/spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(api/spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(api/spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(api/spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(api/spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(api/spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(api/spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(api/spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(api/spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(api/spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(api/spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(api/spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(api/spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(api/spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(api/spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(api/spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(api/spreadsheet_redo_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(api/spreadsheet_serialize_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(api/spreadsheet_search_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(api/spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(api/spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(api/spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(api/spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(api/spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(api/spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(api/spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(api/spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(api/spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(api/spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(api/spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(api/spreadsheet_unlock_method.md) | + +## События Spreadsheet {#spreadsheet-events} + +| Название | Описание | +| :---------------------------------------------- | :----------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(api/spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(api/spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(api/spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(api/spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(api/spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(api/spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(api/spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(api/spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(api/spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(api/spreadsheet_beforesheetchange_event.md) | + +## Свойства Spreadsheet {#spreadsheet-properties} + +| Название | Описание | +| ---------------------------------------------- | ----------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(api/spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(api/spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(api/spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(api/spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(api/spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(api/spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(api/spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(api/spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(api/spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(api/spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(api/spreadsheet_toolbarblocks_config.md) | + + +## Методы Sheet Manager {#sheet-manager-methods} + +| Название | Описание | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(api/sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(api/sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(api/sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(api/sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(api/sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(api/sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(api/sheetmanager_setactive_method.md) | + +## Методы Selection {#selection-methods} + +| Название | Описание | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(api/selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(api/selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(api/selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(api/selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(api/selection_setselectedcell_method.md) | + +## Методы Event Bus {#events-bus-methods} + +| Название | Описание | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(api/eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(api/eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(api/eventsbus_on_method.md) | + +## Методы экспорта {#export-methods} + +| Название | Описание | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(api/export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(api/export_xlsx_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md new file mode 100644 index 00000000..d188039b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: detach() +title: Метод detach +description: Вы можете узнать о Event Bus методе detach в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# detach() + +### Описание {#description} + +@short: Отсоединяет обработчик от события (ранее привязанный методом `on()`) + +### Использование {#usage} + +~~~jsx +detach(name: string): void; +~~~ + +### Параметры {#parameters} + +- `name` - (обязательный) имя события, от которого нужно отсоединить обработчик + +### Пример {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); + +spreadsheet.events.detach("StyleChange"); +~~~ + +:::info +По умолчанию `detach()` удаляет все обработчики целевого события. Можно отсоединить конкретные обработчики с помощью маркера контекста. +::: + +~~~jsx +const marker = "any"; // you can use any string|object value + +spreadsheet.events.on("StyleChange", handler1); +spreadsheet.events.on("StyleChange", handler2, marker); +// the next command will delete only handler2 +spreadsheet.events.detach("StyleChange", marker); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md new file mode 100644 index 00000000..17b4a165 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: fire() +title: Метод fire +description: Вы можете узнать о Event Bus методе fire в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# fire() + +### Описание {#description} + +@short: Инициирует внутреннее событие + +:::info +Как правило, события вызываются автоматически, и использовать этот метод не требуется. +::: + +### Использование {#usage} + +~~~jsx +fire(name: string, arguments: array): boolean; +~~~ + +### Параметры {#parameters} + +- `name` - (обязательный) имя события, без учёта регистра +- `arguments` - (обязательный) массив данных, связанных с событием + +### Возвращаемое значение {#returns} + +Метод возвращает `false`, если хотя бы один из обработчиков события вернул `false`. В противном случае возвращает `true` + +### Пример {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("CustomEvent", function(param1, param2){ + return true; +}); + +const res = spreadsheet.events.fire("CustomEvent", [12, "abc"]); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md new file mode 100644 index 00000000..67495bf2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: on() +title: Метод on +description: Вы можете узнать о Event Bus методе on в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# on() + +### Описание {#description} + +@short: Привязывает обработчик к внутреннему событию Spreadsheet + +### Использование {#usage} + +~~~jsx +on(name: string, callback: function): void; +~~~ + +### Параметры {#parameters} + +- `name` - (обязательный) имя события, без учёта регистра +- `callback` - (обязательный) функция-обработчик + +### Пример {#example} + +~~~jsx {6-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); +~~~ + +:::info +Полный список событий Spreadsheet приведён [здесь](api/api_overview.md#spreadsheet-events). + +К одному событию можно привязать несколько обработчиков, и все они будут выполнены. Если некоторые обработчики возвращают `false`, соответствующие операции блокируются. Обработчики событий выполняются в том порядке, в котором они были привязаны. +::: + +**Полезная статья:** [Обработка событий](handling_events.md) + +**Связанный пример:** [Spreadsheet. События](https://snippet.dhtmlx.com/2vkjyvsi) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/export_json_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/export_json_method.md new file mode 100644 index 00000000..2433dbc1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/export_json_method.md @@ -0,0 +1,35 @@ +--- +sidebar_label: json() +title: Метод экспорта json +description: Вы можете узнать о методе экспорта json в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# json() + +### Описание {#description} + +@short: Экспортирует данные из таблицы в файл JSON + +### Использование {#usage} + +~~~jsx +json(): void; +~~~ + +### Пример {#example} + +~~~jsx {7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// exports data from a spreadsheet into a JSON file +spreadsheet.export.json(); +~~~ + +**Журнал изменений:** Добавлено в v4.3 + +**Полезная статья:** [Загрузка и экспорт данных](loading_data.md) + +**Связанный пример:** [Spreadsheet. Экспорт/импорт JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md new file mode 100644 index 00000000..16fc3e9e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md @@ -0,0 +1,48 @@ +--- +sidebar_label: xlsx() +title: Метод экспорта xlsx +description: Вы можете узнать о методе экспорта xlsx в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# xlsx() + +### Описание {#description} + +@short: Экспортирует данные из таблицы в файл Excel (.xlsx) + +### Использование {#usage} + +~~~jsx +xlsx(name:string): void; +~~~ + +### Параметры {#parameters} + +- `name` - (необязательный) имя экспортируемого файла .xlsx + +### Пример {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// exports data from a spreadsheet into an Excel file +spreadsheet.export.xlsx(); + +// exports data from a spreadsheet into an Excel file with a custom name +spreadsheet.export.xlsx("MyData"); +~~~ + +:::note +Обратите внимание, что компонент поддерживает экспорт только в файлы Excel с расширением `.xlsx`. +::: + +:::info +DHTMLX Spreadsheet использует библиотеку на основе WebAssembly [Json2Excel](https://github.com/dhtmlx/json2excel) для экспорта данных в Excel. [Подробнее](loading_data.md#exporting-data). +::: + +**Полезная статья:** [Загрузка и экспорт данных](loading_data.md) + +**Связанный пример:** [Spreadsheet. Экспорт Xlsx](https://snippet.dhtmlx.com/btyo3j8s) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md new file mode 100644 index 00000000..ecb41206 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md @@ -0,0 +1,86 @@ +--- +sidebar_label: Действия Spreadsheet +title: Обзор действий +description: Вы можете ознакомиться с обзором действий библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор действий {#actions-overview} + +В этом разделе описан новый подход к взаимодействию с событиями Spreadsheet. + +Начиная с версии v4.3, DHTMLX Spreadsheet включает пару событий [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md), которые упрощают и делают код более компактным. Они срабатывают непосредственно перед выполнением действия и точно указывают, какое именно действие было выполнено. + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + // more actions +}); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config) + }, + // more actions +}); +~~~ + +[Полный список доступных действий приведён ниже.](#list-of-actions) + +>Это означает, что вам больше не нужно добавлять наборы парных событий [**before-** и **after-**](api/overview/events_overview.md) для отслеживания и обработки действий, выполняемых при изменении данных в таблице. + +>При необходимости вы можете использовать **старый подход**, поскольку все существующие события продолжают работать по-прежнему: +~~~jsx +spreadsheet.events.on("afterColumnAdd", function(cell){ + console.log("A new column is added", cell); +}); +~~~ +~~~jsx +spreadsheet.events.on("beforeColumnAdd", function(cell){ + console.log("A new column will be added", cell); + return true; +}); +~~~ + + + + +## Список действий {#list-of-actions} + +| Действие | Описание | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **addColumn** | Действие выполняется при добавлении нового столбца | +| **addRow** | Действие выполняется при добавлении новой строки | +| **addSheet** | Действие выполняется при добавлении нового листа | +| **clear** | Действие выполняется при очистке таблицы с помощью метода clear() | +| **clearSheet** | Действие выполняется при очистке листа с помощью метода sheets.clear() | +| **deleteColumn** | Действие выполняется при удалении столбца | +| **deleteRow** | Действие выполняется при удалении строки | +| **deleteSheet** | Действие выполняется при удалении листа | +| **filter** | Действие выполняется при фильтрации данных на листе | +| **fitColumn** | Действие выполняется при автоматической подгонке ширины столбца | +| **groupAction** | Действие выполняется при выборе диапазона ячеек и применении к ним операций (например, изменение стиля или формата ячеек, блокировка/разблокировка ячеек или очистка значений и стилей ячеек) | +| **insertLink** | Действие выполняется при вставке гиперссылки в ячейку | +| **lockCell** | Действие выполняется при блокировке/разблокировке ячейки | +| **merge** | Действие выполняется при объединении диапазона ячеек | +| **removeCellStyles** | Действие выполняется при очистке стилей ячейки | +| **renameSheet** | Действие выполняется при переименовании листа | +| **resizeCol** | Действие выполняется при изменении ширины столбца | +| **resizeRow** | Действие выполняется при изменении высоты строки | +| **setCellFormat** | Действие выполняется при изменении формата ячейки | +| **setCellValue** | Действие выполняется при изменении или удалении значения ячейки | +| **setValidation** | Действие выполняется при установке правил проверки данных для ячейки | +| **sortCells** | Действие выполняется при сортировке данных в таблице | +| **setCellStyle** | Действие выполняется при изменении стиля ячейки | +| **toggleVisibility** | Действие выполняется при скрытии/отображении столбцов/строк | +| **toggleFreeze** | Действие выполняется при закреплении/откреплении столбцов/строк | +| **unmerge** | Действие выполняется при разъединении ячеек | + +**Журнал изменений:** + +- Действия **toggleFreeze** и **toggleVisibility** добавлены в v5.2 +- Действия **merge**, **unmerge**, **filter**, **fitColumn**, **insertLink** добавлены в v5.0 + +**Связанный пример:** [Spreadsheet. Действия](https://snippet.dhtmlx.com/efcuxlkt) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md new file mode 100644 index 00000000..ef410a2e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md @@ -0,0 +1,13 @@ +--- +sidebar_label: Обзор Event Bus методов +title: Обзор Event Bus методов +description: Вы можете ознакомиться с обзором Event Bus методов библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор Event Bus методов {#event-bus-methods-overview} + +| Название | Описание | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(../eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(../eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(../eventsbus_on_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 00000000..697b7554 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,25 @@ +--- +sidebar_label: Обзор событий +title: Обзор событий +description: Вы можете ознакомиться с обзором событий библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор событий {#events-overview} + +| Название | Описание | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(../spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(../spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(../spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(../spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(../spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(../spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(../spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(../spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/export_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/export_overview.md new file mode 100644 index 00000000..49f4ed2d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/export_overview.md @@ -0,0 +1,12 @@ +--- +sidebar_label: Обзор методов экспорта +title: Обзор методов экспорта +description: Вы можете ознакомиться с обзором методов экспорта библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор методов экспорта {#export-methods-overview} + +| Название | Описание | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(../export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(../export_xlsx_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 00000000..f5af75e0 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,50 @@ +--- +sidebar_label: Обзор методов +title: Обзор методов +description: Вы можете ознакомиться с обзором методов библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор методов {#methods-overview} + +| Название | Описание | +| :------------------------------------------ | :------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(../spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(../spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(../spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(../spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(../spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(../spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(../spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(../spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(../spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(../spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(../spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(../spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(../spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(../spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(../spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(../spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(../spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(../spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(../spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(../spreadsheet_redo_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(../spreadsheet_search_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(../spreadsheet_serialize_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(../spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(../spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(../spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(../spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(../spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(../spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(../spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(../spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(../spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(../spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(../spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(../spreadsheet_unlock_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 00000000..f56976eb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: Обзор свойств +title: Обзор свойств +description: Вы можете ознакомиться с обзором свойств библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор свойств {#properties-overview} + +| Название | Описание | +| --------------------------------------------- | ---------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(../spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(../spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(../spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(../spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(../spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(../spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(../spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md new file mode 100644 index 00000000..71c85b16 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: Обзор методов Selection +title: Обзор методов Selection +description: Вы можете ознакомиться с обзором методов Selection библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор методов Selection {#selection-methods-overview} + +| Название | Описание | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md new file mode 100644 index 00000000..7fccf85d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md @@ -0,0 +1,17 @@ +--- +sidebar_label: Обзор API Sheet Manager +title: Обзор API Sheet Manager +description: Вы можете ознакомиться с обзором API Sheet Manager библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор API Sheet Manager {#sheet-manager-api-overview} + +| Название | Описание | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(../sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(../sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(../sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(../sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(../sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(../sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(../sheetmanager_setactive_method.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md new file mode 100644 index 00000000..678f2778 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getFocusedCell() +title: Метод getFocusedCell объекта selection +description: Вы можете узнать о методе getFocusedCell объекта selection в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getFocusedCell() + +### Описание {#description} + +@short: Возвращает идентификатор ячейки, находящейся в фокусе + +### Использование {#usage} + +~~~jsx +getFocusedCell(): string; +~~~ + +### Возвращаемое значение {#returns} + +Метод возвращает идентификатор ячейки, находящейся в фокусе + +### Пример {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(data); + +// установка фокуса на ячейку +spreadsheet.selection.setFocusedCell("D4"); + +// получение ячейки в фокусе +const focused = spreadsheet.selection.getFocusedCell(); // ->"D4" +~~~ + +**Полезная статья:** [Работа со Spreadsheet](working_with_ssheet.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md new file mode 100644 index 00000000..d929801d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getSelectedCell() +title: Метод getSelectedCell объекта selection +description: Вы можете узнать о методе getSelectedCell объекта selection в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getSelectedCell() + +### Описание {#description} + +@short: Возвращает идентификатор(ы) выбранной(ых) ячейки(ек) + +### Использование {#usage} + +~~~jsx +getSelectedCell(): string; +~~~ + +### Возвращаемое значение {#returns} + +Метод возвращает идентификатор(ы) или диапазон выбранной(ых) ячейки(ек) + +### Пример {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(data); + +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// получает выбранные ячейки +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +**Полезная статья:** [Работа со Spreadsheet](working_with_ssheet.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md new file mode 100644 index 00000000..203877e0 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: removeSelectedCell() +title: Метод removeSelectedCell объекта selection +description: Вы можете узнать о методе removeSelectedCell объекта selection в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# removeSelectedCell() + +### Описание {#description} + +@short: Снимает выделение с указанной(ых) ячейки(ек) + +### Использование {#usage} + +~~~jsx +removeSelectedCell(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) или диапазон выбранной(ых) ячейки(ек) + +### Пример {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(data); + +// выбор разрозненных ячеек +spreadsheet.selection.setSelectedCell("A1:A9,C2,B4,D6"); + +// снимает выделение с указанных ячеек +spreadsheet.selection.removeSelectedCell("A3:A6,C2"); +~~~ + +**Журнал изменений:** Добавлено в v4.2 + +**Полезная статья:** [Работа со Spreadsheet](working_with_ssheet.md) + +**Связанный пример:** [Spreadsheet. Снятие выделения](https://snippet.dhtmlx.com/u4j76cuh) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md new file mode 100644 index 00000000..39525013 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: setFocusedCell() +title: Метод setFocusedCell объекта selection +description: Вы можете узнать о методе setFocusedCell объекта selection в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setFocusedCell() + +### Описание {#description} + +@short: Устанавливает фокус на указанную ячейку + +### Использование {#usage} + +~~~jsx +setFocusedCell(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, на которую нужно установить фокус + +### Пример {#example} + +~~~jsx {6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(data); + +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +**Полезная статья:** [Работа со Spreadsheet](working_with_ssheet.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md new file mode 100644 index 00000000..c0a8832f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSelectedCell() +title: Метод setSelectedCell объекта selection +description: Вы можете узнать о методе setSelectedCell объекта selection в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setSelectedCell() + +### Описание {#description} + +@short: Выбирает указанную(ые) ячейку(и) + +### Использование {#usage} + +~~~jsx +setSelectedCell(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) или диапазон выбранной(ых) ячейки(ек) + +### Пример {#example} + +~~~jsx {7,10,13} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(data); + +// выбор ячейки +spreadsheet.selection.setSelectedCell("B5"); + +// выбор диапазона ячеек +spreadsheet.selection.setSelectedCell("B1:B5"); + +// выбор разрозненных ячеек +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +**Полезная статья:** [Работа со Spreadsheet](working_with_ssheet.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md new file mode 100644 index 00000000..f9ba587e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: add() +title: Метод add +description: Вы можете узнать о методе add объекта Sheet Manager в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник по API, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# add() + +### Описание {#description} + +@short: Добавляет новый пустой лист в таблицу и возвращает уникальный идентификатор созданного листа + +Если имя не указано, оно генерируется автоматически (например, "Sheet 2" или "Sheet 3"). + +:::info +Для использования этого метода необходимо включить параметр конфигурации [`multiSheets`](api/spreadsheet_multisheets_config.md). +::: + +### Использование {#usage} + +~~~ts +add: (name?: string) => Id; +~~~ + +### Параметры {#parameters} + +- `name` - (*string*) необязательный, отображаемое имя для вкладки нового листа. Если не указано, присваивается имя по умолчанию. + +### Возвращаемое значение {#returns} + +- `Id` - (*string | number*) уникальный идентификатор созданного листа. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Добавление листа с пользовательским именем +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // например, "sheet_2" + +// Добавление листа с автоматически сгенерированным именем +const anotherSheetId = spreadsheet.sheets.add(); +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md new file mode 100644 index 00000000..c62413b1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: clear() +title: метод clear +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе clear Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# clear() + +### Описание {#description} + +@short: Очищает содержимое указанного листа (удаляет все значения ячеек, стили и форматирование), не удаляя сам лист + +Если идентификатор не передан, очищается текущий активный лист. + +### Использование {#usage} + +~~~ts +clear: (id?: Id) => void; +~~~ + +### Параметры {#parameters} + +- `id` - (*string | number*) необязательный, уникальный идентификатор листа, который нужно очистить. Если не указан, очищается текущий активный лист. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Очистить конкретный лист по id +spreadsheet.sheets.clear("sheet_1"); + +// Очистить текущий активный лист +spreadsheet.sheets.clear(); +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md new file mode 100644 index 00000000..75729f4b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: get() +title: метод get +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе get Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# get() + +### Описание {#description} + +@short: Возвращает объект отдельного листа по его идентификатору + +### Использование {#usage} + +~~~ts +get: (id: Id) => ISheet; +~~~ + +### Параметры {#parameters} + +- `id` - (*string | number*) обязательный, уникальный идентификатор листа, который нужно получить. + +### Возвращаемое значение {#returns} + +- `ISheet` - (*object*) объект листа, соответствующий переданному идентификатору. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md new file mode 100644 index 00000000..77ae721e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getActive() +title: метод getActive +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе getActive Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getActive() + +### Описание {#description} + +@short: Возвращает объект листа, который в данный момент активен (отображается) в таблице + +### Использование {#usage} + +~~~ts +getActive: () => ISheet; +~~~ + +### Возвращаемое значение {#returns} + +- `ISheet` - (*object*) объект текущего активного листа со свойствами `id` и `name`. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md new file mode 100644 index 00000000..3ee267de --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getAll() +title: метод getAll +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе getAll Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getAll() + +### Описание {#description} + +@short: Возвращает массив всех объектов листов, присутствующих в таблице в данный момент + +:::info +Каждый объект листа содержит его id и name. +::: + +### Использование {#usage} + +~~~ts +getAll: () => ISheet[]; +~~~ + +### Возвращаемое значение {#returns} + +- `ISheet[]` - (*array*) массив объектов листов. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md new file mode 100644 index 00000000..c64cc11c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: remove() +title: метод remove +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе remove Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# remove() + +### Описание {#description} + +@short: Удаляет лист из таблицы по его идентификатору + +Если удалённый лист был активным, таблица автоматически переключается на другой доступный лист. + +:::info +Чтобы применить этот метод, необходимо включить параметр конфигурации [`multiSheets`](api/spreadsheet_multisheets_config.md). + +Также обратите внимание, что лист не удаляется, если в таблице меньше 2 листов. +::: + +### Использование {#usage} + +~~~ts +remove: (id: Id) => void; +~~~ + +### Параметры {#parameters} + +- `id` - (*string | number*) обязательный, уникальный идентификатор листа, который нужно удалить. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Удалить лист по его id +spreadsheet.sheets.remove("sheet_2"); +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md new file mode 100644 index 00000000..93562e5d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md @@ -0,0 +1,43 @@ +--- +sidebar_label: setActive() +title: метод setActive +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе setActive Sheet Manager. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setActive() + +### Описание {#description} + +@short: Переключает активный (отображаемый) лист на тот, что указан по его идентификатору + +Интерфейс таблицы перерисовывается для отображения содержимого целевого листа. + +### Использование {#usage} + +~~~ts +setActive: (id: Id) => void; +~~~ + +### Параметры {#parameters} + +- `id` - (*string | number*) обязательный, уникальный идентификатор листа, который нужно активировать. + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Переключиться на второй лист +spreadsheet.sheets.setActive("sheet_2"); + +// Проверить переключение +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Полезная статья:** [Работа с листами](working_with_sheets.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md new file mode 100644 index 00000000..5b541d72 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addColumn() +title: метод addColumn +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе addColumn. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# addColumn() + +### Описание {#description} + +@short: Добавляет новый столбец в таблицу + +:::info +Метод находит указанную ячейку, выбирает её, сдвигает столбец, в котором находится ячейка, на одну позицию влево и добавляет на его место пустой столбец. +::: + +### Использование {#usage} + +~~~jsx +addColumn(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, содержащей идентификатор столбца, который нужно добавить + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// добавляет пустой столбец "G" +spreadsheet.addColumn("G1"); +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md new file mode 100644 index 00000000..31f57582 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md @@ -0,0 +1,55 @@ +--- +sidebar_label: addFormula() +title: метод addFormula +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе addFormula. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# addFormula() + +### Описание {#description} + +@short: Регистрирует пользовательскую функцию формулы, которую можно использовать в формулах ячеек + +После регистрации формула доступна в любой ячейке по её имени в верхнем регистре (например, `=MYFUNC(A1, B2)`). + +### Использование {#usage} + +~~~ts +type cellValue = string | number | boolean +type mathArgument = cellValue | cellValue[]; +type mathFunction = (...x: mathArgument[]) => cellValue; + +addFormula: (name: string, handler: mathFunction) => void; +~~~ + +### Параметры {#parameters} + +- `name` - (*string*) обязательный, имя формулы (без учёта регистра, хранится в верхнем регистре) +- `handler` - (*function*) обязательный, колбэк-функция, обрабатывающая входные аргументы (строки, числа, булевы значения или их массивы) и возвращающая единственное значение + +:::note +Колбэк-функция `handler` должна быть синхронной. Использование `Promise` или `fetch` внутри функции не допускается. +::: + +### Пример {#example} + +~~~jsx {4-6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +// добавляет пользовательскую формулу, которая удваивает значение +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); + +// теперь можно использовать в ячейках: =DOUBLE(A1) +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +**Журнал изменений:** Добавлено в v6.0 + +**Связанный пример:** [Spreadsheet. Добавление пользовательской формулы](https://snippet.dhtmlx.com/wvxdlahp) + +**Полезная статья:** [Формулы и функции](functions.md#custom-formulas) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md new file mode 100644 index 00000000..c09c6d34 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addRow() +title: метод addRow +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о методе addRow. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# addRow() + +### Описание {#description} + +@short: Добавляет новую строку в таблицу + +:::info +Метод находит указанную ячейку, выбирает её, сдвигает строку, в которой находится ячейка, на одну позицию вниз и добавляет на её место пустую строку. +::: + +### Использование {#usage} + +~~~jsx +addRow(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, содержащей идентификатор строки, которую нужно добавить + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// добавляет пустую вторую строку +spreadsheet.addRow("G2"); +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md new file mode 100644 index 00000000..a341d3d7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: afterAction +title: событие afterAction +description: В документации DHTMLX JavaScript Spreadsheet вы можете узнать о событии afterAction. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterAction + +### Описание {#description} + +@short: Срабатывает после выполнения действия + +### Использование {#usage} + +~~~jsx +afterAction: (action: string, config: object) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `action` - (обязательный) имя действия. Полный список доступных действий смотрите [здесь](api/overview/actions_overview.md#list-of-actions) +- `config` - (обязательный) объект с параметрами действия + +### Пример {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + } +}); +~~~ + +**Журнал изменений:** Добавлено в v4.3 + +**Полезные статьи:** +- [Действия таблицы](api/overview/actions_overview.md) +- [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md new file mode 100644 index 00000000..6a71e926 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: afterClear +title: Событие afterClear +description: Вы можете узнать о событии afterClear в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterClear + +:::caution +Событие `afterClear` устарело начиная с v4.3. Оно продолжает работать, однако рекомендуется использовать новый подход: + +~~~jsx +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + } +}); +~~~ + +Подробнее о новой концепции см. **[Действия Spreadsheet](api/overview/actions_overview.md)**. +::: + +### Описание {#description} + +@short: Вызывается после очистки таблицы + +### Использование {#usage} + +~~~jsx +afterClear: () => void; +~~~ + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterClear" +spreadsheet.events.on("afterClear", function(){ + console.log("A spreadsheet is cleared"); + return false; +}); +~~~ + +**Журнал изменений:** Добавлено в v4.2 + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md new file mode 100644 index 00000000..6c0acce8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterDataLoaded +title: Событие afterDataLoaded +description: Вы можете узнать о событии afterDataLoaded в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterDataLoaded + +### Описание {#description} + +@short: Вызывается после завершения загрузки данных + +### Использование {#usage} + +~~~jsx +afterDataLoaded: () => void; +~~~ + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); +spreadsheet.parse(data); + +// подписка на событие "afterDataLoaded" +spreadsheet.events.on("afterDataLoaded", () => { + dhx.message({ + text: "Data is successfully loaded into Spreadsheet!", + css: "dhx_message--success", + expire: 5000 + }); +}); +~~~ + +**Журнал изменений:** Добавлено в v5.2 + +**Полезная статья:** [Обработка событий](handling_events.md) + +**Связанный пример:** [Spreadsheet. Событие загрузки данных](https://snippet.dhtmlx.com/vxr7amz6) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md new file mode 100644 index 00000000..a20c9cb9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditEnd +title: Событие afterEditEnd +description: Вы можете узнать о событии afterEditEnd в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterEditEnd + +### Описание {#description} + +@short: Вызывается после завершения редактирования ячейки + +### Использование {#usage} + +~~~jsx +afterEditEnd: (cell: string, value: string) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки +- `value` - (обязательный) значение ячейки + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterEditEnd" +spreadsheet.events.on("afterEditEnd", function(cell, value){ + console.log("Editing is finished"); + console.log(cell, value); +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md new file mode 100644 index 00000000..61998c24 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditStart +title: Событие afterEditStart +description: Вы можете узнать о событии afterEditStart в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterEditStart + +### Описание {#description} + +@short: Вызывается после начала редактирования ячейки + +### Использование {#usage} + +~~~jsx +afterEditStart: (cell: string, value: string) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки +- `value` - (обязательный) значение ячейки + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterEditStart" +spreadsheet.events.on("afterEditStart", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md new file mode 100644 index 00000000..a3565b46 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterFocusSet +title: Событие afterFocusSet +description: Вы можете узнать о событии afterFocusSet в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterFocusSet + +### Описание {#description} + +@short: Вызывается после установки фокуса на ячейку + +### Использование {#usage} + +~~~jsx +afterFocusSet: (cell: string) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterFocusSet" +spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md new file mode 100644 index 00000000..5cc46575 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterSelectionSet +title: Событие afterSelectionSet +description: Вы можете узнать о событии afterSelectionSet в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterSelectionSet + +### Описание {#description} + +@short: Вызывается после выделения ячеек + +### Использование {#usage} + +~~~jsx +afterSelectionSet: (cell: string) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterSelectionSet" +spreadsheet.events.on("afterSelectionSet", function(cell){ + console.log("The cells " + spreadsheet.selection.getSelectedCell() + " are selected"); + console.log(cell); +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md new file mode 100644 index 00000000..7f6eacb9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md @@ -0,0 +1,40 @@ +--- +sidebar_label: afterSheetChange +title: Событие afterSheetChange +description: Вы можете узнать о событии afterSheetChange в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# afterSheetChange + +### Описание {#description} + +@short: Вызывается после смены активного листа + +### Использование {#usage} + +~~~jsx +afterSheetChange: (sheet: object) => void; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `sheet` - (обязательный) объект с именем и идентификатором нового активного листа + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "afterSheetChange" +spreadsheet.events.on("afterSheetChange", function(sheet) { + console.log("The newly active sheet is " + sheet.name); + console.log(sheet); +}); +~~~ + +**Журнал изменений:** Добавлено в v4.1 + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md new file mode 100644 index 00000000..2fa3deb8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md @@ -0,0 +1,50 @@ +--- +sidebar_label: beforeAction +title: Событие beforeAction +description: Вы можете узнать о событии beforeAction в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeAction + +### Описание {#description} + +@short: Вызывается перед выполнением действия + +### Использование {#usage} + +~~~jsx +beforeAction: (action: string, config: object) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `action` - (обязательный) имя действия. Полный список доступных действий см. [здесь](api/overview/actions_overview.md#list-of-actions) +- `config` - (обязательный) объект с параметрами действия + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить выполнение действия; в противном случае верните `true` + +### Пример {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return false; + } +}); +~~~ + +**Журнал изменений:** Добавлено в v4.3 + +**Полезные статьи:** +- [Действия Spreadsheet](api/overview/actions_overview.md) +- [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md new file mode 100644 index 00000000..80d3c28b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md @@ -0,0 +1,53 @@ +--- +sidebar_label: beforeClear +title: Событие beforeClear +description: Вы можете узнать о событии beforeClear в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeClear + +:::caution +Событие `beforeClear` устарело начиная с v4.3. Оно продолжает работать, однако рекомендуется использовать новый подход: + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + return false; + } +}); +~~~ + +Подробнее о новой концепции см. **[Действия Spreadsheet](api/overview/actions_overview.md)**. +::: + +### Описание {#description} + +@short: Вызывается перед очисткой таблицы + +### Использование {#usage} + +~~~jsx +beforeClear: () => void | boolean; +~~~ + +### Возвращаемое значение {#returns} + +Верните `false`, чтобы предотвратить очистку таблицы; в противном случае `true`. + +### Пример {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "beforeClear" +spreadsheet.events.on("beforeClear", function(){ + console.log("A spreadsheet will be cleared"); + return false; +}); +~~~ + +**Журнал изменений:** Добавлено в v4.2 + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md new file mode 100644 index 00000000..95e33315 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditEnd +title: Событие beforeEditEnd +description: Вы можете узнать о событии beforeEditEnd в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeEditEnd + +### Описание {#description} + +@short: Вызывается перед завершением редактирования ячейки + +### Использование {#usage} + +~~~jsx +beforeEditEnd: (cell: string, value: string) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки +- `value` - (обязательный) значение ячейки + +### Возвращаемое значение {#returns} + +Верните `true`, чтобы завершить редактирование ячейки, `false` — чтобы предотвратить закрытие редактора + +### Пример {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "beforeEditEnd" +spreadsheet.events.on("beforeEditEnd", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); + return true; +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md new file mode 100644 index 00000000..d08fb05a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditStart +title: Событие beforeEditStart +description: Вы можете узнать о событии beforeEditStart в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeEditStart + +### Описание {#description} + +@short: Срабатывает перед началом редактирования ячейки + +### Использование {#usage} + +~~~jsx +beforeEditStart: (cell: string, value: string) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки +- `value` - (обязательный) значение ячейки + +### Возвращаемое значение {#returns} + +Верните `true`, чтобы разрешить редактирование ячейки, `false` — чтобы запретить + +### Пример {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписываемся на событие "beforeEditStart" +spreadsheet.events.on("beforeEditStart", function(cell, value){ + console.log("Editing is about to start"); + console.log(cell, value); + return true; +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md new file mode 100644 index 00000000..ce9a6f51 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeFocusSet +title: Событие beforeFocusSet +description: Вы можете узнать о событии beforeFocusSet в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeFocusSet + +### Описание {#description} + +@short: Срабатывает перед установкой фокуса на ячейку + +### Использование {#usage} + +~~~jsx +beforeFocusSet: (cell: string) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки + +### Возвращаемое значение {#returns} + +Верните `true`, чтобы установить фокус на ячейку, `false` — чтобы запретить установку фокуса + +### Пример {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписываемся на событие "beforeFocusSet" +spreadsheet.events.on("beforeFocusSet", function(cell){ + console.log("Focus will be set on a cell "+spreadsheet.selection.getSelectedCell()); + console.log(cell); + return true; +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md new file mode 100644 index 00000000..7c348779 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeSelectionSet +title: Событие beforeSelectionSet +description: Вы можете узнать о событии beforeSelectionSet в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeSelectionSet + +### Описание {#description} + +@short: Срабатывает перед выделением ячеек + +### Использование {#usage} + +~~~jsx +beforeSelectionSet: (cell: string) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) + +### Возвращаемое значение {#returns} + +Верните `true`, чтобы разрешить выделение ячеек, `false` — чтобы запретить выделение + +### Пример {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписываемся на событие "beforeSelectionSet" +spreadsheet.events.on("beforeSelectionSet", function(cell){ + console.log("Cells "+spreadsheet.selection.getSelectedCell()+" will be selected"); + console.log(cell); + return true; +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md new file mode 100644 index 00000000..d7f41e14 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeSheetChange +title: Событие beforeSheetChange +description: Вы можете узнать о событии beforeSheetChange в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# beforeSheetChange + +### Описание {#description} + +@short: Срабатывает перед сменой активного листа + +### Использование {#usage} + +~~~jsx +beforeSheetChange: (sheet: object) => void | boolean; +~~~ + +### Параметры {#parameters} + +Колбэк события принимает следующие параметры: + +- `sheet` - (обязательный) объект с именем и идентификатором текущего активного листа + +### Возвращаемое значение {#returns} + +Верните `true`, чтобы разрешить смену активного листа, `false` — чтобы запретить + +### Пример {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписываемся на событие "beforeSheetChange" +spreadsheet.events.on("beforeSheetChange", function(sheet) { + console.log("The active sheet will be changed"); + console.log(sheet); + return true; +}); +~~~ + +**Журнал изменений:** Добавлено в v4.1 + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md new file mode 100644 index 00000000..34566548 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md @@ -0,0 +1,33 @@ +--- +sidebar_label: clear() +title: Метод clear +description: Вы можете узнать о методе clear в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# clear() + +### Описание {#description} + +@short: Очищает таблицу + +### Использование {#usage} + +~~~jsx +clear(): void; +~~~ + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// очищает таблицу +spreadsheet.clear(); +~~~ + +**Журнал изменений:** Добавлено в v4.2 + +**Полезная статья:** [Очистка таблицы](working_with_ssheet.md#clearing-spreadsheet) + +**Связанный пример:** [Spreadsheet. Clear](https://snippet.dhtmlx.com/szmtjn72) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md new file mode 100644 index 00000000..1bf95dbd --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: colsCount +title: Конфигурация colsCount +description: Вы можете узнать о конфигурации colsCount в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# colsCount + +### Описание {#description} + +@short: Необязательный. Задаёт количество столбцов в таблице при инициализации + +### Использование {#usage} + +~~~jsx +colsCount?: number; +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + colsCount: 10, + // другие параметры конфигурации +}); +~~~ + +**Полезная статья:** [Конфигурация](configuration.md#number-of-rows-and-columns) + +**Связанный пример:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md new file mode 100644 index 00000000..70ec3ed1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteColumn() +title: Метод deleteColumn +description: Вы можете узнать о методе deleteColumn в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# deleteColumn() + +### Описание {#description} + +@short: Удаляет столбец из таблицы + +:::info +Метод находит указанную ячейку, выделяет её, удаляет столбец, в котором она расположена, и сдвигает столбец слева на его место. +::: + +### Использование {#usage} + +~~~jsx +deleteColumn(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, содержащей имя столбца, который следует удалить + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// удаляет столбец "G" +spreadsheet.deleteColumn("G2"); +~~~ + +:::note +Можно удалить несколько столбцов, передав диапазон идентификаторов ячеек в качестве параметра метода, например: "A1:C3". +::: + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md new file mode 100644 index 00000000..2f020a5c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteRow() +title: Метод deleteRow +description: Вы можете узнать о методе deleteRow в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# deleteRow() + +### Описание {#description} + +@short: Удаляет строку из таблицы + +:::info +Метод находит указанную ячейку, выделяет её, удаляет строку, в которой она расположена, и сдвигает строку ниже на её место. +::: + +### Использование {#usage} + +~~~jsx +deleteRow(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, содержащей идентификатор строки, которую следует удалить + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// удаляет вторую строку +spreadsheet.deleteRow("G2"); +~~~ + +:::note +Можно удалить несколько строк, передав диапазон идентификаторов ячеек в качестве параметра метода, например: "A1:C3". +::: + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md new file mode 100644 index 00000000..a775a7a5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md @@ -0,0 +1,77 @@ +--- +sidebar_label: eachCell() +title: Метод eachCell +description: Вы можете узнать о методе eachcell в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# eachCell() + +### Описание {#description} + +@short: Перебирает ячейки в таблице + +:::info +Если диапазон ячеек не указан, метод перебирает выделенные ячейки. +::: + +### Использование {#usage} + +~~~jsx +eachCell( + cb: (cellName: string, cellValue: any) => any, + range?: string +): void; +~~~ + +### Параметры {#parameters} + +- `callback` - (обязательный) функция-колбэк +- `range` - (необязательный) диапазон ячеек для перебора + +### Пример {#example} + +~~~jsx {21-27} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); + +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + items: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); + +function checkValue(check) { + spreadsheet.eachCell(function (cell, value) { + if (!check(value)) { + spreadsheet.setStyle(cell, { background: "#e57373" }); + } else { + spreadsheet.setStyle(cell, { background: "" }); + } + }, spreadsheet.selection.getSelectedCell()); +} + +spreadsheet.menu.events.on("click", function (id) { + switch (id) { + case "isNumber": + checkValue(function (value) { return !isNaN(value) }); + break; + case "isEven": + checkValue(function (value) { return value % 2 === 0 }); + break; + } +}); +~~~ + +**Полезная статья:** [Кастомизация](customization.md#menu) + +**Связанный пример**: [Spreadsheet. Menu](https://snippet.dhtmlx.com/2mlv2qaz) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md new file mode 100644 index 00000000..c93ac18b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: editLine +title: Конфигурация editLine +description: Вы можете узнать о конфигурации editLine в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# editLine + +### Описание {#description} + +@short: Необязательный. Показывает/скрывает строку редактирования + +### Использование {#usage} + +~~~jsx +editLine?: boolean; +~~~ + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +editLine: true +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + editLine: true, + // другие параметры конфигурации +}); +~~~ + +**Полезная статья:** [Конфигурация](configuration.md#editing-bar) + +**Связанный пример:** [Spreadsheet. Disabled Line](https://snippet.dhtmlx.com/unem2jkh) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md new file mode 100644 index 00000000..274247a4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md @@ -0,0 +1,29 @@ +--- +sidebar_label: endEdit() +title: Метод endEdit +description: Вы можете узнать о методе endEdit в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# endEdit() + +### Описание {#description} + +@short: Завершает редактирование в выбранной ячейке, закрывает редактор и сохраняет введённое значение + +### Использование {#usage} + +~~~jsx +endEdit(): void; +~~~ + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// завершает редактирование в выбранной ячейке +spreadsheet.endEdit(); +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_cells.md#editing-a-cell) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md new file mode 100644 index 00000000..b98da78b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md @@ -0,0 +1,43 @@ +--- +sidebar_label: exportModulePath +title: Конфигурация exportModulePath +description: Вы можете узнать о конфигурации exportModulePath в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# exportModulePath + +### Описание {#description} + +@short: Необязательный. Задаёт путь к модулю экспорта + +### Использование {#usage} + +~~~jsx +exportModulePath?: string; +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx", // локальный путь к файлу `worker.js` модуля экспорта + // другие параметры конфигурации +}); +~~~ + +### Подробности {#details} + +:::note +DHTMLX Spreadsheet использует библиотеку на основе WebAssembly [JSON2Excel](https://github.com/dhtmlx/json2excel) для экспорта данных в Excel. +::: + +Для экспорта файлов необходимо задать путь к файлу *worker.js* библиотеки [Json2Excel](https://github.com/dhtmlx/json2excel) (в котором выполняется экспорт) с помощью параметра `exportModulePath`. По умолчанию используется `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`. +- если вы используете публичный сервер экспорта, указывать ссылку на него не нужно, так как он используется по умолчанию +- если вы используете собственный сервер экспорта, необходимо: + - установить библиотеку [**Json2Excel**](https://github.com/dhtmlx/json2excel) + - использовать `"../libs/json2excel/x.x/worker.js?vx"` для конкретной версии (замените `x.x` на версию, развёрнутую на вашем сервере) + + +**Полезная статья:** [Загрузка и экспорт данных](loading_data.md#exporting-data) + +**Связанный пример:** [Spreadsheet. Пользовательский путь импорта и экспорта](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md new file mode 100644 index 00000000..fbc9bb90 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: fitColumn() +title: Метод fitColumn +description: Вы можете узнать о методе fitColumn в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# fitColumn() + +### Описание {#description} + +@short: Подстраивает ширину столбца по его самому длинному значению + + +### Использование {#usage} + +~~~jsx +fitColumn(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки, содержащей имя нужного столбца + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подстраивает ширину столбца "G" +spreadsheet.fitColumn("G2"); +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#autofit-column-width) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md new file mode 100644 index 00000000..27be3a05 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md @@ -0,0 +1,83 @@ +--- +sidebar_label: formats +title: Конфигурация formats +description: Вы можете узнать о конфигурации formats в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# formats + +### Описание {#description} + +@short: Необязательный. Определяет список числовых форматов + +### Использование {#usage} + +~~~jsx +formats?: array; +~~~ + +### Параметры {#parameters} + +Свойство `formats` представляет собой массив объектов числовых форматов, каждый из которых включает набор свойств: + +- `id` - идентификатор формата, используемый для установки формата ячейки с помощью метода [](api/spreadsheet_setformat_method.md) +- `mask` - маска для числового формата +- `name` - имя формата, отображаемое в выпадающих списках панели инструментов и меню +- `example` - пример, показывающий, как выглядит отформатированное число. По умолчанию для примеров форматов используется число 2702.31 + +### Конфигурация по умолчанию {#default-config} + +Числовые форматы по умолчанию: + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // зависит от конфигурации timeFormat + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" } +]; +~~~ + + +### Пример {#example} + +~~~jsx {2-19} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + formats: [ + { + name: "U.S. Dollar", + id: "currency", + mask: "$#,##0.00" + }, + { + name: "Euro", + id: "euro", + mask: "[$€]#.##0,00", + example: "1000.50" + }, + { + name: "Swiss franc", + id: "franc", + mask: "[$CHF ]#.##0,00" + } + ], + // другие параметры конфигурации +}); +~~~ + +**Журнал изменений:** +- Формат "Time" добавлен в v4.3 +- Формат "Date" добавлен в v4.2 +- Формат "Text" добавлен в v4.0 + +**Полезные статьи:** +- [Числовое форматирование](number_formatting.md) +- [Настройка форматов](number_formatting.md#formats-customization) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md new file mode 100644 index 00000000..28fedc6e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeCols() +title: Метод freezeCols +description: Вы можете узнать о методе freezeCols в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# freezeCols() + +### Описание {#description} + +@short: Фиксирует ("замораживает") столбцы + +### Использование {#usage} + +~~~jsx +freezeCols(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора столбца. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.freezeCols("B2"); // столбцы до столбца "B" будут зафиксированы +spreadsheet.freezeCols("sheet2!B2"); // столбцы до столбца "B" в "sheet2" будут зафиксированы +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**Похожее API:** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md) + +**Связанный пример:** [Spreadsheet. Фиксация столбцов и строк через API](https://snippet.dhtmlx.com/a12xd1mn) + +**Журнал изменений:** +Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md new file mode 100644 index 00000000..1055be04 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeRows() +title: Метод freezeRows +description: Вы можете узнать о методе freezeRows в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# freezeRows() + +### Описание {#description} + +@short: Фиксирует ("замораживает") строки + +### Использование {#usage} + +~~~jsx +freezeRows(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора строки. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.freezeRows("B2"); // строки до строки "2" будут зафиксированы +spreadsheet.freezeRows("sheet2!B2"); // строки до строки "2" в "sheet2" будут зафиксированы +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**Похожее API:** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +**Связанный пример:** [Spreadsheet. Фиксация столбцов и строк через API](https://snippet.dhtmlx.com/a12xd1mn) + +**Журнал изменений:** +Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md new file mode 100644 index 00000000..89d3d57a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: getFilter() +title: Метод getFilter +description: Вы можете узнать о методе getFilter в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getFilter() + +### Описание {#description} + +@short: Возвращает объект с критериями, заданными для фильтрации данных + +### Использование {#usage} + +~~~jsx +getFilter(id?: string): {cell, rules}; +~~~ + +### Параметры {#parameters} + +- `id` - (необязательный) идентификатор листа. Если не указан, метод вызывается для текущего листа + +### Возвращаемое значение {#returns} + +Метод возвращает объект с критериями фильтрации. Объект включает два атрибута: + +- `cell` - диапазон ячеек, к которому применяется фильтрация +- `rules` - массив объектов с правилами фильтрации + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// получает критерии фильтрации для текущего листа +const filter = spreadsheet.getFilter(); // -> {cell:"A1:A8", rules: [{…}, {…}, {…}, {…}, {…}]} +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Фильтрация данных](working_with_ssheet.md#filtering-data) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md new file mode 100644 index 00000000..ecfa74d4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormat() +title: Метод getFormat +description: Вы можете узнать о методе getFormat в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getFormat() + +### Описание {#description} + +@short: Возвращает числовой формат, применённый к значению ячейки + +### Использование {#usage} + +~~~jsx +getFormat(cell: string): string | array; +~~~ + +### Параметры {#parameters} + +`cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек + +### Возвращаемое значение {#returns} + +Метод возвращает формат(ы), применённый к значению ячейки(ек) + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// возвращает "currency" +const format = spreadsheet.getFormat("A1"); +~~~ + +:::info +Начиная с v4.1, ссылка на ячейку может быть указана в следующем формате: + +~~~jsx +// возвращает "number" +const cellFormat = spreadsheet.getFormat("sheet1!A2"); +~~~ + +где `sheet1` — имя вкладки. + +Если имя вкладки не указано, метод возвращает формат, применённый к значению ячейки в текущей активной вкладке. +::: + +**Полезная статья:** [Числовое форматирование](number_formatting.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md new file mode 100644 index 00000000..fda36243 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormula() +title: Метод getFormula +description: Вы можете узнать о методе getFormula в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getFormula() + +### Описание {#description} + +@short: Возвращает формулу ячейки + +### Использование {#usage} + +~~~jsx +getFormula(cell: string): string | array; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки + +### Возвращаемое значение {#returns} + +Метод возвращает формулу ячейки + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// возвращает "ABS(C2)" +const formula = spreadsheet.getFormula("B2"); +~~~ + +:::info +Ссылка на ячейку может быть указана в следующем формате: + +~~~jsx +// возвращает "ABS(C2)" +const formula = spreadsheet.getFormula("sheet1!B2"); +~~~ + +где `sheet1` — имя вкладки. + +Если имя вкладки не указано, метод возвращает формулу ячейки из активной вкладки. +::: + +**Журнал изменений:** Добавлено в v4.1 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md new file mode 100644 index 00000000..2fc11a5d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md @@ -0,0 +1,68 @@ +--- +sidebar_label: getStyle() +title: Метод getStyle +description: Вы можете узнать о методе getStyle в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getStyle() + +### Описание {#description} + +@short: Возвращает стили, применённые к ячейке(ам) + +### Использование {#usage} + +~~~jsx +getStyle(cell: string): any; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек + +### Возвращаемое значение {#returns} + +Метод возвращает стили, заданные для ячеек + +### Пример {#example} + +~~~jsx {5,9,12} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// получение стиля одной ячейки +const style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// получение стилей диапазона ячеек +const rangeStyles = spreadsheet.getStyle("A1:D1"); // -> см. подробности + +// получение стилей различных ячеек +const values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +:::info +Для нескольких ячеек метод возвращает массив объектов со стилями, применёнными к каждой ячейке: + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ +::: + +:::info +Начиная с v4.1, ссылка на ячейку или диапазон ячеек может быть указана в следующем формате: + +~~~jsx +const style = spreadsheet.getStyle("sheet1!A2"); +//-> {justify-content: "flex-end", text-align: "right"} +~~~ + +где `sheet1` — имя вкладки. + +Если имя вкладки не указано, метод возвращает стиль(и) ячейки(ек) из активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md new file mode 100644 index 00000000..51c913b2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: getValue() +title: Метод getValue +description: Вы можете узнать о методе getValue в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# getValue() + +### Описание {#description} + +@short: Возвращает значение(я) ячейки(ек) + +### Использование {#usage} + +~~~jsx +getValue(cell: string): any | array; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек + +### Возвращаемое значение {#returns} + +Метод возвращает значения ячеек + +### Пример {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// возвращает значение одной ячейки +const cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// возвращает значения диапазона ячеек +const rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// возвращает значения отдельных ячеек +const values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +:::info +Начиная с версии v4.1, ссылку на ячейку или диапазон ячеек можно задавать в следующем формате: + +~~~jsx +const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000 +~~~ + +где `sheet1` — название вкладки. + +Если название вкладки не указано, метод возвращает значение(я) ячейки(ек) из активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md new file mode 100644 index 00000000..facd7116 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: groupFill +title: Событие groupFill +description: Вы можете узнать о событии groupFill в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# groupFill + +### Описание {#description} + +@short: Срабатывает при автозаполнении ячеек + +### Использование {#usage} + +~~~jsx +groupFill: (focusedCell: string, selectedCell: string) => void; +~~~ + +### Параметры {#parameters} + +Калбэк события принимает следующие параметры: + +- `focusedCell` - (обязательный) идентификатор ячейки в фокусе +- `selectedCell` - (обязательный) идентификаторы выбранных ячеек + +### Пример {#example} + +~~~jsx {5-7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// подписка на событие "groupFill" +spreadsheet.events.on("groupFill", function (focusedCell, selectedCell) { + console.log(focusedCell, selectedCell); +}); +~~~ + +**Полезная статья:** [Обработка событий](handling_events.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md new file mode 100644 index 00000000..6db7fff4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: hideCols() +title: Метод hideCols +description: Вы можете узнать о методе hideCols в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# hideCols() + +### Описание {#description} + +@short: Скрывает столбцы + +### Использование {#usage} + +~~~jsx +hideCols(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора столбца. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.hideCols("B2"); // столбец "B" будет скрыт +spreadsheet.hideCols("sheet2!B2"); // столбец "B" в "sheet2" будет скрыт +spreadsheet.hideCols("B2:C2"); // столбцы "B" и "C" будут скрыты +~~~ + + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**Похожее API:** [`showCols()`](api/spreadsheet_showcols_method.md) + +**Связанный пример:** [Spreadsheet. Скрытие столбцов и строк через API](https://snippet.dhtmlx.com/zere1ote) + +**Журнал изменений:** Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md new file mode 100644 index 00000000..6c45f677 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: hideRows() +title: Метод hideRows +description: Вы можете узнать о методе hideRows в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# hideRows() + +### Описание {#description} + +@short: Скрывает строки + +### Использование {#usage} + +~~~jsx +hideRows(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора строки. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.hideRows("B2"); // строка "2" будет скрыта +spreadsheet.hideRows("sheet2!B2"); // строка "2" в "sheet2" будет скрыта +spreadsheet.hideRows("B2:C4"); // строки с "2" по "4" будут скрыты +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**Похожее API:** [`showRows()`](api/spreadsheet_showrows_method.md) + +**Связанный пример:** [Spreadsheet. Скрытие столбцов и строк через API](https://snippet.dhtmlx.com/zere1ote) + +**Журнал изменений:** Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md new file mode 100644 index 00000000..90d9f7ec --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: hideSearch() +title: Метод hideSearch +description: Вы можете узнать о методе hideSearch в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# hideSearch() + +### Описание {#description} + +@short: Скрывает панель поиска + +### Использование {#usage} + +~~~jsx +hideSearch(): void; +~~~ + +### Пример {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// открывает панель поиска и подсвечивает найденные ячейки +spreadsheet.search("min", true); + +// скрывает панель поиска +spreadsheet.hideSearch(); +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#searching-for-data) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md new file mode 100644 index 00000000..895e7fc3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md @@ -0,0 +1,45 @@ +--- +sidebar_label: importModulePath +title: Конфигурация importModulePath +description: Вы можете узнать о конфигурации importModulePath в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# importModulePath + +### Описание {#description} + +@short: Необязательный. Задаёт путь к модулю импорта + +### Использование {#usage} + +~~~jsx +importModulePath?: string; +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + importModulePath: "../libs/excel2json/1.0/worker.js", + // другие параметры конфигурации +}); +~~~ + +### Подробности {#details} + +:::note +DHTMLX Spreadsheet использует библиотеку [Excel2json](https://github.com/DHTMLX/excel2json) на основе WebAssembly для импорта данных из Excel. +::: + +Чтобы импортировать файлы, необходимо: + +- установить библиотеку **Excel2json** +- задать путь к файлу *worker.js* с помощью параметра `importModulePath` одним из двух способов: + - указав локальный путь к файлу на вашем компьютере, например: `"../libs/excel2json/1.0/worker.js"` + - указав ссылку на файл из CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +По умолчанию используется ссылка на CDN. + +**Полезная статья:** [Загрузка данных и экспорт](loading_data.md#loading-excel-file-xlsx) + +**Связанный пример:** [Spreadsheet. Пользовательский путь для импорта и экспорта](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md new file mode 100644 index 00000000..9f84338f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md @@ -0,0 +1,53 @@ +--- +sidebar_label: insertLink() +title: Метод insertLink +description: Вы можете узнать о методе insertLink в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# insertLink() + +### Описание {#description} + +@short: Вставляет/удаляет гиперссылку в ячейке + +### Использование {#usage} + +~~~jsx +insertLink( + cell: string, + link? : { + text?: string, + href: string + } +): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор ячейки +- `link` - (необязательный) объект с конфигурацией ссылки: + - `text` - (необязательный) текст, отображаемый для гиперссылки + - `href` - (обязательный) URL страницы, на которую ведёт гиперссылка + +:::info +Чтобы удалить гиперссылку, но сохранить текст, вызовите метод без параметра `link`. +::: + +### Пример {#example} + +~~~jsx {5-7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// вставить ссылку в ячейку "A2" +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); + +// удалить ссылку из ячейки "A2" +spreadsheet.insertLink("A2"); +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Работа с таблицей](working_with_cells.md#inserting-a-hyperlink-into-a-cell) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md new file mode 100644 index 00000000..0ca36952 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md @@ -0,0 +1,57 @@ +--- +sidebar_label: isLocked() +title: Метод isLocked +description: Вы можете узнать о методе isLocked в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# isLocked() + +### Описание {#description} + +@short: Проверяет, заблокирована ли ячейка(и) + +### Использование {#usage} + +~~~jsx +isLocked(cell: string): boolean; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек + +### Возвращаемое значение {#returns} + +Метод возвращает `true`, если ячейка заблокирована, и `false`, если она разблокирована + +### Пример {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// проверяет, заблокирована ли ячейка +const cellLocked = spreadsheet.isLocked("A1"); + +// проверяет, заблокированы ли несколько ячеек +const rangeLocked = spreadsheet.isLocked("A1:C1"); + +// проверяет, заблокированы ли разрозненные ячейки +const cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +:::info +Если одновременно проверяется несколько ячеек, метод возвращает `true`, если среди указанных ячеек есть хотя бы одна заблокированная. +::: + +:::info +Начиная с версии v4.1, ссылку на ячейку или диапазон ячеек можно задавать в следующем формате: + +~~~jsx +const cellsLocked = spreadsheet.isLocked("sheet1!A2"); +~~~ + +где `sheet1` — название вкладки. + +Если название вкладки не указано, метод проверяет ячейку(и) активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md new file mode 100644 index 00000000..3b599db2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md @@ -0,0 +1,102 @@ +--- +sidebar_label: load() +title: Метод load +description: Вы можете узнать о методе load в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# load() + +### Описание {#description} + +@short: Загружает данные из внешнего файла + +### Использование {#usage} + +~~~jsx +load(url: string, type?: string): promise; +~~~ + +### Параметры {#parameters} + +- `url` - (обязательный) URL внешнего файла +- `type` - (необязательный) тип загружаемых данных: "json" (по умолчанию), "csv", "xlsx" + +### Возвращаемое значение {#returns} + +Метод возвращает промис загрузки данных + +### Пример {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// загрузка данных в формате JSON (по умолчанию) +spreadsheet.load("../common/data.json"); + +// загрузка данных в формате CSV +spreadsheet.load("../common/data.csv", "csv"); + +// загрузка данных в формате Excel (только .xlsx) +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +**Связанные примеры:** +- [Spreadsheet. Загрузка данных](https://snippet.dhtmlx.com/ih9zmc3e) + +- [Spreadsheet. Загрузка CSV](https://snippet.dhtmlx.com/1f87y71v) + +- [Spreadsheet. Импорт Xlsx](https://snippet.dhtmlx.com/cqlpy828) + +:::info +Компонент выполняет AJAX-запрос и ожидает, что удалённый URL вернёт корректные данные. + +Загрузка данных асинхронна, поэтому любой код, выполняемый после загрузки, необходимо оборачивать в промис: + +~~~jsx +spreadsheet.load("../some/data.json").then(function(){ + spreadsheet.selection.add(123); +}); +~~~ +::: + +### Загрузка данных из Excel {#loading-excel-data} + +:::note +Компонент поддерживает импорт только из файлов Excel с расширением `.xlsx`. +::: + +DHTMLX Spreadsheet использует библиотеку [Excel2Json](https://github.com/dhtmlx/excel2json) на основе WebAssembly для импорта данных из Excel. [Подробнее](loading_data.md#loading-excel-file-xlsx). + +### Загрузка JSON-файлов {#loading-json-files} + +Вы можете позволить пользователям загружать JSON-файл в таблицу через файловый менеджер. Для этого: + +- Укажите кнопку для открытия файлового менеджера, в котором можно выбрать файлы ".json": + +~~~html +
+ +
+~~~ + + +- Вызовите метод `load()` с двумя параметрами: пустой строкой в качестве URL и типом загружаемых данных ("json"): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: true, +}); + +spreadsheet.parse(dataset); + +function json() { + spreadsheet.load("", "json"); // загружает данные из файла .json +} +~~~ + +Смотрите [пример](https://snippet.dhtmlx.com/e3xct53l). + +**Журнал изменений:** Возможность загрузки JSON-файла через файловый менеджер добавлена в v4.3 + +**Полезная статья:** [Загрузка данных и экспорт](loading_data.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md new file mode 100644 index 00000000..83f1d87a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md @@ -0,0 +1,86 @@ +--- +sidebar_label: localization +title: Конфигурация localization +description: Вы можете узнать о конфигурации localization в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# localization + +### Описание {#description} + +@short: Необязательный. Определяет формат чисел, дат, времени и валюты + +### Использование {#usage} + +~~~jsx +localization?: object; +~~~ + +### Параметры {#parameters} + +Объект `localization` может содержать следующие свойства: + +- `decimal` - (необязательный) символ, используемый в качестве десятичного разделителя, по умолчанию `"."`.
Возможные значения: `"." | ","` +- `thousands` - (необязательный) символ, используемый в качестве разделителя тысяч, по умолчанию `","`.
Возможные значения: `"." | "," | " " | ""` +- `currency` - (необязательный) знак валюты, по умолчанию `"$"` +- `dateFormat` - (необязательный) формат отображения дат, задаётся строкой. Формат по умолчанию: `"%d/%m/%Y"`. Подробности [ниже](#characters-for-setting-date-format) +- `timeFormat` - (необязательный) формат отображения времени: `12` или `24`. Формат по умолчанию: `12` + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +const defaultLocales = { + decimal: ".", + thousands: ",", + currency: "$", + dateFormat: "%d/%m/%Y", + timeFormat: 12, +}; +~~~ + +### Пример {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +### Символы для задания формата даты {#characters-for-setting-date-format} + +DHTMLX Spreadsheet использует следующие символы для задания формата даты: + +| Символ | Описание | +|-----------|----------------------------------------------------------------| +| **%d** | день в виде числа с ведущим нулём, 01..31 | +| **%j** | день в виде числа, 1..31 | +| **%D** | короткое название дня, Вс Пн Вт... | +| **%l** | полное название дня, Воскресенье Понедельник Вторник... | +| **%m** | месяц в виде числа с ведущим нулём, 01..12 | +| **%n** | месяц в виде числа, 1..12 | +| **%M** | короткое название месяца, Янв Фев Мар... | +| **%F** | полное название месяца, Январь Февраль Март... | +| **%y** | год в виде числа, 2 цифры | +| **%Y** | год в виде числа, 4 цифры | +| **%h** | часы в 12-часовом формате с ведущим нулём, 01..12) | +| **%g** | часы в 12-часовом формате, 1..12) | +| **%H** | часы в 24-часовом формате с ведущим нулём, 00..23 | +| **%G** | часы в 24-часовом формате, 0..23 | +| **%i** | минуты с ведущим нулём, 01..59 | +| **%s** | секунды с ведущим нулём, 01..59 | +| **%a** | am или pm | +| **%A** | AM или PM | +| **%u** | миллисекунды | + +**Журнал изменений:** +- Добавлено в v5.1 + +**Полезная статья:** [Локализация чисел, дат, времени и валюты](number_formatting.md#number-date-time-currency-localization) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md new file mode 100644 index 00000000..610e3da7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: lock() +title: метод lock +description: Вы можете узнать о методе lock в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# lock() + +### Описание {#description} + +@short: Блокирует указанную ячейку + +### Использование {#usage} + +~~~jsx +lock(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек + +### Пример {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// блокирует ячейку +spreadsheet.lock("A1"); + +// блокирует диапазон ячеек +spreadsheet.lock("A1:C1"); + +// блокирует указанные ячейки +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +:::info +Начиная с v4.1, ссылку на ячейку или диапазон ячеек можно задавать в следующем формате: + +~~~jsx +spreadsheet.lock("sheet1!A2"); +~~~ + +где `sheet1` — имя вкладки. + +Если имя вкладки не указано, метод блокирует ячейку(и) активной вкладки. +::: + +**Связанный пример**: [Spreadsheet. Locked Cells](https://snippet.dhtmlx.com/czeyiuf8) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md new file mode 100644 index 00000000..e97ae55b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: menu +title: конфигурация menu +description: Вы можете узнать о конфигурации menu в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# menu + +### Описание {#description} + +@short: Необязательный. Показывает/скрывает меню + +### Использование {#usage} + +~~~jsx +menu?: boolean; +~~~ + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +menu: true +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: false, + // other config parameters +}); +~~~ + +**Полезная статья:** [Конфигурация](configuration.md#menu) + +**Связанный пример:** [Spreadsheet. Menu](https://snippet.dhtmlx.com/uulux27v) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md new file mode 100644 index 00000000..57573fdd --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: mergeCells() +title: метод mergeCells +description: Вы можете узнать о методе mergeCells в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# mergeCells() + +### Описание {#description} + +@short: Объединяет диапазон ячеек в одну или разделяет объединённые ячейки + +### Использование {#usage} + +~~~jsx +mergeCells( + cell: string, + remove?: boolean +); +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) диапазон ячеек (например, "A1:A5") +- `remove` - (необязательный) определяет действие над ячейками: + - `false` - объединить ячейки (по умолчанию) + - `true` - разделить ячейки + +### Пример {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// объединяет ячейки A3, A4 и A5 +spreadsheet.mergeCells("A2:A5"); + +// разделяет ячейки A3, A4 и A5 +spreadsheet.mergeCells("A2:A5", true); +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Работа с ячейками](working_with_cells.md#merging-cells) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md new file mode 100644 index 00000000..ac791c26 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md @@ -0,0 +1,38 @@ +--- +sidebar_label: multiSheets +title: конфигурация multiSheets +description: Вы можете узнать о конфигурации multiSheets в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# multiSheets + +### Описание {#description} + +@short: Необязательный. Включает/отключает возможность работы с несколькими листами в таблице + +### Использование {#usage} + +~~~jsx +multiSheets?: boolean; +~~~ + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +multiSheets: true +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + multiSheets: false, + // other config parameters +}); +~~~ + +:::info +Установка свойства в `false` скрывает нижнюю панель с вкладками листов. +::: + +**Журнал изменений:** Добавлено в v4.1 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md new file mode 100644 index 00000000..371ad927 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md @@ -0,0 +1,297 @@ +--- +sidebar_label: parse() +title: метод parse +description: Вы можете узнать о методе parse в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# parse() + +### Описание {#description} + +@short: Загружает данные в таблицу из локального источника данных + +### Использование {#usage} + +~~~jsx title="Загрузка данных в один лист" +parse([ + { + cell: string, + value: string | number | Date, + css?: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // more cell objects +]): void; +~~~ + +~~~jsx title="Загрузка данных в несколько листов" +parse({ + sheets: [ + { + name?: string, + id?: string, + cols?: [ + { + width?: number, + hidden?: boolean, + }, + // more column objects + ], + rows?: [ + { + height?: number, + hidden?: boolean, + }, + // more row objects + ], + data: [ + { + cell: string, + value: string | number | Date, + css: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // more cell objects + ], + merged?: [ + { + from: { column: index, row: index }, + to: { column: index, row: index } + }, + // more objects + ], + freeze?: { + col?: number, + row?: number, + } + }, + // more sheet objects + ] +}): void; +~~~ + +### Параметры {#parameters} + +Если нужно создать набор данных *только для одного листа*, укажите данные как **массив объектов ячеек**. Для каждого объекта **cell** можно задать следующие параметры: + +- `cell` - (обязательный) идентификатор ячейки, формируемый как "идентификатор столбца + идентификатор строки", например A1 +- `value` - (обязательный) значение ячейки +- `css` - (необязательный) имя CSS-класса +- `format` - (необязательный) имя [стандартного числового формата](number_formatting.md#default-number-formats) или [пользовательского формата](number_formatting.md#formats-customization), добавленного для применения к значению ячейки +- `editor` - (необязательный) объект с настройками редактора ячейки: + - `type` - (обязательный) тип редактора ячейки: "select" + - `options` - (обязательный) диапазон ячеек ("A1:B8") или массив строковых значений +- `locked` - (необязательный) определяет, заблокирована ли ячейка, по умолчанию `false` +- `link` - (необязательный) объект с настройками ссылки, добавленной в ячейку: + - `text` - (необязательный) текст ссылки + - `href` - (обязательный) URL, определяющий назначение ссылки + +
+ +Если нужно создать набор данных *сразу для нескольких листов*, укажите данные как **объект** со следующим параметром: + +- `sheets` - (обязательный) массив объектов **sheet**. Каждый объект имеет следующие свойства: + - `name` - (необязательный) имя листа + - `id` - (необязательный) идентификатор листа + - `rows` - (необязательный) массив объектов с конфигурациями строк. Каждый объект может содержать следующие свойства: + - `height` - (необязательный) высота строки. Если не указана, строки имеют высоту 32px + - `hidden` - (необязательный) определяет видимость строки + - `cols` - (необязательный) массив объектов с конфигурациями столбцов. Каждый объект может содержать следующие свойства: + - `width` - (необязательный) ширина столбца. Если не указана, столбцы имеют ширину 120px + - `hidden` - (необязательный) определяет видимость столбца + - `data` - (обязательный) массив объектов **cell**. Каждый объект имеет следующие свойства: + - `cell` - (обязательный) идентификатор ячейки, формируемый как "идентификатор столбца + идентификатор строки", например A1 + - `value` - (обязательный) значение ячейки + - `css` - (необязательный) имя CSS-класса + - `format` - (необязательный) имя [стандартного числового формата](number_formatting.md#default-number-formats) или [пользовательского формата](number_formatting.md#formats-customization), добавленного для применения к значению ячейки + - `editor` - (необязательный) объект с настройками редактора ячейки: + - `type` - (обязательный) тип редактора ячейки: "select" + - `options` - (обязательный) диапазон ячеек ("A1:B8") или массив строковых значений + - `locked` - (необязательный) определяет, заблокирована ли ячейка, по умолчанию `false` + - `link` - (необязательный) объект с настройками ссылки, добавленной в ячейку: + - `text` - (необязательный) текст ссылки + - `href` - (обязательный) URL, определяющий назначение ссылки + - `merged` - (необязательный) массив объектов, каждый из которых определяет диапазон ячеек для объединения. Каждый объект должен содержать следующие свойства: + - `from` - объект, определяющий позицию первой ячейки диапазона: + - `column` - индекс столбца + - `row` - индекс строки + - `to` - объект, определяющий позицию последней ячейки диапазона: + - `column` - индекс столбца + - `row` - индекс строки + - `freeze` - (необязательный) объект, задающий и настраивающий фиксированные столбцы/строки для конкретных листов. Может содержать следующие свойства: + - `col` - (необязательный) задаёт количество фиксированных столбцов (например, 2), по умолчанию `0` + - `row` - (необязательный) задаёт количество фиксированных строк (например, 2), по умолчанию `0` + +:::info +Если параметр конфигурации [`multisheets`](api/spreadsheet_multisheets_config.md) установлен в `false`, создаётся только один лист. +::: + +### Пример {#example} + +~~~jsx {22} title="Пример 1. Загрузка данных в один лист" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430 }, + { cell: "E2", value: 2872.4 }, + + // добавляем выпадающие списки в ячейки + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // больше данных +]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); +~~~ + +~~~jsx title="Пример 2. Загрузка данных в несколько листов" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + rows: [ + { height: 50, hidden: true }, // конфигурация первой строки + { height: 50 }, // конфигурация второй строки + // высота остальных строк — 32 + ], + cols: [ + { width: 300 }, // конфигурация первого столбца + { width: 300, hidden: true }, // конфигурация второго столбца + // ширина остальных столбцов — 120 + ], + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + merged: [ + // объединяем ячейки A1 и B1 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // объединяем ячейки A2, A3, A4 и A5 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } } + ], + freeze: { + col: 2, + row: 2 + }, + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + ] + } + ] +}; + +spreadsheet.parse(data); +~~~ + +## Загрузка стилизованных данных {#parsing-styled-data} + +Вы также можете задать конкретные стили для ячеек при подготовке набора данных. Для этого определите данные как объект с двумя параметрами: + +- `styles` - (обязательный) объект с CSS-классами, применяемыми к конкретным ячейкам. [Подробнее ниже](#list-of-properties) +- `data` - (обязательный) загружаемые данные + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "a1", value: "Country" }, + { cell: "b1", value: "Product" }, + { cell: "c1", value: "Price" }, + { cell: "d1", value: "Amount" }, + { cell: "e1", value: "Total Price" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, css: "someclass" }, + { cell: "d2", value: 430, css: "someclass" }, + { cell: "e2", value: 2872.4 } + ], +}; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(styledData); +~~~ + +:::info +Задайте CSS-класс для ячейки с помощью свойства `css`. +::: + +### Список свойств {#list-of-properties} + +Список свойств, которые можно указать в объекте `styles`: + +- `background` +- `color` +- `textAlign` +- `verticalAlign` +- `textDecoration` +- `fontWeight` +- `fontStyle` +- `multiline: "wrap"` (начиная с v5.0.3) +- `border`, `border-right`, `border-left`, `border-top`, `border-bottom` (начиная с v5.2) + +:::note +При необходимости вы также можете использовать следующие свойства: + +- `fontSize` +- `font` +- `fontFamily` +- `textShadow` + +однако в некоторых случаях они могут работать не так, как ожидается (например, при применении `position: absolute` или `display: box`) +::: + +**Журнал изменений:** + +- Свойство `freeze` и параметр `hidden` для свойств `rows` и `cols` объекта `sheets` добавлены в v5.2 +- Свойства `locked` и `link` объекта `cell` добавлены в v5.1 +- Свойство `merged` объекта `sheets` добавлено в v5.0 +- Свойство `editor` объекта `cell` добавлено в v4.3 +- Свойства `rows` и `cols` объекта `sheets` добавлены в v4.2 +- Возможность подготовки данных для нескольких листов добавлена в v4.1 + +**Полезная статья:** [Загрузка и экспорт данных](loading_data.md) + +**Связанные примеры**: + +- [Spreadsheet. Styled Data](https://snippet.dhtmlx.com/abnh7glb) +- [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) +- [Spreadsheet. Initialization with merged cells](https://snippet.dhtmlx.com/0vtukep9) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md new file mode 100644 index 00000000..38ae789f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: readonly +title: конфигурация readonly +description: Вы можете узнать о конфигурации readonly в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# readonly + +### Описание {#description} + +@short: Необязательный. Включает/отключает режим только для чтения + +### Использование {#usage} + +~~~jsx +readonly?: boolean; +~~~ + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +readonly: false +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + readonly: true, + // other config parameters +}); +~~~ + +**Полезные статьи:** +- [Конфигурация](configuration.md#read-only-mode) +- [Кастомизация](customization.md#custom-read-only-mode) + +**Связанный пример:** [Spreadsheet. Readonly](https://snippet.dhtmlx.com/2w959gx2) + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md new file mode 100644 index 00000000..90e1874b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: redo() +title: метод redo +description: Вы можете узнать о методе redo в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# redo() + +### Описание {#description} + +@short: Повторно применяет отменённое действие + +### Использование {#usage} + +~~~jsx +redo(): void; +~~~ + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// повторно применяет отменённое действие +spreadsheet.redo(); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md new file mode 100644 index 00000000..35c96ede --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: rowsCount +title: конфигурация rowsCount +description: Вы можете узнать о конфигурации rowsCount в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# rowsCount + +### Описание {#description} + +@short: Необязательный. Задаёт количество строк в таблице при инициализации + +### Использование {#usage} + +~~~jsx +rowsCount?: number; +~~~ + +### Пример {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + rowsCount: 10, + // other config parameters +}); +~~~ + +**Полезная статья:** [Конфигурация](configuration.md#number-of-rows-and-columns) + +**Связанный пример:** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md new file mode 100644 index 00000000..c4cac41b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: search() +title: метод search +description: Вы можете узнать о методе search в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# search() + +### Описание {#description} + +@short: Выполняет поиск ячеек по заданным параметрам + +Метод также может открыть строку поиска в правом верхнем углу таблицы и выделить найденные совпадения + +### Использование {#usage} + +~~~jsx +search( + text?: string, + openSearch?: boolean, + sheetId?: string | number +): string[]; +~~~ + +### Параметры {#parameters} + +- `text` - (необязательный) значение для поиска +- `openSearch` - (необязательный) если `true`, открывает строку поиска и выделяет ячейки с найденными совпадениями; по умолчанию `false` +- `sheetId` - (необязательный) идентификатор листа. По умолчанию метод выполняет поиск по ячейкам активного листа + +### Возвращаемое значение {#returns} + +Метод возвращает массив с идентификаторами найденных ячеек + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// возвращает идентификаторы ячеек с найденными совпадениями, открывает строку поиска и выделяет найденные ячейки +spreadsheet.search("feb", true, "Income"); // -> ['C1'] +~~~ + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#searching-for-data) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md new file mode 100644 index 00000000..9381b134 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: serialize() +title: метод serialize +description: Вы можете узнать о методе serialize в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# serialize() + +### Описание {#description} + +@short: Сериализует данные таблицы в JSON-объект + +### Использование {#usage} + +~~~jsx +serialize(): object; +~~~ + +### Возвращаемое значение {#returns} + +Метод возвращает сериализованный JSON-объект + +Сериализованные данные представляют собой объект со следующими атрибутами: + +- `formats` - массив объектов с числовыми форматами +- `styles` - объект с применёнными CSS-классами +- `sheets` - массив объектов листов. Каждый объект содержит следующие атрибуты: + - `name` - имя листа + - `data` - массив объектов данных + - `rows` - массив объектов высоты строк + - `cols` - массив объектов ширины столбцов + +### Пример {#example} + +~~~jsx {4} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +const data = spreadsheet.serialize(); +~~~ + +**Полезная статья:** [Загрузка и экспорт данных](loading_data.md#saving-and-restoring-state) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md new file mode 100644 index 00000000..09252627 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md @@ -0,0 +1,94 @@ +--- +sidebar_label: setFilter() +title: Метод setFilter +description: Вы можете узнать о методе setFilter в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setFilter() + +### Описание {#description} + +@short: Фильтрует данные в таблице по заданным критериям + +### Использование {#usage} + +~~~jsx +setFilter( + cell?: string, + rules?: [ + { + condition?: { + factor: "string", + value: date | number |string | [number, number] + }, + exclude?: any[] + }, + // more rule objects + ] +): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки (или диапазона ячеек), содержащей идентификатор столбца, значения которого фильтруются (например, "A1", "A1:C10" или "sheet2!A1") +- `rules` - (необязательный) массив объектов с правилами фильтрации. Каждый объект может содержать следующие параметры: + - `condition` - (необязательный) объект с параметрами условной фильтрации листа: + - `factor` - (обязательный) строковое значение, определяющее выражение сравнения для фильтрации. Смотрите список доступных значений [ниже](#list-of-factors) + - `value` - (обязательный) значение(я) для фильтрации по указанному фактору + - `exclude` - (необязательный) массив элементов данных, которые должны быть исключены из листа + +:::note +Чтобы сбросить фильтрацию, вызовите метод без параметров или передайте только параметр `cell`. +::: + +### Пример {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// filter data by condition specified for column A +spreadsheet.setFilter("A2", [{condition: {factor: "te", value:"r" }}]); + +// filter data by criteria specified for column A of Date sheet +spreadsheet.setFilter("Date!A1", [{condition: {factor: "db", value:"18/10/2022" }, exclude: ["25/06/2022"]}]); + +// filter data by condition specified for column C +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}}]); + +// filter data by conditions specified for columns A and C +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); + + +// reset filtering +spreadsheet.setFilter(); +~~~ + +### Список факторов {#list-of-factors} + +| Фактор | Значение | +| ------ | ---------------------- | +| "e" | пусто | +| "ne" | не пусто | +| "tc" | текст содержит | +| "tdc" | текст не содержит | +| "ts" | текст начинается с | +| "te" | текст заканчивается на | +| "tex" | точное совпадение | +| "d" | дата совпадает | +| "db" | дата до | +| "da" | дата после | +| "gt" | больше чем | +| "geq" | больше или равно | +| "lt" | меньше чем | +| "leq" | меньше или равно | +| "eq" | равно | +| "neq" | не равно | +| "ib" | в диапазоне | +| "inb" | не в диапазоне | + +**Журнал изменений:** Добавлено в v5.0 + +**Полезная статья:** [Фильтрация данных](working_with_ssheet.md#filtering-data) + +**Связанный пример:** [Spreadsheet. Фильтрация через API](https://snippet.dhtmlx.com/effrcsg6) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md new file mode 100644 index 00000000..f0c8a1a6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: setFormat() +title: Метод setFormat +description: Вы можете узнать о методе setFormat в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setFormat() + +### Описание {#description} + +@short: Устанавливает заданный формат для значения ячейки + +### Использование {#usage} + +~~~jsx +setFormat(cell: string, format: string | array): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `format` - (обязательный) название(я) числового формата, применяемого к значению ячейки + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// applies the currency format to the cell A1 +spreadsheet.setFormat("A1","currency"); +~~~ + +:::info +Начиная с v4.1, ссылку на ячейку можно указывать в следующем формате: + +~~~jsx +spreadsheet.setFormat("sheet1!A2", "number"); +~~~ + +где `sheet1` — название вкладки. + +Если название вкладки не указано, метод устанавливает формат для значения ячейки активной вкладки. +::: + +**Полезная статья:** [Форматирование чисел](number_formatting.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md new file mode 100644 index 00000000..c3696f63 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setStyle() +title: Метод setStyle +description: Вы можете узнать о методе setStyle в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setStyle() + +### Описание {#description} + +@short: Устанавливает стиль для ячейки(ек) + +:::info +Метод устанавливает одинаковый стиль для указанных ячеек. Если вы хотите применить разные стили к ячейкам таблицы, используйте метод [](api/spreadsheet_parse_method.md). +::: + +### Использование {#usage} + +~~~jsx +setStyle(cell: string, styles: array | object): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `styles` - (обязательный) стили, применяемые к ячейкам. [Ознакомьтесь со списком свойств для стилизации ячеек](api/spreadsheet_parse_method.md#list-of-properties) + +### Пример {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// setting style for one cell +spreadsheet.setStyle("A1", {background: "red"}); + +// setting the same style for a range of cells +spreadsheet.setStyle("A1:D1", {color: "blue"}); + +// setting the same style for different cells +spreadsheet.setStyle("B6,A1:D1", {color:"blue"}); + +// setting styles from an array for cells in a range alternately +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +**Связанный пример**: [Spreadsheet. Стилизованные данные](https://snippet.dhtmlx.com/abnh7glb) + +:::info +Начиная с v4.1, ссылку на ячейку или диапазон ячеек можно указывать в следующем формате: + +~~~jsx +spreadsheet.setStyle("sheet1!A2", {background: "red"}); +~~~ + +где `sheet1` — название вкладки. + +Если название вкладки не указано, метод применяет стиль к ячейке(ам) активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md new file mode 100644 index 00000000..c87c3439 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md @@ -0,0 +1,58 @@ +--- +sidebar_label: setValidation() +title: Метод setValidation +description: Вы можете узнать о методе setValidation в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setValidation() + +### Описание {#description} + +@short: Устанавливает валидацию для ячеек, добавляя в них выпадающие списки + +Метод также может удалять валидацию данных из ячейки(ек). + +### Использование {#usage} + +~~~jsx +setValidation( + cell: string, + options: string | string[] +): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `options` - (обязательный) строка с диапазоном ячеек ("C1:C3") или массив строковых значений + +### Пример {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); + +spreadsheet.parse(dataset); + +// sets validation and creates a drop-down list with 3 items to choose for B10 cell +spreadsheet.setValidation("B10", ["Apple", "Mango", "Avocado"]); +~~~ + +### Подробности {#details} + +Если необходимо удалить валидацию из ячейки(ек), передайте `null`, `0`, `false` или `undefined` вторым параметром вместо списка вариантов: + +~~~jsx +spreadsheet.setValidation("B15"); + +//or +spreadsheet.setValidation("B15", null); + +//or +spreadsheet.setValidation("B15", false); +~~~ + +**Журнал изменений:** Добавлено в v4.3 + +**Полезная статья:** [Валидация ячеек](working_with_cells.md#validating-cells) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md new file mode 100644 index 00000000..d61eb9fb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setValue() +title: Метод setValue +description: Вы можете узнать о методе setValue в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# setValue() + +### Описание {#description} + +@short: Устанавливает значение для ячейки + +:::info +Метод устанавливает одинаковое (повторяющееся) значение(я) для указанных ячеек. Если вы хотите добавить разные значения в ячейки таблицы, используйте метод [](api/spreadsheet_parse_method.md). +::: + +### Использование {#usage} + +~~~jsx +setValue(cell: string, value: string | number | array): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `value` - (обязательный) значение(я), устанавливаемые для ячеек + +### Пример {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// setting value for one cell +spreadsheet.setValue("A1",5); + +// setting the same value for a range of cells +spreadsheet.setValue("A1:D1",5); + +// setting the same value for different cells +spreadsheet.setValue("B6,A1:D1",5); + +// setting values from an array for cells in a range alternately +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +**Связанный пример:** [Spreadsheet. Инициализация с несколькими листами](https://snippet.dhtmlx.com/ihtkdcoc) + +:::info +Начиная с v4.1, ссылку на ячейку или диапазон ячеек можно указывать в следующем формате: + +~~~jsx +spreadsheet.setValue("sheet1!A1",5); +~~~ + +где `sheet1` — название вкладки. + +Если название вкладки не указано, метод устанавливает значение(я) для ячейки(ек) активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md new file mode 100644 index 00000000..2f869578 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showCols() +title: Метод showCols +description: Вы можете узнать о методе showCols в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# showCols() + +### Описание {#description} + +@short: Показывает скрытые столбцы + +### Использование {#usage} + +~~~jsx +showCols(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора столбца. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.showCols("B2"); // the "B" column will become visible again +spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become visible again +spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**Похожее API:** [`hideCols()`](api/spreadsheet_hidecols_method.md) + +**Связанный пример:** [Spreadsheet. Скрытие столбцов и строк через API](https://snippet.dhtmlx.com/zere1ote) + +**Журнал изменений:** Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md new file mode 100644 index 00000000..9151de22 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showRows() +title: Метод showRows +description: Вы можете узнать о методе showRows в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# showRows() + +### Описание {#description} + +@short: Показывает скрытые строки + +### Использование {#usage} + +~~~jsx +showRows(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора строки. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.showRows("B2"); // the "2" row will become visible again +spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visible again +spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**Похожее API:** [`hideRows()`](api/spreadsheet_hiderows_method.md) + +**Связанный пример:** [Spreadsheet. Скрытие столбцов и строк через API](https://snippet.dhtmlx.com/zere1ote) + +**Журнал изменений:** Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md new file mode 100644 index 00000000..64ce063f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: sortCells() +title: Метод sortCells +description: Вы можете узнать о методе sortCells в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# sortCells() + +### Описание {#description} + +@short: Сортирует данные в таблице + +### Использование {#usage} + +~~~jsx +sortCells(cell: string, dir: number): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки(ек) или диапазон ячеек, по которым нужно отсортировать данные в таблице +- `dir` - (обязательный) направление сортировки: + - 1 - по возрастанию + - -1 - по убыванию + +### Пример {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // configuration parameters +}); +spreadsheet.parse(data); + +// sorts data on the first sheet +spreadsheet.sortCells("B2:B11", -1); + +// sorts data on several sheets +spreadsheet.sortCells("Income!B2:B11, Report!B2:B11, Expenses!C2:C11", 1); +~~~ + + +**Связанный пример:** [Spreadsheet. Инициализация с несколькими листами](https://snippet.dhtmlx.com/ihtkdcoc) + +**Полезная статья:** [Сортировка данных](working_with_ssheet.md#sorting-data) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md new file mode 100644 index 00000000..a5ea0ce9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: startEdit() +title: Метод startEdit +description: Вы можете узнать о методе startEdit в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# startEdit() + +### Описание {#description} + +@short: Запускает редактирование выбранной ячейки + +:::info +Если идентификатор ячейки не передан, редактирование начинается в текущей выбранной ячейке. +::: + +### Использование {#usage} + +~~~jsx +startEdit(cell?: string, initialValue?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки +- `initialValue` - (необязательный) значение ячейки + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// starts editing the currently selected cell +spreadsheet.startEdit(); +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_cells.md#editing-a-cell) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md new file mode 100644 index 00000000..0589ad0f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md @@ -0,0 +1,71 @@ +--- +sidebar_label: toolbarBlocks +title: Конфигурация toolbarBlocks +description: Вы можете узнать о конфигурации toolbarBlocks в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# toolbarBlocks + +### Описание {#description} + +@short: Необязательный. Задаёт блоки кнопок, отображаемые на панели инструментов таблицы + +### Использование {#usage} + +~~~jsx +toolbarBlocks?: array; +~~~ + +### Конфигурация по умолчанию {#default-config} + +~~~jsx +toolbarBlocks: ["undo", "colors", "font", "decoration", "align", "cell", "format", "actions"] +~~~ + +### Пример {#example} + +~~~jsx {3-17} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // full toolbar + toolbarBlocks: [ + "undo", + "colors", + "font", + "decoration", + "align", + "cell", + "format", + "actions", + "lock", + "clear", + "columns", + "rows", + "file", + "help" + ] +}); +~~~ + +### Подробности {#details} + +Вы можете задать собственную структуру панели инструментов, перечислив необходимые элементы в массиве `toolbarBlocks` в нужном порядке, например: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +Ознакомьтесь с тем, как можно [настроить панель инструментов](customization.md#toolbar). + +**Журнал изменений:** + +- Блок `"font"` добавлен в v6.0 +- Блок `"cell"` добавлен в v5.2 +- Блок `"actions"` добавлен в v5.0 + +**Полезные статьи:** +- [Конфигурация](configuration.md#toolbar) +- [Кастомизация](customization.md) + +**Связанный пример:** [Spreadsheet. Полная панель инструментов](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md new file mode 100644 index 00000000..566d8688 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: undo() +title: метод undo +description: Вы можете узнать о методе undo в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# undo() + +### Описание {#description} + +@short: Отменяет последнее действие + +### Использование {#usage} + +~~~jsx +undo(): void; +~~~ + +### Пример {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// выполняет один шаг назад +spreadsheet.undo(); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md new file mode 100644 index 00000000..aa02747a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeCols() +title: метод unfreezeCols +description: Вы можете узнать о методе unfreezeCols в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# unfreezeCols() + +### Описание {#description} + +@short: Размораживает зафиксированные ("замороженные") столбцы + +### Использование {#usage} + +~~~jsx +unfreezeCols(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора столбца. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**Похожее API:** [`freezeCols()`](api/spreadsheet_freezecols_method.md) + +**Связанный пример:** [Spreadsheet. Заморозка столбцов и строк через API](https://snippet.dhtmlx.com/a12xd1mn) + +**Журнал изменений:** +Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md new file mode 100644 index 00000000..085b7c25 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeRows() +title: метод unfreezeRows +description: Вы можете узнать о методе unfreezeRows в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# unfreezeRows() + +### Описание {#description} + +@short: Размораживает зафиксированные ("замороженные") строки + +### Использование {#usage} + +~~~jsx +unfreezeRows(cell?: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (необязательный) идентификатор ячейки, используемый для определения идентификатора строки. Если идентификатор ячейки не передан, используется текущая выбранная ячейка + +### Пример {#example} + +~~~jsx +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen +~~~ + +**Полезная статья:** [Работа с таблицей](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**Похожее API:** [`freezeRows()`](api/spreadsheet_freezerows_method.md) + +**Связанный пример:** [Spreadsheet. Заморозка столбцов и строк через API](https://snippet.dhtmlx.com/a12xd1mn) + +**Журнал изменений:** +Добавлено в v5.2 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md new file mode 100644 index 00000000..35eb6ffe --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: unlock() +title: метод unlock +description: Вы можете узнать о методе unlock в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# unlock() + +### Описание {#description} + +@short: Снимает блокировку с заблокированной ячейки (ячеек) + +### Использование {#usage} + +~~~jsx +unlock(cell: string): void; +~~~ + +### Параметры {#parameters} + +- `cell` - (обязательный) идентификатор(ы) ячейки (ячеек) или диапазона ячеек + +### Пример {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// снимает блокировку с ячейки +spreadsheet.unlock("A1"); + +// снимает блокировку с диапазона ячеек +spreadsheet.unlock("A1:C1"); + +// снимает блокировку с указанных ячеек +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +:::info +Начиная с v4.1, ссылку на ячейку или диапазон ячеек можно указывать в следующем формате: + +~~~jsx +spreadsheet.unlock("sheet1!A2"); +~~~ + +где `sheet1` — это название вкладки. + +Если название вкладки не указано, метод снимает блокировку с ячейки (ячеек) активной вкладки. +::: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/awaitredraw.md b/i18n/ru/docusaurus-plugin-content-docs/current/awaitredraw.md new file mode 100644 index 00000000..c254e1ea --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/awaitredraw.md @@ -0,0 +1,28 @@ +--- +sidebar_label: Хелпер AwaitRedraw +title: Хелпер AwaitRedraw +description: Вы можете изучить хелпер AwaitRedraw в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Хелпер AwaitRedraw {#awaitredraw-helper} + +Некоторые методы API DHTMLX Spreadsheet вступают в силу только после того, как компонент отрендерен на странице. В некоторых случаях это может занять некоторое время, поэтому необходимо дождаться завершения рендеринга браузером перед выполнением следующего фрагмента кода. + +Для таких случаев можно использовать хелпер `dhx.awaitRedraw`. Он отслеживает цикл рендеринга и выполняет ваш код сразу после завершения рендеринга Spreadsheet. + +~~~js +dhx.awaitRedraw().then(() => { + // ваш код здесь +}); +~~~ + +Например, используйте `awaitRedraw` внутри `afterDataLoaded`, чтобы убедиться, что значение ячейки доступно перед его чтением: + +~~~js +spreadsheet.events.on("afterDataLoaded", () => { + dhx.awaitRedraw().then(() => { + const value = spreadsheet.getValue("A1"); + console.log(value); + }); +}); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/configuration.md new file mode 100644 index 00000000..43b8dea6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/configuration.md @@ -0,0 +1,71 @@ +--- +sidebar_label: Конфигурация +title: Конфигурация +description: Вы можете узнать о конфигурации библиотеки DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Конфигурация {#configuration} + +Вы можете настроить DHTMLX Spreadsheet под свои нужды. Доступные параметры конфигурации позволяют ограничить количество строк и столбцов, изменить внешний вид панели инструментов, а также управлять видимостью меню и строки редактирования. При необходимости Spreadsheet можно инициализировать в режиме только для чтения. + +## Панель инструментов {#toolbar} + +Панель инструментов Spreadsheet состоит из нескольких блоков элементов управления, которые можно изменять по своему усмотрению. По умолчанию панель инструментов содержит следующие блоки: `"undo"`, `"colors"`, `"font"`, `"decoration"`, `"align"`, `"cell"`, `"format"`, `"actions"`. Из списка можно добавить дополнительные блоки: `"lock"`, `"clear"`, `"rows"`, `"columns"`, `"file"`, `"help"`. + + + +Структура панели инструментов настраивается через параметр конфигурации компонента [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) — массив строк с названиями элементов управления. + +Вы также можете задать собственную структуру панели инструментов, перечислив необходимые элементы в массиве `toolbarBlocks` в нужном порядке, например: `"colors"`, `"align"`, `"cell"`, `"decoration"`, `"lock"`, `"clear"`. + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +Панель инструментов [легко настраивается](customization.md). Вы можете добавлять новые элементы управления, менять их иконки и применять нужный набор иконок. + +## Строка редактирования {#editing-bar} + +Так как структура Spreadsheet гибкая, вы можете включать и отключать строку редактирования для получения нужного внешнего вида компонента. Используйте параметр конфигурации [`editLine`](api/spreadsheet_editline_config.md) для скрытия/отображения строки редактирования. + + + +## Количество строк и столбцов {#number-of-rows-and-columns} + +При инициализации Spreadsheet создаётся сетка из 26 столбцов и 1000 строк. Когда этот лимит исчерпывается, дополнительные строки и столбцы добавляются автоматически, поэтому добавлять их вручную не нужно. Тем не менее вы можете задать точное количество строк и столбцов в сетке, если хотите их ограничить. Для этого используйте параметры [`colsCount`](api/spreadsheet_colscount_config.md) и [`rowsCount`](api/spreadsheet_rowscount_config.md). + + + +## Меню {#menu} + +По умолчанию меню Spreadsheet скрыто. Его можно включить или отключить с помощью соответствующего параметра конфигурации [`menu`](api/spreadsheet_menu_config.md): + + + +## Режим только для чтения {#read-only-mode} + +Вы также можете включить режим только для чтения, чтобы запретить редактирование ячеек Spreadsheet, с помощью параметра конфигурации [`readonly`](api/spreadsheet_readonly_config.md). + +Вы также можете [настроить поведение Spreadsheet в режиме только для чтения](customization.md#custom-read-only-mode). + + + +## Пользовательские числовые форматы ячеек {#custom-number-formats-for-cells} + +Вы можете применять 7 форматов по умолчанию к значениям ячеек: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text". + +Вы можете переопределить конфигурацию форматов по умолчанию или задать собственный числовой формат с помощью параметра конфигурации [`formats`](api/spreadsheet_formats_config.md). Подробности смотрите в статье [Форматирование чисел](number_formatting.md). + + + +## Путь к модулям экспорта/импорта {#path-to-exportimport-modules} + +DHTMLX Spreadsheet поддерживает импорт и экспорт данных в формате Excel. Компонент использует библиотеки на основе WebAssembly: [Excel2Json](https://github.com/dhtmlx/excel2json) и [JSON2Excel](https://github.com/dhtmlx/json2excel) для импорта/экспорта данных. + +После установки необходимой библиотеки нужно задать путь к файлу *worker.js* (локальному или на CDN) через соответствующий параметр конфигурации: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) или [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). + +Все подробности приведены в статье [Загрузка и экспорт данных](loading_data.md). + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/customization.md b/i18n/ru/docusaurus-plugin-content-docs/current/customization.md new file mode 100644 index 00000000..61527e28 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/customization.md @@ -0,0 +1,458 @@ +--- +sidebar_label: Кастомизация +title: Кастомизация +description: Вы можете узнать о кастомизации библиотеки DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Кастомизация {#customization} + +Вы можете настраивать внешний вид, структуру и функциональность панели инструментов, меню и контекстного меню, а также задавать пользовательское поведение Spreadsheet в режиме только для чтения. + +## Стандартные и пользовательские иконки {#default-and-custom-icons} + +По умолчанию DHTMLX Spreadsheet использует иконки на основе [Material Design](https://pictogrammers.com/library/mdi/?welcome). Однако при необходимости вы можете использовать любой другой набор иконочных шрифтов. Для этого подключите нужный иконочный шрифт на странице и применяйте иконки в любой части spreadsheet: в элементах управления панели инструментов, в пунктах меню и контекстного меню. + +Например, вы можете использовать набор иконок [Font Awesome](https://fontawesome.com/), подключив [ссылку на его CDN](https://docs.fontawesome.com/web/setup/get-started) после исходных файлов DHTMLX Spreadsheet следующим образом: + +~~~html + + + + +~~~ + +После этого вы можете использовать название иконки в качестве значения свойства `icon` в объекте с параметрами элемента управления панели инструментов, меню или контекстного меню. Подробнее смотрите ниже. + +## Типы элементов управления и операции {#controls-types-and-operations} + +### Типы {#types} + +Вы можете добавлять следующие типы элементов управления: `button`, `menuItem`, `separator` и `spacer`. + +Объект `button` имеет следующие свойства: + +- `type` — тип кнопки, установите значение "button" +- `id` — идентификатор кнопки +- `icon` — название иконки из используемого иконочного шрифта +- `hotkey` — название горячей клавиши для кнопки +- `value` — значение кнопки +- `tooltip` — подсказка для кнопки +- `twoState` — флаг, определяющий, может ли кнопка использоваться в двух состояниях +- `active` — состояние кнопки: `true` — активна, `false` — неактивна + +Объект `menuItem` имеет следующие свойства: + +- `type` — тип пункта меню, установите значение "menuItem" +- `id` — идентификатор пункта меню +- `icon` — название иконки из используемого иконочного шрифта +- `hotkey` — название горячей клавиши для пункта меню +- `value` — значение пункта меню +- `childs` — массив дочерних элементов управления (все дочерние элементы должны иметь тип `menuItem`) + +API коллекции данных **панели инструментов**, **меню** и **контекстного меню** позволяет управлять элементами управления: добавлять пользовательские, удалять ненужные или обновлять существующие — например, менять их иконки. + +### Добавление элементов управления {#adding-controls} + +Для добавления нового элемента управления используйте метод `spreadsheet.{name}.data.add()`. Он принимает следующие параметры: + +- `config` — (*object*) объект с конфигурацией элемента управления +- `index` — (*number*) индекс позиции для размещения элемента управления +- `parent` — (*string*) идентификатор родительского элемента управления (для типа `menuItem`) + +Для кнопки: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "button", // "menuItem" + id: "button-id", + tooltip: "Some tooltip", + icon: "icon-name" +}, 2); +~~~ + +Для menuItem: + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "menuitem-id", + value: "Some value", +}, -1, "parent-id"); +~~~ + +### Обновление элементов управления {#updating-controls} + +Вы можете изменить иконку элемента управления и другие параметры его конфигурации с помощью метода `spreadsheet.{name}.data.update()`. Он принимает два параметра: + +- идентификатор элемента управления +- объект с новой конфигурацией элемента управления + +~~~jsx +// spreadsheet.menu.data.update / spreadsheet.contextMenu.data.update +spreadsheet.toolbar.data.update("add", { + icon: "icon_name" +}); +~~~ + +### Удаление элементов управления {#deleting-controls} + +Для удаления элемента управления используйте метод `spreadsheet.{name}.data.remove()`. Передайте в метод идентификатор удаляемого элемента управления: + +~~~jsx +// spreadsheet.menu.data.remove / spreadsheet.contextMenu.data.remove +spreadsheet.toolbar.data.remove("control-id"); +~~~ + +## Панель инструментов {#toolbar} + +### Элементы управления по умолчанию {#default-controls} + +[Панель инструментов по умолчанию](/#toolbar) содержит следующие блоки элементов управления: + +- блок **Undo** + - кнопка *Undo* (id: "undo") + - кнопка *Redo* (id: "redo") +- блок **Colors** + - кнопка *Text color* (id: "color") + - кнопка *Background color* (id: "background") +- блок **Font** + - комбобокс *Font size* (id: "font-size") +- блок **Decoration** + - кнопка *Bold* (id: "font-weight-bold") + - кнопка *Italic* (id: "font-style-italic") + - кнопка *Underline* (id: "text-decoration-underline") + - кнопка *Strikethrough* (id: "text-decoration-line-through") +- блок **Align** + - подблок **Horizontal align** + - кнопка *Left* (id: "halign-left") + - кнопка *Center* (id: "halign-center") + - кнопка *Right* (id: "halign-right") + - подблок **Vertical align** + - кнопка *Top* (id: "valign-top") + - кнопка *Center* (id: "valign-center") + - кнопка *Bottom* (id: "valign-bottom") + - подблок **Text wrapping** + - кнопка *Clip* (id: "multiline-clip") + - кнопка *Wrap* (id: "multiline-wrap") +- блок **Cell** + - кнопка *Border* (id: "border") + - кнопка *Merge/Unmerge* (id: "merge") +- блок **Format** + - пункт меню *Format* (id: "format") +- блок **Actions** + - кнопка *Filter* (id: "filter") + - кнопка *Insert link* (id: "link") + +Также можно добавить перечисленные ниже блоки: + +- блок **Lock** + - кнопка *Lock* (id: "lock") +- блок **Clear** + - пункт меню *Clear group* (id: "clear-group") + - пункт меню *Clear value* (id: "clear-value") + - пункт меню *Clear styles* (id: "clear-styles") + - пункт меню *Clear all* (id: "clear-all") +- блок **Rows** + - кнопка *Add row* (id: "add-row") + - кнопка *Remove row* (id: "remove-row") + - кнопка *Unfreeze rows* (id: "unfreeze-rows") + - кнопка *Freeze up to row [id]* (id: "freeze-rows") + - кнопка *Hide row(s) [id]* (id: "hide-rows") +- блок **Columns** + - кнопка *Add column* (id: "add-col") + - кнопка *Remove column* (id: "remove-col") + - кнопка *Unfreeze columns* (id: "unfreeze-cols") + - кнопка *Freeze up to column [id]* (id: "freeze-cols") + - кнопка *Hide column(s) [id]* (id: "hide-cols") +- блок **File** + - пункт меню *Export* (id: "export") + - пункт меню *"Microsoft Excel(.xlsx)"* (id: "export-xlsx") + - пункт меню *Import* (id: "import") + - пункт меню *"Microsoft Excel(.xlsx)"* (id: "import-xlsx") +- блок **Help** + - кнопка *Help* (id: "help") + +### Добавление элементов управления {#adding-controls-1} + +В примере ниже в панель инструментов добавляется новая кнопка: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "button", + icon: "dxi dxi-delete", + tooltip: "Remove all", + id: "remove-all" +}); +~~~ + +![DHTMLX Spreadsheet toolbar with a custom Remove all button added through customization](/img/custom_toolbar_button.png) + +**Связанный пример**: [Spreadsheet. Пользовательская кнопка панели инструментов](https://snippet.dhtmlx.com/qopk6lta) + +В примере ниже в элемент управления "clear-group" добавляется новый пункт меню: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2" +}, -1, "clear-group"); +~~~ + +Для добавления menuItem существует упрощённый синтаксис, если точная позиция нового элемента не важна: + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2", + parent: "clear-group" +}); +~~~ + +### Обновление элементов управления {#updating-controls-1} + +В примере ниже стандартные иконки кнопок Undo/Redo в панели инструментов заменяются на иконки Font Awesome: + +~~~jsx +spreadsheet.toolbar.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.toolbar.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![DHTMLX Spreadsheet toolbar with custom Undo and Redo icons from Font Awesome](/img/custom_toolbar_icons.png) + +**Связанный пример**: [Spreadsheet. Пользовательские иконки панели инструментов](https://snippet.dhtmlx.com/mvnx43o0) + +### Удаление элементов управления {#deleting-controls-1} + +В примере ниже кнопка Undo удаляется из панели инструментов: + +~~~jsx +spreadsheet.toolbar.data.remove("undo"); +~~~ + +### Пользовательский размер шрифта {#custom-font-size} + +Вы можете переопределить список доступных размеров шрифта в блоке **Font** панели инструментов, удалив существующие элементы из комбобокса `"font-size"` и добавив свои: + +~~~jsx +const FONT_SIZES = [8, 10, 12, 14, 16, 20]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // параметры конфигурации +}); + +spreadsheet.toolbar.data.removeAll("font-size"); +spreadsheet.toolbar.data.add( + FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })), + -1, + "font-size" +); + +spreadsheet.parse(dataset); +~~~ + +**Связанный пример:** [Spreadsheet. Задать пользовательский размер шрифта](https://snippet.dhtmlx.com/tffbf11g) + +## Меню {#menu} + +### Элементы управления по умолчанию {#default-controls-1} + +[Меню по умолчанию](/#menu) имеет следующую структуру: + +- пункт меню **File** (id: "edit") + - пункт меню *Import as...* (id: "import") + - пункт меню *"Microsoft Excel(.xlsx)"* (id: "import-xlsx") + - пункт меню *Download as...* (id: "download") + - пункт меню *"Microsoft Excel(.xlsx)"* (id: "export-xlsx") +- пункт меню **Edit** (id: "edit") + - пункт меню *Undo* (id: "undo") + - пункт меню *Redo* (id: "redo") + - разделитель + - пункт меню *Freeze* (id: "freeze") + - пункт меню *Unfreeze columns* (id: "unfreeze-cols") + - пункт меню *Freeze up to column [id]* (id: "freeze-cols") + - разделитель (id: "freeze-sep") + - пункт меню *Unfreeze rows* (id: "unfreeze-rows") + - пункт меню *Freeze up to row [id]* (id: "freeze-rows") + - пункт меню *Lock* (id: "lock") + - разделитель + - пункт меню *Clear* (id: "clear") + - пункт меню *Clear value* (id: "clear-value") + - пункт меню *Clear styles* (id: "clear-styles") + - пункт меню *Clear all* (id: "clear-all") +- пункт меню **Insert** (id: "insert") + - пункт меню *Columns* (id: "columns") + - пункт меню *Add column* (id: "add-col") + - пункт меню *Remove column* (id: "remove-col") + - пункт меню *Rows* (id: "rows") + - пункт меню *Add row* (id: "add-row") + - пункт меню *Remove row* (id: "remove-row") + - пункт меню *Insert link* (id: "link") +- пункт меню **Format** (id: "configuration") + - пункт меню *Bold* (id: "font-weight-bold") + - пункт меню *Italic* (id: "font-style-italic") + - пункт меню *Underline* (id: "text-decoration-underline") + - пункт меню *Strikethrough* (id: "text-decoration-line-through") + - разделитель + - пункт меню *Horizontal align* (id: "halign") + - пункт меню *Left* (id: "halign-left") + - пункт меню *Center* (id: "halign-center") + - пункт меню *Right* (id: "halign-right") + - пункт меню *Vertical align* (id: "valign") + - пункт меню *Top* (id: "valign-top") + - пункт меню *Center* (id: "valign-center") + - пункт меню *Bottom* (id: "valign-bottom") + - пункт меню *Text wrapping* (id: "multiline") + - пункт меню *Clip* (id: "multiline-clip") + - пункт меню *Wrap* (id: "multiline-wrap") + - пункт меню *Format* (id: "format") + - пункт меню *Merge/Unmerge* (id: "merge") +- пункт меню **Data** (id: "data") + - пункт меню *Data validation* (id: "validation") + - пункт меню *Search* (id: "search") + - пункт меню *Filter* (id: "filter") + - пункт меню *Sort* (id: "sort") + - пункт меню *Sort A to Z* (id: "asc-sort") + - пункт меню *Sort Z to A* (id: "desc-sort") +- пункт меню **Help** (id: "help") + +### Добавление элементов управления {#adding-controls-2} + +В примере ниже в меню добавляется новый пункт меню: + +~~~jsx +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + childs: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); +~~~ + +![DHTMLX Spreadsheet menu with a custom Validate option for checking numbers](/img/custom_menuitem.png) + +**Связанный пример**: [Spreadsheet. Данные меню](https://snippet.dhtmlx.com/2mlv2qaz) + +### Обновление элементов управления {#updating-controls-2} + +В примере ниже стандартные иконки пунктов меню Undo/Redo заменяются на иконки Font Awesome: + +~~~jsx +spreadsheet.menu.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.menu.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![DHTMLX Spreadsheet menu with custom Undo and Redo icons from Font Awesome](/img/custom_menu_icons.png) + +### Удаление элементов управления {#deleting-controls-2} + +В примере ниже пункт меню Undo удаляется из меню: + +~~~jsx +spreadsheet.menu.data.remove("undo"); +~~~ + +## Контекстное меню {#context-menu} + +### Элементы управления по умолчанию {#default-controls-2} + +[Контекстное меню по умолчанию](/#context-menu) имеет следующую структуру: + +- пункт меню **Lock** (id: "lock") +- пункт меню **Clear** (id: "clear") + - пункт меню *Clear value* (id: "clear-value") + - пункт меню *Clear styles* (id: "clear-styles") + - пункт меню *Clear all* (id: "clear-all") +- пункт меню **Columns** (id: "columns") + - пункт меню *Add column* (id: "add-col") + - пункт меню *Remove column* (id: "remove-col") + - пункт меню *Fit to data* (id: "fit-col") + - разделитель + - пункт меню *Unfreeze columns* (id: "unfreeze-cols") + - пункт меню *Freeze up to column [id]* (id: "freeze-cols") + - пункт меню *Show columns* (id: "show-cols") + - пункт меню *Hide column(s) [id]* (id: "hide-cols") +- пункт меню **Rows** (id: "rows") + - пункт меню *Add row* (id: "add-row") + - пункт меню *Remove row* (id: "remove-row") + - разделитель + - пункт меню *Unfreeze rows* (id: "unfreeze-rows") + - пункт меню *Freeze up to row [id]* (id: "freeze-rows") + - пункт меню *Show rows* (id: "show-rows") + - пункт меню *Hide row(s) [id]* (id: "hide-rows") +- пункт меню **Sort** (id: "sort") + - пункт меню *Sort A to Z* (id: "asc-sort") + - пункт меню *Sort Z to A* (id: "desc-sort") +- пункт меню **Insert link** (id: "link") + +### Добавление элементов управления {#adding-controls-3} + +В примере ниже в контекстное меню добавляется новый пункт меню: + +~~~jsx +spreadsheet.contextMenu.data.add({ + icon: "mdi mdi-eyedropper-variant", + value: "Paint format", + id: "paint-format" +}); +~~~ + +![DHTMLX Spreadsheet context menu with a custom Paint format option](/img/custom_context_menuitem.png) + +**Связанный пример**: [Spreadsheet. Контекстное меню](https://snippet.dhtmlx.com/atl9gd4h) + +### Обновление элементов управления {#updating-controls-3} + +В примере ниже стандартная иконка пункта меню Lock заменяется на иконку Font Awesome: + +~~~jsx +spreadsheet.contextMenu.data.update("lock", { icon: "fa fa-key" }); +~~~ + +![DHTMLX Spreadsheet context menu with a custom Lock icon from Font Awesome](/img/custom_context_icon.png) + +### Удаление элементов управления {#deleting-controls-3} + +В примере ниже пункт меню Undo удаляется из контекстного меню: + +~~~jsx +spreadsheet.contextMenu.data.remove("lock"); +~~~ + +## Пользовательский режим только для чтения {#custom-read-only-mode} + +Помимо применения [режима только для чтения](configuration.md#read-only-mode) ко всему Spreadsheet, вы можете заблокировать отдельные операции с помощью событий, названия которых начинаются с `before`, например: + +- [](api/spreadsheet_beforeeditstart_event.md) +- [](api/spreadsheet_beforeaction_event.md) + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +spreadsheet.events.on("beforeEditStart", function(){ + return false; +}); + +spreadsheet.events.on("beforeAction", function(actionName){ + if (actionName === "setCellValue" || actionName === "setCellStyle") { + return false; + } +}); + +spreadsheet.parse(data); +~~~ + +**Связанный пример**: [Spreadsheet. Пользовательский режим только для чтения](https://snippet.dhtmlx.com/8xcursbe) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/data_formatting.md b/i18n/ru/docusaurus-plugin-content-docs/current/data_formatting.md new file mode 100644 index 00000000..a4327475 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/data_formatting.md @@ -0,0 +1,112 @@ +--- +sidebar_label: Форматирование данных +title: Форматирование данных +description: Вы можете узнать о форматировании данных в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Форматирование данных {#data-formatting} + +## Цвет и стиль {#color-and-style} + +Панель инструментов DHTMLX Spreadsheet содержит несколько секций с кнопками для изменения стиля данных в ячейке. + +![DHTMLX Spreadsheet toolbar color and text style buttons for text color, background, bold, and italic](/img/color.png) + +Доступные действия: + +- изменить **цвет текста** с помощью палитры кнопки **Text color** +- изменить **цвет фона** с помощью палитры кнопки **Background color** +- применить к тексту стили *Bold*, *Italic* и *Underline* +- применить к тексту форматирование *Strikethrough* + +## Выравнивание {#alignment} + +### Горизонтальное выравнивание {#horizontal-alignment} + +Чтобы выровнять данные в ячейке по горизонтали, выполните следующие шаги: + +1\. Выберите ячейку или ячейки для выравнивания + +2\. Выберите одно из действий: + +- Нажмите кнопку "Horizontal align" в панели инструментов и выберите *Left*, *Center* или *Right* + +![DHTMLX Spreadsheet toolbar with the Horizontal align dropdown showing Left, Center, and Right](/img/align.png) + +- Или перейдите в меню: *Format* -> *Horizontal align* -> Выберите *Left*, *Center* или *Right* + +![DHTMLX Spreadsheet Format menu with the Horizontal align submenu options](/img/horizontal_alignment.png) + +### Вертикальное выравнивание {#vertical-alignment} + +Чтобы выровнять данные в ячейке по вертикали, выполните следующие шаги: + +1\. Выберите ячейку или ячейки для выравнивания + +2\. Выберите одно из действий: + +- Нажмите кнопку "Vertical align" в панели инструментов и выберите *Top*, *Center* или *Bottom* + +![DHTMLX Spreadsheet toolbar with the Vertical align dropdown showing Top, Center, and Bottom](/img/vertical_align.png) + +- Или перейдите в меню: *Format* -> *Vertical align* -> Выберите *Top*, *Center* или *Bottom* + +![DHTMLX Spreadsheet Format menu with the Vertical align submenu options](/img/vertical_alignment.png) + +### Перенос текста в ячейке {#wrap-text-in-a-cell} + +Перенос текста в ячейках выполняется следующим образом: + +1\. Выберите ячейку или ячейки, которые необходимо отформатировать + +2\. Выберите одно из действий: + +- Нажмите кнопку "Text wrapping" в панели инструментов и выберите *Clip* или *Wrap* + +![DHTMLX Spreadsheet toolbar with the Text wrapping dropdown showing Clip and Wrap](/img/wrap.png) + +- Или перейдите в меню: *Format* -> *Text wrapping* -> Выберите *Clip* или *Wrap* + +![DHTMLX Spreadsheet Format menu with the Text wrapping submenu showing Clip and Wrap](/img/text_wrapping.png) + +:::tip +При изменении ширины столбца перенос текста настраивается автоматически. +::: + +## Удаление стилей и значений {#removing-styles-and-values} + +Вы можете очистить значения ячеек, стили ячеек или всё вместе. Выберите один из двух способов: + +1\. Через кнопку панели инструментов: + +- Выберите нужную ячейку или ячейки. +- Используйте кнопку **Clear** в панели инструментов. +- Выберите нужный вариант в выпадающем списке: + +![DHTMLX Spreadsheet toolbar with the Clear button dropdown for clearing values or styles](/img/clear_button.png) + +2\. Через контекстное меню ячейки: + +- Выберите нужную ячейку или ячейки. +- Щёлкните правой кнопкой мыши по выделению, чтобы открыть контекстное меню. +- Выберите пункт **Clear** и затем один из вариантов в выпадающем списке: + +![DHTMLX Spreadsheet context menu with the Clear option for clearing value, styles, or all](/img/clear_option.png) + +## Стилизованные границы ячеек {#styled-borders-for-cells} + +Вы можете добавить стилизованные границы для ячейки или группы ячеек. + +### Установка стилизованных границ {#setting-styled-borders} + +- Выберите нужную ячейку или группу ячеек для установки стилизованных границ +- Нажмите кнопку **Border** в панели инструментов и выберите нужный тип границы, её цвет и стиль + +![DHTMLX Spreadsheet Border toolbar button with border type, color, and style options](/img/styled_cell_border.png) + +### Удаление стилизованных границ {#removing-styled-borders} + +- Выберите нужную ячейку или группу ячеек, с которых нужно удалить стилизованные границы +- Нажмите кнопку **Border** в панели инструментов и выберите вариант *Clear borders* + +![DHTMLX Spreadsheet Border toolbar button with the Clear borders option highlighted](/img/clear_cells_border.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/data_search.md b/i18n/ru/docusaurus-plugin-content-docs/current/data_search.md new file mode 100644 index 00000000..7de9fced --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/data_search.md @@ -0,0 +1,14 @@ +--- +sidebar_label: Поиск данных +title: Поиск данных +description: Вы можете узнать о поиске данных в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Поиск данных {#searching-for-data} + +Чтобы открыть панель поиска, воспользуйтесь одним из двух способов: + +- Установите фокус на любую ячейку и нажмите **Ctrl (Cmd) + F** +- Или перейдите в меню: *Data* -> *Search* + +![DHTMLX Spreadsheet search bar with a text input for finding data](/img/search_data.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/excel_import_export.md b/i18n/ru/docusaurus-plugin-content-docs/current/excel_import_export.md new file mode 100644 index 00000000..15ef10dc --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/excel_import_export.md @@ -0,0 +1,39 @@ +--- +sidebar_label: Импорт/экспорт Excel +title: Импорт и экспорт Excel +description: Вы можете узнать об импорте и экспорте Excel в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Импорт/экспорт Excel {#excel-importexport} + +## Импорт из Excel {#import-from-excel} + +Вы можете загрузить данные из файла Excel в Spreadsheet. Для этого: + +1\. Нажмите кнопку **Import** в панели инструментов и выберите *Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet toolbar with the Import button for Microsoft Excel XLSX files](/img/import_xlsx.png) + +или: + +Перейдите в меню: *File -> Import As... -> Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet File menu with the Import As option for Microsoft Excel XLSX files](/img/file_import.png) + +2\. Выберите файл Excel на вашем компьютере — его содержимое будет импортировано в открытый лист. + +## Экспорт в Excel {#export-to-excel} + +Вы можете экспортировать данные, введённые в Spreadsheet, в файл Excel. Выполните следующие шаги: + +1\. Нажмите кнопку **Export** в панели инструментов: + +![DHTMLX Spreadsheet toolbar with the Export button for saving to Microsoft Excel XLSX](/img/export_xlsx.png) + +или: + +Перейдите в меню: *File -> Download As... -> Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet File menu with the Download As option for Microsoft Excel XLSX export](/img/file_export.png) + +2\. Проверьте папку загрузок — там будет находиться файл Excel с данными из Spreadsheet. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/filtering_data.md b/i18n/ru/docusaurus-plugin-content-docs/current/filtering_data.md new file mode 100644 index 00000000..0d0e99e6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/filtering_data.md @@ -0,0 +1,62 @@ +--- +sidebar_label: Фильтрация данных +title: Фильтрация данных +description: Вы можете узнать о фильтрации данных в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Фильтрация данных {#filtering-data} + +Вы можете фильтровать данные в таблице, чтобы отображать только записи, соответствующие заданным критериям. + +Чтобы активировать фильтрацию, воспользуйтесь одним из двух способов: + +- Установите фокус на ячейку или выберите диапазон ячеек и нажмите кнопку **Filter** в панели инструментов + +![DHTMLX Spreadsheet toolbar with the Filter button to enable data filtering](/img/filter_button.png) + +- Установите фокус на ячейку или выберите диапазон ячеек и перейдите в меню: *Data -> Filter* + +![DHTMLX Spreadsheet Data menu with the Filter option for activating column filters](/img/filter_menu.png) + +После этого справа от каждого заголовка столбца в диапазоне появится значок **фильтра**. + +## Фильтрация по условию {#filtering-by-condition} + +- Нажмите значок **фильтра** нужного столбца + +- Выберите один из встроенных операторов сравнения, например **Greater than** + +- Укажите критерий фильтрации и нажмите **Apply** + +![DHTMLX Spreadsheet column filter dropdown with comparison operators such as Greater than](/img/filter_by_condition.png) + +### Сброс фильтра {#clearing-a-filter} + +Чтобы сбросить фильтр, нажмите значок **фильтра** в заголовке столбца, выберите _By condition: **None**_ и нажмите **Apply**. + +![DHTMLX Spreadsheet filter dialog with the By condition None option for clearing filters](/img/clear_filter_bycondition.png) + +## Фильтрация по значениям {#filtering-by-values} + +- Нажмите значок **фильтра** нужного столбца + +- Нажмите кнопку **Unselect all** + +![DHTMLX Spreadsheet column filter with the Unselect all button and value checkboxes](/img/unselect_all_button.png) + +- Отметьте флажками значения, которые нужно отобразить, и нажмите **Apply** + +### Сброс фильтра {#clearing-a-filter-1} + +Чтобы сбросить фильтр, нажмите значок **фильтра** в заголовке столбца, нажмите кнопку **Select all** и затем **Apply**. + +![DHTMLX Spreadsheet column filter dialog with the Select all button for clearing value filters](/img/clear_filter_by_values.png) + +## Отключение фильтрации {#removing-filters} + +Чтобы отключить фильтрацию, выполните одно из следующих действий: + +- нажмите кнопку **Filter** в панели инструментов +- или перейдите в меню: *Data -> Filter* + +Значки **фильтра** исчезнут из заголовков столбцов, а все скрытые записи снова появятся. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/formulas_locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/formulas_locale.md new file mode 100644 index 00000000..8027bb2f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/formulas_locale.md @@ -0,0 +1,1168 @@ +--- +sidebar_label: Локаль по умолчанию для формул +title: Локаль по умолчанию для формул +description: Полная английская локаль по умолчанию для всплывающего окна формул DHTMLX Spreadsheet, содержащая имена параметров и описания для всех встроенных формул. +--- + +# Локаль по умолчанию для формул {#default-locale-for-formulas} + +Локаль i18n для всплывающего окна Spreadsheet с описаниями формул находится в объекте `dhx.i18n.formulas`. Полная английская локаль по умолчанию приведена ниже. + +Инструкции по применению пользовательской локали для формул см. в руководстве [Локализация](localization.md#custom-locale-for-formulas). + +~~~jsx +const en = { + "SUM": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + "SUMIF": [ + ["Range", "Required. Range to apply criteria to."], + ["Criteria", "Required. Criteria to apply."], + ["Sum_range", "Optional. Range to sum. If omitted, cells in range are summed."] + ], + "SUMIFS": [ + ["Sum_range", "Required. The range to be summed."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "AVERAGE": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "AVERAGEA": [ + ["Value1", "Required. A value or reference to a value that can be evaluated as a number."], + ["Value2", "Optional. A value or reference to a value that can be evaluated as a number."] + ], + "AVERAGEIF": [ + ["Range", "Required. One or more cells, including numbers or names, arrays, or references."], + ["Criteria", "Required. A number, expression, cell reference, or text."], + ["Average_range", "Optional. The cells to average. When omitted, range is used."] + ], + "AVERAGEIFS": [ + ["Avg_rng", "Required. The range to average."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "COUNT": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTA": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTIF": [ + ["Range", "Required. The range of cells to count."], + ["Criteria", "Required. The criteria that controls which cells should be counted."] + ], + "COUNTIFS": [ + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MIN": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MINIFS": [ + ["Min_range", "Required. Range of values used to determine minimum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MAX": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MAXIFS": [ + ["Max_range", "Required. Range of values used to determine maximum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "SQRT": [ + ["Number", "Required. The number to get the square root of."] + ], + "POWER": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "LOG": [ + ["Number", "Required. Number for which you want the logarithm."], + ["Base", "Optional. Base of the logarithm. Defaults to 10."] + ], + "EXP": [ + ["Number", "Required. The power that e is raised to."] + ], + "PRODUCT": [ + ["Number1", "Required. The first number or range to multiply."], + ["Number2", "Optional. The second number or range to multiply."] + ], + "SUMPRODUCT": [ + ["Array1", "Required. The first array or range to multiply, then add."], + ["Array2", "Optional. The second array or range to multiply, then add."] + ], + "ABS": [ + ["Number", "Required. The number to get the absolute value of."] + ], + "RAND": [], + "RANDBETWEEN": [ + ["Bottom", "Required. An integer representing the lower value of the range."], + ["Top", "Required. An integer representing the upper value of the range."] + ], + "ROUND": [ + ["Number", "Required. The number to round."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDUP": [ + ["Number", "Required. The number to round up."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDDOWN": [ + ["Number", "Required. The number to round down."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "INT": [ + ["Number", "Required. The number from which you want an integer."] + ], + "CEILING": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "FLOOR": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "CONCATENATE": [ + ["Text1", "Required. The first text value to join together."], + ["Text2", "Required. The second text value to join together."], + ["Text3", "Optional. The third text value to join together."] + ], + "MID": [ + ["Text", "Required. The text to extract from."], + ["Start_num", "Required. The location of the first character to extract."], + ["Num_chars", "Required. The number of characters to extract."] + ], + "LEFT": [ + ["Text", "Required. The text from which to extract characters."], + ["Num_chars", "Optional. The number of characters to extract, starting on the left side of text. Default = 1."] + ], + "RIGHT": [ + ["Text", "Required. The text from which to extract characters on the right."], + ["Num_chars", "Optional. The number of characters to extract, starting on the right. Optional, default = 1."] + ], + "LOWER": [ + ["Text", "Required. The text that should be converted to lower case."] + ], + "UPPER": [ + ["Text", "Required. The text that should be converted to upper case."] + ], + "PROPER": [ + ["Text", "Required. The text that should be converted to proper case."] + ], + "TRIM": [ + ["Text", "Required. The text from which to remove extra space."] + ], + "LEN": [ + ["Text", "Required. The text for which to calculate length."] + ], + "SEARCH": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. Starting position. Optional, defaults to 1."] + ], + "FIND": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. The starting position in the text to search. Optional, defaults to 1."] + ], + "REPLACE": [ + ["Old_text", "Required. The text to replace."], + ["Start_num", "Required. The starting location in the text to search."], + ["Num_chars", "Required. The number of characters to replace."], + ["New_text", "Required. The text to replace old_text with."] + ], + "SUBSTITUTE": [ + ["Text", "Required. The text to change."], + ["Old_text", "Required. The text to replace."], + ["New_text", "Required. The text to replace with."], + ["Instance", "Optional. The instance to replace. If not supplied, all instances are replaced."] + ], + "NOW": [], + "DATE": [ + ["Year", "Required. Number for year."], + ["Month", "Required. Number for month."], + ["Day", "Required. Number for day."] + ], + "TIME": [ + ["Hour", "Required. The hour for the time you wish to create."], + ["Minute", "Required. The minute for the time you wish to create."], + ["Second", "Required. The second for the time you wish to create."] + ], + "YEAR": [ + ["Date", "Required. A valid Excel date."] + ], + "MONTH": [ + ["Serial_number", "Required. A valid Excel date."] + ], + "DAY": [ + ["Date", "Required. A valid Excel date."] + ], + "HOUR": [ + ["Serial_number", "Required. A valid Excel time."] + ], + "MINUTE": [ + ["Serial_number", "Required. A valid date or time."] + ], + "SECOND": [ + ["Serial_number", "Required. A valid time in a format Excel recognizes."] + ], + "DATEDIF": [ + ["Start_date", "Required. Start date in Excel date serial number format."], + ["End_date", "Required. End date in Excel date serial number format."], + ["Unit", "Required. The time unit to use (years, months, or days)."] + ], + "INDEX": [ + ["Array", "Required. A range of cells, or an array constant."], + ["Row_num", "Required. The row position in the reference or array."], + ["Col_num", "Optional. The column position in the reference or array."], + ["Area_num", "Optional. The range in reference that should be used."] + ], + "XMATCH": [ + ["Lookup_value", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "XLOOKUP": [ + ["Lookup", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Return_array", "Required. The array or range to return."], + ["Not_found", "Optional. Value to return if no match found."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "LOOKUP": [ + ["Lookup_value", "Required. The value to search for."], + ["Lookup_vector", "Required. The one-row, or one-column range to search."], + ["Result_vector", "Optional. The one-row, or one-column range of results."] + ], + "HLOOKUP": [ + ["Lookup_value", "Required. The value to look up."], + ["Table_array", "Required. The table from which to retrieve data."], + ["Row_index", "Required. The row number from which to retrieve data."], + ["Range_lookup", "Optional. A Boolean to indicate exact match or approximate match. Default = TRUE = approximate match."] + ], + "VLOOKUP": [ + ["Lookup_value", "Required. The value to look for in the first column of a table."], + ["Table_array", "Required. The table from which to retrieve a value."], + ["Column_index_num", "Required. The column in the table from which to retrieve a value."], + ["Range_lookup", "Optional. TRUE = approximate match (default). FALSE = exact match."] + ], + "MATCH": [ + ["Lookup_value", "Required. The value to match in lookup_array."], + ["Lookup_array", "Required. A range of cells or an array reference."], + ["Match_type", "Optional. 1 = exact or next smallest (default), 0 = exact match, -1 = exact or next largest."] + ], + "CHOOSE": [ + ["Index_num", "Required. The value to choose. A number between 1 and 254."], + ["Value1", "Required. The first value from which to choose."], + ["Value2", "Optional. The second value from which to choose."] + ], + "ISBLANK": [ + ["Value", "Required. The value to check."] + ], + "ISBINARY": [ + ["Value", "Required. The value to check."] + ], + "ISEVEN": [ + ["Value", "Required. The numeric value to check."] + ], + "ISODD": [ + ["Value", "Required. The numeric value to check."] + ], + "ISNONTEXT": [ + ["Value", "Required. The value to check."] + ], + "ISNUMBER": [ + ["Value", "Required. The value to check."] + ], + "ISTEXT": [ + ["Value", "Required. The value to check."] + ], + "N": [ + ["Value", "Required. The value to convert to a number."] + ], + "IF": [ + ["Logical_test", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."], + ["Value_if_true", "Optional. The value to return when logical_test evaluates to TRUE."], + ["Value_if_false", "Optional. The value to return when logical_test evaluates to FALSE."] + ], + "AND": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "NOT": [ + ["Logical", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."] + ], + "OR": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "FALSE": [], + "TRUE": [], + "ACOS": [ + ["Number", "Required. The value to get the inverse cosine of. The number must be between -1 and 1 inclusive."] + ], + "ACOSH": [ + ["Number", "Required. Any real number equal to or greater than 1."] + ], + "ACOT": [ + ["Number", "Required. Number is the cotangent of the angle you want. This must be a real number."] + ], + "ACOTH": [ + ["Number", "Required. The absolute value of Number must be greater than 1."] + ], + "ADD": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Required. The second value to sum."] + ], + "ARABIC": [ + ["Roman_text", "Required. The Roman numeral in text that you want to convert."] + ], + "ASIN": [ + ["Number", "Required. The value to get the inverse sine of. The number must be between -1 and 1 inclusive."] + ], + "ASINH": [ + ["Number", "Required. Any real number."] + ], + "ATAN": [ + ["Number", "Required. The value to get the inverse tangent of."] + ], + "ATAN2": [ + ["X_num", "Required. The x coordinate of the input point."], + ["Y_num", "Required. The y coordinate of the input point."] + ], + "ATANH": [ + ["Number", "Required. Any real number between 1 and -1."] + ], + "AVEDEV": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "BASE": [ + ["Number", "Required. The number to convert to a given base."], + ["Radix", "Required. The base to convert to."], + ["Min_length", "Optional. The minimum string length to return, achieved by padding with zeros."] + ], + "BINOMDIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BINOM.INV": [ + ["Trials", "Required. The number of Bernoulli trials."], + ["Probability_s", "Required. The probability of a success on each trial."], + ["Alpha", "Required. The criterion value."] + ], + "BINOM.DIST.RANGE": [ + ["Trials", "Required. The number of independent trials. Must be greater than or equal to 0."], + ["Probability_s", "Required. The probability of success in each trial. Must be greater than or equal to 0 and less than or equal to 1."], + ["Number_s", "Required. The number of successes in trials. Must be greater than or equal to 0 and less than or equal to Trials."], + ["Number_s2", "Optional. If provided, returns the probability that the number of successful trials will fall between Number_s and number_s2. Must be greater than or equal to Number_s and less than or equal to Trials."] + ], + "BINOM.DIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BITAND": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITLSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift, if negative shifts bits to the right instead."] + ], + "BITOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITRSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift to the right, if negative shifts bits to the left instead."] + ], + "BITXOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "COMBIN": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMBINA": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMPLEX": [ + ["Real_num", "Required. The real number."], + ["I_num", "Required. The imaginary number."], + ["Suffix", "Optional. The suffix, either \"i\" or \"j\"."] + ], + "CORREL": [ + ["Array1", "Required. A range of cell values."], + ["Array2", "Required. A second range of cell values."] + ], + "COS": [ + ["Number", "Required. The angle in radians for which you want the cosine."] + ], + "COSH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "COT": [ + ["Number", "Required. The angle provided in radians."] + ], + "COTH": [ + ["Number", "Required."] + ], + "COUNTBLANK": [ + ["Range", "Required. The range in which to count blank cells."] + ], + "COVAR": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.P": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.S": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "CSC": [ + ["Number", "Required. The angle provided in radians."] + ], + "CSCH": [ + ["Number", "Required."] + ], + "DEC2BIN": [ + ["Number", "Required. The decimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2HEX": [ + ["Number", "Required. The decimal number you want to convert to hexadecimal."], + ["Places", "Optional. Pads the resulting number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2OCT": [ + ["Number", "Required. The decimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting octal number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DECIMAL": [ + ["Number", "Required. A text string representing a number."], + ["Radix", "Required. The base of the number to be converted, an integer between 2-36."] + ], + "DEGREES": [ + ["Angle", "Required. Angle in radians that you want to convert to degrees."] + ], + "DELTA": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "DEVSQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "DIVIDE": [ + ["Number1", "Required. The number we are dividing."], + ["Number2", "Required. The number by which we divide."] + ], + "EQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "ERF": [ + ["Lower_limit", "Required. The lower bound for integrating ERF."], + ["Upper_limit", "Optional. The upper bound for integrating ERF. If omitted, ERF integrates between zero and lower_limit."] + ], + "ERFC": [ + ["X", "Required. The lower bound for integrating ERFC."] + ], + "EVEN": [ + ["Number", "Required. The number to round up to an even integer."] + ], + "FACT": [ + ["Number", "Required. The number to get the factorial of."] + ], + "FACTDOUBLE": [ + ["Number", "Required. A number greater than or equal to -1."] + ], + "FISHER": [ + ["X", "Required. A numeric value for which you want the transformation."] + ], + "FISHERINV": [ + ["Y", "Required. The value for which you want to perform the inverse of the transformation."] + ], + "GAMMA": [ + ["Number", "Required. Returns a number."] + ], + "GCD": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "GEOMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "GESTEP": [ + ["Number", "Required. The value to test against step."], + ["Step", "Optional. The threshold value. If you omit a value for step, GESTEP uses zero."] + ], + "GT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "GTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "HARMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "HEX2BIN": [ + ["Number", "Required. The hexadecimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "HEX2DEC": [ + ["Number", "Required. The hexadecimal number you want to convert to decimal."] + ], + "HEX2OCT": [ + ["Number", "Required. The hexadecimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "IMABS": [ + ["Inumber", "Required. A complex number."] + ], + "IMAGINARY": [ + ["Inumber", "Required. A complex number."] + ], + "IMCONJUGATE": [ + ["Inumber", "Required. A complex number for which you want the conjugate."] + ], + "IMCOS": [ + ["Inumber", "Required. A complex number for which you want the cosine."] + ], + "IMCOSH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosine."] + ], + "IMCOT": [], + "IMCSC": [ + ["Inumber", "Required. A complex number for which you want the cosecant."] + ], + "IMCSCH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosecant."] + ], + "IMDIV": [ + ["Inumber1", "Required. The complex numerator or dividend."], + ["Inumber2", "Required. The complex denominator or divisor."] + ], + "IMEXP": [ + ["Inumber", "Required. A complex number for which you want the exponential."] + ], + "IMLN": [ + ["Inumber", "Required. A complex number for which you want the natural logarithm."] + ], + "IMPOWER": [ + ["Inumber", "Required. A complex number."], + ["Number", "Required. Power to raise number."] + ], + "IMPRODUCT": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMREAL": [ + ["Inumber", "Required. A complex number."] + ], + "IMSEC": [ + ["Inumber", "Required. A complex number for which you want the secant."] + ], + "IMSECH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic secant."] + ], + "IMSIN": [ + ["Inumber", "Required. A complex number for which you want the sine."] + ], + "IMSINH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic sine."] + ], + "IMSQRT": [ + ["Inumber", "Required. A complex number for which you want the square root."] + ], + "IMSUB": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Required. Complex number 2."] + ], + "IMSUM": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMTAN": [ + ["Inumber", "Required. A complex number for which you want the tangent."] + ], + "LARGE": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the largest value."] + ], + "LN": [ + ["Number", "Required. A number to take the natural logarithm of."] + ], + "LOG10": [ + ["Number", "Required. Number for which you want the logarithm."] + ], + "LT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "LTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "MEDIAN": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "MINUS": [ + ["Number1", "Required. The number from which we subtract."], + ["Number2", "Required. The number by which we subtract."] + ], + "MOD": [ + ["Number", "Required. The number to be divided."], + ["Divisor", "Required. The number to divide with."] + ], + "MROUND": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "MULTINOMIAL": [ + ["Number1, number2, ...", "Required. Number1 is required, subsequent numbers are optional. 1 to 255 values for which you want the multinomial."] + ], + "MULTIPLY": [ + ["Number1", "Required. The number to multiply."], + ["Number2", "Required. The number to multiply by."] + ], + "NE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "OCT2BIN": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 characters. The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2BIN uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "OCT2DEC": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."] + ], + "OCT2HEX": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2HEX uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "ODD": [ + ["Number", "Required. The number to round up to an odd integer."] + ], + "PERCENTILE": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.INC": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.EXC": [ + ["Array", "Required. Data values."], + ["K", "Required. A value between 0 and 1 that represents the k:th percentile."] + ], + "PERMUT": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "PI": [], + "POW": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "QUARTILE": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.INC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.EXC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return, 1-3."] + ], + "QUOTIENT": [ + ["Numerator", "Required. The number to be divided."], + ["Denominator", "Required. The number to divide by."] + ], + "RADIANS": [ + ["Angle", "Required. Angle in degrees to convert to radians."] + ], + "ROMAN": [ + ["Number", "Required. Number (in Arabic numeral) you want to convert to Roman numeral."], + ["Form", "Optional. The type of Roman numeral you want."] + ], + "SEC": [ + ["Number", "Required. The angle in radians for which you want the secant."] + ], + "SECH": [], + "SIGN": [ + ["Number", "Required. The number to get the sign of."] + ], + "SIN": [ + ["Number", "Required. The angle in radians for which you want the sine."] + ], + "SINH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "SMALL": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the smallest value."] + ], + "SQRTPI": [ + ["Number", "Required. The number by which pi is multiplied."] + ], + "STDEV": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.S": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.P": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVP": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVPA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STEYX": [ + ["Known_y's", "Required. An array or range of dependent data points."], + ["Known_x's", "Required. An array or range of independent data points."] + ], + "SUBTOTAL": [ + ["Function_num", "Required. A number that specifies which function to use in calculating subtotals within a list. See table below for full list."], + ["Ref1", "Required. A named range or reference to subtotal."], + ["Ref2", "Optional. A named range or reference to subtotal."] + ], + "SUMSQ": [ + ["Number1", "Required. The first argument containing numeric values."], + ["Number2", "Optional. The second argument containing numeric values."] + ], + "SUMX2MY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMX2PY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMXMY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "TAN": [ + ["Number", "Required. The angle in radians for which you want the tangent."] + ], + "TANH": [ + ["Number", "Required. Any real number."] + ], + "TRUNC": [ + ["Number", "Required. The number to truncate."], + ["Num_digits", "Optional. The precision of the truncation (default is 0)."] + ], + "VAR": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.S": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.P": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARP": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARPA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "WEIBULL": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "WEIBULL.DIST": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "CHAR": [ + ["Number", "Required. A number between 1 and 255."] + ], + "CLEAN": [ + ["Text", "Required. The text to clean."] + ], + "CODE": [ + ["Text", "Required. The text for which you want a numeric code."] + ], + "EXACT": [ + ["Text1", "Required. The first text string to compare."], + ["Text2", "Required. The second text string to compare."] + ], + "FIXED": [ + ["Number", "Required. The number to round and format."], + ["Decimals", "Optional. Number of decimals to use. Default is 2."], + ["No_commas", "Optional. Suppress commas. TRUE = no commas, FALSE = commas. Default is FALSE."] + ], + "NUMBERVALUE": [ + ["Text", "Required. The text to convert to a number."], + ["Decimal_separator", "Optional. The character for decimal values."], + ["Group_separator", "Optional. The character for grouping by thousands."] + ], + "REGEXEXTRACT": [ + ["Text", "Required. The input text."], + ["Regular_expression", "Required. The first part of text that matches this expression will be returned."] + ], + "REGEXMATCH": [ + ["Text", "Required. The text to be tested against the regular expression."], + ["Regular_expression", "Required. The regular expression to test the text against."] + ], + "REGEXREPLACE": [ + ["Text", "Required. The text, a part of which will be replaced."], + ["Regular_expression", "Required. The regular expression. All matching instances in text will be replaced."], + ["Replacement", "Required. The text which will be inserted into the original text."] + ], + "REPT": [ + ["Text", "Required. The text to repeat."], + ["Number_times", "Required. The number of times to repeat text."] + ], + "T": [ + ["Value", "Required. The value to return as text."] + ], + "JOIN": [ + ["Text1, text2, ...", "Text values you want to combine."] + ], + "ARRAYTOTEXT": [ + ["Array", "Required. The array or range to convert to text."], + ["Format", "Optional. Output format. 0 = concise (default), and 1 = strict."] + ], + "DATEVALUE": [ + ["Date_text", "Required. A valid date in text format."] + ], + "DAYS": [ + ["End_date", "Required. The end date."], + ["Start_date", "Required. The start date."] + ], + "DAYS360": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Method", "Optional. Day count method. FALSE (default) = US method, TRUE = European method."] + ], + "EDATE": [ + ["Start_date", "Required. Start date as a valid Excel date."], + ["Months", "Required. Number of months before or after start_date."] + ], + "EOMONTH": [ + ["Start_date", "Required. A date that represents the start date in a valid Excel serial number format."], + ["Months", "Required. The number of months before or after start_date."] + ], + "ISOWEEKNUM": [ + ["Date", "Required. A valid Excel date in serial number format."] + ], + "NETWORKDAYS": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Holidays", "Optional. A list of non-work days as dates."] + ], + "NETWORKDAYS.INTL": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A reference to dates that should be considered non-work days."] + ], + "TIMEVALUE": [ + ["Time_text", "Required. A date and/or time in a text format recognized by Excel."] + ], + "WEEKNUM": [ + ["Serial_num", "Required. A valid Excel date in serial number format."], + ["Return_type", "Optional. The day the week begins. Default is 1."] + ], + "WEEKDAY": [ + ["Serial_number", "Required. The date for which you want to get the day of week."], + ["Return_type", "Optional. A number representing day of week mapping scheme. Default is 1."] + ], + "WORKDAY": [ + ["Start_date", "Required. The date from which to start."], + ["Days", "Required. The working days before or after start_date."], + ["Holidays", "Optional. A list dates that should be considered non-work days."] + ], + "WORKDAY.INTL": [ + ["Start_date", "Required. The start date."], + ["Days", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A list of one or more dates that should be considered non-work days."] + ], + "YEARFRAC": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Basis", "Optional. The type of day count basis to use (see below)."] + ], + "ACCRINT": [ + ["Id", "Required. Issue date of the security."], + ["Fd", "Required. First interest date of security."], + ["Sd", "Required. Settlement date of security."], + ["Rate", "Required. Interest rate of security."], + ["Par", "Required. Par value of security."], + ["Freq", "Required. Coupon payments per year (annual = 1, semiannual = 2; quarterly = 4)."], + ["Basis", "Optional. Day count basis (see below, default = 0)."], + ["Calc", "Optional. Calculation method (see below, default = TRUE)."] + ], + "PMT": [ + ["Rate", "Required. The interest rate for the loan."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all loan payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0 (zero)."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "FV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The total number of payment periods."], + ["Pmt", "Required. The payment made each period. Must be entered as a negative number."], + ["Pv", "Optional. The present value of future payments. If omitted, assumed to be zero. Must be entered as a negative number."], + ["Type", "Optional. When payments are due. 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "DB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Month", "Optional. Number of months in the first year. Defaults to 12."] + ], + "DDB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Factor", "Optional. Rate at which the balance declines. If omitted, defaults to 2."] + ], + "DOLLAR": [ + ["Number", "Required. The number to convert."], + ["Decimals", "Required. The number of digits to the right of the decimal point. Default is 2."] + ], + "DOLLARDE": [ + ["Fractional_dollar", "Required. Dollar component in special fractional notation."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "DOLLARFR": [ + ["Decimal_dollar", "Required. Pricing as a normal decimal number."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "EFFECT": [ + ["Nominal_rate", "Required. The nominal or stated interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "FVSCHEDULE": [ + ["Principal", "Required. The initial investment sum."], + ["Schedule", "Required. Schedule of interest rates, provided as range or array."] + ], + "IRR": [ + ["Values", "Required. Array or reference to cells that contain values."], + ["Guess", "Optional. An estimate for expected IRR. Default is .1 (10%)."] + ], + "IPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payment periods."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "ISPMT": [ + ["Rate", "Required. Interest rate."], + ["Per", "Required. Period (starts with zero, not 1)."], + ["Nper", "Required. Number of periods."], + ["Pv", "Required. Present value."] + ], + "NPV": [ + ["Rate", "Required. Discount rate over one period."], + ["Value1", "Required. First value(s) representing cash flows."], + ["Value2", "Optional. Second value(s) representing cash flows."] + ], + "NOMINAL": [ + ["Effect_rate", "Required. The effective annual interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "NPER": [ + ["Rate", "Required. The interest rate per period."], + ["Pmt", "Required. The payment made each period."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PDURATION": [ + ["Rate", "Required. Interest rate per period."], + ["Pv", "Required. Present value of the investment."], + ["Fv", "Required. Future value of the investment."] + ], + "PPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The number of payment periods."], + ["Pmt", "Required. The payment made each period."], + ["Fv", "Optional. Future value. If omitted, defaults to zero."], + ["Type", "Optional. Payment type, 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "SYD": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."] + ], + "TBILLPRICE": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Discount", "Required. The discount rate for the security."] + ], + "TBILLYIELD": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Price", "Required. Price per $100."] + ], + "UNIQUE": [ + ["Array", "Required. Range or array from which to extract unique values."], + ["By_col", "Optional. How to compare and extract. By row = FALSE (default); by column = TRUE."], + ["Exactly_once", "Optional. TRUE = values that occur once, FALSE = all unique values (default)."] + ], + "RANDARRAY": [ + ["Rows", "Optional. Row count. Default = 1."], + ["Columns", "Optional. Column count. Default = 1."], + ["Min", "Optional. Minimum value. Default = 0."], + ["Max", "Optional. Maximum value. Default = 1."], + ["Integer", "Optional. Whole numbers. Boolean, TRUE or FALSE. Default = FALSE."] + ], + "TOROW": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Control to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TOCOL": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Setting to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TEXTSPLIT": [ + ["Text", "Required. The text string to split."], + ["Col_delimiter", "Required. The character(s) to delimit columns."], + ["Row_delimiter", "Optional. The character(s) to delimit rows."], + ["Ignore_empty", "Optional. Ignore empty values. TRUE = ignore, FALSE = preserve. Default is FALSE."], + ["Match_mode", "Optional. Case-sensitivity. 0 = enabled, 1 = disabled. Default is 0."], + ["Pad_with", "Optional. Value to pad missing values in 2d arrays."] + ], + "WRAPROWS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each row."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "WRAPCOLS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each column."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "TAKE": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to return as an integer."], + ["Columns", "Optional. Number of columns to return as an integer."] + ], + "DROP": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to drop."], + ["Columns", "Optional. Number of columns to drop."] + ], + "SEQUENCE": [ + ["Rows", "Required. Number of rows to return."], + ["Columns", "Optional. Number of columns to return."], + ["Start", "Optional. Starting value (defaults to 1)."], + ["Step", "Optional. Increment between each value (defaults to 1)."] + ], + "CHOOSEROWS": [ + ["Array", "Required. The array to extract rows from."], + ["Row_num1", "Required. The numeric index of the first row to return."], + ["Row_num2", "Optional. The numeric index of the second row to return."] + ], + "CHOOSECOLS": [ + ["Array", "Required. The array to extract columns from."], + ["Col_num1", "Required. The numeric index of the first column to return."], + ["Col_num2", "Optional. The numeric index of the second column to return."] + ], + "EXPAND": [ + ["Array", "Required. The array to expand."], + ["Rows", "Optional. The final number of rows. Default is total rows."], + ["Columns", "Optional. The final number of columns. Default is total columns."], + ["Pad_with", "Optional. Value to use for new cells. Default is #N/A."] + ], + "SORT": [ + ["Array", "Required. Range or array to sort."], + ["Sort_index", "Optional. Column index to use for sorting. Default is 1."], + ["Sort_order", "Optional. 1 = Ascending, -1 = Descending. Default is ascending order."], + ["By_col", "Optional. TRUE = sort by column. FALSE = sort by row. Default is FALSE."] + ], + "SORTBY": [ + ["Array", "Required. Range or array to sort."], + ["By_array", "Required. Range or array to sort by."], + ["Sort_order", "Optional. Sort order. 1 = ascending (default), -1 = descending."], + ["Array/order", "Optional. Additional array and sort order pairs."] + ] +}; +~~~ + +**Связанный пример**: [Spreadsheet. Локализация](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/functions.md b/i18n/ru/docusaurus-plugin-content-docs/current/functions.md new file mode 100644 index 00000000..28457a72 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/functions.md @@ -0,0 +1,1476 @@ +--- +sidebar_label: Формулы и функции +title: Формулы и функции +description: В документации вы можете узнать о формулах и функциях библиотеки DHTMLX JavaScript Spreadsheet. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Формулы и функции {#formulas-and-functions} + +Начиная с версии v4.0, пакет DHTMLX Spreadsheet включает набор предустановленных формул для различных типов вычислений со строками и числами. Формулы совместимы с Excel и Google Sheets. + +:::note +Строчные буквы в формулах автоматически преобразуются в верхний регистр. +::: + + + +## Функции {#functions} + +Ниже приведён список всех доступных функций с подробными описаниями. + +### Булевы операторы {#boolean-operators} + +Вы можете сравнивать два значения с помощью логических выражений, которые возвращают TRUE или FALSE. + +| Operator | Example | Description | +| :------- | :------------ | :------------------------------------------------------------------------------------------------------- | +| = | =A1=B1 | Возвращает TRUE, если значение в ячейке A1 равно значению в ячейке B1; иначе — FALSE. | +| <> | =A1<>B1 | Возвращает TRUE, если значение в ячейке A1 не равно значению в ячейке B1; иначе — FALSE. | +| > | =A1>B1 | Возвращает TRUE, если значение в ячейке A1 больше значения в ячейке B1; иначе — FALSE. | +| < | =A1<B1 | Возвращает TRUE, если значение в ячейке A1 меньше значения в ячейке B1; иначе — FALSE. | +| >= | =A1>=B1 | Возвращает TRUE, если значение в ячейке A1 больше или равно значению в ячейке B1; иначе — FALSE. | +| <= | =A1<=B1 | Возвращает TRUE, если значение в ячейке A1 меньше или равно значению в ячейке B1; иначе — FALSE. | + +Посмотрите пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +### Функции даты {#date-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionFormulaDescription
DATE=DATE(year,month,day)Объединяет три отдельных значения (год, месяц и день) и возвращает дату.
DATEDIF=DATEDIF(start_date,end_date,unit)Возвращает количество дней, месяцев или лет между двумя датами.
Аргумент unit определяет тип возвращаемой информации.
DATEVALUE=DATEVALUE(date_text)Преобразует дату, хранящуюся в виде текста, в порядковый номер.
DAY=DAY(date)Возвращает день месяца в виде числа от 1 до 31 для указанной даты.
DAYS=DAYS(end_date, start_date)Возвращает количество дней между двумя датами.
DAYS360=DAYS360(start_date,end_date,[method]])Возвращает количество дней между двумя датами на основе 360-дневного года (двенадцать 30-дневных месяцев).
EDATE=EDATE(start_date, months)Возвращает дату того же числа месяца, на n месяцев в прошлом или будущем.
EOMONTH=EOMONTH(start_date, months)Возвращает дату последнего дня месяца, на n месяцев раньше или позже указанной начальной даты.
ISOWEEKNUM=ISOWEEKNUM(date)Возвращает номер ISO-недели года для указанной даты.
MONTH=MONTH(date)Возвращает месяц года для указанной даты.
NETWORKDAYS=NETWORKDAYS(start_date, end_date, [holidays])Возвращает количество полных рабочих дней между двумя датами. Рабочие дни не включают выходные и даты, указанные в holidays.
NETWORKDAYSINTL=NETWORKDAYSINTL(start_date, end_date, [weekend], [holidays])Возвращает количество полных рабочих дней между двумя датами.
Необязательный параметр weekend определяет, какие дни недели считаются выходными.
Выходные дни и праздники не считаются рабочими днями.
NOW=NOW()Возвращает текущую дату.
TIMEVALUE
added in v4.3		=TIMEVALUE(time_text)Возвращает десятичное число, представляющее время, заданное текстовой строкой.
WEEKDAY=WEEKDAY(date,[return_type])Возвращает день недели для указанной даты.
Аргумент return_type определяет, какой день недели считается первым.
WEEKNUM=WEEKNUM(date,[return_type])Возвращает номер недели для указанной даты.
Аргумент return_type определяет, какой день недели считается первым.
WORKDAY=WORKDAY(start_date, days, [holidays])Возвращает дату ближайшего рабочего дня через n дней в будущем или прошлом.
Рабочие дни не включают выходные и даты, указанные в holidays.
WORKDAYINTL=WORKDAYINTL(start_date, days, [weekend], [holidays])Возвращает дату ближайшего рабочего дня через n дней в будущем или прошлом.
Необязательный параметр weekend определяет, какие дни недели считаются выходными.
Выходные дни и праздники не считаются рабочими днями.
YEAR=YEAR(date)Возвращает год для указанной даты.
YEARFRAC=YEARFRAC(start_date, end_date, [basis])Возвращает долю года между двумя датами.
Необязательный аргумент basis определяет тип используемой базы подсчёта дней.
+
+ +Посмотрите пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). +### Финансовые функции {#financial-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
ACCRINT =ACCRINT(issue, id, sd, rate, par, frequency, [basis], [calc_method]),

where:
  • issue - the issue date of the security;
  • id - the security's first interest date;
  • sd - the security's settlement date;
  • rate - the security's annual coupon rate;
  • par - the security's par value, $1,000 by default;
  • frequency - the number of coupon payments per year (1 for annual payments);
  • basis - optional, the type of day count basis to use;
  • calc_method - optional, the way to calculate the total accrued interest when the date of settlement is later than the date of first interest (0 or 1(default)).
Возвращает накопленный процент по ценной бумаге с периодической выплатой процентов.
BINOM.DIST
added in v4.3		=BINOM.DIST(number_s, trials, probability_s, cumulative),

where:
  • number_s - the number of successes in trials;
  • trials - the number of independent trials;
  • probability_s - the probability of success on each trial;
  • cumulative - if TRUE, then BINOM.DIST returns the cumulative distribution function; if FALSE (use 0), it returns the probability mass function.
Возвращает вероятность биномиального распределения для отдельного члена.
BINOM.DIST.RANGE
added in v4.3		=BINOM.DIST.RANGE(trials, probability_s, number_s, [number_s2]),

where:
  • trials - the number of independent trials (must be ≥ 0);
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • number_s - the number of successes in trials (must be ≥ 0 and ≤ trials);
  • number_s2 - optional. If provided, returns the probability that the number of successful trials will fall between number_s and number_s2
    ([number_s2] must be ≥ number_s and ≤ trials).
Возвращает вероятность результата испытания с использованием биномиального распределения.
BINOM.INV
added in v4.3		=BINOM.INV(trials, probability_s, alpha),

where:
  • trials - the number of Bernoulli trials;
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • alpha - the criterion value (must be ≥ 0 and ≤ 1);
Возвращает наименьшее значение, при котором кумулятивное биномиальное распределение больше или равно заданному критерию.
BITLSHIFT
added in v4.3		=BITLSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0
  • shift_amount - the amount of bits to shift, if negative, shifts bits to the right instead
Возвращает число, сдвинутое влево на указанное количество бит.
BITOR
added in v4.3		=BITOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
Возвращает десятичное число, представляющее побитовое ИЛИ двух чисел.
BITRSHIFT
added in v4.3		=BITRSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0);
  • shift_amount - the amount of bits to shift, if negative shifts bits to the left instead;
Возвращает число, сдвинутое вправо на указанное количество бит.
BITXOR
added in v4.3		=BITXOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
Возвращает десятичное число, представляющее побитовое исключающее ИЛИ двух чисел.
COMPLEX
added in v4.3		=COMPLEX(real_num, i_num, [suffix]),

where:
  • real_num - the real coefficient of the complex number;
  • i_num - the imaginary coefficient of the complex number;
  • suffix - optional ("i" by default) - the suffix for the imaginary component of the complex number;
    (must be lowercase "i" or "j") .
Преобразует вещественный и мнимый коэффициенты в комплексное число вида x + yi или x + yj.
CORREL
added in v4.3		=CORREL(array1, array2),

where:
  • array1 - a range of cell values;
  • array2 - a second range of cell values;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Возвращает коэффициент корреляции двух диапазонов ячеек.
COVAR
added in v4.3		=COVAR(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Возвращает ковариацию — среднее произведений отклонений для каждой пары точек данных в двух наборах данных.
COVARIANCE.P
added in v4.3		=COVARIANCE.P(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Возвращает генеральную ковариацию — среднее произведений отклонений для каждой пары точек данных в двух наборах данных.
COVARIANCE.S
added in v4.3		=COVARIANCE.S(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
Возвращает выборочную ковариацию — среднее произведений отклонений для каждой пары точек данных в двух наборах данных.
DB=DB(cost, salvage, life, period, [month]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • month - optional, the number of months in the first year, 12 by default.
Вычисляет амортизацию актива за указанный период методом фиксированного убывающего остатка.
DDB=DDB(cost, salvage, life, period, [factor]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • factor - optional, the rate at which the balance declines, 2 (the double-declining balance method) by default
Вычисляет амортизацию актива за указанный период методом двойного убывающего остатка или другим указанным методом.
DEC2BIN
added in v4.3		=DEC2BIN(number),

where:
  • number - the decimal integer you want to convert (must be greater than -512 but less than 511);
Преобразует десятичное число в двоичное.
DEC2HEX
added in v4.3		=DEC2HEX(number),

where:
  • number - the decimal integer you want to convert (must be greater than -549755813888 but less than 549755813887);
Преобразует десятичное число в шестнадцатеричное.
DEC2OCT
added in v4.3		=DEC2OCT(number),

where:
  • number - the decimal integer you want to convert (must be greater than -536870912 but less than 536870911);
Преобразует десятичное число в восьмеричное.
DELTA
added in v4.3		=DELTA(number1, [number2]),

where:
  • number1 - the first number;
  • number2 - optional, the second number. If omitted, number2 is assumed to be zero.
Проверяет равенство двух чисел. Возвращает 1, если number1 = number2; в противном случае возвращает 0.
DEVSQ
added in v4.3		=DEVSQ(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the sum of squared deviations;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Возвращает сумму квадратов отклонений точек данных от их выборочного среднего.
DOLLARDE=DOLLARDE(fractional_dollar, fraction)Преобразует цену в долларах, заданную в виде целой части и дробной части, в цену в долларах, отображаемую как десятичное число.
DOLLARFR=DOLLARFR(decimal_dollar, fraction)Преобразует десятичное число в дробное значение в долларах.
EFFECT=EFFECT(nominal_rate, npery)

nominal_rate must be >= 0, npery must be > 1.		Возвращает эффективную годовую процентную ставку на основе номинальной годовой процентной ставки и указанного количества периодов начисления сложных процентов в год.
Работает с числовыми значениями.
ERF
added in v4.3		=ERF(lower_limit, [upper_limit]),

where:
  • lower_limit - the lower bound for integrating ERF;
  • upper_limit - the upper bound for integrating ERF. If omitted, ERF integrates between 0 and lower_limit.
Возвращает функцию ошибок, проинтегрированную между lower_limit и upper_limit.
ERFC
added in v4.3		=ERFC(x),

where:
  • x - the lower bound for integrating ERFC
Возвращает дополнительную функцию ERF, проинтегрированную от x до бесконечности.
EXP
added in v4.3		=EXP(number),

where:
  • number - the power that e is raised to
Возвращает результат возведения константы e (равной 2.71828182845904) в указанную степень.
FISHER
added in v4.3		=FISHER(x),

where:
  • x - the value for which you want to calculate the transformation
Вычисляет преобразование Фишера для заданного значения.
FISHERINV
added in v4.3		=FISHERINV(y),

where:
  • y - the value for which you want to perform the inverse of the transformation
Вычисляет обратное преобразование Фишера и возвращает значение в диапазоне от -1 до +1.
FV=FV(rate, nper, pmt, [pv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period;
  • pv - optional, the present value, or the lump-sum amount that a series of future payments is worth right now, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Вычисляет будущую стоимость инвестиции.
FVSCHEDULE=FVSCHEDULE(principal, schedule),

where:
  • principal - the present value;
  • schedule - an array of interest rates to apply. The values in the array can be numbers or blank cells; any other value produces the error value. Blank cells are taken as zeros.
Возвращает будущую стоимость начального капитала (= текущей стоимости) после применения ряда ставок сложных процентов.
GAMMA
added in v4.3		=GAMMA(number)

+ If Number is a negative integer or 0, GAMMA returns the #Error value.		Возвращает значение гамма-функции.
GEOMEAN
added in v4.3		=GEOMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Возвращает среднее геометрическое массива или диапазона положительных данных.
GESTEP
added in v4.3		=GESTEP(number, [step])

where:
  • number - the value to test against step;
  • step - optional, the threshold value. If you omit a value for step, GESTEP uses zero;
Возвращает 1, если number ≥ step; в противном случае возвращает 0 (ноль).
HARMEAN
added in v4.3		=HARMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
Возвращает среднее гармоническое набора данных.
HEX2BIN
added in v4.3		=HEX2BIN(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Преобразует шестнадцатеричное число в двоичное.
HEX2DEC
added in v4.3		=HEX2DEC(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Преобразует шестнадцатеричное число в десятичное.
HEX2OCT
added in v4.3		=HEX2OCT(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
Преобразует шестнадцатеричное число в восьмеричное.
IMABS
added in v4.3		=IMABS(inumber)

where:
  • inumber - a complex number
Возвращает абсолютное значение комплексного числа в формате x + yi или x + yj.
IMAGINARY
added in v4.3		=IMAGINARY(inumber)

where:
  • inumber - a complex number
Возвращает мнимый коэффициент комплексного числа в формате x + yi или x + yj.
IMCONJUGATE
added in v4.3		=IMCONJUGATE(inumber)

where:
  • inumber - a complex number
Возвращает комплексно-сопряжённое число для комплексного числа в формате x + yi или x + yj.
IMCOS
added in v4.3		=IMCOS(inumber)

where:
  • inumber - a complex number
Возвращает косинус комплексного числа в формате x + yi или x + yj.
IMCOSH
added in v4.3		=IMCOSH(inumber)

where:
  • inumber - a complex number
Возвращает гиперболический косинус комплексного числа в формате x + yi или x + yj.
IMCOT
added in v4.3		=IMCOT(inumber)

where:
  • inumber - a complex number
Возвращает котангенс комплексного числа в формате x + yi или x + yj.
IMCSC
added in v4.3		=IMCSC(inumber)

where:
  • inumber - a complex number
Возвращает косеканс комплексного числа в формате x + yi или x + yj.
IMCSCH
added in v4.3		=IMCSCH(inumber)

where:
  • inumber - a complex number
Возвращает гиперболический косеканс комплексного числа в формате x + yi или x + yj.
IMDIV
added in v4.3		=IMDIV(inumber1, inumber2)

where:
  • inumber1 - the complex numerator or dividend
  • inumber2 - the complex denominator or divisor
Возвращает частное двух комплексных чисел в формате x + yi или x + yj.
IMEXP
added in v4.3		=IMEXP(inumber)

where:
  • inumber - a complex number
Возвращает экспоненту комплексного числа в формате x + yi или x + yj.
IMLN
added in v4.3		=IMLN(inumber)

where:
  • inumber - a complex number
Возвращает натуральный логарифм комплексного числа в формате x + yi или x + yj.
IMPOWER
added in v4.3		=IMPOWER(inumber, number)

where:
  • inumber - a complex number
  • number - the power to which you want to raise the complex number
Возвращает комплексное число в текстовом формате x + yi или x + yj, возведённое в степень.
IMPRODUCT
added in v4.3		=IMPRODUCT(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to multiply
Возвращает произведение от 1 до 255 комплексных чисел в формате x + yi или x + yj.
IMREAL
added in v4.3		=IMREAL(inumber)

where:
  • inumber - a complex number
Возвращает вещественный коэффициент комплексного числа в формате x + yi или x + yj.
IMSEC
added in v4.3		=IMSEC(inumber)

where:
  • inumber - a complex number
Возвращает секанс комплексного числа в формате x + yi или x + yj.
IMSECH
added in v4.3		=IMSECH(inumber)

where:
  • inumber - a complex number
Возвращает гиперболический секанс комплексного числа в формате x + yi или x + yj.
IMSIN
added in v4.3		=IMSIN(inumber)

where:
  • inumber - a complex number
Возвращает синус комплексного числа в формате x + yi или x + yj.
IMSINH
added in v4.3		=IMSINH(inumber)

where:
  • inumber - a complex number
Возвращает гиперболический синус комплексного числа в формате x + yi или x + yj.
IMSQRT
added in v4.3		=IMSQRT(inumber)

where:
  • inumber - a complex number
Возвращает квадратный корень из комплексного числа в формате x + yi или x + yj.
IMSUB
added in v4.3		=IMSUB(inumber1, inumber2)

where:
  • inumber1 - a complex number from which to subtract inumber2;
  • inumber2 - the complex number to subtract from inumber1
Возвращает разность двух комплексных чисел в формате x + yi или x + yj.
IMSUM
added in v4.3		=IMSUB(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to add
Возвращает сумму двух или более комплексных чисел в формате x + yi или x + yj.
IMTAN
added in v4.3		=IMTAN(inumber)

where:
  • inumber - a complex number
Возвращает тангенс комплексного числа в формате x + yi или x + yj.
IPMT=IPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Возвращает сумму процентных выплат за заданный период для инвестиции с равными периодическими платежами и постоянной процентной ставкой.
IRR=IRR(values, [guess]),

where:
  • values - an array or reference to cells that contain values. The array must contain at least one positive value and one negative value;
  • guess - optional, an estimate for expected IRR, .1 (=10%) by default.
Возвращает внутреннюю норму доходности (ВНД) для ряда денежных потоков, возникающих через равные промежутки времени.
ISPMT=ISPMT(rate, per, nper, pv),

where:
  • rate - the interest rate for the investment. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods for the investment. For monthly payments, nper=nper*12;
  • pv - the present value of the investment. For a loan, pv is the loan amount.
Вычисляет сумму выплаченных (или полученных) процентов за указанный период займа (или инвестиции) с равными выплатами основного долга.
LARGE
added in v4.3		=LARGE(array, k),

where:
  • array - the array or range of data for which you want to determine the k-th largest value;
  • k - the position (from the largest) in the array or cell range of data to return.
Возвращает k-е наибольшее значение в массиве.
MEDIAN
added in v4.3		=MEDIAN(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 numbers for which you want to calculate the median;
Возвращает медиану заданных чисел.
NOMINAL=NOMINAL(effect_rate, npery),

effect_rate must be >= 0, npery must be > 1. 		Возвращает номинальную годовую процентную ставку на основе эффективной ставки и указанного количества периодов начисления сложных процентов в год.
NPER=NPER(rate,pmt,pv,[fv],[type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pmt - the payment made each period;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Возвращает количество периодов для инвестиции с равными периодическими платежами и постоянной процентной ставкой.
NPV=NPV(rate,value1,[value2],...),

where:
  • rate - the rate of discount over one year;
  • value1, value2,... - from 1 to 254 values representing cash flows (future payments and income).
    Empty cells, logical values, text, or error values are ignored.
Вычисляет чистую приведённую стоимость инвестиции, используя ставку дисконтирования, ряд будущих платежей (отрицательные значения) и доходов (положительные значения).
OCT2BIN
added in v4.3		=OCT2BIN(number),

where:
  • number - the octal number you want to convert. It can't contain more than 10 characters;
Преобразует восьмеричное число в двоичное.
OCT2DEC
added in v4.3		=OCT2DEC(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
Преобразует восьмеричное число в десятичное.
OCT2HEX
added in v4.3		=OCT2HEX(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
Преобразует восьмеричное число в шестнадцатеричное.
PDURATION=PDURATION(rate, pv, fv),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pv - the present value of the investment;
  • fv - the desired future value of the investment.

All arguments must be positive values.		Возвращает количество периодов, необходимых инвестиции для достижения заданной стоимости.
PERCENTILE
added in v4.3		=PERCENTILE(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
Возвращает k-й процентиль значений в диапазоне.
PERCENTILE.EXC
added in v4.3		=PERCENTILE.EXC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, exclusive.
Возвращает k-й процентиль значений в диапазоне.
PERCENTILE.INC
added in v4.3		=PERCENTILE.INC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
Возвращает k-й процентиль значений в диапазоне.
PERMUT
added in v4.3		=PERMUT(number, number_chosen),

where:
  • number - the total number of items;
  • number_chosen - the number of items in each combination.
Возвращает количество перестановок для заданного числа элементов.
PMT=PMT(rate, nper, pv, [fv], [type]),

where:
  • rate - the interest rate for the loan. For monthly payments, rate = rate/12;
  • nper - the total number of months of payments for the loan. For monthly payments, nper=nper*12;
  • pv - the present value (or the current total amount of loan);
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Вычисляет ежемесячный платёж по займу с постоянными выплатами и постоянной процентной ставкой.
PPMT=PPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value - the total amount that a series of future payments is worth now;
  • fv - the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Возвращает выплату по основному долгу за указанный период для инвестиции с равными периодическими платежами и постоянной процентной ставкой.
PV=PV(rate, nper, pmt, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period. If pmt is omitted, you must include the fv argument;
  • fv - optional, the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
Возвращает текущую стоимость займа или инвестиции на основе постоянной процентной ставки.
QUARTILE
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
Возвращает квартиль набора данных.
QUARTILE.EXC
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (1-3).
Возвращает квартиль набора данных на основе значений процентиля от 0 до 1 (не включая границы).
QUARTILE.INC
added in v4.3		=QUARTILE.INC(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
Возвращает квартиль набора данных на основе значений процентиля от 0 до 1 (включая границы).
SIGN
added in v4.3		=SIGN(number),

where:
  • number - any real number
Определяет знак числа. Возвращает 1, если число положительное, 0 (ноль), если число равно 0, и -1, если число отрицательное.
SMALL
added in v4.3		=SMALL(array, k),

where:
  • array - an array or range of numeric values;
  • k - the position (from 1 - the smallest value) in the data set.
Возвращает k-е наименьшее значение по его позиции в наборе данных.
STEYX
added in v4.3		=STEYX(known_y's, known_x's),

where:
  • known_y's - an array or range of dependent data points;
  • known_x's - an array or range of independent data points.

Text, logical values, or empty cells are ignored. Zero values are included.		Возвращает стандартную ошибку предсказанного значения y для каждого x в регрессии.
SYD
added in v4.3		=SYD(cost, salvage, life, per),

where:
  • cost - the initial cost of the asset;
  • salvage - the asset value at the end of the depreciation;
  • life - the number of periods over which the asset is depreciated;
  • per - the period and must use the same units as life.
Возвращает амортизацию актива за указанный период методом суммы чисел лет срока службы.
TBILLPRICE
added in v4.3		=TBILLPRICE(settlement, maturity, discount),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • discount - the Treasury bill's percentage discount rate.
Возвращает цену казначейского векселя на $100 номинальной стоимости.
TBILLYIELD
added in v4.3		=TBILLYIELD(settlement, maturity, pr),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • pr - the Treasury bill's price per $100 face value.
Возвращает доходность казначейского векселя.
WEIBULL
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
Возвращает распределение Вейбулла.
WEIBULL.DIST
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
Возвращает распределение Вейбулла.
+ +Ознакомьтесь с примером в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). +### Информационные функции {#information-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
ISBINARY=ISBINARY(value)Возвращает TRUE, если значение является двоичным; в противном случае возвращает FALSE.
ISBLANK=ISBLANK(A1)Возвращает TRUE, если ячейка пуста; в противном случае возвращает FALSE.
ISEVEN=ISEVEN(number)Возвращает TRUE, если число чётное, или FALSE, если число нечётное.
Работает с целыми числами.
ISNONTEXT=ISNONTEXT(value)Возвращает TRUE, если ячейка содержит любое значение, кроме текста; в противном случае возвращает FALSE.
ISNUMBER=ISNUMBER(value)Возвращает TRUE, если ячейка содержит число; в противном случае возвращает FALSE.
ISODD=ISODD(number)Возвращает TRUE, если число нечётное, или FALSE, если число чётное.
Работает с целыми числами.
ISTEXT=ISTEXT(value)Возвращает TRUE, если значение является текстом; в противном случае возвращает FALSE.
N=N(value)Возвращает значение, преобразованное в число.
+
+ +Проверьте пример в нашем [инструменте сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +### Функции поиска {#lookup-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
HLOOKUP
добавлено в v4.3		=HLOOKUP(lookup_value, table_array, row_index, [range_lookup]),

где:
  • lookup_value - искомое значение;
  • table_array - таблица, из которой извлекается значение;
  • column_index_num - номер строки в таблице, из которой извлекается значение;
  • range_lookup - необязательный (1 по умолчанию):
    0 - точное совпадение, 1 - приблизительное совпадение
Выполняет поиск значения в горизонтальной таблице
INDEX
добавлено в v4.3		=INDEX(array, row_num, [column_num]),

где:
  • array - диапазон ячеек или массив-константа;
  • row_num - позиция строки в ссылке или массиве;
  • column_num - необязательный, позиция столбца в ссылке или массиве.
Возвращает значение по указанной позиции в диапазоне или массиве.
LOOKUP
добавлено в v4.3		=LOOKUP(lookup_value, lookup_vector, [result_vector]),

где:
  • lookup_value - искомое значение;
  • lookup_vector - диапазон из одной строки или одного столбца для поиска;
  • result_vector - необязательный, диапазон результатов из одной строки или одного столбца.
Выполняет поиск значения в диапазоне из одного столбца или одной строки и возвращает значение из той же позиции другого диапазона из одного столбца или одной строки.
MATCH
добавлено в v4.3		=MATCH(lookup_value, lookup_array, [match_type]),

где:
  • lookup_value - значение, которое нужно найти в lookup_array;
  • lookup_array - диапазон ячеек;
  • match_type - необязательный (1 по умолчанию):
    1 - находит наибольшее значение, меньшее или равное lookup_value
    0 - находит значение, точно равное lookup_value
    -1 - находит наименьшее значение, большее или равное lookup_value
Ищет указанный элемент в диапазоне ячеек и возвращает относительную позицию этого элемента в диапазоне.
VLOOKUP
добавлено в v4.3		=VLOOKUP(lookup_value, table_array, column_index_num, [range_lookup]),

где:
  • lookup_value - искомое значение в первом столбце таблицы;
  • table_array - таблица, из которой извлекается значение;
  • column_index_num - номер столбца в таблице, из которого извлекается значение;
  • range_lookup - необязательный (1 по умолчанию):
    0 - точное совпадение, 1 - приблизительное совпадение
Выполняет поиск значения в вертикальной таблице по совпадению в первом столбце
XLOOKUP
добавлено в v4.3		=XLOOKUP(lookup_value, lookup_array, return_array, [if_not_found], [match_mode]),

где:
  • lookup_value - искомое значение;
  • lookup_array - массив или диапазон для поиска;
  • return_array - массив или диапазон для возврата значений;
  • if_not_found - необязательный, если совпадение не найдено, возвращает указанный текст [if_not_found];
  • match_mode - необязательный (0 по умолчанию):
    0 - точное совпадение
    -1 - точное совпадение; если не найдено, возвращает следующий меньший элемент
    1 - точное совпадение; если не найдено, возвращает следующий больший элемент
Выполняет поиск в диапазоне или массиве и возвращает элемент, соответствующий первому найденному совпадению. Если совпадение не найдено, XLOOKUP может вернуть ближайшее (приблизительное) совпадение.
XMATCH
добавлено в v4.3		=XMATCH(lookup_value, lookup_array, [match_mode]),

где:
  • lookup_value - значение, которое нужно найти в lookup_array;
  • lookup_array - диапазон ячеек;
  • match_mode - необязательный, 0 - точное совпадение (по умолчанию), -1 - точное совпадение или следующее меньшее, 1 - точное совпадение или следующее большее
Выполняет поиск и возвращает позицию в вертикальных или горизонтальных диапазонах.
+
+ +### Математические функции {#math-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABSВозвращает абсолютное значение числа. Абсолютное значение числа всегда положительно.
ACOSВозвращает арккосинус числа. Арккосинус — это угол, косинус которого равен number. Число должно быть в диапазоне от -1 до 1 включительно. Возвращаемый угол задаётся в радианах в диапазоне от 0 (нуля) до pi.
ACOSHВозвращает обратный гиперболический косинус числа. Число должно быть больше или равно 1.
ACOTВозвращает главное значение арккотангенса числа. Возвращаемый угол задаётся в радианах в диапазоне от 0 (нуля) до pi.
ACOTHВозвращает обратный гиперболический котангенс числа. Абсолютное значение числа должно быть больше 1.
ADDВозвращает сумму двух значений.
Пустые ячейки, логические значения TRUE и текст игнорируются.
ARABICПреобразует римское число в арабское.
ASINВозвращает арксинус числа. Арксинус — это угол, синус которого равен number. Число должно быть в диапазоне от -1 до 1 включительно. Возвращаемый угол задаётся в радианах в диапазоне от -pi/2 до pi/2.
ASINHВозвращает обратный гиперболический синус числа. Обратный гиперболический синус — это значение, гиперболический синус которого равен number. Работает с вещественными числами.
ATANВозвращает арктангенс числа. Арктангенс — это угол, тангенс которого равен number. Возвращаемый угол задаётся в радианах в диапазоне от -pi/2 до pi/2. Работает с тангенсом искомого угла.
ATAN2Возвращает арктангенс для координат (x,y). Арктангенс возвращается в радианах в диапазоне от -pi до pi, исключая -pi.
ATANHВозвращает обратный гиперболический тангенс числа. Число должно быть в диапазоне от -1 до 1 (исключая -1 и 1). Работает с вещественными числами.
AVEDEV
added in v4.3		Возвращает среднее абсолютных отклонений точек данных от их среднего значения.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются. Ячейки с нулевым значением учитываются.
AVERAGEВычисляет среднее арифметическое группы чисел.
Логические значения, пустые ячейки и ячейки, содержащие текст в массиве или ссылке, игнорируются.
Однако ячейки с нулевым значением учитываются.
AVERAGEA
added in v4.3		Вычисляет среднее арифметическое значений из списка аргументов.
Аргументами могут быть: числа; имена, массивы или ссылки, содержащие числа; текстовые представления чисел; логические значения, такие как TRUE и FALSE, в ссылке.
Пустые ячейки и текстовые значения в массиве или ссылке игнорируются.
AVERAGEIF
added in v6.0		Возвращает среднее арифметическое всех ячеек в диапазоне, удовлетворяющих заданному условию.
Принимает два обязательных аргумента (диапазон для оценки и критерий) и один необязательный аргумент (диапазон ячеек для усреднения, если он отличается от оцениваемого диапазона).
AVERAGEIFS
added in v6.0		Возвращает среднее арифметическое всех ячеек, удовлетворяющих нескольким условиям.
Принимает обязательный диапазон усреднения, за которым следует одна или несколько пар аргументов "диапазон условия" и "критерий".
BASEПреобразует число в заданное основание (систему счисления).
Число должно быть целым, больше или равным 0 и меньше 2^53.
Основание системы счисления — это основание, в которое нужно преобразовать число. Оно должно быть целым числом от 2 до 36 включительно.
BITAND
added in v4.3		Возвращает побитовое "И" двух чисел.
Число должно быть целым, больше или равным 0 и меньше (2^48)-1.
CEILINGВозвращает число, округлённое вверх до ближайшего целого или до ближайшего кратного указанному значению точности.
COMBINВозвращает количество сочетаний для двух заданных целых чисел: количества элементов (number) и количества элементов в каждом сочетании (number_chosen):
  • number должно быть больше или равно нулю; также оно должно быть больше или равно number_chosen;
  • number_chosen должно быть больше или равно нулю.
COMBINAВозвращает количество сочетаний для двух заданных целых чисел с учётом повторений. Числами являются: количество элементов (number) и количество элементов в каждом сочетании (number_chosen):
  • number должно быть больше или равно нулю; также оно должно быть больше или равно number_chosen;
  • number_chosen должно быть больше или равно нулю.
COSВозвращает косинус угла, заданного в радианах.
COSHВозвращает гиперболический косинус вещественного числа.
CSCВозвращает косеканс угла, заданного в радианах.
CSCHВозвращает гиперболический косеканс угла, заданного в радианах.
COTВозвращает котангенс угла, заданного в радианах.
COTHВозвращает гиперболический котангенс гиперболического угла.
COUNTПодсчитывает количество ячеек, содержащих числа, а также числа в списке аргументов.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке не учитываются.
COUNTAПодсчитывает количество ячеек, содержащих числа, текст, логические значения, значения ошибок и пустые строки (""); ячейки с нулевым значением исключаются.
Функция не учитывает пустые ячейки.
COUNTBLANKВозвращает количество пустых ячеек в указанном диапазоне.
Ячейки с нулевым значением не учитываются.
COUNTIF
added in v6.0		Подсчитывает количество ячеек в диапазоне, удовлетворяющих заданному условию.
Принимает два аргумента: диапазон ячеек для оценки и критерий, определяющий, какие ячейки следует подсчитывать.
COUNTIFS
added in v6.0		Подсчитывает количество ячеек, удовлетворяющих нескольким условиям.
Принимает одну или несколько пар аргументов "диапазон" и "критерий"; учитываются только ячейки, удовлетворяющие всем условиям.
DECIMALПреобразует текстовое представление числа в заданном основании (системе счисления) в десятичное число.
Основание системы счисления должно быть целым числом от 2 до 36 включительно.
DEGREESПреобразует радианы в градусы.
DIVIDEВозвращает результат деления одного числа на другое.
EQВозвращает TRUE, если первый аргумент равен второму; иначе FALSE.
EVENВозвращает число, округлённое вверх до ближайшего чётного целого.
FACTВозвращает факториал числа. Число должно быть от 1 до n. Если число не является целым, оно усекается.
FACTDOUBLEВозвращает двойной факториал числа. Число должно быть от 1 до n. Если число не является целым, оно усекается.
FLOORОкругляет число вниз, к нулю, до ближайшего кратного указанному значению точности. Значение точности должно быть от 1 до n.
Если знак числа положительный, значение округляется вниз в сторону нуля. Если знак числа отрицательный, значение округляется вниз в сторону от нуля.
GCDВозвращает наибольший общий делитель двух или более целых чисел. Функция принимает от 1 до 255 числовых значений, которые должны быть целыми числами. Если какое-либо значение не является целым, оно усекается.
GTВозвращает TRUE, если первый аргумент больше второго; иначе FALSE.
GTEВозвращает TRUE, если первый аргумент больше второго или равен ему; иначе FALSE.
INTВозвращает число, округлённое вниз до ближайшего целого.
LNВозвращает натуральный логарифм положительного вещественного числа.
LOGВозвращает логарифм положительного вещественного числа по указанному основанию. Если основание не указано, предполагается значение 10.
LOG10Возвращает десятичный логарифм положительного вещественного числа.
LTВозвращает TRUE, если первый аргумент меньше второго; иначе FALSE.
LTEВозвращает TRUE, если первый аргумент меньше второго или равен ему; иначе FALSE.
MAXВозвращает наибольшее значение в наборе значений.
Функция игнорирует пустые ячейки, логические значения TRUE и FALSE, а также текстовые значения. Если аргументы не содержат чисел, MAX возвращает 0 (нуль).
MAXIFS
added in v6.0		Возвращает максимальное значение среди ячеек, заданных набором условий.
Принимает обязательный диапазон максимума, за которым следует одна или несколько пар аргументов "диапазон условия" и "критерий".
MINВозвращает наименьшее число в наборе значений.
Пустые ячейки, логические значения и текст в массиве или ссылке игнорируются. Если аргументы не содержат чисел, MIN возвращает 0 (нуль).
MINIFS
added in v6.0		Возвращает минимальное значение среди ячеек, заданных набором условий.
Принимает обязательный диапазон минимума, за которым следует одна или несколько пар аргументов "диапазон условия" и "критерий".
MINUSВозвращает разность двух чисел.
MODВозвращает остаток от деления числа на делитель. Результат имеет тот же знак, что и делитель.
MROUNDВозвращает число, округлённое до ближайшего кратного указанному значению точности. Значения number и multiple должны иметь одинаковый знак.
MULTINOMIALВозвращает отношение факториала суммы значений к произведению факториалов. Функция принимает от 1 до 255 числовых значений, которые должны быть больше или равны 0.
MULTIPLYВозвращает результат умножения двух чисел.
NEВозвращает TRUE, если первый аргумент не равен второму; иначе FALSE.
ODDВозвращает число, округлённое вверх до ближайшего нечётного целого.
PIВозвращает число 3.14159265358979 (математическую константу пи с точностью до 15 знаков).
POWВозвращает результат возведения числа в заданную степень.
Работает с вещественными числами.
POWERВозвращает результат возведения числа в заданную степень.
Работает с вещественными числами.
PRODUCTПеремножает все числа, переданные в качестве аргументов, и возвращает произведение.
+Перемножаются только числа в массиве или ссылке. Пустые ячейки, логические значения и текст в массиве или ссылке игнорируются.
QUOTIENTВозвращает результат целочисленного деления без остатка.
Работает с вещественными числами.
RADIANSПреобразует градусы в радианы.
RANDВозвращает случайное число, большее или равное 0 и меньшее 1.
Возвращает новое случайное число при каждом пересчёте таблицы.
RANDBETWEENВозвращает случайное число между двумя указанными числами.
Возвращает новое случайное число при каждом пересчёте таблицы.
ROMANПреобразует арабское число в римское.
ROUNDВозвращает число, округлённое до указанного количества цифр.
ROUNDDOWNВозвращает число, округлённое вниз до указанного количества цифр.
ROUNDUPВозвращает число, округлённое вверх до указанного количества цифр.
SECВозвращает секанс угла, заданного в радианах.
Работает с числовыми значениями.
SECHВозвращает гиперболический секанс угла, заданного в радианах.
Работает с числовыми значениями.
SINВозвращает синус угла, заданного в радианах.
SINHВозвращает гиперболический синус вещественного числа.
SQRTВозвращает положительный квадратный корень числа.
SQRTPIВозвращает квадратный корень числа, умноженного на pi. Число должно быть больше или равно 0.
STDEVВычисляет стандартное отклонение на основе данных, представляющих выборку из генеральной совокупности.
Стандартное отклонение — это мера разброса значений относительно среднего значения (среднего арифметического).
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
STDEVAВычисляет стандартное отклонение на основе выборки.
Стандартное отклонение — это мера разброса значений относительно среднего значения (среднего арифметического).
Пустые ячейки и текстовые значения в массиве или ссылке игнорируются.
STDEVPВычисляет стандартное отклонение на основе всей генеральной совокупности чисел.
Стандартное отклонение — это мера разброса значений относительно среднего значения (среднего арифметического).
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
STDEVPAВычисляет стандартное отклонение на основе всей генеральной совокупности, переданной в качестве аргументов, включая текст (оценивается как 0) и логические значения (оцениваются как 1 для TRUE и как 0 для FALSE).
Стандартное отклонение — это мера разброса значений относительно среднего значения (среднего арифметического).
Если аргумент является массивом или ссылкой, используются только значения этого массива или ссылки. Пустые ячейки и текстовые значения в массиве или ссылке игнорируются.
Значения ошибок приводят к ошибкам.
STDEV.S
added in v4.3		Оценивает стандартное отклонение на основе выборки (логические значения и текст в выборке игнорируются).
Стандартное отклонение — это мера разброса значений относительно среднего значения (среднего арифметического).
Если аргумент является массивом или ссылкой, используются только значения этого массива или ссылки. Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
Значения ошибок приводят к ошибкам.
SUBTOTALВозвращает промежуточный итог в списке или базе данных.
SUMВозвращает сумму переданных значений.
Пустые ячейки, логические значения TRUE и текст игнорируются.
SUMIF
added in v6.0		Суммирует ячейки в диапазоне, удовлетворяющие заданному условию.
Принимает два обязательных аргумента (диапазон для оценки и критерий) и один необязательный аргумент (диапазон ячеек для суммирования, если он отличается от оцениваемого диапазона).
SUMIFS
added in v6.0		Суммирует ячейки в диапазоне, удовлетворяющие нескольким условиям.
Принимает обязательный диапазон суммирования, за которым следует одна или несколько пар аргументов "диапазон условия" и "критерий"; в сумму включаются только ячейки, удовлетворяющие всем условиям.
SUMPRODUCTПеремножает диапазоны ячеек или массивы и возвращает сумму произведений.
Для получения корректных произведений перемножаются только числа.
Пустые ячейки, логические значения и текст игнорируются.
Нечисловые элементы массива обрабатываются как нули.
SUMSQВозвращает сумму квадратов аргументов.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
SUMX2MY2Возвращает сумму разностей квадратов соответствующих значений в двух массивах.
Аргументы должны быть числами, именами, массивами или ссылками, содержащими числа.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются. Нулевые значения учитываются.
SUMX2PY2Возвращает сумму сумм квадратов соответствующих значений в двух массивах.
Аргументы должны быть числами, именами, массивами или ссылками, содержащими числа.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются. Нулевые значения учитываются.
SUMXMY2Возвращает сумму квадратов разностей соответствующих значений в двух массивах.
Аргументы должны быть числами, именами, массивами или ссылками, содержащими числа.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются. Нулевые значения учитываются.
TANВозвращает тангенс угла, заданного в радианах.
TANHВозвращает гиперболический тангенс вещественного числа.
TRUNCУсекает число до целого, отбрасывая дробную часть.
VARВозвращает дисперсию на основе выборки.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
VARAВозвращает дисперсию на основе выборки из генеральной совокупности, включая текст (оценивается как 0) и логические значения (оцениваются как 1 для TRUE и как 0 для FALSE).
Пустые ячейки и текстовые значения в массиве или ссылке игнорируются.
VARPВозвращает дисперсию генеральной совокупности на основе всех чисел совокупности.
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
VARPAВозвращает дисперсию генеральной совокупности на основе всей совокупности, включая текст (оценивается как 0) и логические значения (оцениваются как 1 для TRUE и как 0 для FALSE).
Пустые ячейки и текстовые значения в массиве или ссылке игнорируются.
VAR.S
added in v4.3		Возвращает дисперсию на основе выборки (логические значения и текст в выборке игнорируются).
Пустые ячейки, логические значения, текст и значения ошибок в массиве или ссылке игнорируются.
+
+ +Ознакомьтесь с примером в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). +### Функции массивов {#array-functions} + +Следующие функции массивов были добавлены в v6.0. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
CHOOSECOLS=CHOOSECOLS(array, col_num1, [col_num2], ...)Возвращает указанные столбцы из массива или диапазона.
CHOOSEROWS=CHOOSEROWS(array, row_num1, [row_num2], ...)Возвращает указанные строки из массива или диапазона.
DROP=DROP(array, [rows], [columns])Удаляет указанное количество строк или столбцов с начала или конца массива.
EXPAND=EXPAND(array, [rows], [columns], [pad_with])Расширяет или дополняет массив до заданных размеров по строкам и столбцам.
RANDARRAY=RANDARRAY([rows], [columns], [min], [max], [integer])По умолчанию возвращает массив случайных чисел от 0 до 1. Можно задать количество строк и столбцов для заполнения, минимальное и максимальное значения, а также указать, возвращать целые или десятичные числа.
SEQUENCE=SEQUENCE(rows, [columns], [start], [step])Генерирует список последовательных чисел в массиве, например 1, 2, 3, 4.
SORT=SORT(array, [sort_index], [sort_order], [by_col])Сортирует содержимое диапазона или массива. По умолчанию выполняет сортировку по первому столбцу в порядке возрастания.
SORTBY=SORTBY(array, by_array, [sort_order], ...)Сортирует содержимое диапазона или массива на основе значений из соответствующего диапазона или массива.
TAKE=TAKE(array, [rows], [columns])Возвращает указанное количество смежных строк или столбцов с начала или конца массива.
TEXTSPLIT=TEXTSPLIT(text, col_delimiter, [row_delimiter], [ignore_empty], [match_mode], [pad_with])Разбивает текстовую строку на строки и столбцы с использованием указанных разделителей.
TOCOL=TOCOL(array, [ignore], [scan_by_column])Преобразует массив или диапазон в один столбец.
TOROW=TOROW(array, [ignore], [scan_by_column])Преобразует массив или диапазон в одну строку.
UNIQUE=UNIQUE(array, [by_col], [exactly_once])Возвращает список уникальных значений из диапазона или массива.
WRAPCOLS=WRAPCOLS(vector, wrap_count, [pad_with])Преобразует вектор строки или столбца в двумерный массив по столбцам после указанного количества значений.
WRAPROWS=WRAPROWS(vector, wrap_count, [pad_with])Преобразует вектор строки или столбца в двумерный массив по строкам после указанного количества значений.
+
+ +Ознакомьтесь с примером в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). +### Функции регулярных выражений {#regex-functions} + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
REGEXREPLACE=REGEXREPLACE(text, regular_expression, replacement)Заменяет часть текстовой строки другой строкой с использованием регулярных выражений.
REGEXMATCH=REGEXMATCH(text, regular_expression)Возвращает TRUE, если текстовая строка соответствует шаблону регулярного выражения, и FALSE в противном случае.
REGEXEXTRACT=REGEXEXTRACT(text, regular_expression)Возвращает часть строки, соответствующую шаблону регулярного выражения.
+
+ +Проверьте пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +### Строковые функции {#string-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияФормулаОписание
ARRAYTOTEXT
добавлено в v4.3		=ARRAYTOTEXT(array, [format])Возвращает массив текстовых значений из указанного диапазона в зависимости от заданного формата (0 - краткий (по умолчанию) или 1 - строгий формат).
CHAR=CHAR(number)Возвращает символ (из набора символов вашего компьютера), соответствующий заданному числу. Число должно быть в диапазоне от 1 до 255.
CLEAN=CLEAN(text)Удаляет из текста символы, которые не отображаются при печати.
CODE=CODE(text)Возвращает числовой код первого символа в текстовой строке.
CONCATENATE=CONCATENATE(A1,"",B2:C3)Объединяет две или более текстовых строки в одну.
DOLLAR=DOLLAR(number, decimals)Преобразует число в текст в денежном формате с указанным количеством знаков справа/слева от десятичной точки (по умолчанию — 2).
EXACT=EXACT(text1, text2)Сравнивает две строки и возвращает TRUE, если они полностью совпадают; в противном случае возвращает FALSE.
FIND=FIND(find_text, within_text, [start_num])Возвращает позицию (в виде числа) одной текстовой строки внутри другой, начиная с указанной позиции (по умолчанию — 1).
FIXED=FIXED(number, [decimals], [no_commas])Округляет число до указанного количества знаков после запятой, форматирует его в десятичном формате с точкой и запятыми и преобразует результат в текст. Если параметр no_commas равен 1, возвращаемый текст не будет содержать запятых.
JOIN=JOIN(separator, value1, value2,...)Объединяет значения с помощью указанного разделителя.
LEFT=LEFT(text, count)Возвращает первый символ или первые символы текстовой строки
в соответствии с указанным количеством символов.
LEN=LEN(text)Возвращает длину указанной строки.
LOWER=LOWER(text)Преобразует все буквы указанной строки в нижний регистр.
MID=MID(text, start, count)Возвращает указанное количество символов из текстовой строки,
начиная с заданной позиции, в соответствии с
указанным количеством символов.
NUMBERVALUE=NUMBERVALUE (text, [decimal_separator], [group_separator])Преобразует число в текстовом формате в числовое значение с использованием указанных разделителей целой и дробной частей.
PROPER=PROPER(text)Делает первую букву каждого слова прописной
и преобразует все остальные символы в строчные.
REPLACE
добавлено в v4.3		=REPLACE(old_text, start_num, num_chars, new_text),

где:
  • old_text - текст, в котором нужно заменить символы;
  • start_num - позиция символа в old_text, начиная с которой выполняется замена на new_text;
  • num_chars - количество символов в old_text, которые нужно заменить;
  • new_text - текст, который заменит символы в old_text.
Заменяет часть текстовой строки другой строкой в соответствии с указанным количеством символов.
REPT=REPT(text, number_times)Повторяет текст заданное количество раз.
RIGHT=RIGHT(text, count)Возвращает последний символ или последние символы (крайние правые) текстовой строки
в соответствии с указанным количеством символов.
SEARCH=SEARCH(find_text, within_text, [start_num])Возвращает позицию (в виде числа) первого символа find_text внутри within_text, начиная с указанной позиции (по умолчанию — 1).
SUBSTITUTE=SUBSTITUTE(text, old_text, new_text, [instance_num])Заменяет старый текст новым в текстовой строке. Если указан параметр instance_num, заменяется только соответствующее вхождение old_text; в противном случае заменяются все вхождения.
T=T(value)Возвращает текст, если передано текстовое значение, и пустую строку ("") для чисел, дат и логических значений TRUE/FALSE.
TRIM=TRIM(text)Удаляет все пробелы из текста, кроме одиночных пробелов между словами.
UPPER=UPPER(text)Преобразует текст в верхний регистр.
+
+ +Проверьте пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +### Прочие функции {#other-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияПримерОписание
AND=AND(logical1, [logical2], ...)Возвращает TRUE или FALSE в зависимости от того,
выполняются ли несколько условий одновременно.
CHOOSE=CHOOSE(index_num, value1, [value2], ...)Возвращает значение из списка аргументов по указанной позиции или индексу.
FALSE=FALSE()Возвращает логическое значение FALSE.
IF=IF(condition, [value_if_true], [value_if_false])Возвращает одно значение, если условие равно TRUE,
и другое значение, если оно равно FALSE.
NOT=NOT(logical)Возвращает противоположное логическое или булево значение.
OR=OR(logical1, [logical2], ...)Возвращает TRUE, если хотя бы одно из логических выражений равно TRUE; в противном случае возвращает FALSE.
TRUE=TRUE()Возвращает логическое значение TRUE.
+
+ +Проверьте пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +## Получение формулы ячейки {#getting-cell-formula} + +Начиная с версии v4.1, можно получить формулу, применённую к ячейке, с помощью метода [`getFormula()`](api/spreadsheet_getformula_method.md). Метод принимает идентификатор ячейки в качестве параметра: + +~~~js +var formula = spreadsheet.getFormula("B2"); +// -> "ABS(C2)" +~~~ + +## Всплывающее окно с описанием формулы {#popup-with-formula-description} + +При вводе формулы появляется всплывающее окно с описанием функции и её параметров. + +![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) + +Проверьте пример в нашем [инструменте для сниппетов](https://snippet.dhtmlx.com/wux2b35b). + +Вы можете изменить локаль по умолчанию для всплывающего окна с параметрами формулы и добавить пользовательскую локаль. Подробнее — в руководстве по [Локализации](localization.md#default-locale-for-formulas). + +## Пользовательские формулы {#custom-formulas} + +Начиная с версии v6.0, можно регистрировать пользовательские функции формул с помощью метода [`addFormula()`](api/spreadsheet_addformula_method.md). После регистрации формула становится доступна в любой ячейке по имени в верхнем регистре. + +Метод принимает два параметра: имя формулы и синхронную функцию-обработчик, которая получает разрешённые значения ячеек в качестве аргументов и возвращает результат: + +~~~js +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); +~~~ + +После этого формулу можно использовать в ячейках так же, как любую встроенную функцию: + +~~~js +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +:::note +Функция-обработчик должна быть синхронной. Использование `Promise` или `fetch` внутри функции не допускается. +::: + +**Связанный пример:** [Spreadsheet. Добавление пользовательской формулы](https://snippet.dhtmlx.com/wvxdlahp) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides.md new file mode 100644 index 00000000..9675690a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides.md @@ -0,0 +1,52 @@ +--- +sidebar_label: Обзор руководств +title: Руководства для разработчиков и пользователей +description: Вы можете изучить руководства для разработчиков и пользователей в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Руководства {#guides} + +DHTMLX Spreadsheet включает широкий набор возможностей: импорт и экспорт данных в различных форматах, удобная работа с содержимым и стилями ячеек, гибкая структура таблицы, режим только для чтения, обширные возможности настройки внешнего вида и интеграция с популярными фреймворками. + +## Руководства для разработчиков {#developer-guides} + +### Создание Spreadsheet {#creating-spreadsheet} + +Рассматриваются основные этапы установки и создания Spreadsheet на странице, настройка конфигурации и установка подписей на нужном языке. + +- [Инициализация](initialization.md) +- [Конфигурация](configuration.md) +- [Локализация](localization.md) + +### Изучение возможностей Spreadsheet {#exploring-spreadsheet-features} + +Показывает, как загружать данные в Spreadsheet, обрабатывать события и использовать основные функции. Также охватывает настройку основных частей Spreadsheet. + +- [Загрузка и экспорт данных](loading_data.md) +- [Работа со Spreadsheet](working_with_ssheet.md) +- [Работа с листами](working_with_sheets.md) +- [Работа с ячейками](category/work-with-cells.md) +- [Форматирование чисел](number_formatting.md) +- [Формулы и функции](functions.md) +- [Обработка событий](handling_events.md) +- [Кастомизация](customization.md) + +### Фреймворки и интеграции {#frameworks--integrations} + +- [React Spreadsheet](react.md) — официальный React-компонент с поддержкой пропсов, событий и TypeScript +- [Интеграция с Angular](angular_integration.md) — демо на GitHub с использованием Spreadsheet в приложении Angular +- [Интеграция со Svelte](svelte_integration.md) — демо на GitHub с использованием Spreadsheet в приложении Svelte +- [Интеграция с Vue.js](vuejs_integration.md) — демо на GitHub с использованием Spreadsheet в приложении Vue + +## Руководства для пользователей {#user-guides} + +Руководства для пользователей упрощают работу со Spreadsheet. + +- [Список горячих клавиш](hotkeys.md) +- [Работа с листами](work_with_sheets.md) +- [Работа со строками и столбцами](work_with_rows_cols.md) +- [Работа с ячейками](work_with_cells.md) +- [Поиск данных](data_search.md) +- [Сортировка данных](sorting_data.md) +- [Фильтрация данных](filtering_data.md) +- [Импорт/экспорт Excel](excel_import_export.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/handling_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/handling_events.md new file mode 100644 index 00000000..baba5848 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/handling_events.md @@ -0,0 +1,43 @@ +--- +sidebar_label: Обработка событий +title: Обработка событий +description: Вы можете узнать об обработке событий в библиотеке DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обработка событий {#event-handling} + + + +## Подписка на события {#attaching-event-listeners} + +Вы можете подписаться на события с помощью метода [`spreadsheet.events.on()`](api/eventsbus_on_method.md): + +~~~jsx +spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +~~~ + +## Отписка от событий {#detaching-event-listeners} + +Чтобы отписаться от событий, используйте [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md): + +~~~jsx +var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +spreadsheet.events.detach(addcolumn); +~~~ + +## Вызов событий {#calling-events} + +Чтобы вызвать событие, используйте [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md): + +~~~jsx +spreadsheet.events.fire("name",args); +// where args is an array of arguments +~~~ + +Список событий доступен в [разделе API](api/api_overview.md#spreadsheet-events). + +{{note Имена событий нечувствительны к регистру.}} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/hotkeys.md b/i18n/ru/docusaurus-plugin-content-docs/current/hotkeys.md new file mode 100644 index 00000000..299e7687 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/hotkeys.md @@ -0,0 +1,241 @@ +--- +sidebar_label: Список горячих клавиш +title: Горячие клавиши +description: Вы можете узнать о горячих клавишах в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Список горячих клавиш {#hot-keys-list} + +Ниже представлен список горячих клавиш, которые можно использовать при работе с DHTMLX Spreadsheet. + +## Редактирование {#editing} + + + + + + + + + + + + + + + + + + + + +
Enterактивирует редактор в ячейке
Ctrl (Cmd) + Enterзавершает редактирование ячейки, оставляя выделение на ней
F2открывает редактор в выбранной ячейке
Escзакрывает редактор ячейки без сохранения изменений
+ +## Форматирование ячеек {#formatting-cells} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Cкопирует значение ячейки
Ctrl (Cmd) + Vвставляет значение в ячейку, заменяя выбранное содержимое
Ctrl (Cmd) + Xвырезает значение ячейки
Ctrl (Cmd) + Zотменяет последнее действие на листе
Ctrl (Cmd) + Yповторяет последнее действие на листе
Ctrl (Cmd) + Shift + Zповторяет последнее действие на листе
Ctrl (Cmd) + Bделает значение ячейки полужирным
Ctrl (Cmd) + Iделает значение ячейки курсивным
Ctrl (Cmd) + Uподчёркивает значение ячейки
Alt + Shift + 5 (Cmd + Shift + X)зачёркивает значение ячейки
Ctrl (Cmd) + Shift + Eвыравнивает значение ячейки по центру горизонтально
Ctrl (Cmd) + Shift + Rвыравнивает значение ячейки по правому краю
Ctrl (Cmd) + Shift + Lвыравнивает значение ячейки по левому краю
Ctrl (Cmd) + Kвставляет гиперссылку в ячейку
Deleteудаляет содержимое ячейки, сохраняя применённые стили
Backspaceудаляет содержимое ячейки, сохраняя применённые стили
+ +## Навигация {#navigation} + +{{note Навигация работает только в том случае, если ни одна ячейка не находится в режиме редактирования.}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enterактивирует редактор в ячейке. Закрывает редактор и перемещает выделение на одну ячейку вниз (в столбце). Если выбран диапазон ячеек, перемещает выделение на одну ячейку вниз в пределах диапазона.
Shift + Enterперемещает выделение на одну ячейку вверх (в столбце). Если выбран диапазон ячеек, перемещает выделение на одну ячейку вверх в пределах диапазона. Деактивируется при достижении первой ячейки в столбце.
Tabперемещает выделение на одну ячейку вправо (в строке). Если выбран диапазон ячеек, перемещает выделение на одну ячейку вправо в пределах диапазона. Деактивируется при достижении крайней правой ячейки в строке.
Tab + Shiftперемещает выделение на одну ячейку влево (в строке). Если выбран диапазон ячеек, перемещает выделение на одну ячейку влево в пределах диапазона. Деактивируется при достижении крайней левой ячейки в строке.
Клавиши со стрелкамиобеспечивают навигацию по ячейкам листа
Homeперемещает выделение к первой ячейке в строке
Endперемещает выделение к последней ячейке в строке
Ctrl (Cmd) + стрелка влевоперемещает выделение к первой ячейке в строке
Ctrl (Cmd) + стрелка вправоперемещает выделение к последней ячейке в строке
Ctrl (Cmd) + стрелка вверхперемещает выделение к первой ячейке в столбце
Ctrl (Cmd) + стрелка внизперемещает выделение к последней ячейке в столбце
Ctrl (Cmd) + Homeперемещает выделение к началу листа (верхняя левая ячейка)
Ctrl (Cmd) + Endперемещает выделение к концу листа (нижняя правая ячейка)
Shift + стрелка вверх/вниз/влево/вправорасширяет выделение от выбранной ячейки
Page Upпрокручивает лист на один экран вверх
Page Downпрокручивает лист на один экран вниз
+ +## Поиск {#search} + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Fоткрывает строку поиска в правом верхнем углу таблицы
Ctrl (Cmd) + Gперемещает выделение к следующему найденному совпадению
Ctrl (Cmd) + Shift + Gперемещает выделение к предыдущему найденному совпадению
+ +## Выделение {#selection} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + Aвыделяет все ячейки на листе
Ctrl (Cmd) + щелчок левой кнопкой мышипозволяет выбирать несколько несмежных ячеек
Shift + щелчок левой кнопкой мышипозволяет выбрать диапазон ячеек, где выбранная ячейка является первой
ячейкой диапазона, а кликнутая — последней
Ctrl (Cmd) + Shift + щелчок левой кнопкой мышипозволяет выбирать несколько несмежных диапазонов ячеек
Ctrl (Cmd) + Spaceвыделяет весь столбец
Shift + Spaceвыделяет всю строку
+ +## Работа с листами {#work-with-sheets} + + + + + + + + + + + + +
Shift + F11добавляет новый лист в таблицу
Alt + стрелка вверх / стрелка внизпереключается на следующий/предыдущий лист
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 00000000..527ca55c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,147 @@ +--- +sidebar_label: Как начать +title: Как начать работу с DHTMLX Spreadsheet +description: Вы можете узнать, как начать работу с библиотекой DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Как начать {#how-to-start} + +Это руководство проведёт вас по шагам для создания полностью функциональной DHTMLX Spreadsheet на странице. Компонент особенно эффективен для работы с большими объёмами данных, когда нужно сохранять результаты вычислений и воспроизводить их. + +![DHTMLX Spreadsheet, инициализированная с примером таблицы данных в окне браузера](/img/how_to_start.png) + +## Шаг 1. Подключение исходных файлов {#step-1-including-source-files} + +Начните с создания HTML-файла с именем *index.html*. Затем подключите исходные файлы Spreadsheet. [Подробное описание пакета DHTMLX Spreadsheet приведено здесь](initialization.md#including-source-files). + +Необходимы два файла: + +- *JS*-файл DHTMLX Spreadsheet +- *CSS*-файл DHTMLX Spreadsheet + +и + +- ссылка на исходный файл Google Fonts для корректного отображения шрифтов. + +~~~html {5-8} title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + + + + +~~~ + +### Установка Spreadsheet через npm или yarn {#installing-spreadsheet-via-npm-or-yarn} + +Вы можете импортировать JavaScript Spreadsheet в свой проект с помощью менеджера пакетов `yarn` или `npm`. + +#### Установка пробной версии Spreadsheet через npm или yarn {#installing-trial-spreadsheet-via-npm-or-yarn} + +:::info +Если вы хотите использовать пробную версию Spreadsheet, скачайте [**пробный пакет Spreadsheet**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) и следуйте инструкциям в файле *README*. Обратите внимание, что пробная версия Spreadsheet доступна только в течение 30 дней. +::: + +#### Установка PRO-версии Spreadsheet через npm или yarn {#installing-pro-spreadsheet-via-npm-or-yarn} + +:::info +Вы можете получить доступ к закрытому **npm**-репозиторию DHTMLX напрямую из [Кабинета клиента](https://dhtmlx.com/clients/), сгенерировав логин и пароль для **npm**. Подробное руководство по установке также доступно там. Обратите внимание, что доступ к закрытому **npm** возможен только при наличии активной лицензии на Spreadsheet. +::: + +## Шаг 2. Создание Spreadsheet {#step-2-creating-spreadsheet} + +Теперь вы готовы добавить Spreadsheet на страницу. Сначала создайте DIV-контейнер и поместите в него DHTMLX Spreadsheet. Ваши действия: + +- указать DIV-контейнер в файле *index.html* +- инициализировать DHTMLX Spreadsheet с помощью конструктора `dhx.Spreadsheet` + +В качестве параметров конструктор принимает HTML-контейнер для размещения Spreadsheet и объект конфигурации Spreadsheet. + +~~~html title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + +
+ + + +~~~ + +## Шаг 3. Настройка конфигурации Spreadsheet {#step-3-setting-spreadsheet-configuration} + +Далее вы можете задать дополнительные параметры конфигурации, которые компонент Spreadsheet должен иметь при инициализации помимо значений по умолчанию. + +Вы можете настроить внешний вид Spreadsheet с помощью нескольких параметров, например: `toolbarBlocks`, `rowsCount` и `colsCount`. [Подробности](configuration.md). + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + toolbarBlocks: ["columns", "rows", "clear"], + rowsCount: 10, + colsCount: 10 +}); +~~~ + +Конфигурация DHTMLX Spreadsheet весьма гибкая, поэтому вы можете изменять её в любое время. [Прочитайте соответствующее руководство](configuration.md), чтобы освоить основы настройки Spreadsheet. + +## Шаг 4. Загрузка данных в Spreadsheet {#step-4-loading-data-into-spreadsheet} + +Последний шаг — заполнить Spreadsheet данными. DHTMLX Spreadsheet принимает данные в формате JSON. Помимо данных, в наборе данных можно передавать необходимые стили. При загрузке встроенных данных нужно использовать метод `parse()` и передать ему объект с данными, как в примере ниже: + +~~~jsx title="data.json" +const data = [ + { "cell": "a1", "value": "Country" }, + { "cell": "b1", "value": "Product" }, + { "cell": "c1", "value": "Price" }, + { "cell": "d1", "value": "Amount" }, + { "cell": "e1", "value": "Total Price" }, + + { "cell": "a2", "value": "Ecuador" }, + { "cell": "b2", "value": "Banana" }, + { "cell": "c2", "value": 6.68 }, + { "cell": "d2", "value": 430 }, + { "cell": "e2", "value": 2872.4 }, + + { "cell": "a3", "value": "Belarus" }, + { "cell": "b3", "value": "Apple" }, + { "cell": "c3", "value": 3.75 }, + { "cell": "d3", "value": 600 }, + { "cell": "e3", "value": 2250 } +] + +// initializing spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + //config +}); +// loading data into spreadsheet +spreadsheet.parse(data); +~~~ + +**Связанный пример**: [Spreadsheet. Настраиваемое количество ячеек](https://snippet.dhtmlx.com/vc3mstsw) + +## Что дальше {#whats-next} + +Вот и всё. За четыре шага вы получаете удобный инструмент для работы с табличными данными. Теперь вы можете начать работу с данными или продолжить изучение DHTMLX Spreadsheet. + +- [Обзор Spreadsheet](/) +- [](guides.md) +- [](api/api_overview.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 00000000..0726309b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Обзор Spreadsheet +title: Обзор DHTMLX Spreadsheet +slug: / +description: Вы можете ознакомиться с обзором библиотеки JavaScript Spreadsheet в документации DHTMLX. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Обзор DHTMLX Spreadsheet {#dhtmlx-spreadsheet-overview} + +DHTMLX Spreadsheet — клиентский JavaScript-компонент для редактирования и форматирования данных таблиц онлайн. Он включает настраиваемую панель инструментов, удобное меню и контекстное меню, а также регулируемую сетку, поддерживает навигацию с помощью горячих клавиш, загрузку данных из внешних и локальных источников и может локализовать интерфейс на нужный язык. + +:::tip +[Руководство пользователя](guides.md#user-guides) упрощает работу со Spreadsheet для ваших пользователей. +::: + +## Структура Spreadsheet {#spreadsheet-structure} + +### Панель инструментов {#toolbar} + +Раздел **Панель инструментов** весьма гибкий. Он содержит несколько блоков элементов управления по умолчанию: "undo", "colors", "decoration", "align", "cell", "format", "actions". Вы можете [изменить структуру панели инструментов](configuration.md#toolbar) и добавить дополнительные блоки или задать собственный порядок блоков. + +![Панель инструментов DHTMLX Spreadsheet с элементами управления отменой, цветом, оформлением, выравниванием, ячейкой, форматом и действиями](/img/overview_toolbar.png) + +Вы также можете [настроить панель инструментов](customization.md#toolbar), добавив собственные элементы управления и обновив их конфигурацию. + +### Строка редактирования {#editing-line} + +**Строка редактирования** служит двум целям: + +- редактирование содержимого выбранной ячейки +- контроль изменений в текущей редактируемой ячейке + +![Строка редактирования DHTMLX Spreadsheet для редактирования содержимого ячейки и отслеживания изменений](/img/overview_editline.png) + +При необходимости строку редактирования можно отключить с помощью соответствующего [параметра конфигурации](configuration.md#editing-bar). + +### Сетка {#grid} + +**Сетка** — это таблица, в которой столбцы обозначены буквами, а строки — числами. Таким образом, ячейка сетки определяется буквой столбца и номером строки, например C3. + +![Сетка DHTMLX Spreadsheet со столбцами, обозначенными буквами, и пронумерованными строками](/img/spreadsheet_init.png) + +### Контекстное меню {#context-menu} + +Раздел **Контекстное меню** включает 6 пунктов — **Заблокировать**, **Очистить**, **Столбцы**, **Строки**, **Сортировка** и **Вставить ссылку** — с подпунктами. + +![Контекстное меню DHTMLX Spreadsheet с пунктами «Заблокировать», «Очистить», «Столбцы», «Строки», «Сортировка» и «Вставить ссылку»](/img/overview_contextmenu.png) + +[Структура контекстного меню также настраивается](customization.md#context-menu). Вы можете добавлять пользовательские элементы управления, обновлять их конфигурацию и удалять ненужные элементы. + +### Меню {#menu} + +Раздел **Меню** содержит несколько блоков, объединяющих наиболее часто используемые параметры из панели инструментов и контекстного меню для быстрого доступа. + +По умолчанию раздел **Меню** скрыт, но его можно включить с помощью соответствующего [параметра конфигурации](configuration.md#menu). + +![Раздел меню DHTMLX Spreadsheet, объединяющий часто используемые параметры панели инструментов и контекстного меню](/img/overview_menu.png) + +Вы можете [изменить структуру меню](customization.md#menu), используя пользовательские элементы управления, обновляя их конфигурацию и удаляя ненужные элементы. + +## Что дальше {#whats-next} + +Теперь вы можете приступить к использованию DHTMLX Spreadsheet в своём приложении. Следуйте инструкциям руководства [Как начать](how_to_start.md). + +Чтобы узнать больше о DHTMLX Spreadsheet, ознакомьтесь с этими руководствами: + +- [Обзор API](api/api_overview.md) +- [Руководства](guides.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/initialization.md new file mode 100644 index 00000000..9528756e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/initialization.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Инициализация +title: Инициализация +description: Вы можете узнать об инициализации библиотеки DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Инициализация {#initialization} + +Это руководство описывает, как создать DHTMLX Spreadsheet на странице и добавить полнофункциональный рабочий лист в ваше приложение. Выполните следующие шаги, чтобы получить готовый к использованию компонент: + +1. [Подключите исходные файлы DHTMLX Spreadsheet на страницу](#including-source-files). +2. [Создайте контейнер для DHTMLX Spreadsheet](#creating-container). +3. [Инициализируйте DHTMLX Spreadsheet с помощью конструктора объекта](#initializing-dhtmlx-spreadsheet). + + + +## Подключение исходных файлов {#including-source-files} + +[Скачайте пакет](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml) и распакуйте его в папку вашего проекта. + +Для создания DHTMLX Spreadsheet необходимо подключить 2 исходных файла на странице: + +- spreadsheet.js +- spreadsheet.css + +Убедитесь, что вы указываете правильные относительные пути к этим файлам: + +~~~html title="index.html" + + +~~~ + +Структура пакета Spreadsheet следующая: + +- *sources* — исходные файлы библиотеки; они легко читаемы и в основном предназначены для отладки; +- *codebase* — обфусцированные файлы библиотеки; они значительно меньше по размеру и предназначены для использования в производственной среде. **Включайте эти файлы в свои приложения при их готовности**; +- *samples* — примеры кода; +- *docs* — полная документация компонента. + +## Создание контейнера {#creating-container} + +Добавьте контейнер для Spreadsheet и задайте ему идентификатор, например "spreadsheet": + +~~~html title="index.html" +
+~~~ + +## Инициализация DHTMLX Spreadsheet {#initializing-dhtmlx-spreadsheet} + +Инициализируйте DHTMLX Spreadsheet с помощью конструктора объекта `dhx.Spreadsheet`. Конструктор имеет два параметра: + +- HTML-контейнер для Spreadsheet, +- объект со свойствами конфигурации. [См. полный список ниже](#configuration-properties). + +~~~jsx title="index.js" +// creating DHTMLX Spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config options +}); +~~~ + +### Свойства конфигурации {#configuration-properties} + +Ознакомьтесь с полным списком [свойств](api/api_overview.md#spreadsheet-properties), которые можно указать в объекте конфигурации Spreadsheet. + +Параметры конфигурации можно задавать при инициализации в виде второго параметра конструктора: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/loading_data.md b/i18n/ru/docusaurus-plugin-content-docs/current/loading_data.md new file mode 100644 index 00000000..b52ea3c7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/loading_data.md @@ -0,0 +1,355 @@ +--- +sidebar_label: Загрузка и экспорт данных +title: Загрузка данных +description: Вы можете узнать о загрузке данных в библиотеке DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Загрузка и экспорт данных {#data-loading-and-export} + +Вы можете заполнить DHTMLX Spreadsheet подготовленным набором данных, который может включать как данные ячеек, так и стили. Компонент поддерживает два способа загрузки данных: + +- загрузка из внешнего файла +- загрузка из локального источника + +Компонент также поддерживает [экспорт данных в файл Excel](#exporting-data). + +## Подготовка данных {#preparing-data} + +DHTMLX Spreadsheet ожидает данные в формате JSON. + +Это может быть простой массив объектов ячеек. Используйте этот способ, если нужно создать набор данных только для одного листа. + +~~~jsx title="Подготовка данных для одного листа" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, format:"currency" }, + { cell: "D2", value: 430, format:"percent" }, + // "myFormat" is the id of a custom format + { cell: "E2", value: 2872.4, format:"myFormat" }, + + // add drop-down lists to cells + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // more cell objects +]; +~~~ + +Или это может быть объект с данными для загрузки сразу в несколько листов. Например: + +~~~jsx title="Подготовка данных для нескольких листов" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ], + merged: [ + // merge cells A1 and B1 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // merge cells A2, A3, A4, and A5 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } }, + ] + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ] + }, + // more sheet objects + ] +}; +~~~ + +Ознакомьтесь с полными списками доступных свойств для этих двух способов в [справочнике API](api/spreadsheet_parse_method.md). + +:::tip +Возможность загрузки объединённых ячеек доступна только при подготовке данных в объекте листа. +::: + +### Задание стилей для ячеек {#setting-styles-for-cells} + +Возможно, вам потребуется определить стили ячеек в наборе данных. В этом случае данные должны быть объектом с *отдельными свойствами*, описывающими объекты данных и CSS-классы, применяемые к конкретным ячейкам. + +Задайте CSS-класс для ячейки с помощью свойства `css`. + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430, css: "someclass" }, + { cell: "E2", value: 2872.4 } + ], +} +~~~ + +:::info +[Ознакомьтесь со списком свойств, которые можно использовать для стилизации ячеек](api/spreadsheet_parse_method.md#list-of-properties) +::: + +### Задание заблокированного состояния для ячейки {#setting-the-locked-state-for-a-cell} + +Если вы хотите указать заблокированные ячейки в наборе данных, используйте свойство `locked` ячейки и установите его в `true`: + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country", locked: true }, //locks a cell + { cell: "b1", value: "Product", locked: true }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + // more cells +]; +~~~ + +Ознакомьтесь с полным списком доступных свойств ячеек в [справочнике API](api/spreadsheet_parse_method.md#parameters). + +**Связанный пример**: [Spreadsheet. Заблокированные ячейки](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet) + +### Добавление ссылки в ячейку {#adding-a-link-into-a-cell} + +Вы можете указать ссылку для ячейки прямо в наборе данных. Для этого задайте свойство `link` как объект и укажите необходимые настройки: + +- `text` — (необязательно) текст ссылки +- `href` — (обязательно) URL-адрес, определяющий назначение ссылки + +Вот как это выглядит в наборе данных: + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country"}, //locks a cell + { cell: "b1", value: "Product"}, + + { cell: "a2", value: "Ecuador"}, + { + cell: "b2", + value: "Banana", + link:{ + href:"http://localhost:8080/" + } + }, + // more cells +]; +~~~ + +:::note +Обратите внимание, что не следует использовать свойство `value` объекта `cell` и свойство `text` объекта `link` одновременно, поскольку они являются взаимоисключающими. +::: + +**Связанный пример**: [Spreadsheet. Импорт и экспорт в JSON](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) + +## Загрузка из внешнего источника {#external-data-loading} + +### Загрузка данных JSON {#loading-json-data} + +По умолчанию Spreadsheet ожидает данные в формате JSON. Чтобы загрузить данные из внешнего источника, используйте метод [](api/spreadsheet_load_method.md). Он принимает URL-адрес файла с данными в качестве параметра: + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.json"); +~~~ + +**Связанный пример**: [Spreadsheet. Загрузка данных](https://snippet.dhtmlx.com/ih9zmc3e?tag=spreadsheet) + + +:::info +Если вы хотите предоставить пользователям возможность импортировать JSON-файл в таблицу через Проводник файлов, прочитайте раздел [Загрузка JSON-файлов](api/spreadsheet_load_method.md#loading-json-files). +::: + +### Загрузка данных CSV {#loading-csv-data} + +Вы также можете загружать данные в формате CSV. Для этого нужно вызвать метод [](api/spreadsheet_load_method.md) и передать название формата ("csv") вторым параметром: + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.csv", "csv"); +~~~ + +**Связанный пример**: [Spreadsheet. Загрузка CSV](https://snippet.dhtmlx.com/1f87y71v?tag=spreadsheet) + +### Загрузка файла Excel (.xlsx) {#loading-excel-file-xlsx} + +Вы можете загрузить файл в формате Excel с расширением `.xlsx` в таблицу. В пользовательском интерфейсе есть соответствующие элементы управления на панели инструментов и в меню: + +- Меню: Файл -> Импорт как..-> Microsoft Excel(.xlsx) + +![Меню «Файл» DHTMLX Spreadsheet с параметром «Импорт как» для файлов Microsoft Excel XLSX](/img/file_import.png) + +- Панель инструментов: Импорт -> Microsoft Excel(.xlsx) + +![Панель инструментов DHTMLX Spreadsheet с кнопкой «Импорт» для файлов Microsoft Excel XLSX](/img/import_xlsx.png) + +#### Как импортировать данные {#how-to-import-data} + +{{note Обратите внимание, что функция импорта не работает в Internet Explorer.}} + +DHTMLX Spreadsheet использует библиотеку на основе WebAssembly [Excel2Json](https://github.com/dhtmlx/excel2json) для импорта данных из Excel. Чтобы загрузить данные Excel в Spreadsheet, необходимо: + +- установить библиотеку **Excel2Json** +- указать параметр [](api/spreadsheet_importmodulepath_config.md) в конфигурации Spreadsheet и задать путь к файлу *worker.js* одним из двух способов: + - указав локальный путь к файлу на вашем компьютере, например: `"../libs/excel2json/1.0/worker.js"` + - указав ссылку на файл из CDN: `"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + importModulePath: "../libs/excel2json/1.0/worker.js" +}); +~~~ + +**Связанный пример**: [Spreadsheet. Настраиваемый путь импорта/экспорта](https://snippet.dhtmlx.com/wykwzfhm) + +Чтобы загрузить данные из файла Excel, передайте строку с типом расширения ("xlsx") в качестве второго параметра метода [](api/spreadsheet_load_method.md): + +~~~jsx +// .xlsx only +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +{{note Обратите внимание, что компонент поддерживает импорт только из файлов Excel с расширением `.xlsx`.}} + +**Связанный пример**: [Spreadsheet. Импорт Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) + +При необходимости вы также можете [экспортировать данные из таблицы в файл Excel](#exporting-data). + +### Обработка кода после загрузки {#processing-after-loading-code} + +Компонент выполняет AJAX-запрос и ожидает, что удалённый URL предоставит корректные данные. Загрузка данных асинхронна, поэтому любой код, выполняемый после загрузки, необходимо оборачивать в промис: + +~~~jsx +spreadsheet.load("/some/data").then(function(){ + // do something +}); +~~~ + +## Загрузка из локального источника {#loading-from-local-source} + +Чтобы загрузить данные из локального источника, используйте метод [](api/spreadsheet_parse_method.md). Передайте [подготовленный набор данных](#preparing-data) в качестве параметра этого метода: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.parse(data); +~~~ + +**Связанный пример**: [Spreadsheet. Настраиваемое количество ячеек](https://snippet.dhtmlx.com/vc3mstsw) + +Подробнее о загрузке нескольких листов в таблицу см. в статье [Работа с листами](working_with_sheets.md#loading-multiple-sheets). + +## Сохранение и восстановление состояния {#saving-and-restoring-state} + +Чтобы сохранить текущее состояние таблицы, используйте метод [](api/spreadsheet_serialize_method.md). Он преобразует данные в массив JSON-объектов. Каждый JSON-объект содержит конфигурацию ячейки. + +~~~jsx +// saving state of the spreadsheet1 +var state = spreadsheet1.serialize(); +~~~ + +Затем вы можете разобрать данные, хранящиеся в сохранённом массиве состояния, в другую таблицу. Например: + +~~~jsx +// creating a new spreadsheet +var spreadsheet2 = new dhx.Spreadsheet(document.body); +// parsing the state of the spreadsheet1 into spreadsheet2 +spreadsheet2.parse(state); +~~~ + +## Экспорт данных {#exporting-data} + +### Экспорт в Excel {#export-into-excel} + +DHTMLX Spreadsheet может экспортировать данные из таблицы в файл Excel. В пользовательском интерфейсе есть соответствующие элементы управления на панели инструментов и в меню: + +- Меню: Файл -> Скачать как..-> Microsoft Excel(.xlsx) + +![Меню «Файл» DHTMLX Spreadsheet с параметром «Скачать как» для экспорта в Microsoft Excel XLSX](/img/file_export.png) + +- Панель инструментов: Экспорт -> Microsoft Excel(.xlsx) + +![Панель инструментов DHTMLX Spreadsheet с кнопкой «Экспорт» для сохранения в Microsoft Excel XLSX](/img/export_xlsx.png) + +#### Как экспортировать данные {#how-to-export-data} + +:::note +Обратите внимание, что функция экспорта не работает в Internet Explorer. +::: + +Библиотека использует библиотеку на основе WebAssembly [Json2Excel](https://github.com/dhtmlx/json2excel) для экспорта данных в Excel. Экспорт обрабатывается в файле *worker.js* библиотеки **Json2Excel** (ссылка по умолчанию: `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`). Вы можете использовать публичный сервер экспорта или локальный сервер экспорта. Для экспорта файлов необходимо: + +- указать параметр [](api/spreadsheet_exportmodulepath_config.md) в конфигурации Spreadsheet и задать путь к файлу *worker.js*: + - если вы используете публичный сервер экспорта, вам не нужно указывать ссылку на него, так как он используется по умолчанию + - если вы используете собственный сервер экспорта, необходимо: + - установить библиотеку [**Json2Excel**](https://github.com/dhtmlx/json2excel) + - использовать `"../libs/json2excel/x.x/worker.js?vx"` для конкретной версии (замените `x.x` на версию, развёрнутую на вашем сервере) + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // the path to the export module, if a local export server is used +}); +~~~ + +**Связанный пример**: [Spreadsheet. Настраиваемый путь импорта/экспорта](https://snippet.dhtmlx.com/wykwzfhm) + +После настройки необходимых источников вы можете использовать соответствующий метод API [](api/export_xlsx_method.md) объекта Export для экспорта данных компонента: + +~~~jsx +spreadsheet.export.xlsx(); +~~~ + +**Связанный пример**: [Spreadsheet. Экспорт Xlsx](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +:::note +Обратите внимание, что компонент поддерживает экспорт только в файлы Excel с расширением `.xlsx`. +::: + +#### Как задать пользовательское имя для экспортируемого файла {#how-to-set-a-custom-name-for-an-exported-file} + +По умолчанию имя экспортируемого файла — "data". Вы можете указать собственное имя для экспортируемого файла. Для этого нужно передать пользовательское имя в качестве параметра метода [](api/export_xlsx_method.md): + +~~~jsx +spreadsheet.export.xlsx("MyData"); +~~~ + +**Связанный пример**: [Spreadsheet. Экспорт Xlsx](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +Ознакомьтесь с шагами по [импорту данных из файла Excel в Spreadsheet](#loading-excel-file-xlsx). + +### Экспорт в JSON {#export-into-json} + +Начиная с версии v4.3 библиотека также может экспортировать данные из таблицы в файл JSON. Для этого используйте метод [json()](api/export_json_method.md) объекта Export: + +~~~jsx +spreadsheet.export.json(); +~~~ + +**Связанный пример**: [Spreadsheet. Экспорт/импорт JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/localization.md b/i18n/ru/docusaurus-plugin-content-docs/current/localization.md new file mode 100644 index 00000000..a1e340b1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/localization.md @@ -0,0 +1,276 @@ +--- +sidebar_label: Локализация +title: Локализация +description: Вы можете узнать о локализации библиотеки DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Локализация {#localization} + +Вы можете локализовать метки в интерфейсе DHTMLX Spreadsheet и отобразить интерфейс на любом языке. Для этого предоставьте локализованные строки для меток и примените нужную локаль к компоненту. + + + +## Локаль по умолчанию {#default-locale} + +По умолчанию используется английская локаль: + +~~~jsx +const en = { + // Toolbar + undo: "Undo", + redo: "Redo", + + textColor: "Text color", + backgroundColor: "Background color", + + bold: "Bold", + italic: "Italic", + underline: "Underline", + strikethrough: "Strikethrough", + + link: "Link", + + halign: "Horizontal align", + valign: "Vertical align", + left: "Left", + right: "Right", + center: "Center", + top: "Top", + bottom: "Bottom", + multiline: "Text wrapping", + clip: "Clip", + wrap: "Wrap", + merge: "Merge", + unmerge: "Unmerge", + + lockCell: "Lock cell", + unlockCell: "Unlock cell", + + clear: "Clear", + clearValue: "Clear value", + clearStyles: "Clear styles", + clearAll: "Clear all", + + columns: "Columns", + rows: "Rows", + addColumn: "Add column left", + removeColumn: "Remove column {col}", + removeColumns: "Remove columns {col}", + fitToData: "Fit to data", + addRow: "Add row above", + removeRow: "Remove row {row}", + removeRows: "Remove rows {row}", + row: "row", + col: "col", + freeze: "Freeze", + freezeToCol: "Freeze up to column {col}", + freezeToRow: "Freeze up to row {row}", + unfreezeRows: "Unfreeze rows", + unfreezeCols: "Unfreeze columns", + hideCol: "Hide column {col}", + hideCols: "Hide columns {col}", + showCols: "Show columns", + hideRows: "Hide rows {row}", + hideRow: "Hide row {row}", + showRows: "Show rows", + + format: "Format", + common: "Common", + number: "Number", + currency: "Currency", + percent: "Percent", + text: "Text", + date: "Date", + time: "Time", + + filter: "Filter", + + help: "Help", + + custom: "Custom", + + border: "Border", + border_all: "All borders", + border_inner: "Inner borders", + border_horizontal: "Horizontal borders", + border_vertical: "Vertical borders", + border_outer: "Outer borders", + border_color: "Border color", + border_left: "Left border", + border_top: "Top border", + border_right: "Right border", + border_bottom: "Bottom border", + border_clear: "Clear borders", + border_style: "Border style", + + // Tabbar + deleteSheet: "Delete", + renameSheet: "Rename", + renameSheetAlert: "A sheet with the name $name already exists. Please enter another name. ", + + // Menu + file: "File", + import: "Import", + export: "Export", + downloadAs: "Download as...", + importAs: "Import as...", + + data: "Data", + validation: "Data validation", + search: "Search", + sort: "Sort", + ascSort: "Sort A to Z", + descSort: "Sort Z to A", + + //Actions + copy: "Copy", + edit: "Edit", + insert: "Insert", + remove: "Remove", + linkCopied: "Link copied to clipboard", + + + //filter + e: "Is empty", + ne: "Is not empty", + tc: "Text contains", + tdc: "Text doesn't contain", + ts: "Text starts with", + te: "Text ends with", + tex: "Text is exactly", + d: "Date is", + db: "Date is before", + da: "Date is after", + gt: "Greater than", + geq: "Greater or equal to", + lt: "Less than", + leq: "Less or equal to", + eq: "Is equal to", + neq: "Is not equal to", + ib: "Is between", + inb: "Is not between", + + none: "None", + value: "Value", + values: "By values", + condition: "By condition", + and: "And", + + blank: "(Blank)", + + // Buttons + cancel: "Cancel", + save: "Save", + removeValidation: "Remove validation", + selectAll: "Select all", + unselectAll: "Unselect all", + apply: "Apply", + ok: "Ok", + + // Messages + alertTitle: "There was a problem!", + mergeAlertMessage: "You can't $action a range containing merges!", + spanMergeAlert: "You can't merge frozen and non-frozen cells!", + dontShowAgain: "Don't show again", + spanPasteError: "You can't paste merges that cross the boundary of a frozen region", + spanMergeLockedError: "You can't merge locked cells!", + spanUnmergeLockedError: "You can't unmerge locked cells!", + spanOverFilteredRow: "You can't merge cells over a filtered row.", + removeAlert: "You can't remove last $name!", +}; +~~~ + +## Пользовательская локаль {#custom-locale} + +Чтобы применить другую локаль, необходимо: + +- предоставить переводы для всех текстовых меток в Spreadsheet, например для русской локали: + +~~~jsx +const ru = { + // language settings +}; +~~~ + +- применить новую локаль, вызвав метод `dhx.i18n.setLocale()` перед инициализацией Spreadsheet: + +~~~jsx +dhx.i18n.setLocale("spreadsheet", ru); +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); +~~~ + +## Локаль формул по умолчанию {#default-locale-for-formulas} + +Объект `dhx.i18n.formulas` содержит локаль i18n для всплывающего окна формул Spreadsheet. Локаль формул по умолчанию выглядит следующим образом: + +~~~jsx +const en = { + SUM: [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + AVERAGE: [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + // more formulas' descriptions +}; +~~~ + +[Посмотреть полную локаль формул по умолчанию](formulas_locale.md). + +**Связанный пример**: [Spreadsheet. Localization](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) + +## Пользовательская локаль для формул {#custom-locale-for-formulas} + +Чтобы применить пользовательскую локаль для формул Spreadsheet, используйте метод `dhx.i18n.setLocale()` следующим образом: + +~~~jsx +dhx.i18n.setLocale( + "formulas", + locale: { + // the structure of the formulas in the locale + name: [param: string, description: string][] + } +): void; +~~~ + +В метод нужно передать следующие параметры: + + + + + + + + + + + + + + + + +
ПараметрОписание
"formulas"(*обязательный*) название локали для формул
locale(*обязательный*) объект локали, содержащий описания формул в виде пар ключ:значение, где:
  • ключ — название функции
  • значение — массив параметров, которые принимает функция. Каждый параметр функции представлен массивом из двух элементов, где:
    • первый элемент — название параметра
    • второй элемент — описание параметра
+ +Пример ниже: + +~~~jsx +const de = { + AVERAGE: [ + ["Zahl1", "Erforderlich. Eine Zahl oder Zellreferenz, die sich auf numerische Werte bezieht."], + ["Zahl2", "Optional. Eine Zahl oder Zellreferenz, die auf numerische Werte verweist."] + ], + // other formulas' descriptions +}; + +dhx.i18n.setLocale("formulas", de); +~~~ + +## Пример {#example} + +В этом сниппете показано, как переключаться между локалями: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/merge_cells.md b/i18n/ru/docusaurus-plugin-content-docs/current/merge_cells.md new file mode 100644 index 00000000..dffe6394 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/merge_cells.md @@ -0,0 +1,47 @@ +--- +sidebar_label: Объединение ячеек +title: Объединение ячеек +description: Вы можете узнать об объединении ячеек в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Объединение ячеек {#merging-cells} + +## Объединить ячейки {#merge-cells} + +Чтобы объединить ячейки, выполните следующие шаги: + +1\. Выделите диапазон ячеек, которые нужно объединить + +2\. Нажмите кнопку **Merge** на панели инструментов + +![Панель инструментов DHTMLX Spreadsheet с кнопкой Merge для объединения диапазона ячеек](/img/merge_cells.png) + +или + +1\. Выделите диапазон ячеек, которые нужно объединить + +2\. Перейдите в меню: *Format -> Merge* + +![Меню Format в DHTMLX Spreadsheet с пунктом Merge для объединения ячеек](/img/merge_cells_via_menu.png) + +:::info +Объединённая ячейка отображает содержимое верхней левой ячейки выбранного диапазона. +::: + +## Разделить ячейки {#split-cells} + +Чтобы разделить объединённую ячейку, выполните следующие шаги: + +1\. Выделите объединённую ячейку + +2\. Нажмите кнопку **Unmerge** на панели инструментов + +![Панель инструментов DHTMLX Spreadsheet с кнопкой Unmerge для разделения объединённых ячеек](/img/unmerge_cells.png) + +или + +1\. Выделите объединённую ячейку + +2\. Перейдите в меню: *Format -> Unmerge* + +![Меню Format в DHTMLX Spreadsheet с пунктом Unmerge для разделения объединённых ячеек](/img/unmerge_cells_via_menu.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/migration.md b/i18n/ru/docusaurus-plugin-content-docs/current/migration.md new file mode 100644 index 00000000..c080a07b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/migration.md @@ -0,0 +1,335 @@ +--- +sidebar_label: Миграция на новые версии +title: Миграция +description: Вы можете узнать о миграции в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Миграция на новые версии {#migration-to-newer-versions} + +## 5.2 -> 6.0 {#52---60} + +### Устаревшие свойства {#deprecated-properties} + +Следующие свойства `ISpreadsheetConfig` объявлены устаревшими и удалены. Актуальное использование приведено ниже: + +- свойство конфигурации `dateFormat`. Задайте его в объекте конфигурации [`localization`](api/spreadsheet_localization_config.md): + - `{ localization: { dateFormat: "%d/%m/%Y" } }` +- свойство конфигурации `timeFormat`. Задайте его в объекте конфигурации [`localization`](api/spreadsheet_localization_config.md): + - `{ localization: { timeFormat: 12 } }` + +### Устаревшие методы {#deprecated-methods} + +Следующие методы экземпляра `ISpreadsheet` объявлены устаревшими и удалены. + +Используйте вместо них новый [API модуля `sheets` (Sheet Manager)](api/overview/sheetmanager_overview.md): + +
+ +| Устаревший метод | Сигнатура | Новое использование | Новая сигнатура | +| --- | --- | --- | --- | +| `clearSheet(id?)` | `(id?: string) => void` | [`sheets.clear(id?)`](api/sheetmanager_clear_method.md) | `(id?: Id) => void` | +| `removeSheet(id)` | `(id: string) => void` | [`sheets.remove(id)`](api/sheetmanager_remove_method.md) | `(id: Id) => void` | +| `addSheet(name?)` | `(name?: string) => string` | [`sheets.add(name?)`](api/sheetmanager_add_method.md) | `(name?: string) => Id` | +| `getSheets()` | `() => ISheet[]` | [`sheets.getAll()`](api/sheetmanager_getall_method.md) | `() => ISheet[]` | +| `getActiveSheet()` | `() => ISheet` | [`sheets.getActive()`](api/sheetmanager_getactive_method.md) | `() => ISheet` | +| `setActiveSheet(id)` | `(id: Id) => void` | [`sheets.setActive(id)`](api/sheetmanager_setactive_method.md) | `(id: Id) => void` | + +
+ +### Устаревшие события {#deprecated-events} + +Следующие события объявлены устаревшими и удалены. Вместо них используйте пару универсальных событий [`beforeAction`](api/spreadsheet_beforeaction_event.md) / [`afterAction`](api/spreadsheet_afteraction_event.md). + +
+ +| Устаревшее событие | Сигнатура колбэка | Новое использование | +| --- | --- | --- | +| `beforeValueChange` | `(cell: string, value: string) => void \| boolean` | `beforeAction` с действием `"setCellValue"` | +| `afterValueChange` | `(cell: string, value: string) => void` | `afterAction` с действием `"setCellValue"` | +| `beforeStyleChange` | `(cell: string, style: ...) => void \| boolean` | `beforeAction` с действием `"setCellStyle"` | +| `afterStyleChange` | `(cell: string, style: ...) => void` | `afterAction` с действием `"setCellStyle"` | +| `beforeFormatChange` | `(cell: string, format: string) => void \| boolean` | `beforeAction` с действием `"setCellFormat"` | +| `afterFormatChange` | `(cell: string, format: string) => void` | `afterAction` с действием `"setCellFormat"` | +| `beforeRowAdd` | `(cell: string) => void \| boolean` | `beforeAction` с действием `"addRow"` | +| `afterRowAdd` | `(cell: string) => void` | `afterAction` с действием `"addRow"` | +| `beforeRowDelete` | `(cell: string) => void \| boolean` | `beforeAction` с действием `"deleteRow"` | +| `afterRowDelete` | `(cell: string) => void` | `afterAction` с действием `"deleteRow"` | +| `beforeColumnAdd` | `(cell: string) => void \| boolean` | `beforeAction` с действием `"addColumn"` | +| `afterColumnAdd` | `(cell: string) => void` | `afterAction` с действием `"addColumn"` | +| `beforeColumnDelete` | `(cell: string) => void \| boolean` | `beforeAction` с действием `"deleteColumn"` | +| `afterColumnDelete` | `(cell: string) => void` | `afterAction` с действием `"deleteColumn"` | +| `beforeSheetAdd` | `(name: string) => void \| boolean` | `beforeAction` с действием `"addSheet"` | +| `afterSheetAdd` | `(sheet: ISheet) => void` | `afterAction` с действием `"addSheet"` | +| `beforeSheetRemove` | `(sheet: ISheet) => void \| boolean` | `beforeAction` с действием `"deleteSheet"` | +| `afterSheetRemove` | `(sheet: ISheet) => void` | `afterAction` с действием `"deleteSheet"` | +| `beforeSheetRename` | `(sheet: ISheet, value: string) => void \| boolean` | `beforeAction` с действием `"renameSheet"` | +| `afterSheetRename` | `(sheet: ISheet) => void` | `afterAction` с действием `"renameSheet"` | +| `beforeSheetClear` | `(sheet: ISheet) => void \| boolean` | `beforeAction` с действием `"clearSheet"` | +| `afterSheetClear` | `() => void` | `afterAction` с действием `"clearSheet"` | + +
+ +## 5.1 -> 5.2 {#51---52} + +### Функциональность заморозки/разморозки {#freezingunfreezing-functionality} + +В версии 5.2 изменён способ заморозки/разморозки столбцов и строк: + +- свойства конфигурации `leftSplit` и `topSplit`, использовавшиеся для фиксации столбцов и строк, объявлены устаревшими и удалены + +~~~jsx title="До v5.2" +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + topSplit: 1, // the number of row to "freeze" + leftSplit: 1 // the number of columns to "freeze" +}); +~~~ + +- введены новые методы API: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +~~~jsx title="Начиная с v5.2" +// для строк +spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen + +// для столбцов +spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed +spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +- добавлено новое действие: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + +~~~jsx title="Начиная с v5.2" +// использование действия `toggleFreeze` с событиями beforeAction/afterAction +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); +~~~ + +- добавлено новое свойство `freeze` для объекта *sheets* метода [`parse()`](api/spreadsheet_parse_method.md). Оно позволяет фиксировать строки и столбцы для конкретных листов в наборе данных при разборе данных в Spreadsheet: + +~~~jsx {10-13} title="Начиная с v5.2" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // more "sheet_1" settings + }, + // more sheets configuration objects + ] +}; + +spreadsheet.parse(data); +~~~ + +## 4.3 -> 5.0 {#43---50} + +В версии 5.0 опция `"help"` свойства [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) переименована в `"helpers"`. Кроме того, набор опций по умолчанию теперь включает новую опцию `"actions"`. + +~~~jsx title="До v5.0" {8} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "help" +] +~~~ + +~~~jsx title="Начиная с v5.0" {8,9} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "actions", + "helpers" +] +~~~ + + +## 4.2 -> 4.3 {#42---43} + +:::info +Версия 4.3 является последней версией с поддержкой IE +::: + +Версия 4.3 вводит новый подход к отслеживанию и обработке действий, выполняемых при изменении таблицы. + +Новые события [`beforeAction`](api/spreadsheet_beforeaction_event.md) и [`afterAction`](api/spreadsheet_afteraction_event.md) срабатывают непосредственно до/после выполнения действия и сообщают, какое именно действие было выполнено. Такой подход позволяет добавить необходимую логику для нескольких действий сразу, используя только эти два события. Например: + +~~~jsx +spreadsheet.events.on("BeforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return true; + } + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + ... +}); + +spreadsheet.events.on("AfterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config) + } + if (actionName === "addColumn") { + console.log(actionName, config); + }, + ... +}); +~~~ + +Этот подход сокращает объём кода, так как больше не нужно добавлять наборы парных событий [**before-** и **after-**](api/overview/events_overview.md) для каждого отдельного действия. + +При этом старый подход продолжает работать как прежде. Подробнее см. [Действия Spreadsheet](api/overview/actions_overview.md). + +:::info +На данный момент существует ряд событий, которые необходимо использовать по-старому, так как они не могут быть заменены действиями: *beforeEditEnd, afterEditEnd, beforeEditStart, afterEditStart, beforeFocusSet, afterFocusSet, beforeSheetChange, afterSheetChange, groupFill*. +::: + +## 4.1 -> 4.2 {#41---42} + +В версии 4.2 блок [Align](customization.md#default-controls) панели инструментов Spreadsheet разделён на два подблока: Horizontal align и Vertical align. Соответственно, список идентификаторов стандартных элементов управления блока Align изменён и расширен: + +`До v4.2`: + +Блок **Align**: + +- кнопка *Align left* (id: "align-left") +- кнопка *Align center* (id: "align-center") +- кнопка *Align right* (id: "align-right") + +`Начиная с v4.2`: + +Подблок **Horizontal align** блока **Align**: + +- кнопка *Left* (id: "halign-left") +- кнопка *Center* (id: "halign-center") +- кнопка *Right* (id: "halign-right") + +Подблок **Vertical align** блока **Align**: + +- кнопка *Top* (id: "valign-top") +- кнопка *Center* (id: "valign-center") +- кнопка *Bottom* (id: "valign-bottom") + +### Локализация {#localization} + +Обратите внимание, что [настройки локали](localization.md) для блока **Align** также обновлены: + +`До v4.2`: + +~~~jsx +const locale = { + align: "Align", + ... +} +~~~ + +`Начиная с v4.2`: + +~~~jsx +const locale = { + halign: "Horizontal align", + valign: "Vertical align", + ... +} +~~~ + +## 2.1 -> 3.0 {#21---30} + +Этот список изменений поможет вам выполнить миграцию с версии 2.1, где DHTMLX Spreadsheet был основан на PHP, на полностью переработанную версию 3.0, написанную целиком на JavaScript. Ознакомьтесь со списком ниже, чтобы изучить все изменения. + +:::info +**API версии 2.1** по-прежнему доступен, но несовместим с [**API начиная с версии 3.0**](api/api_overview.md). Если вам требуется документация для версии 2.1, пожалуйста, [свяжитесь с нами](https://dhtmlx.com/docs/contact.shtml), и мы её вышлем. +::: + +### Изменённый API {#changed-api} + +- getStyle -> [spreadsheet.getStyle](api/spreadsheet_getstyle_method.md) - возвращает стили, применённые к ячейке(ам) +- getValue -> [spreadsheet.getValue](api/spreadsheet_getvalue_method.md) - возвращает объект со значением(ями) ячейки(ек) +- setStyle -> [spreadsheet.setStyle](api/spreadsheet_setstyle_method.md) - задаёт стиль для ячейки или диапазона ячеек +- setValue -> [spreadsheet.setValue](api/spreadsheet_setvalue_method.md) - задаёт значение для ячейки или диапазона ячеек +- lock -> [spreadsheet.lock](api/spreadsheet_lock_method.md) - блокирует ячейку или диапазон ячеек +- unlock -> [spreadsheet.unlock](api/spreadsheet_unlock_method.md) - разблокирует заблокированную ячейку или диапазон ячеек + +### Удалённый API {#removed-api} + +#### Класс Spreadsheet {#spreadsheet-class} + +- getCell +- getCells +- isCell +- setSheetId + +#### SpreadsheetCell {#spreadsheetcell} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting.md b/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting.md new file mode 100644 index 00000000..92fb63d1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting.md @@ -0,0 +1,204 @@ +--- +sidebar_label: Форматирование чисел +title: Форматирование чисел +description: Вы можете изучить руководство разработчика по форматированию чисел в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Форматирование чисел {#number-formatting} + +DHTMLX Spreadsheet поддерживает форматирование чисел, которое можно применять к числовым значениям в ячейках. + +![Выпадающий список форматов чисел в DHTMLX Spreadsheet с вариантами Common, Number, Currency, Percent, Date, Time и Text](/img/number_format_options.png) + +:::note +[Руководство пользователя](number_formatting_guide.md) поможет вашим пользователям легко работать со Spreadsheet. +::: + +## Форматы чисел по умолчанию {#default-number-formats} + +Формат числа — это объект, включающий набор свойств: + +- `id` — идентификатор формата, используемый для задания формата ячейки методом [`setFormat()`](api/spreadsheet_setformat_method.md) +- `mask` — маска числового формата. Список доступных в маске символов приведён [ниже](#the-structure-of-a-mask) +- `name` — название формата, отображаемое в выпадающих списках панели инструментов и меню +- `example` — пример того, как выглядит отформатированное число. По умолчанию для примеров форматов используется число 2702.31 + +Форматы чисел по умолчанию: + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // depending on the localization.timeFormat config + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" }, + { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" } +]; +~~~ + +Вот как выглядит таблица с данными в различных числовых форматах: + + + +## Формат даты {#date-format} + +Формат отображения дат в таблице можно задать с помощью опции `dateFormat` свойства [`localization`](api/spreadsheet_localization_config.md). Формат по умолчанию — `"%d/%m/%Y"`. + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + dateFormat: "%D/%M/%Y", + } +}); + +spreadsheet.parse({ + styles: { + // a set of styles + }, + data: [ + {cell: "B1", value: "03/10/2022", format: "date"}, + {cell: "B2", value: new Date(), format: "date"}, + ] +}); +~~~ + +Ознакомьтесь с [полным списком доступных символов для создания форматов](api/spreadsheet_localization_config.md#characters-for-setting-date-format). + +## Формат времени {#time-format} + +Чтобы задать формат отображения времени в ячейках таблицы, используйте опцию `timeFormat` свойства [`localization`](api/spreadsheet_localization_config.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + timeFormat: 24, + } +}); + +spreadsheet.parse({ + styles: { + // a set of styles + }, + data: [ + { cell: "A1", value: "18:30", format: "time" }, + { cell: "A2", value: 44550.5625, format: "time" }, + { cell: "A3", value: new Date(), format: "time" }, + ] +}); +~~~ + +## Локализация числа, даты, времени, валюты {#number-date-time-currency-localization} + +С помощью параметров конфигурации Spreadsheet можно локализовать время и дату, указать нужный знак валюты, а также задать желаемые разделители десятичной части и тысяч. Все эти настройки доступны в свойстве [`localization`](api/spreadsheet_localization_config.md). Это объект со следующими свойствами: + +- `decimal` — (необязательный) символ, используемый в качестве десятичного разделителя, по умолчанию `"."` (точка)
Возможные значения: `"." | ","` +- `thousands` — (необязательный) символ, используемый в качестве разделителя тысяч, по умолчанию `","` (запятая)
Возможные значения: `"." | "," | " " | ""` +- `currency` — (необязательный) знак валюты, по умолчанию `"$"` +- `dateFormat` — (необязательный) формат отображения дат в виде строки, по умолчанию `"%d/%m/%Y"`. Подробнее на странице API [`localization`](api/spreadsheet_localization_config.md) +- `timeFormat` — (необязательный) формат отображения времени: `12` или `24`, по умолчанию `12` + +Например, настройки локализации по умолчанию можно изменить следующим образом: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +Вот результат настройки объекта `localization` для Spreadsheet: + + + +## Научный числовой формат {#scientific-number-format} + +Научная (экспоненциальная) запись доступна как формат по умолчанию и удобна для краткого представления очень больших или очень маленьких чисел. Встроенный формат `"scientific"` использует маску `0.00E+00`, которая отображает, например, 1500.31 как `1.50E+03`. + +Чтобы применить его к ячейке, используйте метод [`setFormat()`](api/spreadsheet_setformat_method.md): + +~~~jsx +spreadsheet.setFormat("A1", "scientific"); +~~~ + +Также можно задать пользовательский научный формат с другой маской через параметр конфигурации [`formats`](api/spreadsheet_formats_config.md). Например, маска `0.###E+0` даёт более компактный результат: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + formats: [ + { id: "scientific_compact", mask: "0.###E+0", name: "Scientific (compact)", example: "1.5E+3" } + ] +}); +~~~ + +## Настройка форматов {#formats-customization} + +Вы не ограничены [форматами чисел по умолчанию](#default-number-formats). Форматы можно настраивать двумя способами: + +- изменять настройки стандартных числовых форматов +- добавлять пользовательские числовые форматы в таблицу + + + +Все эти изменения выполняются с помощью параметра конфигурации [`formats`](api/spreadsheet_formats_config.md). Это массив объектов форматов, каждый из которых содержит набор свойств: + +- `id` — (*string*) обязательный, идентификатор формата, используемый для задания формата ячейки методом [`setFormat()`](api/spreadsheet_setformat_method.md) +- `mask` — (*string*) обязательный, маска числового формата. Список доступных в маске символов приведён [ниже](#the-structure-of-a-mask) +- `name` — (*string*) необязательный, название формата, отображаемое в выпадающих списках панели инструментов и меню +- `example` — (*string*) необязательный, пример того, как выглядит отформатированное число + +### Структура маски {#the-structure-of-a-mask} + +Маска может содержать набор стандартных синтаксических символов, включая заполнители цифр, разделители, знаки процента и валюты, допустимые символы: + +- **0** — цифра числа. Используется для отображения незначащих нулей, если цифр в числе меньше, чем нулей в формате. Например, чтобы отобразить 2 как 2.0, используйте формат 0.0. +- **#** — цифра числа. Используется для отображения только значащих цифр (незначащие нули будут опущены, если цифр в числе меньше, чем символов # в формате). +- **$** — форматирует числа как денежное значение в долларах. Чтобы использовать другой знак валюты, его нужно определить в маске как **[$ your_currency_sign]**#,##0.00, например, [$ €]#,##0.00. +{{note Обратите внимание, что все символы между [$ и ] будут интерпретированы как знак валюты.}} +- **.(точка)** — добавляет десятичную точку к числам. +- **,(запятая)** — добавляет разделитель тысяч к числам. +- **[символы для задания формата даты](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/)** — используются для создания маски даты и времени. Например, чтобы отобразить 27.09.2023 как 27, Sep 2023, используйте формат `"%d, %M %Y"`. +- **E+ / E-** — форматирует числа в научной (экспоненциальной) записи. Цифры после `E` задают минимальное количество разрядов показателя степени. `E+` всегда показывает знак показателя; `E-` показывает его только для отрицательных показателей. Например, маска `0.00E+00` отображает 1500.31 как `1.50E+03`. + +## Установка формата {#setting-format} + +Чтобы применить нужный формат к числовому значению, используйте метод [`setFormat()`](api/spreadsheet_setformat_method.md). Он принимает два параметра: + +- `cell` — (*string*) идентификатор ячейки, значение которой нужно отформатировать +- `format` — (*string*) название [стандартного числового формата](#default-number-formats), применяемого к значению ячейки + +Например: + +~~~jsx +// применяет процентный формат к ячейке A1 +spreadsheet.setFormat("A1","percent"); +~~~ + +## Получение формата {#getting-format} + +Числовой формат, применённый к значению ячейки, можно получить методом [`getFormat()`](api/spreadsheet_getformat_method.md). Метод принимает идентификатор ячейки в качестве параметра. + +~~~jsx +var format = spreadsheet.getFormat("A1"); +// ->"percent" +~~~ + +## События {#events} + +Для контроля изменений формата ячейки можно использовать пару событий: + +- [`beforeAction`](api/spreadsheet_beforeaction_event.md) — срабатывает перед выполнением действия `setCellFormat` +- [`afterAction`](api/spreadsheet_afteraction_event.md) — срабатывает после выполнения действия `setCellFormat` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting_guide.md b/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting_guide.md new file mode 100644 index 00000000..f81917aa --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/number_formatting_guide.md @@ -0,0 +1,61 @@ +--- +sidebar_label: Форматирование чисел +title: Руководство по форматированию чисел +description: Вы можете изучить руководство пользователя по форматированию чисел в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Форматирование чисел {#number-formatting} + +## Поддерживаемые числовые форматы {#supported-number-formats} + +К значениям ячеек можно применять несколько числовых форматов: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Commonчисла отображаются как есть, без форматирования
Numberчисла отображаются с разделением десятков, сотен и тысяч заданными разделителями
Currencyчисла отображаются со знаком валюты ($)
Percentчисла отображаются со знаком процента (%)
Dateчисла отображаются как даты в заданном формате
Timeчисла отображаются как время в 12- или 24-часовом формате
Textчисла отображаются как текст в точности так, как вы их ввели
Scientificчисла отображаются в экспоненциальной записи (например, 1.50E+03 для 1500.31); удобно для очень больших или очень маленьких чисел
+ +## Как установить формат {#how-to-set-format} + +Выполните следующие шаги, чтобы применить нужный числовой формат к данным Spreadsheet через панель инструментов: + +- Выберите ячейку или несколько ячеек, которые нужно отформатировать. +- Нажмите кнопку **Number format**: + +![Панель инструментов DHTMLX Spreadsheet с кнопкой Number format для применения числового форматирования](/img/number_format_button.png) + +- Выберите нужный формат среди предложенных вариантов: + +![Выпадающий список форматов чисел в DHTMLX Spreadsheet с вариантами Common, Number, Currency, Percent, Date, Time и Text](/img/number_format_options.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/events.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/events.md new file mode 100644 index 00000000..89166118 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/events.md @@ -0,0 +1,219 @@ +--- +sidebar_label: События +title: Справочник событий +description: "Пропсы-колбэки событий для ReactSpreadsheet: действия, выделение, редактирование, листы и производные состояния." +--- + +# Справочник событий {#events-reference} + +Все колбэки событий являются необязательными пропсами. Колбэки «Before» могут вернуть `false` для отмены операции. + +:::note +React-обёртка использует имена пропсов в формате `onCamelCase` (например, `onAfterAction`), тогда как JS API Spreadsheet использует имена событий в формате `camelCase` на event bus (например, `afterAction`). Смотрите [Справочник событий JS API](api/overview/events_overview.md) для императивного API. +::: + +## События действий {#action-events} + +Срабатывают при любом действии пользователя, например при редактировании ячеек, форматировании или структурных изменениях. + +| Пропс | Отменяемое | Описание | +|------|:-----------:|-------------| +| `onBeforeAction` | Да | Срабатывает перед выполнением любого действия пользователя. Вернуть `false` для отмены. Обработчик: [`BeforeActionHandler`](react/types.md#handler-type-aliases). JS API: [`beforeAction`](api/spreadsheet_beforeaction_event.md). | +| `onAfterAction` | Нет | Срабатывает после завершения любого действия пользователя. Обработчик: [`AfterActionHandler`](react/types.md#handler-type-aliases). JS API: [`afterAction`](api/spreadsheet_afteraction_event.md). | + +**Пример: Блокировка удаления строк** + +~~~tsx +import { Actions } from "@dhtmlx/trial-react-spreadsheet"; + + { + if (action === Actions.deleteRow) return false; + }} +/> +~~~ + +**Пример: Запись всех действий пользователя** + +~~~tsx + { + console.log("Action:", action, "Cell:", config.cell); + }} +/> +~~~ + +## События выделения {#selection-events} + +Срабатывают при изменении выделения или фокуса ячейки. + +| Пропс | Отменяемое | Описание | +|------|:-----------:|-------------| +| `onBeforeSelectionSet` | Да | Срабатывает перед добавлением ячейки в выделение. Обработчик: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSelectionSet`](api/spreadsheet_beforeselectionset_event.md). | +| `onAfterSelectionSet` | Нет | Срабатывает после добавления ячейки в выделение. Обработчик: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterSelectionSet`](api/spreadsheet_afterselectionset_event.md). | +| `onBeforeSelectionRemove` | Да | Срабатывает перед удалением ячейки из выделения. Обработчик: [`BeforeCellHandler`](react/types.md#handler-type-aliases). | +| `onAfterSelectionRemove` | Нет | Срабатывает после удаления ячейки из выделения. Обработчик: [`AfterCellHandler`](react/types.md#handler-type-aliases). | +| `onBeforeFocusSet` | Да | Срабатывает перед изменением активной ячейки. Обработчик: [`BeforeCellHandler`](react/types.md#handler-type-aliases). JS API: [`beforeFocusSet`](api/spreadsheet_beforefocusset_event.md). | +| `onAfterFocusSet` | Нет | Срабатывает после изменения активной ячейки. Обработчик: [`AfterCellHandler`](react/types.md#handler-type-aliases). JS API: [`afterFocusSet`](api/spreadsheet_afterfocusset_event.md). | + +**Пример: Отслеживание выбранной ячейки** + +~~~tsx +const [selectedCell, setSelectedCell] = useState(""); + + setSelectedCell(cell)} +/> + +

Current cell: {selectedCell}

+~~~ + +## События редактирования {#edit-events} + +Срабатывают при начале или завершении редактирования ячейки. + +| Пропс | Отменяемое | Описание | +|------|:-----------:|-------------| +| `onBeforeEditStart` | Да | Срабатывает перед началом редактирования ячейки. Обработчик: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditStart`](api/spreadsheet_beforeeditstart_event.md). | +| `onAfterEditStart` | Нет | Срабатывает после начала редактирования ячейки. Обработчик: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditStart`](api/spreadsheet_aftereditstart_event.md). | +| `onBeforeEditEnd` | Да | Срабатывает перед завершением редактирования ячейки. Вернуть `false` для отмены и продолжения редактирования. Обработчик: [`BeforeEditHandler`](react/types.md#handler-type-aliases). JS API: [`beforeEditEnd`](api/spreadsheet_beforeeditend_event.md). | +| `onAfterEditEnd` | Нет | Срабатывает после завершения редактирования ячейки и сохранения значения. Обработчик: [`AfterEditHandler`](react/types.md#handler-type-aliases). JS API: [`afterEditEnd`](api/spreadsheet_aftereditend_event.md). | + +**Пример: Валидация перед сохранением** + +~~~tsx + { + if (cell.startsWith("B") && isNaN(Number(value))) { + return false; // Отмена: столбец B должен содержать числа + } + }} +/> +~~~ + +## События листов {#sheet-events} + +Срабатывают при смене активной вкладки листа. + +| Пропс | Отменяемое | Описание | +|------|:-----------:|-------------| +| `onBeforeSheetChange` | Да | Срабатывает перед сменой активного листа. Обработчик: [`BeforeSheetHandler`](react/types.md#handler-type-aliases). JS API: [`beforeSheetChange`](api/spreadsheet_beforesheetchange_event.md). | +| `onAfterSheetChange` | Нет | Срабатывает после смены активного листа. Обработчик: [`AfterSheetHandler`](react/types.md#handler-type-aliases). JS API: [`afterSheetChange`](api/spreadsheet_aftersheetchange_event.md). | + +**Пример: Отслеживание активного листа** + +~~~tsx + { + console.log("Switched to sheet:", sheet.name); + }} +/> +~~~ + +## События данных {#data-events} + +Срабатывают при загрузке данных таблицы. + +| Пропс | Описание | +|------|-------------| +| `onAfterDataLoaded` | Срабатывает после завершения загрузки данных (через `sheets` или `loadUrl`). JS API: [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md). | + +**Пример: Отображение состояния загрузки** + +~~~tsx +const [loading, setLoading] = useState(true); + + setLoading(false)} +/> +~~~ + +## События ввода {#input-events} + +Срабатывают при вводе пользователя в ячейках или строке формул. + +| Пропс | Описание | +|------|-------------| +| `onGroupFill` | Срабатывает при операциях автозаполнения (перетаскивание). Обработчик: `(focusedCell: string, selectedCell: string) => void`. JS API: [`groupFill`](api/spreadsheet_groupfill_event.md). | +| `onEditLineInput` | Срабатывает при вводе в строку формул/редактирования. Обработчик: `(value: string) => void`. | +| `onCellInput` | Срабатывает при вводе в ячейку во время редактирования. Обработчик: `(cell: string, value: string) => void`. | + +## Колбэки производных состояний {#derived-state-callbacks} + +Эти колбэки уведомляют об изменениях вычисленных состояний, а не о прямых действиях пользователя. + +| Пропс | Описание | +|------|-------------| +| `onStateChange` | Уведомляет об изменении доступности отмены/повтора. Обработчик: `(state: { canUndo: boolean; canRedo: boolean }) => void`. | +| `onSearchResults` | Уведомляет со ссылками на совпадающие ячейки, когда активен пропс `search`. Обработчик: `(cells: string[]) => void`. | +| `onFilterChange` | Уведомляет при изменении пользователем фильтров через интерфейс. Обработчик: `(filter: SheetFilter) => void`. | + +**Пример: Кнопки отмены/повтора** + +~~~tsx +import { useRef, useState } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + return ( + <> + + + + + ); +} +~~~ + +**Пример: Управляемый поиск с результатами** + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +**Пример: Синхронизация состояния фильтра** + +~~~tsx +const [activeFilter, setActiveFilter] = useState(null); + + setActiveFilter(filter)} +/> +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/index.md new file mode 100644 index 00000000..9a808867 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/index.md @@ -0,0 +1,45 @@ +--- +sidebar_label: React Spreadsheet +title: React Spreadsheet +description: "Установка, настройка и использование DHTMLX Spreadsheet в React с официальной декларативной обёрткой." +--- + +# React Spreadsheet + +Официальная декларативная React-обёртка для DHTMLX Spreadsheet. Создавайте интерфейсы таблиц с компонентным API: передавайте данные через пропсы, реагируйте на изменения через колбэки событий и при необходимости обращайтесь к базовому виджету через ref. + +## Начало работы {#get-started} + +- [Установка](react/installation.md) - установка ознакомительного или коммерческого пакета +- [Быстрый старт](react/quick-start.md) - создание первого приложения с таблицей шаг за шагом +- [Онлайн-примеры](https://dhtmlx.com/react/demos/spreadsheet/) - просмотр живых демо функций React Spreadsheet + +:::info +Вы также можете изучить [демо-репозиторий на GitHub](https://github.com/DHTMLX/react-spreadsheet-examples) с полным рабочим примером. +::: + +## Справочник API {#api-reference} + +- [Справочник пропсов](react/props.md) - все пропсы компонента с типами и значениями по умолчанию +- [Справочник событий](react/events.md) - пропсы колбэков событий, сгруппированные по категориям +- [Справочник типов](react/types.md) - TypeScript-интерфейсы, перечисления и псевдонимы типов + +## Модель данных {#data-model} + +Пропс [`sheets`](react/props.md#data-props) является единственным источником истины для всех данных таблицы. Каждый лист представляет собой объект [`SheetData`](react/types.md#sheetdata), содержащий ячейки, конфигурацию строк/столбцов, объединённые диапазоны, закреплённые области, фильтры и сортировку. + +## Управление состоянием {#state-management} + +Узнайте, как синхронизировать данные таблицы с состоянием вашего приложения: + +- [Основы управления состоянием](react/state/state-management-basics.md) - управляемые пропсы, колбэки событий, запасной выход через ref +- [Redux toolkit](react/state/redux-toolkit.md) - пошаговое руководство по интеграции + +## Интеграции с фреймворками {#framework-integrations} + +- [Next.js](react/nextjs.md) - использование React Spreadsheet с App Router в Next.js + +## Темы и локализация {#theming-and-localization} + +- [Темы](react/themes.md) - встроенные темы и переопределение CSS +- [Локализация](react/localization.md) - переводы интерфейса и форматирование чисел/дат diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/installation.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/installation.md new file mode 100644 index 00000000..3c5cf737 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/installation.md @@ -0,0 +1,84 @@ +--- +sidebar_label: Установка +title: Установка React Spreadsheet +description: "Как установить ознакомительную или коммерческую версию DHTMLX React Spreadsheet через npm." +--- + +# Установка React Spreadsheet {#react-spreadsheet-installation} + +React Spreadsheet распространяется как npm-пакет в трёх вариантах: публичная ознакомительная сборка, приватная ознакомительная сборка и коммерческий релиз. На этой странице описано, как установить каждый вариант, подключить необходимую CSS-таблицу стилей и настроить поддержку TypeScript. + +:::info Предварительные требования +- [Node.js](https://nodejs.org/en/) (рекомендуется LTS-версия) +- React 18 или новее +::: + +## Ознакомительная версия (публичный npm) {#evaluation-version-public-npm} + +Ознакомительный пакет доступен в публичном реестре npm без дополнительной настройки. Включает бесплатный 30-дневный ознакомительный период. + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +или через yarn: + +~~~bash +yarn add @dhtmlx/trial-react-spreadsheet +~~~ + +## Ознакомительная версия (приватный npm) {#evaluation-version-private-npm} + +Ознакомительная версия находится в приватном реестре DHTMLX. Сначала настройте проект: + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +Затем установите: + +~~~bash +npm install @dhx/trial-react-spreadsheet +~~~ + +## Коммерческая версия (приватный npm) {#commercial-version-private-npm} + +Коммерческая версия использует тот же приватный реестр. Войдите в свой аккаунт в [Клиентской зоне](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses), чтобы получить учётные данные. + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +~~~bash +npm install @dhx/react-spreadsheet +~~~ + +## Варианты пакетов {#package-variants} + +| Вариант | Имя пакета | Реестр | +|---------|-------------|----------| +| Ознакомительный (публичный npm) | `@dhtmlx/trial-react-spreadsheet` | npmjs.org (публичный) | +| Ознакомительный (приватный npm) | `@dhx/trial-react-spreadsheet` | npm.dhtmlx.com (приватный) | +| Коммерческий | `@dhx/react-spreadsheet` | npm.dhtmlx.com (приватный) | + +## Подключение CSS {#css-import} + +Подключите таблицу стилей в точке входа вашего приложения или в компоненте: + +~~~tsx +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +Для коммерческой версии: + +~~~tsx +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +## TypeScript {#typescript} + +Определения типов TypeScript включены в пакет. Дополнительный пакет `@types/` не требуется. + +## Следующие шаги {#next-steps} + +- [Быстрый старт](react/quick-start.md) - создание первого приложения с таблицей шаг за шагом diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/localization.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/localization.md new file mode 100644 index 00000000..0baf3f8c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/localization.md @@ -0,0 +1,75 @@ +--- +sidebar_label: Локализация +title: Локализация React Spreadsheet +description: "Локализация меток интерфейса, названий формул и форматирования чисел/дат в React Spreadsheet." +--- + +# Локализация React Spreadsheet {#react-spreadsheet-localization} + +React Spreadsheet имеет два отдельных механизма локализации для различных аспектов интерфейса. + +## Два механизма локализации {#two-localization-mechanisms} + +| Механизм | Пропс | Что контролирует | +|-----------|------|-----------------| +| Локализация интерфейса | `spreadsheetLocale` | Метки меню, подсказки панели инструментов, текст диалогов и локализованные имена формул | +| Форматирование чисел/дат | `localization` | Разделитель дробной части, символ валюты, формат отображения даты/времени | + +Эти пропсы независимы: можно использовать один или оба. + +## Локализация интерфейса (spreadsheetLocale) {#ui-localization-spreadsheetlocale} + +Пропс `spreadsheetLocale` принимает объект [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) с двумя свойствами: + +- `locale` - `Record` с переопределениями строк интерфейса +- `formulas` - `Record` с локализованными именами формул, сгруппированными по категориям + +~~~tsx +const locale: SpreadsheetLocale = { + locale: { + "File": "Datei", + "Edit": "Bearbeiten", + "Insert": "Einfügen", + "Undo": "Rückgängig", + "Redo": "Wiederherstellen", + // ... другие строки интерфейса + }, + formulas: { + "MATCH": [ + ["Suchwert", "Erforderlich. Der Wert, der im Sucharray abgeglichen werden soll."], + ["Sucharray", "Erforderlich. Ein Zellbereich oder ein Array-Bezug."], + ], + // ... другие категории формул + }, +}; + + +~~~ + +:::warning +`spreadsheetLocale` — это пропс только для инициализации. Изменение его после первоначального рендера приводит к уничтожению и пересозданию виджета. История отмены/повтора и состояние интерфейса (выделение, позиция прокрутки) сбрасываются. +::: + +## Форматирование чисел/дат (localization) {#numberdate-formatting-localization} + +Пропс `localization` управляет отображением чисел и дат: разделителями дробной части, символами валют и шаблонами дат. Использует тот же формат, что и свойство конфигурации [`localization`](api/spreadsheet_localization_config.md) DHTMLX Spreadsheet. + +~~~tsx + +~~~ + +:::warning +`localization` также является пропсом только для инициализации. Изменения запускают полный цикл уничтожения/пересоздания. +::: + +## Связанные API и гайды {#related-api-and-guides} + +- [Локализация](localization.md) - руководство по локализации DHTMLX Spreadsheet +- [Тип SpreadsheetLocale](react/types.md#spreadsheetlocale) - справочник TypeScript-интерфейса diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/nextjs.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/nextjs.md new file mode 100644 index 00000000..3715a082 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/nextjs.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Next.js +title: React Spreadsheet в Next.js +description: "Как использовать DHTMLX React Spreadsheet в приложении Next.js с App Router." +--- + +# React Spreadsheet в Next.js {#react-spreadsheet-in-nextjs} + +DHTMLX Spreadsheet — это клиентский виджет, которому требуется доступ к DOM браузера. В Next.js с App Router серверные компоненты используются по умолчанию, поэтому необходимо обернуть таблицу в клиентский компонент с директивой `"use client"`. + +:::note +JS-вывод обёртки React Spreadsheet уже включает баннер `"use client"`, но директива всё равно нужна в вашем собственном файле компонента, который её импортирует. +::: + +## Настройка {#setup} + +Создайте новый проект Next.js и установите React Spreadsheet: + +~~~bash +npx create-next-app@latest my-spreadsheet-app +cd my-spreadsheet-app +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +## Создание клиентского компонента {#creating-a-client-component} + +Создайте новый файл для компонента таблицы с директивой `"use client"`: + +~~~tsx title="src/components/SpreadsheetView.tsx" +"use client"; + +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +const initialSheets: SheetData[] = [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Name", css: "bold" }, + B1: { value: "Value", css: "bold" }, + A2: { value: "Item 1" }, + B2: { value: 100 }, + }, + }, +]; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +export default function SpreadsheetView() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} +~~~ + +## Подключение CSS {#css-import} + +Подключите CSS-файл непосредственно в клиентском компоненте (как показано выше) или в корневом макете: + +~~~tsx title="src/app/layout.tsx" +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +## Размеры контейнера {#container-sizing} + +Убедитесь, что контейнер имеет явные размеры. Для таблицы на весь экран добавьте эти стили в глобальный CSS: + +~~~css title="src/app/globals.css" +html, +body { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## Полный пример {#complete-example} + +Используйте клиентский компонент на серверной странице: + +~~~tsx title="src/app/page.tsx" +import SpreadsheetView from "@/components/SpreadsheetView"; + +export default function Home() { + return ; +} +~~~ + +## Связанные API и гайды {#related-api-and-guides} + +- [Справочник пропсов](react/props.md) - все пропсы компонента с типами и значениями по умолчанию +- [Справочник событий](react/events.md) - реагирование на действия пользователя +- [Основы управления состоянием](react/state/state-management-basics.md) - управление данными таблицы в состоянии React diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/overview.md new file mode 100644 index 00000000..57f138eb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/overview.md @@ -0,0 +1,207 @@ +--- +sidebar_label: Обзор +title: Обзор React Spreadsheet +description: "Обзор официальной React-обёртки: декларативная модель данных, пропсы, темы, события и доступ через ref." +--- + +# Обзор React Spreadsheet {#react-spreadsheet-overview} + +`ReactSpreadsheet` — это декларативная React-обёртка для виджета DHTMLX Spreadsheet. Предоставляет компонентный API, где пропсы описывают состояние таблицы, а обёртка обрабатывает синхронизацию с базовым виджетом. + +:::note +React-обёртка Spreadsheet доступна по лицензиям DHTMLX Spreadsheet **Commercial**, **Enterprise** и **Ultimate**. Для ознакомления используйте бесплатный 30-дневный ознакомительный пакет. Смотрите [Установку](react/installation.md) для инструкций по настройке. +::: + +## Возможности таблицы {#spreadsheet-features} + +React-обёртка предоставляет доступ ко всем функциям DHTMLX Spreadsheet: + +- Многолистовые таблицы со вкладками листов (добавление, удаление, переименование) +- Значения ячеек, формулы (90+ встроенных функций) и форматирование чисел +- Стилизация ячеек, объединение ячеек, закреплённые области, валидация данных +- Сортировка, фильтрация и поиск +- Операции со строками/столбцами (добавление, удаление, скрытие/отображение, изменение размера, автоподбор) +- Импорт и экспорт Excel (XLSX) через модули WebAssembly +- Настраиваемые панель инструментов и контекстное меню +- Блокировка ячеек и режим только для чтения +- 4 встроенные темы (светлая, тёмная, контрастно-светлая, контрастно-тёмная) с настройкой через CSS-переменные +- Локализация меток интерфейса, названий формул и форматирования чисел/дат +- История отмены/повтора +- Поддержка TypeScript со встроенными определениями типов и JSDoc-описаниями + +## Принципы проектирования обёртки {#wrapper-design-principles} + +- **Пропсы описывают состояние, а не действия.** Нет «триггерных» пропсов. Передавайте данные, и компонент обновит виджет соответствующим образом. +- **`sheets` является единственным источником истины** для всех данных таблицы: ячейки, объединённые диапазоны, закреплённые области, фильтры, сортировка. +- **Ref — это запасной выход.** Для операций, которые не отображаются в декларативные пропсы (экспорт, программное выделение, отмена/повтор), обращайтесь к экземпляру базового виджета через ref. +- **Все события виджета представлены как типизированные пропсы-колбэки `onXxx`.** Колбэки «Before» могут вернуть `false` для отмены операции. + +## Требования к версиям {#version-requirements} + +- React 18+ +- Пакет только для ESM + +## Быстрый старт {#quick-start} + +Минимальный рабочий пример, показывающий, как отрендерить таблицу с одним листом и отформатированными ячейками. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + }, + }, + ]); + + const styles = { + bold: { "font-weight": "bold" }, + }; + + return ; +} +~~~ + +## Пути импорта {#import-paths} + +**Ознакомительная версия** (публичный npm, бесплатная 30-дневная оценка): + +~~~tsx +import { ReactSpreadsheet } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +**Коммерческая версия** (приватный npm, требуется лицензия): + +~~~tsx +import { ReactSpreadsheet } from "@dhx/react-spreadsheet"; +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +Смотрите [Установку](react/installation.md) для настройки реестра и всех доступных вариантов пакетов. + +## Поведение при обновлении пропсов {#prop-update-behavior} + +Пропсы категоризируются по тому, как компонент обрабатывает изменения: + +| Категория | Пропсы | Что происходит при изменении | +|----------|-------|----------------------| +| **Только для инициализации** | `menu`, `editLine`, `toolbarBlocks`, `multiSheets`, `formats`, `localization`, `importModulePath`, `exportModulePath`, `spreadsheetLocale` | Виджет уничтожается и пересоздаётся. Данные таблицы сохраняются, но история отмены/повтора и состояние интерфейса (выделение, позиция прокрутки) сбрасываются. | +| **Во время выполнения** | `readonly`, `rowsCount`, `colsCount` | Применяются немедленно без потери данных или сброса состояния интерфейса. | +| **Данные** | `sheets`, `activeSheet` | Применяются инкрементально; обновляются только изменённые ячейки, диапазоны или настройки. | +| **Повторная обработка** | `styles` | Изменения стилей требуют полной перезагрузки данных. Данные таблицы сохраняются, но история отмены/повтора и состояние интерфейса сбрасываются. | +| **Состояние** | `search`, `theme`, `loadUrl` | Применяются через специализированные API виджета без побочных эффектов. | +| **Контейнер** | `className`, `style` | Стандартные React DOM-пропсы на оборачивающем `
`. | + +## Примеры {#examples} + +### Несколько листов с формулами {#multi-sheet-with-formulas} + +Два листа со значениями ячеек и формулой `SUM`, отрендеренные с включёнными вкладками листов. + +~~~tsx +const [sheets] = useState([ + { + id: "revenue", + name: "Revenue", + cells: { + A1: { value: "Q1" }, B1: { value: "Q2" }, C1: { value: "Q3" }, D1: { value: "Q4" }, + A2: { value: 12000 }, B2: { value: 15000 }, C2: { value: 18000 }, D2: { value: 21000 }, + A3: { value: "Total" }, B3: { value: "=SUM(A2:D2)", format: "currency" }, + }, + }, + { + id: "expenses", + name: "Expenses", + cells: { + A1: { value: "Category" }, B1: { value: "Amount", format: "currency" }, + A2: { value: "Marketing" }, B2: { value: 5000, format: "currency" }, + A3: { value: "Operations" }, B3: { value: 8000, format: "currency" }, + }, + }, +]); + + +~~~ + +### Настройка панели инструментов {#custom-toolbar} + +Передайте массив идентификаторов блоков в `toolbarBlocks`, чтобы отображать только нужные разделы панели инструментов. + +~~~tsx + +~~~ + +### Режим только для чтения с заблокированными ячейками {#read-only-with-locked-cells} + +Установите `readonly={true}`, чтобы отключить все редактирование на уровне виджета. Добавление `locked: true` на ячейки защищает их индивидуально, когда таблица не находится в режиме только для чтения. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Report", + cells: { + A1: { value: "Metric", locked: true }, + B1: { value: "Value", locked: true }, + A2: { value: "Revenue", locked: true }, + B2: { value: 50000, format: "currency", locked: true }, + }, + }, +]; + + +~~~ + +## Императивный доступ через ref {#imperative-access-via-ref} + +Используйте `SpreadsheetRef` для доступа к экземпляру базового виджета для операций, которые не отображаются в декларативные пропсы, например сериализация данных, запуск отмены/повтора или программная установка выделения. + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + + const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); + }; + + const handleUndo = () => { + ref.current?.instance?.undo(); + }; + + return ( + <> + + + + + ); +} +~~~ + +Свойство `instance` равно `null` до инициализации виджета и после его размонтирования. + +## Справочник API {#api-reference} + +| Документ | Содержание | +|----------|----------| +| [Справочник пропсов](react/props.md) | Все пропсы компонента с типами, значениями по умолчанию и примерами | +| [Справочник событий](react/events.md) | Пропсы колбэков событий, сгруппированные по категориям | +| [Справочник типов](react/types.md) | TypeScript-интерфейсы, перечисления и псевдонимы типов | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/props.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/props.md new file mode 100644 index 00000000..41bd20a5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/props.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Пропсы +title: Справочник пропсов +description: "Полный справочник всех пропсов компонента ReactSpreadsheet с типами и примерами." +--- + +# Справочник пропсов {#props-reference} + +Все пропсы необязательны. Компонент рендерит пустую таблицу с настройками по умолчанию, если пропсы не переданы. + +## Пропсы только для инициализации {#init-only-props} + +Изменение любого из этих пропсов приводит к уничтожению и пересозданию виджета. Данные таблицы сохраняются, но история отмены/повтора и состояние интерфейса (выделение, позиция прокрутки) сбрасываются. + +
+ +| Пропс | Тип | Описание | +|------|------|-------------| +| `menu` | `boolean` | Показывать контекстное меню. JS API: [`menu`](api/spreadsheet_menu_config.md). | +| `editLine` | `boolean` | Показывать строку формул/редактирования над сеткой. JS API: [`editLine`](api/spreadsheet_editline_config.md). | +| `toolbarBlocks` | `ToolbarBlocks[]` | Блоки панели инструментов для отображения. JS API: [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md). | +| `multiSheets` | `boolean` | Включить несколько вкладок листов. JS API: [`multisheets`](api/spreadsheet_multisheets_config.md). | +| `formats` | `IFormats[]` | Определения пользовательских числовых форматов. JS API: [`formats`](api/spreadsheet_formats_config.md). | +| `localization` | `ISpreadsheetConfig["localization"]` | Локаль форматирования чисел/дат, например разделитель дробной части и символ валюты. Отдельно от `spreadsheetLocale`. JS API: [`localization`](api/spreadsheet_localization_config.md). | +| `importModulePath` | `string` | Путь к модулю импорта XLSX. JS API: [`importModulePath`](api/spreadsheet_importmodulepath_config.md). | +| `exportModulePath` | `string` | Путь к модулю экспорта XLSX. JS API: [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md). | +| `spreadsheetLocale` | [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) | Переводы интерфейса и локализованные имена формул. Отдельно от `localization`. | + +
+ +:::warning +Изменение любого пропса только для инициализации запускает полный цикл уничтожения/пересоздания. История отмены/повтора, выделение и позиция прокрутки будут сброшены. +::: + +## Пропсы во время выполнения {#runtime-props} + +Эти пропсы применяются немедленно без уничтожения виджета. Данные не теряются, состояние интерфейса не сбрасывается. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `rowsCount` | `number` | Количество строк в сетке. JS API: [`rowsCount`](api/spreadsheet_rowscount_config.md). | +| `colsCount` | `number` | Количество столбцов в сетке. JS API: [`colsCount`](api/spreadsheet_colscount_config.md). | +| `readonly` | `boolean` | Включить режим только для чтения. JS API: [`readonly`](api/spreadsheet_readonly_config.md). | + +## Пропсы данных {#data-props} + +Пропс `sheets` является единственным источником истины для всего содержимого таблицы. Изменения применяются инкрементально: в виджете обновляются только изменённые ячейки, диапазоны или настройки. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `sheets` | [`SheetData[]`](react/types.md#sheetdata) | Единственный источник истины для всех данных таблицы. Каждый элемент представляет лист с его ячейками, структурой и метаданными. Изменения применяются инкрементально. | +| `styles` | `Record>` | Общие определения CSS-стилей, на которые ссылается `CellData.css`. Ключи — имена классов, значения — карты CSS-свойств. Смотрите [Пример стилей](#styles-example). | +| `activeSheet` | `Id` | Id активного (видимого) листа. Изменение этого пропса переключает отображаемую вкладку листа. | + +:::warning +Изменение `styles` запускает полную перезагрузку данных. Данные таблицы сохраняются, но история отмены/повтора и состояние интерфейса (выделение, позиция прокрутки) сбрасываются. +::: + +## Пропсы поиска {#search-props} + +Управляет состоянием строки поиска извне компонента. Используйте вместе с `onSearchResults` для создания пользовательского интерфейса поиска. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `search` | [`SearchConfig`](react/types.md#searchconfig) | Управляемое состояние поиска. Передайте объект `SearchConfig` для запуска/обновления поиска. Передайте `undefined` для закрытия строки поиска. | + +## Пропсы загрузки данных {#data-loading-props} + +Загрузка данных таблицы с удалённого URL вместо передачи через пропс `sheets`. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `loadUrl` | `string` | URL для загрузки данных таблицы. Если переданы и `loadUrl`, и `sheets`, приоритет имеет `sheets`. | +| `loadFormat` | `FileFormat` | Подсказка формата файла для `loadUrl`. По умолчанию: `"json"`. | + +## Пропс темы {#theme-prop} + +Управляет визуальной темой, применяемой к таблице. Поскольку `theme` — пропс во время выполнения, виджет обновляется немедленно при изменении значения. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `theme` | [`SpreadsheetTheme`](react/types.md#spreadsheettheme) | Цветовая тема. Встроенные значения: `"light"`, `"dark"`, `"contrast-light"`, `"contrast-dark"`. Также принимает строки с именами пользовательских тем. Смотрите [Темы](react/themes.md). | + +## Пропсы контейнера {#container-props} + +Стандартные React DOM-пропсы, применяемые к оборачивающему `
`, содержащему таблицу. Используйте их для управления размерами и компоновкой. + +| Пропс | Тип | Описание | +|------|------|-------------| +| `className` | `string` | Имя CSS-класса, добавляемое к оборачивающему `
`. | +| `style` | `React.CSSProperties` | Встроенные стили, применяемые к оборачивающему `
`. | + +--- + +## Примеры {#examples} + +### Листы с данными ячеек {#sheets-with-cell-data} + +Полный пример `SheetData` с ячейками, размерами строк и столбцов, объединёнными диапазонами и закреплённой строкой заголовка. + +~~~tsx +const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Budget", + cells: { + A1: { value: "Item", css: "header" }, + B1: { value: "Amount", css: "header", format: "currency" }, + A2: { value: "Rent" }, + B2: { value: 2000, format: "currency" }, + A3: { value: "=SUM(B2:B3)" }, + }, + rows: { 0: { height: 40 } }, + cols: { 0: { width: 150 }, 1: { width: 120 } }, + merged: [{ + from: { row: 0, column: 0 }, + to: { row: 0, column: 1 } + }], + freeze: { row: 1 }, + }, +]); + + +~~~ + +### Пример стилей {#styles-example} + +Определите именованные стили как карты CSS-свойств в пропсе `styles`, затем ссылайтесь на них по имени через `CellData.css`. + +~~~tsx +const styles = { + header: { + "font-weight": "bold", + "background": "#e3f2fd", + "color": "#1565c0", + }, + highlight: { + "background": "#ffeb3b", + "color": "#333", + }, +}; + + +~~~ + +### Настройка панели инструментов {#toolbar-customization} + +~~~tsx + +~~~ + +### Режим нескольких листов {#multi-sheet-mode} + +Включите вкладки листов с `multiSheets={true}`. Передайте `false`, чтобы полностью скрыть панель вкладок. + +~~~tsx + +~~~ + +~~~tsx + +~~~ + +### Импорт/экспорт Excel {#excel-importexport} + +~~~tsx + +~~~ + +Чтобы использовать конкретную версию, замените `next` на номер версии (смотрите репозитории GitHub [Excel2Json](https://github.com/dhtmlx/excel2json) и [Json2Excel](https://github.com/dhtmlx/json2excel)). + +### Европейское форматирование чисел {#european-number-formatting} + +~~~tsx + +~~~ + +### Управляемый поиск {#controlled-search} + +Передайте объект `SearchConfig`, чтобы программно открыть строку поиска. Используйте `onSearchResults` для получения ссылок на совпадающие ячейки. + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} /> + +

Found in: {results.join(", ")}

+ + +~~~ + +### Переключение темы {#theme-switching} + +~~~tsx +const [theme, setTheme] = useState("light"); + + + + +~~~ + +### Режим только для чтения {#read-only-mode} + +~~~tsx + +~~~ + +### Загрузка данных по URL {#loading-data-from-url} + +~~~tsx + +~~~ + +### Заблокированные ячейки {#locked-cells} + +Пометьте отдельные ячейки как нередактируемые с помощью `locked: true`. В отличие от `readonly`, это защищает конкретные ячейки, оставляя остальную часть листа редактируемой. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Protected", + cells: { + A1: { value: "Header", locked: true }, + A2: { value: "Editable" }, + }, + }, +]; + + +~~~ + +### Валидация ячеек {#cell-validation} + +Передайте массив строк в `CellData.validation`, чтобы ограничить ячейку выпадающим списком допустимых значений. + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Form", + cells: { + A1: { value: "Status" }, + B1: { validation: ["Active", "Inactive", "Pending"] }, + }, + }, +]; + + +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/quick-start.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/quick-start.md new file mode 100644 index 00000000..6ab7f6f2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/quick-start.md @@ -0,0 +1,107 @@ +--- +sidebar_label: Быстрый старт +title: Быстрый старт с React Spreadsheet +description: "Пошаговое руководство по отображению первого компонента DHTMLX React Spreadsheet." +--- + +# Быстрый старт с React Spreadsheet {#quick-start-with-react-spreadsheet} + +Это руководство поможет вам создать приложение на React с DHTMLX Spreadsheet с нуля. + +## Создание нового проекта {#create-a-new-project} + +~~~bash +npm create vite@latest my-spreadsheet-app -- --template react-ts +cd my-spreadsheet-app +~~~ + +## Установка React Spreadsheet {#install-react-spreadsheet} + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +Описание других вариантов пакетов см. в разделе [Установка](react/installation.md). + +## Создание демонстрационных данных {#create-demo-data} + +Создайте файл `src/data.ts` с примером данных для таблицы: + +~~~ts title="src/data.ts" +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +export const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + A3: { value: "Gadget" }, + B3: { value: 22000, format: "currency" }, + A4: { value: "Total" }, + B4: { value: "=SUM(B2:B3)", format: "currency" }, + }, + }, +]; + +export const styles = { + bold: { "font-weight": "bold" }, +}; +~~~ + +## Создание компонента {#create-the-component} + +Замените содержимое файла `src/App.tsx`: + +~~~tsx title="src/App.tsx" +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import { sheets as initialSheets, styles } from "./data"; + +function App() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## Добавление стилей {#add-styles} + +Обновите `src/index.css`, чтобы обеспечить полноэкранный макет: + +~~~css title="src/index.css" +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## Запуск приложения {#start-the-app} + +~~~bash +npm run dev +~~~ + +Откройте URL, указанный в терминале (обычно `http://localhost:5173`), чтобы увидеть таблицу. + +## Связанные API и гайды {#related-api-and-guides} + +- [Справочник пропсов](react/props.md) — настройка поведения таблицы +- [Справочник событий](react/events.md) — реакция на действия пользователя +- [Справочник типов](react/types.md) — интерфейсы и перечисления TypeScript +- [Управление данными и состоянием](react/state/state-management-basics.md) — управление данными таблицы в состоянии приложения + +Также можно изучить [демонстрационный репозиторий на GitHub](https://github.com/DHTMLX/react-spreadsheet-examples) с полным рабочим примером. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/state/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/index.md new file mode 100644 index 00000000..8bab6c54 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/index.md @@ -0,0 +1,21 @@ +--- +sidebar_label: "Данные и состояние" +title: "Управление данными и состоянием" +description: "Паттерны управления данными DHTMLX Spreadsheet в состоянии React или с помощью библиотек управления состоянием." +--- + +# Управление данными и состоянием {#data--state-management} + +В этом разделе описаны паттерны синхронизации данных таблицы с состоянием приложения: от базового `useState` в React до библиотек управления состоянием. + +## С чего начать {#start-here} + +- [Основы управления состоянием](react/state/state-management-basics.md) — ключевые паттерны: управляемые пропсы, колбэки событий, escape-люк через ref и советы по производительности + +## Руководства по библиотекам состояния {#state-library-guides} + +- [Redux Toolkit](react/state/redux-toolkit.md) — пошаговая интеграция с Redux Toolkit + +## Ключевая концепция {#key-concept} + +Проп `sheets` является **единственным источником истины** для всех данных таблицы. Передайте массив объектов [`SheetData`](react/types.md#sheetdata), и обёртка сравнит ваши данные с текущим состоянием виджета, применив только изменения. Используйте иммутабельные обновления (оператор расширения, функциональные обновления `setState`), чтобы React мог эффективно обнаруживать изменения. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md new file mode 100644 index 00000000..d7d97114 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md @@ -0,0 +1,183 @@ +--- +sidebar_label: Redux toolkit +title: React Spreadsheet с Redux Toolkit +description: "Пошаговая интеграция DHTMLX React Spreadsheet с Redux Toolkit." +--- + +# React Spreadsheet с Redux Toolkit {#react-spreadsheet-with-redux-toolkit} + +Это руководство показывает, как управлять данными таблицы в хранилище Redux Toolkit. + +## Предварительные требования {#prerequisites} + +- Знакомство с основами React, TypeScript и [Redux Toolkit](https://redux-toolkit.js.org/) +- Пройденное руководство [Основы управления состоянием](react/state/state-management-basics.md) + +## Настройка {#setup} + +Создайте проект Vite и установите зависимости: + +~~~bash +npm create vite@latest my-rtk-spreadsheet -- --template react-ts +cd my-rtk-spreadsheet +npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux +~~~ + +## Создание среза {#create-the-slice} + +Определите форму состояния таблицы, начальные данные и редьюсеры в срезе Redux Toolkit. + +~~~ts title="src/store/spreadsheetSlice.ts" +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +interface SpreadsheetState { + sheets: SheetData[]; + activeSheet: string; +} + +const initialState: SpreadsheetState = { + sheets: [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Price", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 25.99, format: "currency" }, + }, + }, + ], + activeSheet: "sheet1", +}; + +const spreadsheetSlice = createSlice({ + name: "spreadsheet", + initialState, + reducers: { + setSheets(state, action: PayloadAction) { + state.sheets = action.payload; + }, + setActiveSheet(state, action: PayloadAction) { + state.activeSheet = action.payload; + }, + updateCell( + state, + action: PayloadAction<{ sheetId: string; cell: string; value: string | number }> + ) { + const { sheetId, cell, value } = action.payload; + const sheet = state.sheets.find((s) => s.id === sheetId); + if (sheet) { + sheet.cells[cell] = { ...sheet.cells[cell], value }; + } + }, + }, +}); + +export const { setSheets, setActiveSheet, updateCell } = spreadsheetSlice.actions; +export default spreadsheetSlice.reducer; +~~~ + +## Настройка хранилища {#configure-the-store} + +Зарегистрируйте срез в хранилище Redux и экспортируйте типизированные хелперы `RootState` и `AppDispatch`. + +~~~ts title="src/store/index.ts" +import { configureStore } from "@reduxjs/toolkit"; +import spreadsheetReducer from "./spreadsheetSlice"; + +export const store = configureStore({ + reducer: { + spreadsheet: spreadsheetReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +Оберните приложение провайдером: + +~~~tsx title="src/main.tsx" +import React from "react"; +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import { store } from "./store"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + +); +~~~ + +## Создание компонента {#create-the-component} + +Подключите `ReactSpreadsheet` к хранилищу Redux с помощью `useSelector` для чтения состояния и `useDispatch` для синхронизации изменений после каждого действия пользователя. + +~~~tsx title="src/App.tsx" +import { useRef } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import type { RootState } from "./store"; +import { setSheets } from "./store/spreadsheetSlice"; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +function App() { + const ref = useRef(null); + const dispatch = useDispatch(); + const sheets = useSelector((state: RootState) => state.spreadsheet.sheets); + const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data?.sheets) { + dispatch(setSheets(data.sheets)); + } + }; + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## Чтение данных через ref {#reading-data-via-ref} + +Используйте `ref.current.instance` для операций только чтения, таких как сериализация или получение значений ячеек: + +~~~tsx +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + // Отправка в API, скачивание и т.д. +}; + +const getCellValue = (cell: string) => { + return ref.current?.instance?.getValue(cell); +}; +~~~ + +## Связанные API и гайды {#related-api-and-guides} + +- [Справочник пропсов](react/props.md) — все пропсы компонента +- [Справочник событий](react/events.md) — пропсы-колбэки событий +- [Основы управления состоянием](react/state/state-management-basics.md) — ключевые паттерны diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md new file mode 100644 index 00000000..d7a8105c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md @@ -0,0 +1,172 @@ +--- +sidebar_label: Основы +title: Основы привязки данных и управления состоянием +description: "Ключевые паттерны управления данными таблицы в React: управляемые пропсы, колбэки событий и escape-люк через ref." +--- + +# Основы привязки данных и управления состоянием {#data-binding--state-management-basics} + +## Декларативная модель {#the-declarative-model} + +React Spreadsheet следует декларативному подходу: вы храните данные листов в состоянии React, передаёте их как пропсы, а обёртка автоматически сравнивает ваши данные с текущим состоянием виджета и применяет только изменения. + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Hello" }, + }, + }, + ]); + + return ; +} +~~~ + +## Обновление ячеек {#updating-cells} + +Используйте иммутабельные обновления состояния с функциональным обновлением `setState`: + +~~~tsx +const updateCell = (sheetId: string, cell: string, value: string | number) => { + setSheets((prev) => + prev.map((sheet) => + sheet.id === sheetId + ? { + ...sheet, + cells: { + ...sheet.cells, + [cell]: { ...sheet.cells[cell], value }, + }, + } + : sheet + ) + ); +}; +~~~ + +## Реакция на действия пользователя {#responding-to-user-actions} + +Используйте `onAfterAction` для обработки изменений, выполненных пользователем. Сочетайте его с `ref`, чтобы читать текущие данные виджета: + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [sheets, setSheets] = useState([/* ... */]); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data) { + // Синхронизация состояния виджета обратно в состояние React + console.log("Spreadsheet data:", data); + } + }; + + return ( + + ); +} +~~~ + +## Escape-люк через ref {#the-ref-escape-hatch} + +Для операций, которые не отображаются на декларативные пропсы, используйте [`SpreadsheetRef`](react/types.md#spreadsheetref) для доступа к экземпляру базового виджета: + +- **Сериализация данных:** `ref.current?.instance?.serialize()` +- **Отмена/возврат:** `ref.current?.instance?.undo()` / `ref.current?.instance?.redo()` +- **Получение значения ячейки:** `ref.current?.instance?.getValue("A1")` +- **Программный выбор:** `ref.current?.instance?.selection.setSelectedCell("A1:C5")` + +~~~tsx +const ref = useRef(null); + +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); +}; + + +~~~ + +:::warning +Избегайте смешивания императивных записей (например, `instance.setValue()`) с декларативным пропом `sheets`. Обёртка может перезаписать императивные изменения при следующем цикле рендера. Используйте ref только для **чтения** данных и для операций вроде отмены/возврата, выбора и экспорта. +::: + +## Управляемый поиск {#controlled-search} + +Используйте проп `search` вместе с `onSearchResults` для управляемого поиска: + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +## Отмена / возврат {#undo--redo} + +Используйте `onStateChange` для отслеживания доступности отмены/возврата и вызывайте `undo()`/`redo()` через ref: + +~~~tsx +const ref = useRef(null); +const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + + + + +~~~ + +## Производительность {#performance} + +- Используйте `useMemo` для производных листов, чтобы избежать лишних пересчётов: + +~~~tsx +const filteredSheets = useMemo( + () => sheets.filter((s) => s.name !== "Hidden"), + [sheets] +); + + +~~~ + +- Избегайте пересоздания объекта `styles` при каждом рендере. Определяйте его вне компонента или оборачивайте в `useMemo`. +- Используйте функциональное обновление `setState`, чтобы избежать проблем с устаревшим замыканием в колбэках событий. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/themes.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/themes.md new file mode 100644 index 00000000..bb62d4ab --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/themes.md @@ -0,0 +1,93 @@ +--- +sidebar_label: Темы +title: Темы React Spreadsheet +description: "Применение встроенных или пользовательских тем к DHTMLX React Spreadsheet." +--- + +# Темы React Spreadsheet {#react-spreadsheet-themes} + +React Spreadsheet поставляется с четырьмя встроенными темами и поддерживает пользовательские темы через CSS-переменные. Используйте проп `theme`, чтобы выбрать встроенную тему или применить собственную. + +## Встроенные темы {#built-in-themes} + +Тип [`SpreadsheetTheme`](react/types.md#spreadsheettheme) определяет четыре встроенные темы: + +- `"light"` (по умолчанию) +- `"dark"` +- `"contrast-light"` +- `"contrast-dark"` + +Также можно передать строку с именем пользовательской темы. + +## Применение темы {#applying-a-theme} + +Передайте проп `theme` компоненту `ReactSpreadsheet` с именем нужной темы: + +~~~tsx + +~~~ + +## Переключение во время работы {#switching-at-runtime} + +Используйте состояние React для динамического переключения тем: + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData, type SpreadsheetTheme } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([/* ... */]); + const [theme, setTheme] = useState("light"); + + return ( + <> + + + + + ); +} +~~~ + +## Пользовательские CSS-переменные {#custom-css-variables} + +DHTMLX Spreadsheet использует многоуровневую систему CSS-переменных. Вы можете переопределить эти переменные, чтобы настроить внешний вид за пределами встроенных тем. + +### Создание пользовательской темы {#creating-a-custom-theme} + +Определите пользовательский селектор `data-dhx-theme`, переопределите нужные переменные и передайте имя темы как проп: + +~~~css title="src/custom-theme.css" +[data-dhx-theme='corporate'] { + /* цветовая схема */ + --dhx-h-primary: 220; + --dhx-s-primary: 60%; + --dhx-l-primary: 45%; + + /* панель инструментов и сетка */ + --dhx-s-toolbar-background: #f0f4f8; + --dhx-s-grid-header-background: #e2e8f0; + + /* цвета диапазонов таблицы */ + --dhx-spreadsheet-range-background-1: #bee3f8; + --dhx-spreadsheet-range-color-1: #2b6cb0; +} +~~~ + +~~~tsx +import "./custom-theme.css"; + + +~~~ + +## Связанные руководства {#related-guides} + +- [Темы](/themes/) — обзор встроенных тем DHTMLX Spreadsheet +- [Настройка базовых тем](themes/base_themes_configuration.md) — настройка базовых тем +- [Пользовательская тема](themes/custom_theme.md) — создание пользовательских тем diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/react/types.md b/i18n/ru/docusaurus-plugin-content-docs/current/react/types.md new file mode 100644 index 00000000..6dcd711b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/react/types.md @@ -0,0 +1,276 @@ +--- +sidebar_label: Типы +title: Справочник типов +description: "Интерфейсы TypeScript, перечисления и псевдонимы типов, экспортируемые из @dhx/react-spreadsheet." +--- + +# Справочник типов {#types-reference} + +Все типы экспортируются из `@dhx/react-spreadsheet` или `@dhtmlx/trial-react-spreadsheet`. + +~~~tsx +import type { SheetData, CellData, SpreadsheetRef /* ... */ } from "@dhtmlx/trial-react-spreadsheet"; +~~~ + +## CellData {#celldata} + +Декларативное состояние одной ячейки. Все свойства необязательны; пропущенные свойства сохраняют своё текущее значение при обновлениях. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `value` | `string \| number` | Значение ячейки: текст, число или строка формулы (с префиксом `=`). | +| `css` | `string` | Имя (имена) CSS-класса, ссылающееся на ключи в карте `styles` верхнего уровня. | +| `format` | `string` | Маска формата числа или псевдоним (например, `"currency"` или `"#,##0.00"`). | +| `locked` | `boolean` | Заблокирована ли ячейка (защищена от редактирования). | +| `validation` | `string \| string[]` | Варианты выпадающего списка для валидации данных. | + +## RowConfig {#rowconfig} + +Метаданные строки. Записи нужны только для строк с нестандартной конфигурацией. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `height` | `number` | Высота строки в пикселях. | +| `hidden` | `boolean` | Скрыта ли строка. | + +## ColConfig {#colconfig} + +Метаданные столбца. Записи нужны только для столбцов с нестандартной конфигурацией. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `width` | `number` | Ширина столбца в пикселях. | +| `hidden` | `boolean` | Скрыт ли столбец. | + +## MergedRange {#mergedrange} + +Определяет диапазон объединённых ячеек с использованием координат строк/столбцов, начиная с 0. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `from` | `{ row: number; column: number }` | Верхний левый угол объединения (индекс с 0). | +| `to` | `{ row: number; column: number }` | Нижний правый угол объединения (индекс с 0). | + +**Пример:** + +~~~ts +// Объединение A1:B2 +const merge: MergedRange = { + from: { row: 0, column: 0 }, + to: { row: 1, column: 1 }, +}; +~~~ + +## FreezeConfig {#freezeconfig} + +Конфигурация закреплённой панели для листа. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `col` | `number` | Закрепить столбцы до этого номера столбца (индекс с 0). `undefined` = без закрепления столбцов. | +| `row` | `number` | Закрепить строки до этого номера строки (индекс с 0). `undefined` = без закрепления строк. | + +## SheetFilter {#sheetfilter} + +Конфигурация фильтра для столбца внутри листа. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `cell` | `string` | Ссылка на ячейку, идентифицирующую отфильтрованный столбец (например, `"A1"`). | +| `rules` | `IFilterRules[]` | Применяемые правила фильтрации. Пустой массив сбрасывает фильтр. | + +## SheetSort {#sheetsort} + +Конфигурация сортировки для столбца внутри листа. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `cell` | `string` | Ссылка на ячейку или диапазон для операции сортировки (например, `"B1"` или `"A1:E8"`). Используйте диапазон для сортировки нескольких столбцов с сохранением целостности строк. | +| `dir` | `1 \| -1` | Направление сортировки: `1` = по возрастанию, `-1` = по убыванию. | + +## SheetData {#sheetdata} + +Полное декларативное состояние одного листа таблицы. + +| Свойство | Тип | Обязательно | Описание | +|----------|-----|:-----------:|----------| +| `id` | `Id` | Да | Уникальный идентификатор листа. Должен быть стабильным между рендерами. | +| `name` | `string` | Да | Отображаемое имя на вкладке листа. | +| `cells` | `Record` | Да | Данные ячеек, с ключом по ссылке на ячейку (например, `"A1"` или `"B2"`). Записи нужны только для ячеек с нестандартными данными. | +| `rows` | `Record` | Нет | Конфигурация строк с ключом по номеру строки (индекс с 0). | +| `cols` | `Record` | Нет | Конфигурация столбцов с ключом по номеру столбца (индекс с 0). | +| `merged` | `MergedRange[]` | Нет | Диапазоны объединённых ячеек. | +| `freeze` | `FreezeConfig` | Нет | Конфигурация закреплённых панелей. | +| `filter` | `SheetFilter` | Нет | Конфигурация фильтра столбца. Установите `undefined`, чтобы сбросить. | +| `sort` | `SheetSort` | Нет | Конфигурация сортировки. | + +**Пример:** + +~~~ts +const sheet: SheetData = { + id: "sheet1", + name: "Inventory", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Quantity", css: "bold" }, + A2: { value: "Laptop" }, + B2: { value: 42 }, + }, + cols: { 0: { width: 200 } }, + freeze: { row: 1 }, +}; +~~~ + +## SearchConfig {#searchconfig} + +Управляемое состояние поиска. Передайте объект для запуска/обновления поиска, передайте `undefined`, чтобы закрыть его. + +| Свойство | Тип | Обязательно | Описание | +|----------|-----|:-----------:|----------| +| `query` | `string` | Да | Текст для поиска. | +| `open` | `boolean` | Нет | Открыть ли встроенный интерфейс поиска. По умолчанию: `false`. | +| `sheetId` | `Id` | Нет | Ограничить поиск конкретным листом по id. | + +## SpreadsheetLocale {#spreadsheetlocale} + +Конфигурация локализации для меток интерфейса и названий формул. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `locale` | `Record` | Переопределения строк интерфейса. Ключи соответствуют словарю локализации библиотеки. | +| `formulas` | `Record` | Локализованные имена формул, сгруппированные по категориям. Каждый элемент — кортеж: `[localizedName, optionalDescription?]`. | + +## SpreadsheetTheme {#spreadsheettheme} + +~~~ts +type SpreadsheetTheme = "light" | "dark" | "contrast-light" | "contrast-dark" | string; +~~~ + +Встроенные цветовые темы. Также принимает строки с именами пользовательских тем. + +## IExecuteConfig {#iexecuteconfig} + +Конфигурация выполнения действия, передаваемая в [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events). Форма зависит от типа действия. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `row` | `number` | Индекс целевой строки. | +| `col` | `number` | Индекс целевого столбца. | +| `target` | `unknown` | Цель, специфичная для действия. | +| `val` | `unknown` | Новое значение. | +| `prev` | `unknown` | Предыдущее значение. | +| `action` | `Actions \| string` | Идентификатор действия. | +| `groupAction` | `Actions \| string` | Идентификатор родительского группового действия. | +| `cell` | `string` | Ссылка на ячейку (например, `"A1"`). | +| `pageId` | `Id` | Id целевого листа. | +| `pageName` | `string` | Имя целевого листа. | +| `[key: string]` | `unknown` | Дополнительные свойства, специфичные для действия. | + +## SpreadsheetRef {#spreadsheetref} + +Императивный дескриптор, доступный через `React.forwardRef`. Предоставляет прямой доступ к базовому экземпляру DHTMLX Spreadsheet для операций, которые не отображаются на декларативные пропсы. + +| Свойство | Тип | Описание | +|----------|-----|----------| +| `instance` | `ISpreadsheet \| null` | Базовый экземпляр виджета. `null` до инициализации и после размонтирования. | + +**Пример:** + +~~~tsx +const ref = useRef(null); + +// Сериализация данных +const data = ref.current?.instance?.serialize(); + +// Программный выбор +ref.current?.instance?.selection.setSelectedCell("A1:C5"); + +// Отмена/возврат +ref.current?.instance?.undo(); +ref.current?.instance?.redo(); +~~~ + +## Перечисление Actions {#actions-enum} + +Известные идентификаторы действий таблицы. Используются в [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) для типобезопасного сопоставления действий. Объединение `| string` в параметрах обработчиков обеспечивает прямую совместимость с будущими действиями. + +| Значение | Описание | +|----------|----------| +| `setCellStyle` | Применить CSS-стиль к ячейке(ям). | +| `setCellValue` | Установить значение ячейки. | +| `setCellFormat` | Установить числовой формат для ячейки(ек). | +| `removeCellStyles` | Удалить CSS-стили из ячейки(ек). | +| `lockCell` | Заблокировать или разблокировать ячейку(и). | +| `deleteRow` | Удалить строку(и). | +| `addRow` | Вставить строку(и). | +| `deleteColumn` | Удалить столбец(цы). | +| `addColumn` | Вставить столбец(цы). | +| `groupAction` | Групповое действие (несколько подзадач). | +| `groupRowAction` | Групповое действие со строками. | +| `groupColAction` | Групповое действие со столбцами. | +| `addSheet` | Добавить новый лист. | +| `deleteSheet` | Удалить лист. | +| `renameSheet` | Переименовать лист. | +| `clearSheet` | Очистить все данные на листе. | +| `clear` | Очистить выделенные ячейки. | +| `resizeCol` | Изменить ширину столбца. | +| `resizeRow` | Изменить высоту строки. | +| `setValidation` | Установить валидацию данных для ячейки(ек). | +| `sortCells` | Сортировать ячейки. | +| `insertLink` | Вставить гиперссылку. | +| `fitColumn` | Автоматически подогнать ширину столбца под содержимое. | +| `filter` | Применить или изменить фильтр столбца. | +| `merge` | Объединить ячейки. | +| `unmerge` | Разъединить ячейки. | +| `toggleFreeze` | Переключить закрепление панелей. | +| `toggleVisibility` | Переключить видимость строки/столбца. | + +## Псевдонимы типов обработчиков {#handler-type-aliases} + +Удобные псевдонимы для сигнатур функций, используемых пропсами-колбэками событий. Импортируйте их для явного аннотирования функций-обработчиков. + +
+ +| Тип | Сигнатура | Используется в | +|-----|-----------|----------------| +| `BeforeActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => boolean \| void` | `onBeforeAction` | +| `AfterActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => void` | `onAfterAction` | +| `BeforeCellHandler` | `(cell: string) => boolean \| void` | `onBeforeSelectionSet`, `onBeforeSelectionRemove`, `onBeforeFocusSet` | +| `AfterCellHandler` | `(cell: string) => void` | `onAfterSelectionSet`, `onAfterSelectionRemove`, `onAfterFocusSet` | +| `BeforeEditHandler` | `(cell: string, value: string) => boolean \| void` | `onBeforeEditStart`, `onBeforeEditEnd` | +| `AfterEditHandler` | `(cell: string, value: string) => void` | `onAfterEditStart`, `onAfterEditEnd` | +| `BeforeSheetHandler` | `(sheet: ISheet) => boolean \| void` | `onBeforeSheetChange` | +| `AfterSheetHandler` | `(sheet: ISheet) => void` | `onAfterSheetChange` | + +
+ +## SpreadsheetConfigProps {#spreadsheetconfigprops} + +~~~ts +type SpreadsheetConfigProps = Omit< + ISpreadsheetConfig, + "leftSplit" | "topSplit" | "dateFormat" | "timeFormat" +>; +~~~ + +Базовый тип для пропсов компонента. Открывает все параметры конструктора `ISpreadsheetConfig` как плоские пропсы. + +## Переэкспортируемые вышестоящие типы {#re-exported-upstream-types} + +Эти типы переэкспортируются из `@dhx/ts-spreadsheet` для удобства: + +| Тип | Описание | +|-----|----------| +| `ISpreadsheet` | Интерфейс основного экземпляра виджета таблицы. | +| `ISpreadsheetConfig` | Интерфейс конфигурации конструктора. | +| `ISheet` | Интерфейс экземпляра листа (используется в колбэках событий листа). | +| `IFormats` | Определение пользовательского числового формата. | +| `IFilterRules` | Конфигурация правила фильтрации. | +| `IFilter` | Интерфейс экземпляра фильтра. | +| `IStylesList` | Карта определений стилей. | +| `IDataWithStyles` | Структура данных со встроенными стилями (используется `serialize()`/`parse()`). | +| `ICellInfo` | Информация о ячейке, возвращаемая методами виджета. | +| `FileFormat` | Формат файла для загрузки данных (например, `"json"` или `"xlsx"`). | +| `ToolbarBlocks` | Идентификаторы блоков панели инструментов (например, `"default"`, `"undo"` или `"font"`). | +| `FilterConditions` | Перечисление доступных типов условий фильтрации. | +| `Id` | Универсальный тип идентификатора (*string \| number*). | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/sorting_data.md b/i18n/ru/docusaurus-plugin-content-docs/current/sorting_data.md new file mode 100644 index 00000000..48df426e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/sorting_data.md @@ -0,0 +1,41 @@ +--- +sidebar_label: Сортировка данных +title: Сортировка данных +description: Вы можете узнать о сортировке данных в документации библиотеки DHTMLX JavaScript Spreadsheet. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Сортировка данных {#sorting-data} + +## Сортировка данных по столбцу {#sorting-data-by-a-column} + +Чтобы отсортировать данные таблицы по столбцу, выполните следующие шаги: + +1\. Щёлкните правой кнопкой мыши по заголовку столбца, по которому нужно сортировать данные + +2\. Выберите *Sort* -> *Sort A to Z* или *Sort Z to A* + +![Контекстное меню заголовка столбца в DHTMLX Spreadsheet с пунктами Sort A to Z и Sort Z to A](/img/sort_col.png) + +или + +1\. Выберите нужный столбец, щёлкнув по его заголовку + +2\. Перейдите в меню: *Data* -> *Sort* -> *Sort A to Z* или *Sort Z to A* + +![Меню Data в DHTMLX Spreadsheet с подменю Sort, содержащим пункты Sort A to Z и Sort Z to A](/img/sort_col_menu.png) + +## Сортировка данных по диапазону {#sorting-data-by-a-range} + +Чтобы отсортировать данные таблицы по отдельному диапазону, выполните следующие шаги: + +1\. Выделите диапазон ячеек в столбце, по которому нужно сортировать данные + +2\. Выберите одно из двух действий: + +- Щёлкните правой кнопкой мыши по ячейке в выбранном диапазоне и выберите *Sort* -> *Sort A to Z* или *Sort Z to A* + +![Контекстное меню выбранного диапазона в DHTMLX Spreadsheet с подменю Sort](/img/sort_range_menu.png) + +- Или перейдите в меню: *Data* -> *Sort* -> *Sort A to Z* или *Sort Z to A* + +![Меню Data в DHTMLX Spreadsheet с подменю Sort для сортировки выбранного диапазона ячеек](/img/sort_range.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/svelte_integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/svelte_integration.md new file mode 100644 index 00000000..87747ef8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/svelte_integration.md @@ -0,0 +1,259 @@ +--- +sidebar_label: Интеграция со Svelte +title: Интеграция со Svelte +description: Вы можете узнать об интеграции DHTMLX JavaScript Spreadsheet со Svelte в документации. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Интеграция со Svelte {#integration-with-svelte} + +:::tip +Перед чтением этой документации вы должны быть знакомы с основными концепциями и паттернами **Svelte**. Для освежения знаний обратитесь к [**документации Svelte**](https://svelte.dev/). +::: + +DHTMLX Spreadsheet совместим со **Svelte**. Мы подготовили примеры кода использования DHTMLX Spreadsheet со **Svelte**. Подробнее см. соответствующий [**Пример на GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo). + +## Создание проекта {#creating-a-project} + +:::info +Перед созданием нового проекта установите [**Vite**](https://vite.dev/) (необязательно) и [**Node.js**](https://nodejs.org/en/). +::: + +Чтобы создать проект **Svelte** JS, выполните следующую команду: + +~~~json +npm create vite@latest +~~~ + +Назовём проект **my-svelte-spreadsheet-app**. + +### Установка зависимостей {#installation-of-dependencies} + +Перейдите в директорию приложения: + +~~~json +cd my-svelte-spreadsheet-app +~~~ + +Затем установите зависимости и запустите приложение. Для этого используйте пакетный менеджер: + +- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды: + +~~~jsx +yarn +yarn dev // or yarn dev +~~~ + +- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды: + +~~~json +npm install +npm run dev +~~~ + +Приложение должно запуститься на localhost (например, `http://localhost:3000`). + +## Создание Spreadsheet {#creating-spreadsheet} + +Теперь нужно получить исходный код DHTMLX Spreadsheet. Сначала остановите приложение и установите пакет Spreadsheet. + +### Шаг 1. Установка пакета {#step-1-package-installation} + +Скачайте [**ознакомительный пакет Spreadsheet**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) и следуйте инструкциям в README-файле. Обратите внимание, что ознакомительная версия Spreadsheet доступна только в течение 30 дней. + +### Шаг 2. Создание компонента {#step-2-component-creation} + +Теперь нужно создать компонент Svelte для добавления Spreadsheet в приложение. Создайте новый файл в директории *src/* и назовите его *Spreadsheet.svelte*. + +#### Импорт исходных файлов {#importing-source-files} + +Откройте файл *Spreadsheet.svelte* и импортируйте исходные файлы Spreadsheet. Обратите внимание, что: + +- если вы используете PRO-версию и устанавливаете пакет Spreadsheet из локальной папки, пути к импорту выглядят следующим образом: + +~~~html title="Spreadsheet.svelte" + +~~~ + +Обратите внимание, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что вы импортируете CSS-файл как *spreadsheet.min.css*. + +- если вы используете ознакомительную версию Spreadsheet, укажите следующие пути: + +~~~html title="Spreadsheet.svelte" + +~~~ + +В этом руководстве показана настройка **ознакомительной** версии Spreadsheet. + +#### Настройка контейнера и добавление Spreadsheet {#setting-the-container-and-adding-spreadsheet} + +Чтобы отобразить Spreadsheet на странице, нужно создать контейнер для Spreadsheet и инициализировать этот компонент с помощью соответствующего конструктора: + +~~~html {3,6,10-11,19} title="Spreadsheet.svelte" + + +
+~~~ + +#### Добавление стилей {#adding-styles} + +Чтобы Spreadsheet отображался корректно, необходимо задать важные стили для Spreadsheet и его контейнера в главном CSS-файле проекта: + +~~~css title="app.css" +/* specify styles for initial page */ +html, +body, +#app { /* make sure that you use the #app root container */ + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for the Spreadsheet container */ +.widget { + height: 100%; +} +~~~ + +#### Загрузка данных {#loading-data} + +Чтобы добавить данные в Spreadsheet, нужно предоставить набор данных. Создайте файл *data.js* в директории *src/* и добавьте в него данные: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // more cells with data + ] + } +} +~~~ + +Затем откройте файл *App.svelte*, импортируйте данные и передайте их в только что созданный компонент `` как **props**: + +~~~html {3,5,8} title="App.svelte" + + + +~~~ + +Перейдите в файл *Spreadsheet.svelte* и примените переданные **props** к Spreadsheet методом [`parse()`](api/spreadsheet_parse_method.md): + +~~~html {6,13} title="Spreadsheet.svelte" + + +
+~~~ + +Теперь компонент Spreadsheet готов к использованию. При добавлении элемента на страницу он инициализирует Spreadsheet с данными. При необходимости можно также задать нужные параметры конфигурации. Посетите [документацию API Spreadsheet](api/overview/properties_overview.md) для просмотра полного списка доступных свойств. + +#### Обработка событий {#handling-events} + +Когда пользователь выполняет действие в Spreadsheet, виджет вызывает событие. Эти события можно использовать для обнаружения действия и выполнения нужного кода. Смотрите [полный список событий](api/overview/events_overview.md). + +Откройте *Spreadsheet.svelte* и дополните метод `onMount()` следующим образом: + +~~~html {8-11} title="Spreadsheet.svelte" + + +// ... +~~~ + +После этого при запуске приложения на странице должен отобразиться Spreadsheet, загруженный с данными. + +![DHTMLX Spreadsheet, инициализированный с тестовыми данными в приложении Svelte](/img/integrations/trial_spreadsheet.png) + +Теперь у вас есть базовая настройка для интеграции DHTMLX Spreadsheet со Svelte. Вы можете настроить код в соответствии с вашими конкретными требованиями. Финальный пример можно найти на [**GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md new file mode 100644 index 00000000..2c683fe7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Настройка встроенных тем +title: Настройка встроенных тем +description: Вы можете изучить настройку тем в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Настройка встроенных тем {#configuring-built-in-themes} + +## Настройка всех тем {#configuring-all-themes} + +CSS-переменные темы [по умолчанию](/themes/#light-theme-default) включают переменные цветовой схемы: + +~~~css +--dhx-h-primary: 200; +--dhx-s-primary: 98%; +--dhx-l-primary: 40%; + +--dhx-h-secondary: 0; +--dhx-s-secondary: 0%; +--dhx-l-secondary: 30%; + +--dhx-h-danger: 0; +--dhx-s-danger: 100%; +--dhx-l-danger: 60%; + +--dhx-h-success: 154; +--dhx-s-success: 89%; +--dhx-l-success: 37%; + +--dhx-h-background: 0; +--dhx-s-background: 0%; +--dhx-l-background: 100%; +--dhx-a-background: 0.5; +~~~ + +:::tip +Значения цветов задаются в формате [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), где: + +- *оттенок* — угол на цветовом круге от 0 до 360. 0 — красный, 120 — зелёный, 240 — синий; +- *насыщенность* — процентное значение; 0% означает полностью ненасыщенный (серый), 100% — полностью насыщенный; +- *яркость* — процентное значение; 100% — белый, 0% — чёрный, 50% — «нормальный». +::: + +Благодаря этим CSS-переменным цветовая схема вычисляется автоматически. Это означает, что при изменении значения цветовой схемы в корне значения для тем `"contrast-light"`, `"dark"` и `"contrast-dark"` пересчитываются автоматически в реальном времени. + +Например, можно переопределить основные цвета для всех тем Spreadsheet одновременно следующим образом: + +~~~html + +~~~ + +Кроме того, значения переменных, вычисляемых на основе основного цвета, пересчитываются соответствующим образом. Например, значение цвета фокуса вычисляется следующим образом: + +~~~jsx +--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); +~~~ + +## Настройка отдельной темы {#configuring-a-separate-theme} + +Если вы хотите переопределить отдельные значения цветов для конкретной [темы Spreadsheet](/themes/), переопределите их в атрибуте `data-dhx-theme`: + +~~~html {1-27,39} + + + +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/themes/custom_theme.md b/i18n/ru/docusaurus-plugin-content-docs/current/themes/custom_theme.md new file mode 100644 index 00000000..0196273c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/themes/custom_theme.md @@ -0,0 +1,97 @@ +--- +sidebar_label: Пользовательская тема +title: Пользовательская тема +description: Вы можете узнать, как создать пользовательскую тему, в документации библиотеки DHTMLX JavaScript Spreadsheet. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Пользовательская тема {#custom-theme} + +Если стандартные темы Spreadsheet не подходят для вашего проекта, вы можете настроить собственную цветовую тему. +Ознакомьтесь с темами **custom light** и **custom dark** в примере ниже: + + + +Чтобы создать собственную пользовательскую тему, переопределите значения внутренних CSS-переменных следующим образом: + +~~~html + + + +~~~ + +**Связанный пример:** [Spreadsheet. Пользовательские темы (скины)](https://snippet.dhtmlx.com/59nt1rcb?mode=wide) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/themes/themes.md b/i18n/ru/docusaurus-plugin-content-docs/current/themes/themes.md new file mode 100644 index 00000000..81cecda7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/themes/themes.md @@ -0,0 +1,487 @@ +--- +sidebar_label: Встроенные темы +title: Встроенные темы +description: Вы можете узнать о встроенных темах библиотеки DHTMLX JavaScript Spreadsheet в документации. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Встроенные темы {#built-in-themes} + +Библиотека DHTMLX Spreadsheet предоставляет 4 предустановленные темы: + +- [светлая тема](#light-theme-default) ("light") — используется по умолчанию +- [тёмная тема](#dark-theme) ("dark") +- [светлая высококонтрастная тема](#light-high-contrast-theme) ("contrast-light") +- [тёмная высококонтрастная тема](#dark-high-contrast-theme) ("contrast-dark") + +Темы Spreadsheet разработаны в соответствии с международными стандартами. Высококонтрастные темы помогают пользователям с нарушениями зрения. Подробнее читайте в статье [Поддержка доступности](https://docs.dhtmlx.com/suite/common_features/accessibility_support/). + +Все темы можно попробовать в примере ниже: + + + +## Светлая тема (по умолчанию) {#light-theme-default} + +![Светлая тема DHTMLX Spreadsheet по умолчанию с белым фоном и тёмным текстом](/img/themes/default_theme.png) + +Тема `"light"` по умолчанию настраивается с помощью перечисленных ниже CSS-переменных: + +~~~css +:root, [data-dhx-theme] { + /* базовые цвета */ + --dhx-color-white: #fff; + --dhx-color-gray-100: #e6e6e6; + --dhx-color-gray-200: #ccc; + --dhx-color-gray-300: #b3b3b3; + --dhx-color-gray-400: #999; + --dhx-color-gray-500: #808080; + --dhx-color-gray-600: #666; + --dhx-color-gray-700: #4d4d4d; + --dhx-color-gray-800: #333; + --dhx-color-gray-900: #1a1a1a; + --dhx-color-black: #000; + /* конец базовых цветов */ + + /* шрифт */ + --dhx-font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; + + --dhx-font-weight-regular: 400; + --dhx-font-weight-medium: 500; + --dhx-font-weight-bold: 700; + + --dhx-font-size-small: 12px; + --dhx-font-size-normal: 14px; + --dhx-font-size-large: 16px; + + --dhx-line-height-small: 16px; + --dhx-line-height-normal: 20px; + --dhx-line-height-large: 24px; + + --dhx-font-color-primary: rgba(0, 0, 0, .7); + --dhx-font-color-secondary: rgba(0, 0, 0, .5); + --dhx-font-color-additional: rgba(0, 0, 0, .3); + --dhx-font-color-disabled: rgba(0, 0, 0, .3); + + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-color-white); + /* конец шрифта */ + + /* иконка */ + --dhx-icon-size-small: 16px; + --dhx-icon-size-normal: 20px; + --dhx-icon-size-large: 24px; + /* конец иконки */ + + /* граница */ + --dhx-border-width: 1px; + --dhx-border-radius: 2px; + --dhx-border-color: rgba(0, 0, 0, .1); + --dhx-border-color-focused: rgba(0, 0, 0, .3); + --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color); + /* конец границы */ + + /* тень границы */ + --dhx-border-shadow-small: 0 2px 4px rgba(0, 0, 0, .15); + --dhx-border-shadow-normal: 0 2px 5px rgba(0, 0, 0, .3); + --dhx-border-shadow-large: 0px 1px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1); + + --dhx-shadow-input-size: inset 0px 0px 0px var(--dhx-border-width); + /* конец тени границы */ + + /* переходы */ + --dhx-transition-time: 0.2s; + --dhx-transition-in: ease-in; + --dhx-transition-out: ease-out; + /* конец переходов */ + + /* z-индекс */ + --dhx-z-index-up: 1; + --dhx-z-index-force-up: 10; + --dhx-z-index-overlay: 999; + --dhx-z-index-overlay-total: 10000000; + /* конец z-индекса */ + + /* только служебная цветовая схема */ + --dhx-l-contrast-offset: 0%; /* смещение яркости для контрастной темы */ + --dhx-l-h-offset: 10%; /* смещение яркости при наведении */ + --dhx-s-d-offset: 30%; /* смещение насыщенности при отключении */ + --dhx-l-d: 70%; /* значение яркости при отключении */ + --dhx-a-l-h: .15; /* значение альфа при светлом наведении */ + --dhx-a-l-a: .3; /* значение альфа при светлом активном состоянии */ + /* конец служебной цветовой схемы */ + + /* цветовая схема */ + --dhx-h-primary: 200; + --dhx-s-primary: 98%; + --dhx-l-primary: 40%; + + --dhx-h-secondary: 0; + --dhx-s-secondary: 0%; + --dhx-l-secondary: 30%; + + --dhx-h-danger: 0; + --dhx-s-danger: 100%; + --dhx-l-danger: 60%; + + --dhx-h-success: 154; + --dhx-s-success: 89%; + --dhx-l-success: 37%; + + --dhx-h-background: 0; + --dhx-s-background: 0%; + --dhx-l-background: 100%; + --dhx-a-background: 0.5; + /* конец цветовой схемы */ + + /* цвета темы */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 3%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 10%)); + --dhx-background-overlay: hsla(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) * -1), var(--dhx-a-background)); + --dhx-background-overlay-light: rgba(255, 255, 255, .5); + + --dhx-tooltip-background-dark: var(--dhx-color-gray-800); + --dhx-tooltip-background-light: var(--dhx-color-white); + + --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); + + --dhx-color-primary: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-hover: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-active: var(--dhx-color-primary); + --dhx-color-primary-disabled: hsl(var(--dhx-h-primary), calc(var(--dhx-s-primary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-primary-light-hover: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-primary-light-active: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-secondary: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-hover: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-active: var(--dhx-color-secondary); + --dhx-color-secondary-disabled: hsl(var(--dhx-h-secondary), calc(var(--dhx-s-secondary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-secondary-light-hover: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-secondary-light-active: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-danger: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-hover: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-active: var(--dhx-color-danger); + --dhx-color-danger-disabled: hsl(var(--dhx-h-danger), calc(var(--dhx-s-danger) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-danger-light-hover: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-danger-light-active: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-success: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset))); + --dhx-color-success-hover: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-success-active: var(--dhx-color-success); + --dhx-color-success-disabled: hsl(var(--dhx-h-success), calc(var(--dhx-s-success) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-success-light-hover: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-success-light-active: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + /* конец цветов темы */ + + /* служебные переменные DHTMLX Toolbar*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* конец служебных переменных DHTMLX Toolbar */ + + /* служебные переменные DHTMLX Grid*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* конец служебных переменных DHTMLX Grid*/ + + /* служебные переменные DHTMLX Calendar*/ + --dhx-s-calendar-muffled: .6; + /* конец служебных переменных DHTMLX Calendar*/ + + /* служебные переменные DHTMLX Slider*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* конец служебных переменных DHTMLX Slider*/ +} +~~~ + +## Светлая высококонтрастная тема {#light-high-contrast-theme} + +![Светлая высококонтрастная тема DHTMLX Spreadsheet с увеличенными шрифтами и более чёткими границами для доступности](/img/themes/light_high_contrast_theme.png) + +Тема `"contrast-light"` настраивается с использованием как [корневых CSS-переменных](#light-theme-default), так и перечисленных ниже переменных: + +~~~css +[data-dhx-theme='contrast-light'] { + /* шрифт */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-secondary: rgba(0, 0, 0, .66); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + /* конец шрифта */ + + /* граница */ + --dhx-border-color: rgba(0, 0, 0, .4); + /* конец границы */ + + /* цветовая схема */ + --dhx-l-contrast-offset: 14%; + /* конец цветовой схемы */ + + /* служебные переменные DHTMLX Toolbar*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* конец служебных переменных DHTMLX Toolbar */ + + /* служебные переменные DHTMLX Grid*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* конец служебных переменных DHTMLX Grid*/ + + /* служебные переменные DHTMLX Calendar*/ + --dhx-s-calendar-muffled: .8; + /* конец служебных переменных DHTMLX Calendar*/ + + /* служебные переменные DHTMLX Slider*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* конец служебных переменных DHTMLX Slider*/ +} +~~~ + +## Тёмная тема {#dark-theme} + +![Тёмная тема DHTMLX Spreadsheet с тёмным фоном и светлым текстом для работы при слабом освещении](/img/themes/dark_theme.png) + +Тема `"dark"` настраивается с использованием как [корневых CSS-переменных](#light-theme-default), так и перечисленных ниже переменных: + +~~~css +[data-dhx-theme='dark'] { + /* шрифт */ + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, .7); + --dhx-font-color-additional: rgba(255, 255, 255, .5); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* конец шрифта */ + + /* граница */ + --dhx-border-color: rgba(255, 255, 255, 0.3); + --dhx-border-color-focused: rgba(255, 255, 255, 0.5); + /* конец границы */ + + /* цветовая схема */ + --dhx-l-secondary: 60%; /* смещение яркости для контрастной темы */ + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* конец цветовой схемы */ + + /* цвета темы */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* конец цветов темы */ + + /* служебные переменные DHTMLX Toolbar*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* конец служебных переменных DHTMLX Toolbar */ + + /* служебные переменные DHTMLX Grid*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* конец служебных переменных DHTMLX Grid*/ + + /* служебные переменные DHTMLX Calendar*/ + --dhx-s-calendar-muffled: .6; + /* конец служебных переменных DHTMLX Calendar*/ + + /* служебные переменные DHTMLX Slider*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* конец служебных переменных DHTMLX Slider*/ +} +~~~ + +## Тёмная высококонтрастная тема {#dark-high-contrast-theme} + +![Тёмная высококонтрастная тема DHTMLX Spreadsheet с улучшенным контрастом текста для доступности](/img/themes/dark_contrast.png) + +Тема `"contrast-dark"` настраивается с использованием как [корневых CSS-переменных](#light-theme-default), так и перечисленных ниже переменных: + +~~~css +[data-dhx-theme='contrast-dark'] { + /* шрифт */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, 0.86); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-black); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* конец шрифта */ + + /* граница */ + --dhx-border-color: rgba(255, 255, 255, 0.5); + --dhx-border-color-focused: rgba(255, 255, 255, 0.7); + /* конец границы */ + + /* цветовая схема */ + --dhx-l-contrast-offset: -12%; /* смещение яркости для контрастной темы */ + + --dhx-l-secondary: 60%; + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* конец цветовой схемы */ + + /* цвета темы */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* конец цветов темы */ + + /* служебные переменные DHTMLX Toolbar*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* конец служебных переменных DHTMLX Toolbar */ + + /* служебные переменные DHTMLX Grid*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* конец служебных переменных DHTMLX Grid*/ + + /* служебные переменные DHTMLX Calendar*/ + --dhx-s-calendar-muffled: .8; + /* конец служебных переменных DHTMLX Calendar*/ + + /* служебные переменные DHTMLX Slider*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* конец служебных переменных DHTMLX Slider*/ +} +~~~ + +## Стили, специфичные для Spreadsheet {#spreadsheet-specific-styles} + +Список переменных, специфичных для компонента Spreadsheet, включает следующее: + +- для темы **светлой по умолчанию** и скина **светлый высококонтрастный**: + +~~~css +:root, [data-dhx-theme],[data-dhx-theme='contrast-light'] { + + --dhx-spreadsheet-range-background-1: #8be3c9; + --dhx-spreadsheet-range-background-2: #f6f740; + --dhx-spreadsheet-range-background-3: #f7b69e; + --dhx-spreadsheet-range-background-4: #e0fcff; + --dhx-spreadsheet-range-background-5: #8fe9ff; + --dhx-spreadsheet-range-background-6: #d8ffa6; + --dhx-spreadsheet-range-background-7: #e4e4e4; + --dhx-spreadsheet-range-background-8: #ecb6ff; + + --dhx-spreadsheet-range-color-1: #00815a; + --dhx-spreadsheet-range-color-2: #bfc000; + --dhx-spreadsheet-range-color-3: #c55933; + --dhx-spreadsheet-range-color-4: #0cc1d6; + --dhx-spreadsheet-range-color-5: #0080a3; + --dhx-spreadsheet-range-color-6: #529a0a; + --dhx-spreadsheet-range-color-7: #6d767b; + --dhx-spreadsheet-range-color-8: #ba38e7; + +} +~~~ + +- для тем **тёмной** и **тёмной высококонтрастной**: + +~~~css +[data-dhx-theme='contrast-dark'], +[data-dhx-theme='dark'] { + --dhx-spreadsheet-range-background-1: #00815a; + --dhx-spreadsheet-range-background-2: #bfc000; + --dhx-spreadsheet-range-background-3: #c55933; + --dhx-spreadsheet-range-background-4: #0cc1d6; + --dhx-spreadsheet-range-background-5: #0080a3; + --dhx-spreadsheet-range-background-6: #529a0a; + --dhx-spreadsheet-range-background-7: #6d767b; + --dhx-spreadsheet-range-background-8: #ba38e7; + + --dhx-spreadsheet-range-color-1: #8be3c9; + --dhx-spreadsheet-range-color-2: #f6f740; + --dhx-spreadsheet-range-color-3: #f7b69e; + --dhx-spreadsheet-range-color-4: #e0fcff; + --dhx-spreadsheet-range-color-5: #8fe9ff; + --dhx-spreadsheet-range-color-6: #d8ffa6; + --dhx-spreadsheet-range-color-7: #e4e4e4; + --dhx-spreadsheet-range-color-8: #ecb6ff; + +} +~~~ + +## Установка тем {#setting-themes} + +Чтобы установить нужную тему — встроенную тему Spreadsheet или [пользовательскую](themes/custom_theme.md) — используйте один из описанных ниже способов: + +### Использование атрибута `data-dhx-theme` {#using-the-data-dhx-theme-attribute} + +Можно выбрать один из следующих вариантов: + +- установить атрибут `data-dhx-theme` для выбранного контейнера: + +~~~html title="index.html" + +
+~~~ + +- установить атрибут `data-dhx-theme` для HTML-элемента, например для `documentElement`: + +~~~jsx title="index.js" +document.documentElement.setAttribute("data-dhx-theme", "dark"); +~~~ + +### Использование метода `dhx.setTheme()` {#using-the-dhxsettheme-method} + +Метод `dhx.setTheme()` принимает следующие параметры: + +- `theme: string` — (обязательный) имя темы. Может быть: + - именем темы Spreadsheet: `"light" | "contrast-light" | "dark" | "contrast-dark"` + - именем [пользовательской темы](themes/custom_theme.md) + - `"light"` — по умолчанию +- `container: string | HTMLElement` — (необязательный) контейнер, к которому должна быть применена тема. Может быть: + - HTMLElement + - строковым значением с ID контейнера или ID ячейки Layout + - `document.documentElement` — по умолчанию + +Примеры ниже показывают, как использовать метод `dhx.setTheme()`: + +- установка темы для body или контейнера + +~~~html +
+
Other content
+ + +~~~ + +- установка темы для контейнера, указанного через HTMLElement + +~~~html +
+
Other content
+ + +~~~ + +**Связанные примеры:** + +- [Spreadsheet. Светлая, тёмная, светлая высококонтрастная и тёмная высококонтрастная темы (скины)](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet) +- [Spreadsheet. Пользовательские темы (скины)](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/using_typescript.md b/i18n/ru/docusaurus-plugin-content-docs/current/using_typescript.md new file mode 100644 index 00000000..10620877 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/using_typescript.md @@ -0,0 +1,27 @@ +--- +sidebar_label: Поддержка TypeScript +title: Поддержка TypeScript +description: Вы можете узнать об использовании TypeScript с библиотекой DHTMLX JavaScript Spreadsheet в документации. Изучите руководства разработчика и справочник API, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Поддержка TypeScript {#typescript-support} + +Начиная с версии v4.0, DHTMLX Spreadsheet поддерживает определения TypeScript. Встроенная поддержка TypeScript готова к использованию. + +{{note Вы можете попробовать функциональность непосредственно в нашем Snippet Tool.}} + +![Поддержка TypeScript в DHTMLX Spreadsheet с проверкой типов и автодополнением в IDE](/img/typescript.png) + +## Преимущества использования TypeScript {#advantages-of-using-typescript} + +Зачем использовать DHTMLX Spreadsheet с TypeScript? + +Главное преимущество TypeScript состоит в том, что он делает разработку значительно более эффективной. + +Создание приложений становится надёжнее, поскольку проверка типов и автодополнение помогают избежать потенциальных ошибок. Кроме того, TypeScript подсказывает, какие типы данных использовать при работе с API DHTMLX Spreadsheet. + +## Подсказки JSDoc {#jsdoc-hints} + +Определения типов DHTMLX Spreadsheet включают аннотации JSDoc для всего API. Это означает, что при работе с библиотекой в IDE вы можете читать описания методов, проверять типы параметров и просматривать примеры кода, не выходя из редактора. Наведите курсор на любой метод или свойство, чтобы увидеть встроенную документацию. + +![Подсказки JSDoc в DHTMLX Spreadsheet, отображающие встроенную документацию по методам в IDE](/img/jsdoc_hints.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/vuejs_integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/vuejs_integration.md new file mode 100644 index 00000000..bc88d852 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/vuejs_integration.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Интеграция с Vue +title: Интеграция с Vue +description: В документации вы можете узнать об интеграции библиотеки DHTMLX JavaScript Spreadsheet с Vue. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Интеграция с Vue {#integration-with-vue} + +:::tip +Перед изучением этой документации вы должны быть знакомы с основными концепциями и паттернами [**Vue**](https://vuejs.org/). Для повторения материала обратитесь к [**документации Vue 3**](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX Spreadsheet совместим с **Vue**. Мы подготовили примеры кода для работы DHTMLX Spreadsheet с **Vue 3**. Подробнее см. соответствующий [**Пример на GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo). + +## Создание проекта {#creating-a-project} + +:::info +Перед созданием нового проекта установите [**Node.js**](https://nodejs.org/en/). +::: + +Для создания проекта на **Vue** выполните следующую команду: + +~~~json +npm create vue@latest +~~~ + +Эта команда устанавливает и запускает `create-vue` — официальный инструмент для создания проектов на **Vue**. Подробнее см. [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +Назовём проект **my-vue-spreadsheet-app**. + +### Установка зависимостей {#installation-of-dependencies} + +Перейдите в директорию приложения: + +~~~json +cd my-vue-spreadsheet-app +~~~ + +Установите зависимости и запустите сервер разработки. Для этого используйте менеджер пакетов: + +- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды: + +~~~jsx +yarn +yarn start // или yarn dev +~~~ + +- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды: + +~~~json +npm install +npm run dev +~~~ + +Приложение должно запуститься на localhost (например, `http://localhost:3000`). + +## Создание Spreadsheet {#creating-spreadsheet} + +Теперь нужно получить исходный код DHTMLX Spreadsheet. Сначала остановите приложение и установите пакет Spreadsheet. + +### Шаг 1. Установка пакета {#step-1-package-installation} + +Загрузите [**ознакомительный пакет Spreadsheet**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) и следуйте инструкциям в файле README. Обратите внимание, что ознакомительная версия Spreadsheet доступна только на 30 дней. + +### Шаг 2. Создание компонента {#step-2-component-creation} + +Теперь нужно создать компонент Vue для добавления Spreadsheet в приложение. Создайте новый файл в директории *src/components/* и назовите его *Spreadsheet.vue*. + +#### Импорт исходных файлов {#import-source-files} + +Откройте файл *Spreadsheet.vue* и импортируйте исходные файлы Spreadsheet. Обратите внимание: + +- если вы используете PRO-версию и устанавливаете пакет Spreadsheet из локальной папки, пути импорта выглядят следующим образом: + +~~~html title="Spreadsheet.vue" + +~~~ + +Обратите внимание, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что вы импортируете CSS-файл как *spreadsheet.min.css*. + +- если вы используете ознакомительную версию Spreadsheet, укажите следующие пути: + +~~~html title="Spreadsheet.vue" + +~~~ + +В этом руководстве показано, как настроить **ознакомительную** версию Spreadsheet. + +#### Задание контейнера и добавление Spreadsheet {#setting-the-container-and-adding-spreadsheet} + +Чтобы отобразить Spreadsheet на странице, необходимо создать контейнер для него и инициализировать компонент с помощью соответствующего конструктора: + +~~~html {2,7-8,18} title="Spreadsheet.vue" + + + +~~~ + +#### Добавление стилей {#adding-styles} + +Для корректного отображения Spreadsheet необходимо задать важные стили для Spreadsheet и его контейнера в главном CSS-файле проекта: + +~~~css title="main.css" +/* стили для начальной страницы */ +html, +body, +#app { /* убедитесь, что используете корневой контейнер #app */ + height: 100%; + padding: 0; + margin: 0; +} + +/* стили для контейнера Spreadsheet */ +.widget { + height: 100%; +} +~~~ + +#### Загрузка данных {#loading-data} + +Чтобы добавить данные в Spreadsheet, необходимо подготовить набор данных. Создайте файл *data.js* в директории *src/* и добавьте в него данные: + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // ещё ячейки с данными + ] + } +} +~~~ + +Затем откройте файл *App.vue*, импортируйте данные и инициализируйте их с помощью внутреннего метода `data()`. После этого можно передать данные в созданный компонент `` в виде **props**: + +~~~html {3,7-9,14} title="App.vue" + + + + +~~~ + +Перейдите в файл *Spreadsheet.vue* и примените переданные **props** к Spreadsheet с помощью метода [`parse()`](api/spreadsheet_parse_method.md): + +~~~html {6,10} title="Spreadsheet.vue" + + + +~~~ + +Компонент Spreadsheet готов к использованию. При добавлении элемента на страницу Spreadsheet инициализируется с данными. Вы также можете передать необходимые параметры конфигурации. Полный список доступных свойств см. в [документации API Spreadsheet](api/overview/properties_overview.md). + +#### Обработка событий {#handling-events} + +Когда пользователь выполняет действие в Spreadsheet, виджет вызывает событие. Вы можете использовать эти события для обнаружения действия и выполнения нужного кода. См. [полный список событий](api/overview/events_overview.md). + +Откройте *Spreadsheet.vue* и дополните метод `mounted()`: + +~~~html {8-11} title="Spreadsheet.vue" + + +//... +~~~ + +После этого можно запустить приложение и увидеть Spreadsheet с данными на странице. + +![DHTMLX Spreadsheet, инициализированный с примером данных в приложении Vue 3](/img/integrations/trial_spreadsheet.png) + +Теперь вы знаете, как интегрировать DHTMLX Spreadsheet с Vue. Вы можете настроить код в соответствии со своими требованиями. Финальный пример можно найти на [**GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 00000000..cd3cb90b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,803 @@ +--- +sidebar_label: Что нового +title: Что нового в DHTMLX Spreadsheet +description: В документации вы можете узнать, что нового в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Что нового {#whats-new} + +Если вы обновляете Spreadsheet с более ранней версии, ознакомьтесь с [Миграцией на новую версию](migration.md). + +## Версия 6.0.2 {#version-602} + +Выпущена 1 июля 2026 года + +### Исправления {#fixes} + +- Границы ячеек терялись после цикла «Копировать из Excel → Вставить в Spreadsheet → Экспортировать/Импортировать» +- Данные, вставленные ниже последней строки, не отображались, так как сетка не добавляла новые строки для их размещения + +## Версия 6.0 {#version-60} + +Выпущена 20 мая 2026 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/meet-dhtmlx-spreadsheet-6-0/) + +### Критические изменения {#breaking-changes} + +В новом релизе внесены значительные изменения в API Spreadsheet: ряд методов, свойств и событий объявлен устаревшим. Ознакомьтесь с [Руководством по миграции](migration.md#52---60), чтобы оставаться в актуальной версии. + +### Новый функционал {#new-functionality} + +- Представлена [обёртка React Spreadsheet](react.md). Примеры можно найти в [репозитории демо на GitHub](https://github.com/DHTMLX/react-spreadsheet-examples) +- Представлен модуль [`SheetManager`](api/overview/sheetmanager_overview.md) — централизованный API для управления листами в Spreadsheet. Доступен через свойство `spreadsheet.sheets` и заменяет все [устаревшие методы работы с листами](migration.md#deprecated-methods) на корневом экземпляре Spreadsheet. + - новые методы: [`sheets.add()`](api/sheetmanager_add_method.md), [`sheets.remove()`](api/sheetmanager_remove_method.md), [`sheets.getAll()`](api/sheetmanager_getall_method.md), [`sheets.getActive()`](api/sheetmanager_getactive_method.md), [`sheets.setActive()`](api/sheetmanager_setactive_method.md), [`sheets.clear()`](api/sheetmanager_clear_method.md), [`sheets.get()`](api/sheetmanager_get_method.md) +- Возможность указать [пользовательскую формулу](functions.md#custom-formulas) через новый метод [`addFormula()`](api/spreadsheet_addformula_method.md) +- Возможность отображать числа в [научной (экспоненциальной) нотации](number_formatting.md#scientific-number-format) + +### Обновления {#updates} + +- Возможность настройки размера шрифта содержимого ячеек: + - установка размера шрифта по умолчанию через [встроенный элемент управления на панели инструментов](customization.md#default-controls) + - установка [пользовательского размера шрифта](customization.md#custom-font-size) для элемента управления панели инструментов +- В [движок формул](functions.md#math-functions) добавлены новые условные агрегатные функции: `COUNTIF`, `COUNTIFS`, `SUMIF`, `SUMIFS`, `AVERAGEIF`, `AVERAGEIFS`, `MAXIFS`, `MINIFS` +- В [движок формул](functions.md#array-functions) добавлены новые функции динамических массивов: `CHOOSECOLS`, `CHOOSEROWS`, `DROP`, `EXPAND`, `RANDARRAY`, `SEQUENCE`, `SORT`, `SORTBY`, `TAKE`, `TEXTSPLIT`, `TOCOL`, `TOROW`, `UNIQUE`, `WRAPCOLS`, `WRAPROWS` +- Добавлен хелпер [`awaitRedraw()`](awaitredraw.md) для Spreadsheet — позволяет определить момент отрисовки и выполнить нужный код после завершения рендеринга компонента +- В определения типов добавлены [аннотации JSDoc](using_typescript.md#jsdoc-hints), обеспечивающие встроенные описания API, типы параметров и примеры кода непосредственно в IDE + +### Исправления {#fixes-1} + +- Потеря фокуса при переключении активного листа через API +- Возврат массива изменённых ячеек в режиме транспонирования +- Пересчёт зависимых формул после вставки +- Перезапись заблокированных ячеек формулами при операциях вставки +- Проблема с выполнением математических формул в заблокированной ячейке +- Экранирование имён листов, похожих на ссылки на ячейки, начинающихся с цифры или содержащих специальные символы +- Проблема с динамическими массивами, когда id ячейки равен нулю (первая ячейка первого листа) + +## Версия 5.2.9 {#version-529} + +Выпущена 8 января 2026 года + +### Исправления {#fixes-2} + +- Фильтрация выпадающего списка редактора теперь использует `startsWith` вместо `includes` при вводе в открытом редакторе +- Границы ячеек Excel теперь сохраняются после экспорта и импорта +- Предотвращено переопределение размера шрифта при вставке из внешних таблиц + +## Версия 5.2.8 {#version-528} + +Выпущена 15 декабря 2025 года + +### Исправления {#fixes-3} + +- Проблема с потерей фокуса при выборе другой ячейки во время редактирования формулы +- Проблемы с навигацией с помощью клавиатуры + +## Версия 5.2.7 {#version-527} + +Выпущена 9 декабря 2025 года + +### Исправления {#fixes-4} + +- Ошибка экспорта в Excel, если лист содержит ячейку со списком проверки данных +- Проблема, при которой выпадающий список со списком проверки данных переставал работать, если начальное значение ячейки равно `%` +- Проблема с формулой `INDEX/MATCH`, ломавшейся после установки фокуса в строке формул + +## Версия 5.2.6 {#version-526} + +Выпущена 19 ноября 2025 года + +### Исправления {#fixes-5} + +- Лишний DOM-элемент, появлявшийся при импорте .xlsx-файла с ячейкой, содержащей перенесённый текст +- Некорректное отображение меток столбцов/строк в контекстном меню столбца при управлении столбцами +- Нарушение структуры листа при закреплении диапазона, содержащего объединённые ячейки +- Улучшена навигация с помощью клавиатуры на листах с объединёнными ячейками + +## Версия 5.2.5 {#version-525} + +Выпущена 23 октября 2025 года + +### Исправления {#fixes-6} + +- Проблема с уменьшением высоты строки при применении опции «Перенос» к содержимому, умещающемуся в ширину столбца + +## Версия 5.2.4 {#version-524} + +Выпущена 24 сентября 2025 года + +### Исправления {#fixes-7} + +- Добавлена поддержка экспорта/импорта многострочных ячеек + +## Версия 5.2.3 {#version-523} + +Выпущена 10 сентября 2025 года + +### Исправления {#fixes-8} + +- Некорректное выравнивание чисел в ячейках при вставке массивов +- Улучшен ввод на азиатских языках + +## Версия 5.2.2 {#version-522} + +Выпущена 18 августа 2025 года + +### Обновления {#updates-1} + +- Улучшен метод `setValidation()` для фильтрации по первым символам в встроенном выпадающем редакторе +- Добавлена поддержка экспорта/импорта скрытых/закреплённых столбцов/строк, поля выбора проверки данных и ссылок Excel в файлах .xlsx + +### Исправления {#fixes-9} + +- Проблема с разъединением объединённых ячеек в закреплённых столбцах/строках +- Проблема с применением встроенных тем +- Проблема с вводом на китайском языке +- Проблема с вводом на японском языке в MacOS: подтверждение автодополнения закрывало редактор +- Проблема с компиляцией файла `spreadsheet.d.ts` + +## Версия 5.2.1 {#version-521} + +Выпущена 30 июня 2025 года + +### Обновления {#updates-2} + +- Возможность удалять несколько столбцов/строк за одну операцию через контекстное меню + +### Исправления {#fixes-10} + +- Ошибка скрипта при копировании/вставке +- Ошибка при удалении строки, когда выбраны две или более последних строки на листе +- Проблема с предупреждением при настройке панели инструментов +- Проблема с отсутствием локализации для датапикера +- Проблема с ненужным отображением вертикальной прокрутки на панели инструментов +- Математические исправления для корректных вычислений в формулах + +## Версия 5.2 {#version-52} + +Выпущена 20 мая 2025 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/) + +### Критические изменения {#breaking-changes-1} + +В новом релизе внесены изменения в функциональность закрепления/открепления столбцов и строк. Ознакомьтесь с [Руководством по миграции](migration.md#51---52), чтобы оставаться в актуальной версии. + +### Устаревшее {#deprecated} + +- Свойства конфигурации `leftSplit` и `topSplit` удалены + +### Новый функционал {#new-functionality-1} + +- Редактирование ячеек: + - возможность [создавать стилизованную границу для группы ячеек через интерфейс](data_formatting.md#styled-borders-for-cells) +- Закрепление/открепление столбцов и строк: + - возможность закреплять/откреплять столбцы и строки через [интерфейс](work_with_rows_cols.md#freezingunfreezing-rows-and-columns) + - возможность закреплять/откреплять столбцы и строки через [API](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + - новые методы: [`freezeCols()`](api/spreadsheet_freezecols_method.md), [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md), [`freezeRows()`](api/spreadsheet_freezerows_method.md), [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + - новое действие: [`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + - новое свойство `freeze` для объекта *sheets* метода [`parse()`](api/spreadsheet_parse_method.md) +- Скрытие/отображение столбцов и строк: + - возможность скрывать/отображать столбцы и строки через [интерфейс](work_with_rows_cols.md#hidingshowing-rows-and-columns) + - возможность скрывать/отображать столбцы и строки через [API](working_with_ssheet.md#hidingshowing-rows-and-columns) + - новые методы: [`hideCols()`](api/spreadsheet_hidecols_method.md), [`showCols()`](api/spreadsheet_showcols_method.md), [`hideRows()`](api/spreadsheet_hiderows_method.md), [`showRows()`](api/spreadsheet_showrows_method.md) + - новое действие: [`toggleVisibility`](api/overview/actions_overview.md#list-of-actions) + - новое свойство `hidden` для конфигов *cols* и *rows* объекта *sheets* метода [`parse()`](api/spreadsheet_parse_method.md) +- Работа с формулами: + - добавлено [всплывающее окно с описаниями формул](functions.md#popup-with-formula-description) + - добавлена новая локаль: [`formulas`](localization.md#default-locale-for-formulas) +- Импорт файлов: + - добавлено новое событие [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md), сигнализирующее о завершении загрузки данных в Spreadsheet + +### Исправления {#fixes-11} + +- Проблема с сортировкой +- Проблема со смещением фильтра на новый столбец +- Ошибка при блокировке добавления листа с помощью действия "addSheet" +- Проблема с фильтрацией пустых ячеек +- Проблема с редактированием большой объединённой таблицы +- Ошибка при отмене действия в ячейке +- Ошибка при вводе/редактировании ячейки с формулой IF +- Ошибка скрипта после вырезания и вставки ссылки +- Проблема с изменением выравнивания текста при экспорте/импорте файла .xlsx +- Проблема с потерей фокуса Spreadsheet после некоторых действий +- Улучшена производительность + +## Версия 5.1.8 {#version-518} + +Выпущена 10 декабря 2024 года + +### Исправления {#fixes-12} + +- Проблема с локальным ознакомительным пакетом при импорте во фреймворки + +## Версия 5.1.7 {#version-517} + +Выпущена 27 ноября 2024 года + +### Исправления {#fixes-13} + +- Удалено предупреждение «item not found» +- Оптимизация парсинга +- Открытый редактор ячейки не закрывается при переходе к соседней ячейке с помощью сочетания клавиш (Shift)+Tab + +## Версия 5.1.6 {#version-516} + +Выпущена 25 июля 2024 года + +### Исправления {#fixes-14} + +- Вставленные строки/столбцы отсутствовали в сериализованных данных при их загрузке +- Пустая ячейка с датой отображала последнюю выбранную дату в датапикере и таймпикере +- Проблема с локализацией чисел и пустым строковым значением в ячейке +- Поиск не получал фокус во время редактирования ячейки +- Использование `ngIf/ngFor` для контейнера Spreadsheet приводило к поломке компонента + +## Версия 5.1.5 {#version-515} + +Выпущена 13 февраля 2024 года + +### Исправления {#fixes-15} + +- Вставка ячейки, содержащей нули, создавала пустую ячейку +- Копирование и последующая вставка пустой ячейки вызывали ошибку +- Исправлена функциональность `setValue()` для формата common +- Сохранение id листа при сериализации и его возврат событием `afterAction` +- Исправлено использование межлистовых формул через интерфейс +- Исправлен поиск Ctrl+F + +## Версия 5.1.4 {#version-514} + +Выпущена 31 января 2024 года + +### Исправления {#fixes-16} + +- Некорректная вставка объединённых ячеек + +## Версия 5.1.3 {#version-513} + +Выпущена 29 января 2024 года + +### Исправления {#fixes-17} + +- Некорректный парсинг числовых значений в формате "common" +- Проблемы с локализацией i18n при совместном использовании Spreadsheet и Suite +- Проблемы с производительностью при загрузке таблицы с большим количеством объединений +- Некорректная вставка объединённых ячеек + +## Версия 5.1.2 {#version-512} + +Выпущена 16 января 2024 года + +### Исправления {#fixes-18} + +- Исправлена проблема с копированием и вставкой ячеек: скопированные ячейки с датой из Excel в Spreadsheet отображались как строки +- Исправлена проблема с числовым значением в формате "common", форматируемым как число +- Исправлена проблема с парсингом данных, мутирующим исходный набор данных +- Исправлена проблема с вставкой объединённых ячеек + +## Версия 5.1.1 {#version-511} + +Выпущена 14 декабря 2023 года + +### Исправления {#fixes-19} + +- Исправлена проблема с методом `fixColumn()`, игнорировавшим стрелку выпадающего редактора +- Исправлена проблема с приоритетом стилей ячеек над стилями диапазона +- Исправлена проблема с копированием/вставкой содержимого ячеек с применёнными стилями и функцией Undo +- Исправлена проблема с изменением ссылки при вставке в другую ячейку +- Исправлены проблемы с копированием/вставкой объединённых ячеек +- Исправлена проблема с сериализацией стилей +- Исправлена прокрутка к ячейке при вызове методов `setSelectedCell()` или `setFocusedCell()` + +## Версия 5.1 {#version-51} + +Выпущена 7 декабря 2023 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-1/) + +### Новый функционал {#new-functionality-2} + +- [Поддержка новых тем](/themes/): Dark, Light High Contrast и Dark High Contrast +- Расширенная [поддержка локализации форматов чисел, дат, времени и валют](number_formatting.md#number-date-time-currency-localization) +- [Интеграция со Svelte](svelte_integration.md) +- Возможность [задать пользовательское имя для экспортируемого файла .xlsx](loading_data.md#how-to-set-a-custom-name-for-an-exported-file) +- Возможность [сохранять статус «заблокированной» ячейки](loading_data.md#setting-the-locked-state-for-a-cell) и [указывать ссылку для ячейки](loading_data.md#adding-a-link-into-a-cell) в наборе данных + +### Обновления {#updates-3} + +- Обновлены [интеграции с React, Angular и Vue.js](/integrations/) +- Автоматическое [преобразование строчных букв в прописные](functions.md) в формулах +- Автозакрытие формул + +### Исправления {#fixes-20} + +- Исправлена проблема с применением Undo к значению, установленному в ячейке +- Исправлено ограничение на количество вставляемых строк +- Исправлена замена пробелов символами ` ` в формулах в строке редактирования +- Исправлена некорректная работа импорта Excel с дате-подобными значениями +- Исправлено некорректное редактирование блока ячеек +- Исправлена ошибка скрипта при вызове `getExcelDate()` во время фильтрации +- Исправлено преобразование текстового значения в число при вставке содержимого ячейки +- Исправлена некорректная вставка данных из файла Excel с изменённой шириной столбцов + +## Версия 5.0.10 {#version-5010} + +Выпущена 27 ноября 2023 года + +### Исправления {#fixes-21} + +- Исправлены проблемы с типами + +## Версия 5.0.9 {#version-509} + +Выпущена 24 октября 2023 года + +### Исправления {#fixes-22} + +- Исправлен некорректный вызов метода setStyle(), вызывавшего события before/afterSelectionSet +- Исправлен некорректный перенос содержимого +- Исправлены проблемы с типами + +## Версия 5.0.7 {#version-507} + +Выпущена 21 сентября 2023 года + +### Исправления {#fixes-23} + +- Исправлена проблема с экспортом формул в Excel +- Исправлена проблема с восстановлением вырезанного содержимого ячейки по нажатию кнопки Undo + +## Версия 5.0.6 {#version-506} + +Выпущена 18 сентября 2023 года + +### Исправления {#fixes-24} + +- Исправлена проблема с отображением нулей +- Исправлена проблема с применением стилей цвета, заданных как строковые значения +- Исправлена проблема с уязвимостью XSS +- Исправлена проблема, при которой изменение значения в неактивном листе изменяло значение в активном листе + +## Версия 5.0.5 {#version-505} + +Выпущена 10 августа 2023 года + +### Исправления {#fixes-25} + +- Исправлена проблема с уязвимостью XSS +- Исправлена некорректная вставка данных, содержащих объединения ячеек + +## Версия 5.0.4 {#version-504} + +Выпущена 5 июня 2023 года + +### Исправления {#fixes-26} + +- Исправлены ошибки при выделении блока или вызове контекстного меню в режиме только для чтения +- Исправлено отображение меню Edit в режиме только для чтения +- Исправлено некорректное округление чисел +- Исправлена проблема с заменой формулы её результатом в строке редактирования после объединения ячеек + +## Версия 5.0.3 {#version-503} + +Выпущена 26 апреля 2023 года + +### Исправления {#fixes-27} + +- Исправлено некорректное вычисление последней ячейки для объединения +- Исправлены проблемы с импортом/экспортом Excel +- Исправлена проблема, при которой данные менялись местами после применения проверки данных +- Исправлена проблема, при которой текст с символом «:» интерпретировался как ссылка +- Исправлена проблема с загрузкой многострочных данных. Теперь можно задать свойство `multiline: "wrap"` в объекте [`styles`](api/spreadsheet_parse_method.md#parsing-styled-data) +- Исправлена проблема с объединением ячеек при инициализации Spreadsheet, когда [`multiSheets`](api/spreadsheet_multisheets_config.md) установлен в `false` +- Исправлена проблема со сбросом позиции прокрутки после двойного клика на курсоре изменения размера столбца в заголовке таблицы + +## Версия 5.0.2 {#version-502} + +Выпущена 14 февраля 2023 года + +### Исправления {#fixes-28} + +- Исправлена проблема, при которой выравнивание ячейки не сохранялось после копирования и вставки значения ячейки +- Исправлена проблема, при которой результаты фильтрации изменялись после сортировки данных +- Исправлена проблема с отображением 12-часового формата в таймпикере +- Исправлена проблема с удалением стилей ссылок после автозаполнения ячейки +- Теперь можно добавлять несколько [пользовательских форматов дат](number_formatting.md#formats-customization) +- Теперь можно удалять столбцы и строки, даже если они относятся к [ограниченным столбцам и строкам](configuration.md#number-of-rows-and-columns) + +## Версия 5.0.1 {#version-501} + +Выпущена 19 января 2023 года + +### Исправления {#fixes-29} + +- Исправлена проблема, при которой значения, введённые в ячейку с форматом валюты, сохранялись как строка, а не как число +- Исправлена проблема со сбросом выделения ранее найденных ячеек +- Исправлена проблема с отображением данных после их парсинга в таблицу +- Исправлена проблема с перерисовкой сетки после удаления столбцов +- Исправлена проблема с сортировкой пустых значений +- Исправлена проблема с проверкой числовых значений при использовании выпадающего списка +- Исправлена работа автозаполнения ячеек буквенно-цифровыми значениями +- Улучшена работа с масками числовых форматов +- Теперь все числовые значения в ячейках по умолчанию выравниваются по правому краю + +## Версия 5.0 {#version-50} + +Выпущена 21 ноября 2022 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-0/) + +### Критические изменения {#breaking-changes-2} + +В новом релизе внесены изменения в свойство [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md). Ознакомьтесь со [статьёй о миграции](migration.md#43---50), чтобы оставаться в актуальной версии. + +### Новый функционал {#new-functionality-3} + +- Поиск данных: + - возможность искать данные через [интерфейс](data_search.md) + - возможность искать данные через [API](working_with_ssheet.md#searching-for-data): + - новые методы: [`search()`](api/spreadsheet_search_method.md) и [`hideSearch()`](api/spreadsheet_hidesearch_method.md) +- Фильтрация данных: + - возможность фильтровать данные через [интерфейс](filtering_data.md) + - возможность фильтровать данные через [API](working_with_ssheet.md#filtering-data): + - новые методы: [`setFilter()`](api/spreadsheet_setfilter_method.md) и [`getFilter()`](api/spreadsheet_getfilter_method.md) + - новое действие: [`filter`](api/overview/actions_overview.md#list-of-actions) +- Объединение/разделение ячеек: + - возможность объединять/разделять ячейки через [интерфейс](merge_cells.md) + - возможность объединять/разделять ячейки через [API](working_with_cells.md#merging-cells): + - новое свойство объекта листа: [`merged`](api/spreadsheet_parse_method.md) + - новый метод: [`mergeCells()`](api/spreadsheet_mergecells_method.md) + - новые действия: [`merge`](api/overview/actions_overview.md#list-of-actions) и [`unmerge`](api/overview/actions_overview.md#list-of-actions) +- Автоподбор ширины столбца: + - возможность автоматически подбирать ширину столбца через [интерфейс](work_with_rows_cols.md#autofit-column-width) + - возможность автоматически подбирать ширину столбца через [API](working_with_ssheet.md#autofit-column-width): + - новый метод: [`fitColumn()`](api/spreadsheet_fitcolumn_method.md) + - новое действие: [`fitColumn`](api/overview/actions_overview.md#list-of-actions) +- Вставка гиперссылки: + - возможность вставить гиперссылку в ячейку через [интерфейс](work_with_cells.md#inserting-a-hyperlink-into-a-cell) + - возможность вставить гиперссылку в ячейку через [API](working_with_cells.md#inserting-a-hyperlink-into-a-cell): + - новый метод: [`insertLink()`](api/spreadsheet_insertlink_method.md) + - новое действие: [`insertLink`](api/overview/actions_overview.md#list-of-actions) +- [Зачёркнутый формат данных](data_formatting.md#color-and-style) + +### Обновления {#updates-4} + +- [Расширенный список опций локализации](localization.md#default-locale) +- [Расширенный список сочетаний клавиш](hotkeys.md): + - для поиска данных + - `Ctrl (Cmd) + F` + - `Ctrl (Cmd) + G` + - `Ctrl (Cmd) + Shift + G` + - для выделения всего столбца/строки + - `Ctrl (Cmd) + Space` + - `Shift + Space` + - для выравнивания содержимого ячейки по левому/правому краю/по центру + - `Ctrl (Cmd) + Shift + L` + - `Ctrl (Cmd) + Shift + R` + - `Ctrl (Cmd) + Shift + E` + - для зачёркивания содержимого ячейки + - `Alt + Shift + 5 (Cmd + Shift + X)` + - для добавления новых листов и переключения между ними + - `Shift + F11` + - `Alt + Arrow Up / Arrow Down` + - для вставки гиперссылки в ячейку + - `Ctrl (Cmd) + K` + +## Версия 4.3 {#version-43} + +Выпущена 23 мая 2022 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-3/) + +### Критические изменения {#breaking-changes-3} + +Версия 4.3 не вносит критических изменений, но представляет новый способ обработки действий в таблице. Подробности см. в [статье о миграции](migration.md#42---43). + +### Новый функционал {#new-functionality-4} + +- Возможность добавлять в ячейки выпадающий список вариантов через метод [`setValidation()`](api/spreadsheet_setvalidation_method.md) или через [интерфейс](work_with_cells.md#using-drop-down-lists-in-cells) +- Возможность закреплять строки в верхней части таблицы через свойство `topSplit` +- Возможность сортировать данные через метод [`sortCells()`](api/spreadsheet_sortcells_method.md) или через [интерфейс](sorting_data.md) +- [Возможность разбивать длинный текст на несколько строк](data_formatting.md#wrap-text-in-a-cell) (кнопка *Перенос текста* добавлена на панель инструментов) +- Значительно расширенный список поддерживаемых [функций для работы с датами, финансовых, математических и строковых функций](functions.md#information-functions) (помечены меткой *добавлено в v4.3*) +- Поддержка [функций поиска](functions.md#lookup-functions) +- Добавлен [формат времени](number_formatting.md#default-number-formats) +- Возможность задавать формат времени в ячейках таблицы через свойство [`timeFormat`](api/spreadsheet_localization_config.md) +- Возможность вводить время в ячейку через таймпикер +- [Экспорт в JSON](api/export_json_method.md) +- [Импорт из JSON](api/spreadsheet_load_method.md#loading-json-files) +- Добавлены новые события: [beforeAction](api/spreadsheet_beforeaction_event.md) и [afterAction](api/spreadsheet_afteraction_event.md) +- Новая [система действий](api/overview/actions_overview.md) + +### Обновления {#updates-5} + +- Обновлён метод [`parse()`](api/spreadsheet_parse_method.md). Добавлен новый атрибут **editor** объекта ячейки + +## Версия 4.2 {#version-42} + +Выпущена 29 ноября 2021 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-2-with130-new-functions-boolean-operators-date-format-row-resizing-much/) + +### Новый функционал {#new-functionality-5} + +- Поддержка функций для работы с [датами](functions.md#date-functions), [финансовых](functions.md#financial-functions), [информационных](functions.md#information-functions), [регулярных выражений](functions.md#regex-functions) и [других](functions.md#other-functions) +- Поддержка [логических операторов](functions.md#boolean-operators) +- Возможность изменять высоту строк через интерфейс +- В панель инструментов добавлена новая кнопка [Вертикальное выравнивание](data_formatting.md#alignment) +- Возможность задать активный лист через метод `setActiveSheet()` +- Возможность снимать выделение с указанных ячеек через метод [`removeSelectedCell()`](api/selection_removeselectedcell_method.md) объекта Selection +- Возможность очищать таблицу или её лист через методы [`clear()`](api/spreadsheet_clear_method.md) или `clearSheet()` соответственно +- Добавлены новые события: [`beforeClear`](api/spreadsheet_beforeclear_event.md), [`afterClear`](api/spreadsheet_afterclear_event.md), `beforeSheetClear`, `afterSheetClear` +- Возможность задавать формат дат в таблице через свойство [`dateFormat`](api/spreadsheet_localization_config.md) +- [Формат даты добавлен к форматам чисел по умолчанию](number_formatting.md#default-number-formats) + +### Обновления {#updates-6} + +- Расширенный список [опций локализации](localization.md) +- Расширенный список [математических](functions.md#math-functions) и [строковых](functions.md#string-functions) функций +- Обновлён блок выравнивания панели инструментов Spreadsheet. Подробности см. в [статье о миграции](migration.md#41---42) +- Обновлены методы [`parse()`](api/spreadsheet_parse_method.md) и [`serialize()`](api/spreadsheet_serialize_method.md). Новые атрибуты **rows** и **cols** объекта листа позволяют сохранять состояние высоты строк и ширины столбцов для каждого листа. + +### Исправления {#fixes-30} + +- Проблема с сочетанием клавиш CTRL-X +- Проблема, вызывавшая ошибку скрипта при редактировании ячейки в таблице со скрытой [строкой редактирования](api/spreadsheet_editline_config.md) + +## Версия 4.1.3 {#version-413} + +Выпущена 31 августа 2021 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-6-scheduler-5-3-12-suite-7-2-1/) + +### Исправления {#fixes-31} + +- Исправлено некорректное поведение операции undo при откате строки/столбца после их удаления +- Исправлена некорректная работа свойства "mask" в объекте числового формата +- Исправлена проблема, при которой пустые ячейки/строки в начале выделения обрезались после вставки данных из Excel в таблицу +- Исправлена проблема, при которой ячейки, на которые ссылается абсолютная формула, не отмечались +- Исправлена проблема с событием "afterSelectionSet", вызывавшимся дважды при выделении диапазона ячеек +- Исправлена проблема с определениями TypeScript +- Исправлены проблемы с числовым форматом "text" + +## Версия 4.1.2 {#version-412} + +Выпущена 3 июня 2021 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/maintenance-release-suite-7-1-9-spreadsheet-4-1-2/) + +### Исправления {#fixes-32} + +- Исправлено некорректное автозаполнение ячеек, содержащих математические функции, при применении автозаполнения к нескольким столбцам одновременно +- Исправлена проблема, при которой выбранная ячейка не снималась с выделения при следующем клике на неё с помощью "Ctrl + Click" +- Исправлена проблема с применением математической формулы к ячейке после выбора формулы с помощью клавиатурной навигации +- Исправлена проблема с блокировкой/разблокировкой ячеек, выбранных с помощью "Ctrl + Click" +- Исправлена проблема с методом "serialize()", из-за которой значения "0" не сериализовались +- Исправлена проблема с автоподбором ширины столбца при нажатии на границу между столбцами в заголовке +- Исправлена проблема с отображением нулевых значений в строке редактирования +- Исправлена проблема с редактированием длинного содержимого ячейки +- Исправлена проблема с экспортом таблицы в файл Excel +- Исправлены проблемы с некорректным поведением горизонтальной прокрутки и отображением столбцов при работе с таблицей, содержащей много столбцов +- Исправлена ошибка скрипта, возникавшая при использовании клавиатурной навигации в пустой таблице + +## Версия 4.1.1 {#version-411} + +Выпущена 14 апреля 2021 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-2-suite-7-1-5-spreadsheet-4-1-1/) + +### Исправления {#fixes-33} + +- Исправлена проблема с определениями TypeScript +- Исправлены проблемы с абсолютными ссылками +- Исправлены проблемы при работе с данными, загруженными из файла с расширением ".xlsx" +- Исправлена проблема с некорректной вставкой данных, скопированных из файла Excel +- Исправлена проблема, вызывавшая неверный результат при суммировании чисел с плавающей точкой + +## Версия 4.1 {#version-41} + +Выпущена 24 марта 2021 года + +[Обзор релиза в блоге](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-1-multiple-sheets/) + +### Новый функционал {#new-functionality-6} + +- Добавлена новая опция конфигурации [multiSheets](api/spreadsheet_multisheets_config.md) +- Возможность [работать с несколькими листами](work_with_sheets.md) в таблице +- Возможность использовать [перекрёстные ссылки между несколькими листами](work_with_sheets.md#cross-references-between-sheets) +- Возможность [загружать несколько листов](working_with_sheets.md#loading-multiple-sheets) в таблицу одновременно +- Добавлены новые методы для работы с [несколькими листами](working_with_sheets.md): `addSheet()`, `removeSheet()`, `getActiveSheet()`, `getSheets()` +- Добавлены новые события: `BeforeSheetAdd`, `AfterSheetAdd`, [`BeforeSheetChange`](api/spreadsheet_beforesheetchange_event.md), [`AfterSheetChange`](api/spreadsheet_aftersheetchange_event.md), `BeforeSheetRemove`, `AfterSheetRemove`, `BeforeSheetRename`, `AfterSheetRename` +- Возможность получить формулу ячейки через метод [getFormula()](api/spreadsheet_getformula_method.md) + +### Обновления {#updates-7} + +- Обновлён формат параметра "cell" методов [getValue()](api/spreadsheet_getvalue_method.md), [setValue()](api/spreadsheet_setvalue_method.md), [getStyle()](api/spreadsheet_getstyle_method.md), [setStyle()](api/spreadsheet_setstyle_method.md), [getFormat()](api/spreadsheet_getformat_method.md), [setFormat()](api/spreadsheet_setformat_method.md), [isLocked()](api/spreadsheet_islocked_method.md), [lock()](api/spreadsheet_lock_method.md), [unlock()](api/spreadsheet_unlock_method.md). Теперь ссылка на ячейку или диапазон ячеек может содержать имя вкладки. + +## Версия 4.0.5 {#version-405} + +Выпущена 3 февраля 2021 года + +### Исправления {#fixes-34} + +- Исправлена проблема с производительностью +- Исправлена ошибка скрипта, возникавшая при отмене пользователем последнего действия в ячейке +- Исправлена ошибка скрипта, возникавшая после вызова деструктора +- Исправлена проблема, при которой значения из диапазона ячеек обрезались при вставке в одну ячейку +- Исправлена проблема с распознаванием формата ячейки после её вырезания и повторной вставки + +## Версия 4.0.4 {#version-404} + +Выпущена 12 января 2021 года + +### Исправления {#fixes-35} + +- Исправлена некорректная работа функции "SUM" при работе с более чем 2 числами +- Исправлена проблема с инициализацией таблицы после вызова "destructor()" +- Исправлена проблема с типами + +## Версия 4.0.3 {#version-403} + +Выпущена 28 декабря 2020 года + +### Исправления {#fixes-36} + +- Исправлена проблема с установкой формата значения ячейки в наборе данных +- Исправлена ошибка, возникавшая при прикреплении таблицы к макету +- Исправлена проблема, при которой формула, установленная для ячейки, не редактировалась после вычисления результата +- Исправлена некорректная работа метода [setFocusedCell()](api/selection_setfocusedcell_method.md) +- Исправлено некорректное поведение фокуса при работе с формулами +- Исправлена проблема с выделением диапазона ячеек с помощью клавиши "ctrl" +- Исправлена проблема с добавлением диапазона ячеек через "ctrl+click" к ячейке с формулой +- Исправлена некорректная работа математических функций +- Исправлена проблема с формулой SUM() при её выборе через всплывающее окно и клик мышью + +## Версия 4.0.2 {#version-402} + +Выпущена 21 декабря 2020 года + +### Исправления {#fixes-37} + +- Исправлено некорректное поведение клавиатурной навигации при создании 2 и более объектов таблицы на странице +- Исправлена проблема с ошибкой из файла types.d.ts +- Исправлены проблемы с копированием и вставкой диапазона ячеек + +## Версия 4.0.1 {#version-401} + +Выпущена 2 декабря 2020 года + +### Исправления {#fixes-38} + +- Некорректное отображение подсказок при наведении на кнопки Undo/Redo на панели инструментов +- Проблема, возникавшая при удалении последнего столбца таблицы после импорта данных, превышающих размер таблицы +- Проблема с методом [setSelectedCell()](api/selection_setselectedcell_method.md), из-за которой формула выбранной ячейки не отображалась в строке формул +- Некорректная генерация определений TypeScript +- Визуальная проблема с выравниванием содержимого ячейки +- Проблема с сериализацией пустых ячеек или ячеек с нулевым значением + +## Версия 4.0 {#version-40} + +Выпущена 19 октября 2020 года + +### Новый функционал {#new-functionality-7} + +- [Математические функции](functions.md) +- [Поддержка TypeScript](using_typescript.md) +- Возможность закреплять столбцы в левой части таблицы через свойство конфигурации `leftSplit` +- [Текстовый формат для отображения содержимого ячейки в виде текста добавлен к форматам чисел по умолчанию](number_formatting.md#default-number-formats) +- Возможность выбирать несколько разрозненных диапазонов ячеек с помощью сочетания ["Ctrl+Shift+Left Click"](hotkeys.md#selection) + +### Исправления {#fixes-39} + +- Исправлена некорректная работа цветопикера при применении цвета фона к диапазону ячеек +- Исправлен некорректный парсинг чисел при импорте файлов Excel +- Исправлена проблема, при которой все данные, скопированные из таблицы Google или Excel, вставлялись в одну ячейку таблицы +- Исправлена некорректная работа свойства [editLine:false](api/spreadsheet_editline_config.md), вызывавшего завершение операции редактирования с ошибкой в консоли +- Исправлена проблема с событием `AfterValueChange`, вызывавшимся дважды + +## Версия 3.1.4 {#version-314} + +Выпущена 19 сентября 2019 года + +### Исправления {#fixes-40} + +- Исправления стилей + +## Версия 3.1.3 {#version-313} + +Выпущена 19 сентября 2019 года + +### Исправления {#fixes-41} + +- Проблема с фокусом на ячейке, когда Spreadsheet прикреплён к Layout + +## Версия 3.1.2 {#version-312} + +Выпущена 25 марта 2019 года + +### Исправления {#fixes-42} + +- Проблемы со стилями текста при экспорте в Excel +- Проблема с подчёркиванием текста с выравниванием по правому краю + +## Версия 3.1.1 {#version-311} + +Выпущена 25 марта 2019 года + +### Исправления {#fixes-43} + +- Проблемы с экспортом в Excel + +## Версия 3.1 {#version-31} + +Выпущена 21 марта 2019 года + +### Новый функционал {#new-functionality-8} + +- [Импорт из Excel](loading_data.md#loading-excel-file-xlsx) +- [Экспорт в Excel](loading_data.md#exporting-data) +- [Форматирование чисел](number_formatting.md) +- [Автозаполнение ячеек](work_with_cells.md#auto-filling-cells-with-content) + +### Обновления {#updates-8} + +- [Поведение сочетаний клавиш в диапазоне ячеек](hotkeys.md) + +### Исправления {#fixes-44} + +- Проблемы с сочетаниями клавиш для активной ячейки + +## Версия 3.0.3 {#version-303} + +Выпущена 13 декабря 2018 года + +### Исправления {#fixes-45} + +- Некорректное поведение в пользовательском режиме только для чтения +- Проблемы с методами удаления столбца/строки +- Проблемы с потерей фокуса на строке редактирования +- Проблемы с сочетаниями клавиш для активной ячейки + +## Версия 3.0.2 {#version-302} + +Выпущена 6 декабря 2018 года + +### Исправления {#fixes-46} + +- Проблемы с поведением сочетаний клавиш +- Проблемы с расположением маркера выделения +- Проблемы с потерей фокуса на активной ячейке +- Некорректное поведение выделения на активной ячейке +- Некорректное поведение сочетаний клавиш на активной ячейке +- Некорректное поведение прокрутки клавишами-стрелками + +## Версия 3.0.1 {#version-301} + +Выпущена 8 ноября 2018 года + +### Исправления {#fixes-47} + +- Некорректное поведение операции undo +- Некорректное поведение операции вырезания и вставки для группы ячеек + +## Версия 3.0 {#version-30} + +Выпущена 25 октября 2018 года + +### Критические изменения {#breaking-change} + +{{note API версии 3.0 несовместим с API v2.1.}} + +По сравнению с предыдущей версией на базе PHP, DHTMLX Spreadsheet версии 3.0 является полностью клиентским JavaScript-компонентом. + +Ознакомьтесь со [статьёй о миграции](migration.md#21---30), чтобы получить информацию об использовании нового API. + +### Новый функционал {#new-functionality-9} + +API Spreadsheet был переработан и стал более удобным. Ещё одним значительным обновлением является полный редизайн компонента, придавший современный вид интерфейсу Spreadsheet. Вместе со свежим внешним видом значительно улучшена удобство использования DHTMLX Spreadsheet. + +- [Обзор Spreadsheet](/) +- [Полностью настраиваемая структура и адаптируемый внешний вид](customization.md) +- [Полностью обновлённый API](api/api_overview.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/work_with_cells.md b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_cells.md new file mode 100644 index 00000000..a96560a1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_cells.md @@ -0,0 +1,173 @@ +--- +sidebar_label: Редактирование ячеек +title: Редактирование ячеек +description: В документации вы можете узнать о работе с ячейками в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Редактирование ячеек {#editing-cells} + +## Ввод содержимого в ячейку {#entering-content-in-a-cell} + +### Ввод данных вручную {#entering-data-manually} + +- Нажмите на нужную ячейку на листе. +- Введите текст, число, дату или время и нажмите **Enter**. + +### Ввод формулы {#entering-a-formula} + +- Нажмите на ячейку, в которой должен отображаться результат формулы. +- Введите знак `=`. +- Создайте формулу. Для этого можно использовать: + - константы и операторы вычислений, например `=3-2*5+12` + - ссылки на ячейки и операторы вычислений, например `=A1/A2` + - [встроенные функции](functions.md), например `=MAX(C46;D46)` +- Нажмите **Enter**. + +:::note +Строчные буквы в формулах автоматически преобразуются в прописные. +::: + +## Вставка гиперссылки в ячейку {#inserting-a-hyperlink-into-a-cell} + +### Добавление ссылки {#adding-a-link} + +Для вставки гиперссылки в ячейку можно воспользоваться одним из описанных ниже способов. + +#### Через контекстное меню {#using-context-menu} + +- Нажмите правой кнопкой мыши на ячейку и выберите *Вставить ссылку* + +![Контекстное меню DHTMLX Spreadsheet с выделенным пунктом «Вставить ссылку»](/img/link/via_context_menu.png) + +- В появившемся окне введите Текст и Ссылку, затем нажмите *Сохранить* + +![Диалог вставки ссылки DHTMLX Spreadsheet с полями Текст и Ссылка](/img/link/popup_window.png) + +#### Через кнопку на панели инструментов {#using-toolbar-button} + +- Выделите ячейку и нажмите кнопку **Вставить ссылку** на панели инструментов + +![Панель инструментов DHTMLX Spreadsheet с выделенной кнопкой «Вставить ссылку»](/img/link/via_toolbar.png) + +- В появившемся окне введите Текст и Ссылку, затем нажмите *Сохранить* + +#### Через меню {#using-menu} + +- Выделите ячейку и перейдите: *Вставка -> Вставить ссылку* в меню + +![Меню Вставка DHTMLX Spreadsheet с пунктом «Вставить ссылку»](/img/link/via_menu.png) + +- В появившемся окне введите Текст и Ссылку, затем нажмите *Сохранить*. + +### Копирование ссылки {#copying-a-link} + +- Выделите ячейку, содержащую ссылку, которую нужно скопировать +- Во всплывающем окне нажмите значок **Копировать** + +![Всплывающее окно ссылки DHTMLX Spreadsheet с выделенным значком «Копировать»](/img/link/copy_link.png) + +### Редактирование ссылки {#editing-a-link} + +- Выделите ячейку, содержащую ссылку, которую нужно отредактировать +- Во всплывающем окне нажмите значок **Редактировать** + +![Всплывающее окно ссылки DHTMLX Spreadsheet с выделенным значком «Редактировать»](/img/link/edit.png) + +### Удаление ссылки {#removing-a-link} + +- Выделите ячейку, содержащую ссылку, которую нужно удалить +- Во всплывающем окне нажмите значок **Удалить ссылку** + +![Всплывающее окно ссылки DHTMLX Spreadsheet с выделенным значком «Удалить ссылку»](/img/link/remove_link.png) + +## Использование выпадающих списков в ячейках {#using-drop-down-lists-in-cells} + +Вы можете создать выпадающий список в ячейке, чтобы пользователи могли выбирать нужный элемент из него. + +### Создание выпадающего списка путём ручного ввода {#creating-a-drop-down-list-by-typing-it-manually} + +- Выделите ячейку или диапазон ячеек, в которых нужно создать список + +- Перейдите: *Данные -> Проверка данных* в меню + +- Выберите критерий *Список элементов* + +- Введите элементы, которые должны отображаться в выпадающем списке + +- Нажмите кнопку **Сохранить** + +![Диалог проверки данных DHTMLX Spreadsheet — создание выпадающего списка из списка элементов](/img/data_validation.gif) + +### Создание выпадающего списка из диапазона {#creating-a-drop-down-list-by-using-a-range} + +- Введите элементы, которые должны отображаться в выпадающем списке + +- Выделите ячейку или диапазон ячеек, в которых нужно создать список + +- Перейдите: *Данные -> Проверка данных* в меню + +- Выберите критерий *Список из диапазона* + +- Выберите диапазон вашего списка + +- Нажмите кнопку **Сохранить** + +![Диалог проверки данных DHTMLX Spreadsheet — создание выпадающего списка из диапазона ячеек](/img/data_validation_range.gif) + +### Удаление проверки из ячейки {#removing-validation-from-a-cell} + +Вы можете отключить использование выпадающего списка в ячейке. Для этого: + +- Выделите нужную ячейку или диапазон ячеек, из которых нужно удалить выпадающий список +- Перейдите: *Данные -> Проверка данных* в меню +- Выберите опцию *Удалить проверку* + +![Меню Данные DHTMLX Spreadsheet с опцией «Удалить проверку» в разделе «Проверка данных»](/img/remove_validation.png) + +## Ввод одинаковых данных в нескольких ячейках {#entering-the-same-data-in-several-cells} + +Вы можете вводить одинаковые данные в несколько ячеек, используя **маркер заполнения** для автоматического заполнения ячеек на листе. Подробности см. ниже. + +### Автозаполнение ячеек содержимым {#auto-filling-cells-with-content} + +Вы можете автоматически заполнять ячейки данными. Вот как это работает: + +1\. Выделите ячейку (ячейки), данные которой будут использованы в качестве основы для заполнения других ячеек. + +2\. Введите данные в выбранную ячейку (ячейки). Автозаполнение работает несколькими способами: + +- копирование значения + +​Например, чтобы создать ряд 4,4,4,4..., введите 4 только в первой ячейке. + +- следование шаблону + - чтобы создать ряд 1, 2, 3, 4, 5, ..., введите 1 и 2 в первые две ячейки. + - чтобы создать ряд 1, 3, 5, 7, 9, ..., введите 1 и 3 в первые две ячейки. + - чтобы создать ряд 2, 4, 6, 8, 10, ..., введите 2 и 4 в первые две ячейки. + - помимо чисел, в шаблоне можно использовать буквы, например, чтобы создать ряд 1, a, 2, b, 3, a, 4, b, ..., введите 1, a, 2, b в первые четыре ячейки. + +3\. Перетащите **маркер заполнения** + +![Автозаполнение в DHTMLX Spreadsheet — перетаскивание маркера заполнения для копирования данных ячейки](/img/autofill.gif) + +## Блокировка ячеек {#locking-cells} + +Вы можете блокировать ячейки, чтобы защитить их значения от изменений. При блокировке ячейки в её правом верхнем углу появляется серый значок «замка». Заблокированные ячейки не реагируют на попытки их редактирования. + +![Заблокированные ячейки в DHTMLX Spreadsheet, помеченные серым значком замка в правом верхнем углу](/img/lockedcells.png) + +Для блокировки или разблокировки ячейки воспользуйтесь одним из описанных ниже способов: + +### Блокировка ячеек через кнопку на панели инструментов {#lock-cells-via-the-toolbar-button} + +- Выделите ячейки, которые нужно заблокировать/разблокировать (они не обязаны быть смежными). +- Нажмите кнопку **Заблокировать ячейку** на панели инструментов. + +![Панель инструментов DHTMLX Spreadsheet с выделенной кнопкой «Заблокировать ячейку»](/img/lock.png) + +### Блокировка ячеек через контекстное меню {#lock-cells-via-the-context-menu} + +- Нажмите правой кнопкой мыши на ячейку или диапазон ячеек, которые нужно заблокировать/разблокировать. +- Выберите опцию «Заблокировать/Разблокировать ячейку» в появившемся контекстном меню. + +![Контекстное меню DHTMLX Spreadsheet с выделенным пунктом «Заблокировать/Разблокировать ячейку»](/img/unlock.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/work_with_rows_cols.md b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_rows_cols.md new file mode 100644 index 00000000..f5b28291 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_rows_cols.md @@ -0,0 +1,261 @@ +--- +sidebar_label: Работа со строками и столбцами +title: Работа со строками и столбцами +description: В документации вы можете узнать о работе со строками и столбцами в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Работа со строками и столбцами {#work-with-rows-and-columns} + +DHTMLX Spreadsheet позволяет добавлять и удалять столбцы и строки, автоматически подбирать ширину столбца по содержимому, закреплять и откреплять столбцы и строки, а также скрывать и отображать столбцы и строки с помощью кнопок панели инструментов, пунктов меню и опций контекстного меню ячеек. + +## Добавление/удаление строк и столбцов {#addingremoving-rows-and-columns} + +### Добавление строк {#adding-rows} + +Чтобы добавить новую строку, выполните следующие шаги: + +1\. Выделите строку (нажав на её заголовок) или ячейку в нужной строке. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Строки** на панели инструментов и выберите опцию *Добавить строку выше* + +![Кнопка «Строки» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Добавить строку выше»](/img/add_row_button.png) + +- или выберите пункт меню **Вставка** и нажмите *Строки -> Добавить строку выше* + +![Меню Вставка DHTMLX Spreadsheet с пунктом «Строки» и опцией «Добавить строку выше»](/img/add_row_menu.png) + +- или нажмите правой кнопкой мыши на строку или ячейку в строке и выберите *Строки -> Добавить строку выше* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Добавить строку выше»](/img/add_row_context_menu.png) + +### Удаление строк {#removing-rows} + +Чтобы удалить строку, выполните следующие шаги: + +1\. Выделите строку (нажав на её заголовок) или ячейку в строке. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Строки** на панели инструментов и выберите опцию *Удалить строку* + +![Кнопка «Строки» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Удалить строку»](/img/remove_row_button.png) + +- или выберите пункт меню **Вставка** и нажмите *Строки -> Удалить строку* + +![Меню Вставка DHTMLX Spreadsheet с пунктом «Строки» и опцией «Удалить строку»](/img/remove_row_menu.png) + +- или нажмите правой кнопкой мыши на строку или ячейку в строке и выберите *Строки -> Удалить строку* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Удалить строку»](/img/remove_row_context_menu.png) + +:::note +Чтобы удалить несколько строк одновременно: выделите строки, нажмите правой кнопкой мыши для вызова контекстного меню и выберите *Строки -> Удалить строки [ids]*. +::: + +### Добавление столбцов {#adding-columns} + +Чтобы добавить новый столбец, выполните следующие шаги: + +1\. Выделите столбец (нажав на его заголовок) или ячейку в нужном столбце. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Столбцы** на панели инструментов и выберите опцию *Добавить столбец слева* + +![Кнопка «Столбцы» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Добавить столбец слева»](/img/add_column_button.png) + +- или выберите пункт меню **Вставка** и нажмите *Столбцы -> Добавить столбец слева* + +![Меню Вставка DHTMLX Spreadsheet с пунктом «Столбцы» и опцией «Добавить столбец слева»](/img/add_column_menu.png) + +- или нажмите правой кнопкой мыши на столбец или ячейку в столбце и выберите *Столбцы -> Добавить столбец слева* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Добавить столбец»](/img/add_column_context_menu.png) + +### Удаление столбцов {#removing-columns} + +Чтобы удалить столбец, выполните следующие шаги: + +1\. Выделите столбец (нажав на его заголовок) или ячейку в столбце. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Столбцы** на панели инструментов и выберите опцию *Удалить столбец* + +![Кнопка «Столбцы» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Удалить столбец»](/img/remove_column_button.png) + +- или выберите пункт меню **Вставка** и нажмите *Столбцы -> Удалить столбец* + +![Меню Вставка DHTMLX Spreadsheet с пунктом «Столбцы» и опцией «Удалить столбец»](/img/remove_column_menu.png) + +- или нажмите правой кнопкой мыши на столбец или ячейку в столбце и выберите *Столбцы -> Удалить столбец* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Удалить столбец»](/img/remove_column_context_menu.png) + +:::note +Чтобы удалить несколько столбцов одновременно: выделите столбцы, нажмите правой кнопкой мыши для вызова контекстного меню и выберите *Столбцы -> Удалить столбцы [ids]*. +::: + +## Автоподбор ширины столбца {#autofit-column-width} + +Чтобы изменить ширину столбца так, чтобы она автоматически соответствовала самому длинному содержимому в столбце, вы можете: + +- дважды нажать на курсор изменения размера столбца в заголовке таблицы + +![Заголовок столбца DHTMLX Spreadsheet с курсором изменения размера для автоподбора ширины столбца](/img/resize_cursor.png) + +- или выполнить следующие шаги: + +1\. Нажмите левой кнопкой мыши на значок с тремя точками столбца + +![Контекстное меню столбца DHTMLX Spreadsheet, открытое из значка с тремя точками](/img/column_context_menu.png) + +2\. Выберите *Столбцы -> Подогнать под данные* + +![Подменю «Столбцы» DHTMLX Spreadsheet с опцией «Подогнать под данные» для автоподбора ширины](/img/column_autofit.png) + +## Закрепление/открепление строк и столбцов {#freezingunfreezing-rows-and-columns} + +### Закрепление строк {#freezing-rows} + +Чтобы закрепить строки до определённой строки, выполните следующие шаги: + +1\. Выделите строку (нажав на её заголовок) или ячейку в нужной строке. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Строки** на панели инструментов и выберите опцию *Закрепить до строки [id]* + +![Кнопка «Строки» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Закрепить до строки»](/img/freeze_rows_toolbar.png) + +- или выберите пункт меню **Правка** и нажмите *Закрепить -> Закрепить до строки [id]* + +![Меню Правка DHTMLX Spreadsheet с подменю «Закрепить» и пунктом «Закрепить до строки»](/img/freeze_rows_menu.png) + +- или нажмите правой кнопкой мыши на строку или ячейку в строке и выберите *Строки -> Закрепить до строки [id]* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Закрепить до строки»](/img/freeze_rows_context_menu.png) + +### Открепление строк {#unfreezing-rows} + +(*На изображениях ниже строки закреплены до строки 5*) + +Чтобы открепить строки, выполните одно из следующих действий: + +- нажмите кнопку **Строки** на панели инструментов и выберите опцию *Открепить строки* + +![Кнопка «Строки» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Открепить строки»](/img/unfreeze_rows_toolbar.png) + +- или выберите пункт меню **Правка** и нажмите *Закрепить -> Открепить строки* + +![Меню Правка DHTMLX Spreadsheet с подменю «Закрепить» и пунктом «Открепить строки»](/img/unfreeze_rows_menu.png) + +- или нажмите правой кнопкой мыши на любую ячейку и выберите *Строки -> Открепить строки* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Открепить строки»](/img/unfreeze_rows_context_menu.png) + +### Закрепление столбцов {#freezing-columns} + +Чтобы закрепить столбцы до определённого столбца, выполните следующие шаги: + +1\. Выделите столбец (нажав на его заголовок) или ячейку в нужном столбце. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Столбцы** на панели инструментов и выберите опцию *Закрепить до столбца [id]* + +![Кнопка «Столбцы» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Закрепить до столбца»](/img/freeze_columns_toolbar.png) + +- или выберите пункт меню **Правка** и нажмите *Закрепить -> Закрепить до столбца [id]* + +![Меню Правка DHTMLX Spreadsheet с подменю «Закрепить» и пунктом «Закрепить до столбца»](/img/freeze_columns_menu.png) + +- или нажмите правой кнопкой мыши на столбец или ячейку в столбце и выберите *Столбцы -> Закрепить до столбца [id]* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Закрепить до столбца»](/img/freeze_columns_context_menu.png) + +### Открепление столбцов {#unfreezing-columns} + +(*На изображениях ниже столбцы закреплены до столбца D*) + +Чтобы открепить столбцы, выполните одно из следующих действий: + +- нажмите кнопку **Столбцы** на панели инструментов и выберите опцию *Открепить столбцы* + +![Кнопка «Столбцы» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Открепить столбцы»](/img/unfreeze_columns_toolbar.png) + +- или выберите пункт меню **Правка** и нажмите *Закрепить -> Открепить столбцы* + +![Меню Правка DHTMLX Spreadsheet с подменю «Закрепить» и пунктом «Открепить столбцы»](/img/unfreeze_columns_menu.png) + +- или нажмите правой кнопкой мыши на любую ячейку и выберите *Столбцы -> Открепить столбцы* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Открепить столбцы»](/img/unfreeze_columns_context_menu.png) + +## Скрытие/отображение строк и столбцов {#hidingshowing-rows-and-columns} + +### Скрытие строк {#hiding-rows} + +Чтобы скрыть строку, выполните следующие шаги: + +1\. Выделите строку (нажав на её заголовок) или ячейку в нужной строке. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Строки** на панели инструментов и выберите опцию *Скрыть строку(и) [id]* + +![Кнопка «Строки» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Скрыть строки»](/img/hide_rows_toolbar.png) + +- или нажмите правой кнопкой мыши на строку или ячейку в строке и выберите *Строки -> Скрыть строку(и) [id]* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Скрыть строки»](/img/hide_row_context_menu.png) + +### Отображение строк {#showing-rows} + +Чтобы показать скрытые строки, выполните одно из следующих действий: + +- нажмите на значок «стрелки», который появляется в заголовке строк вместо скрытой строки/строк + +(*На изображении ниже строки 8 и 11 скрыты*) + +![Заголовок строк DHTMLX Spreadsheet со значком стрелки, указывающим на скрытые строки](/img/show_rows.png) + +- или выделите строки или несколько ячеек так, чтобы скрытые строки попали в выделение, нажмите правой кнопкой мыши для вызова контекстного меню и выберите *Строки -> Показать строки* + +(*На изображении ниже строка 8 скрыта*) + +![Контекстное меню DHTMLX Spreadsheet с подменю «Строки» и пунктом «Показать строки»](/img/show_rows_context_menu.png) + +### Скрытие столбцов {#hiding-columns} + +Чтобы скрыть столбец, выполните следующие шаги: + +1\. Выделите столбец (нажав на его заголовок) или ячейку в нужном столбце. + +2\. Выберите одно из следующих действий: + +- нажмите кнопку **Столбцы** на панели инструментов и выберите опцию *Скрыть столбец(цы) [id]* + +![Кнопка «Столбцы» на панели инструментов DHTMLX Spreadsheet с выделенной опцией «Скрыть столбцы»](/img/hide_columns_toolbar.png) + +- или нажмите правой кнопкой мыши на столбец или ячейку в столбце и выберите *Столбцы -> Скрыть столбец(цы) [id]* + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Скрыть столбцы»](/img/hide_columns_context_menu.png) + +### Отображение столбцов {#showing-columns} + +Чтобы показать скрытые столбцы, выполните одно из следующих действий: + +- нажмите на значок «стрелки», который появляется в заголовке столбцов вместо скрытого столбца/столбцов + +(*На изображении ниже столбцы C и E скрыты*) + +![Заголовок столбцов DHTMLX Spreadsheet со значком стрелки, указывающим на скрытые столбцы](/img/show_columns.png) + +- или выделите столбцы или несколько ячеек так, чтобы скрытые столбцы попали в выделение, нажмите правой кнопкой мыши для вызова контекстного меню и выберите *Столбцы -> Показать столбцы* + +(*На изображении ниже столбец C скрыт*) + +![Контекстное меню DHTMLX Spreadsheet с подменю «Столбцы» и пунктом «Показать столбцы»](/img/show_columns_context_menu.png) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/work_with_sheets.md b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_sheets.md new file mode 100644 index 00000000..185efe8b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/work_with_sheets.md @@ -0,0 +1,53 @@ +--- +sidebar_label: Работа с листами +title: Работа с листами +description: В документации вы можете узнать о работе с листами в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Работа с листами {#work-with-sheets} + +## Добавление нового листа {#adding-a-new-sheet} + +Чтобы добавить новый лист, выполните следующие шаги: + +1. Выберите вкладку листа, нажав на неё + +2. Нажмите кнопку **Добавить лист** на нижней панели инструментов + +:::note +Обратите внимание, что новый лист добавляется после текущего активного листа. +::: + +![Нижняя панель инструментов DHTMLX Spreadsheet с кнопкой «Добавить лист» и вкладками листов](/img/add_sheet.png) + +## Удаление листа {#removing-a-sheet} + +Чтобы удалить лист из таблицы, нажмите правой кнопкой мыши на вкладку листа и выберите *Удалить*. + +{{note Обратите внимание, что лист нельзя удалить, если он является единственным листом в таблице.}} + +![Контекстное меню вкладки листа DHTMLX Spreadsheet с выделенным пунктом «Удалить»](/img/remove_sheet.png) + +## Изменение активного листа {#changing-the-active-sheet} + +Чтобы изменить текущий активный лист, нажмите на другую вкладку листа. + +![Вкладки листов DHTMLX Spreadsheet внизу с выделенным активным листом](/img/change_active_sheet.png) + +## Переименование листа {#renaming-a-sheet} + +Чтобы переименовать лист, нажмите правой кнопкой мыши на вкладку листа, нажмите *Переименовать* и введите новое имя. + +![Контекстное меню вкладки листа DHTMLX Spreadsheet с опцией «Переименовать» и полем ввода имени](/img/rename_sheet.png) + +## Перекрёстные ссылки между листами {#cross-references-between-sheets} + +Вы можете консолидировать данные из нескольких листов в одном, используя перекрёстные ссылки.
Для этого выполните следующие шаги: + +1\. Введите знак равенства (=) в ячейку + +2\. Нажмите на вкладку листа, на который нужно создать перекрёстную ссылку, и выделите ячейку или диапазон ячеек + +3\. Завершите ввод формулы и нажмите Enter + +![Формула с перекрёстной ссылкой DHTMLX Spreadsheet, построенная через несколько вкладок листов](/img/cross_reference.gif) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/working_with_cells.md b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_cells.md new file mode 100644 index 00000000..0148b50e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_cells.md @@ -0,0 +1,289 @@ +--- +sidebar_label: Работа с ячейками +title: Работа с ячейками +description: В документации вы можете узнать о работе с ячейками в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Работа с ячейками {#work-with-cells} + +## Установка значения ячейки {#setting-cell-value} + +### Установка значений {#set-values} + +Чтобы задать значение ячейки через API, используйте метод [](api/spreadsheet_setvalue_method.md). Передайте в него следующие параметры: + +- `cells` - (*string*) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `value` - (*string/number/array*) значение для установки в ячейку(и) + +~~~jsx +// установка значения для одной ячейки +spreadsheet.setValue("A1",5); +// установка одинакового значения для диапазона ячеек +spreadsheet.setValue("A1:D1",5); +// установка одинакового значения для разных ячеек +spreadsheet.setValue("B6,A1:D1",5); +// установка значений из массива для ячеек в диапазоне поочерёдно +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +:::note +Обратите внимание, что метод устанавливает одинаковые (повторяющиеся) значения для указанных ячеек. Если вы хотите добавить разные значения в ячейки таблицы, используйте метод [`parse()`](api/spreadsheet_parse_method.md). +::: + + +### Получение значений {#get-values} + +Вы также можете получить значение(я), установленное в ячейке(ях), передав *идентификатор(ы) нужной(ых) ячейки(ек) или диапазон ячеек* в метод [](api/spreadsheet_getvalue_method.md). + +Метод возвращает значение(я) в виде строки, числа или массива: + +~~~jsx +// получение значения одной ячейки +var cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// получение значений диапазона ячеек +var rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// получение значений разных ячеек +var values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +## Проверка данных в ячейках {#validating-cells} + +Начиная с версии v4.3, вы можете применять проверку данных к ячейкам, добавляя выпадающие списки вариантов. Для этого используйте метод [](api/spreadsheet_setvalidation_method.md): + +~~~jsx +spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]); +~~~ + +Выпадающий список ограничивает выбор пользователя. При вводе неожиданного значения в ячейку отображается сообщение *Недопустимое значение*. + +:::info +Метод [`setValidation()`](api/spreadsheet_setvalidation_method.md) также может удалять проверку с указанных ячеек. [Подробнее](api/spreadsheet_setvalidation_method.md#details). +::: + +## Вставка гиперссылки в ячейку {#inserting-a-hyperlink-into-a-cell} + +Для вставки гиперссылки в ячейку используйте метод [`insertLink()`](api/spreadsheet_insertlink_method.md). Метод также позволяет добавить текст, отображаемый с гиперссылкой: + +~~~jsx +// вставка ссылки в ячейку "A2" +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); +~~~ + +Если нужно удалить ссылку из ячейки, передайте только идентификатор ячейки в метод: + +~~~jsx +// удаление ссылки из ячейки "A2" +spreadsheet.insertLink("A2"); +~~~ + +## Стилизация ячеек {#styling-cells} + +### Установка стилей {#set-styles} + +Вы можете применить стили к ячейке или диапазону ячеек с помощью метода [](api/spreadsheet_setstyle_method.md). Он принимает два параметра: + +- `cells` - (*string*) идентификатор(ы) ячейки(ек) или диапазон ячеек +- `styles` - (*object/array*) стили для применения к ячейкам + +~~~jsx +// установка стиля для одной ячейки +spreadsheet.setStyle("A1", {background: "red"}); +// установка одинакового стиля для диапазона ячеек +spreadsheet.setStyle("A1:D1", {color: "blue"}); +// установка одинакового стиля для разных ячеек +spreadsheet.setStyle("B6,A1:D1", {color: "blue"}); +// установка стилей из массива для ячеек в диапазоне поочерёдно +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +:::note +Метод устанавливает одинаковый стиль для указанных ячеек. Если вы хотите применить разные стили к ячейкам таблицы, используйте метод [`parse()`](api/spreadsheet_parse_method.md). +::: + +### Получение стилей {#get-styles} + +Чтобы получить стили, применённые к ячейке(ям), используйте метод [](api/spreadsheet_getstyle_method.md). Передайте в него *идентификатор(ы) ячейки(ек) или диапазон ячеек*: + +~~~jsx +// получение стиля одной ячейки +var style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// получение стилей диапазона ячеек +var rangeStyles = spreadsheet.getStyle("A1:D1"); // -> см. подробности + +// получение стилей разных ячеек +var values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +Для нескольких ячеек метод возвращает массив объектов со стилями, применёнными к ячейке: + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ + +## Редактирование ячейки {#editing-a-cell} + +### Включение редактора ячейки {#enable-cell-editor} + +Вы можете добавить поле ввода в ячейку, вызвав метод [](api/spreadsheet_startedit_method.md): + +~~~jsx +spreadsheet.startEdit(); +~~~ + +Метод принимает два необязательных параметра: + +- `cell` - (*string*) необязательный, идентификатор ячейки +- `value` - (*string*) необязательный, значение ячейки + +Если идентификатор ячейки не передан, поле ввода добавляется в текущую выбранную ячейку. + +### Отключение редактора ячейки {#disable-cell-editor} + +Чтобы завершить редактирование ячейки, используйте метод [](api/spreadsheet_endedit_method.md), который закрывает редактор и сохраняет введённое значение. + +~~~jsx +spreadsheet.endEdit(); +~~~ + +## Блокировка ячеек {#locking-cells} + +### Блокировка ячеек {#lock-cells} + +Вы можете программно заблокировать ячейку или несколько ячеек, чтобы сделать их доступными для пользователей только для чтения. Для этого используйте метод [](api/spreadsheet_lock_method.md). Метод принимает в качестве параметра *идентификатор(ы) ячейки(ек)* или *диапазон ячеек* для блокировки. + +~~~jsx +// блокировка ячейки +spreadsheet.lock("A1"); + +// блокировка диапазона ячеек +spreadsheet.lock("A1:C1"); + +// блокировка указанных ячеек +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +**Связанный пример**: [Spreadsheet. Заблокированные ячейки](https://snippet.dhtmlx.com/czeyiuf8) + +### Разблокировка ячеек {#unlock-cells} + +Чтобы разблокировать заблокированную(ые) ячейку(и), используйте метод [](api/spreadsheet_unlock_method.md). Передайте в него *идентификатор(ы) ячейки(ек)* или *диапазон, содержащий заблокированные ячейки*, в качестве параметра: + +~~~jsx +// разблокировка ячейки +spreadsheet.unlock("A1"); + +// разблокировка диапазона ячеек +spreadsheet.unlock("A1:C1"); + +// разблокировка указанных ячеек +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +### Проверка блокировки ячейки {#check-whether-a-cell-is-locked} + +Чтобы проверить, заблокирована ли ячейка или несколько ячеек, используйте метод [](api/spreadsheet_islocked_method.md) и передайте в него *идентификатор(ы) ячейки(ек)* или *диапазон ячеек*: + +~~~jsx +// проверка блокировки ячейки +var cellLocked = spreadsheet.isLocked("A1"); + +// проверка блокировки нескольких ячеек +var rangeLocked = spreadsheet.isLocked("A1:C1"); + +// проверка блокировки разрозненных ячеек +var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +Метод возвращает `true` или `false` в зависимости от состояния ячейки. Если проверяется несколько ячеек одновременно, метод возвращает `true`, если среди указанных ячеек есть хотя бы одна заблокированная. + +## Объединение ячеек {#merging-cells} + +### Объединение ячеек {#merge-cells} + +Вы можете объединить две или более ячеек в одну, передав диапазон ячеек, которые нужно объединить, в метод [`mergeCells()`](api/spreadsheet_mergecells_method.md): + +~~~jsx +// объединение ячеек A6, A7 и A8 +spreadsheet.mergeCells("A6:A8"); + +// объединение ячеек B2, C2 и D2 +spreadsheet.mergeCells("B2:D2"); +~~~ + +### Разъединение ячеек {#split-cells} + +Вы также можете разъединить объединённые ячейки с помощью метода [`mergeCells()`](api/spreadsheet_mergecells_method.md). В дополнение к диапазону ячеек передайте `true` в качестве второго параметра, чтобы разъединить указанные ячейки: + +~~~jsx +// разъединение ячеек B2, C2 и D2 +spreadsheet.mergeCells("B2:D2", true); +~~~ + +## Выделение ячеек {#selecting-cells} + +### Выделение ячеек {#select-cells} + +Spreadsheet позволяет задать выделение ячеек с помощью API объекта `Selection`. + +Вы можете выделить ячейку(и), передав её/их идентификатор(ы) в метод [](api/selection_setselectedcell_method.md): + +~~~jsx +// выделение ячейки +spreadsheet.selection.setSelectedCell("B5"); +// выделение диапазона ячеек +spreadsheet.selection.setSelectedCell("B1:B5"); +// выделение разрозненных ячеек +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +Также можно получить идентификатор(ы) выбранной(ых) ячейки(ек) через метод [](api/selection_getselectedcell_method.md): + +~~~jsx +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +### Снятие выделения с ячеек {#unselect-cells} + +Чтобы снять выделение с ячейки(ек), передайте её/их идентификатор(ы) в метод [](api/selection_removeselectedcell_method.md): + +~~~jsx +// устанавливает выделение +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// снимает выделение +spreadsheet.selection.removeSelectedCell("B7,D4,E5:E7"); + +const selected = spreadsheet.selection.getSelectedCell(); +console.log(selected); // -> "B3,D6,E4,E8" +~~~ + +**Связанный пример:** [Spreadsheet. Снятие выделения](https://snippet.dhtmlx.com/u4j76cuh) + +## Установка фокуса на ячейке {#setting-focus-on-a-cell} + +Объект `Selection` позволяет устанавливать фокус на ячейке таблицы и получать идентификатор ячейки в фокусе. Для этого используйте соответствующие методы: + +- [](api/selection_setfocusedcell_method.md) + +~~~jsx +// передайте идентификатор ячейки для установки фокуса +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +- [](api/selection_getfocusedcell_method.md) + +~~~jsx +// получение ячейки в фокусе +var focused = spreadsheet.selection.getFocusedCell(); // -> "D4" +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/working_with_sheets.md b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_sheets.md new file mode 100644 index 00000000..2d0c93a8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_sheets.md @@ -0,0 +1,149 @@ +--- +sidebar_label: Работа с листами +title: Работа с листами +description: В документации вы можете узнать о работе с листами в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Работа с листами {#work-with-sheets} + +Начиная с версии v4.1, вы можете работать с [несколькими листами](api/spreadsheet_multisheets_config.md) в таблице. + +В этой статье описано, как добавить новый лист, удалить ненужный лист, получить все листы и получить текущий активный лист с помощью методов API. Также объясняется, как загрузить несколько листов в таблицу одновременно. + +{{note Чтобы узнать, как взаимодействовать с несколькими листами через пользовательский интерфейс, ознакомьтесь с нашим [Руководством пользователя](work_with_sheets.md). }} + +Начиная с версии v6.0, управление листами осуществляется через модуль **Sheet Manager** посредством свойства `spreadsheet.sheets`. Выделенный [API Sheet Manager](api/overview/sheetmanager_overview.md) заменяет методы работы с листами, которые ранее были доступны непосредственно на экземпляре Spreadsheet. + +## Загрузка нескольких листов {#loading-multiple-sheets} + +Чтобы загрузить несколько листов в таблицу, подготовьте данные с нужным количеством листов и их конфигурацией и передайте их в метод [`parse()`](api/spreadsheet_parse_method.md) в качестве параметра. Данные должны быть объектом `object`. [Ознакомьтесь со списком атрибутов, которые может содержать объект](api/spreadsheet_parse_method.md). + + + +{{note Если параметр конфигурации [`multiSheets`](api/spreadsheet_multisheets_config.md) установлен в `false`, создаётся только один лист.}} + +## Добавление нового листа {#adding-a-new-sheet} + +Чтобы добавить новый лист в таблицу, используйте метод [`sheets.add()`](api/sheetmanager_add_method.md) и передайте имя нового листа в качестве параметра: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Добавление листа с пользовательским именем +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // например, "sheet_2" + +// Добавление листа с автоматически сгенерированным именем +const anotherId = spreadsheet.sheets.add(); +~~~ + +Метод возвращает идентификатор созданного листа. + +## Удаление листа {#removing-a-sheet} + +Вы можете удалить лист из таблицы по его идентификатору с помощью метода [`sheets.remove()`](api/sheetmanager_remove_method.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Удаление листа по его идентификатору +spreadsheet.sheets.remove("sheet_2"); +~~~ + +Обратите внимание, что лист не удаляется, если в таблице менее 2 листов. + +## Установка активного листа {#setting-active-sheet} + +Чтобы динамически изменить активный лист после инициализации таблицы, используйте метод [`sheets.setActive()`](api/sheetmanager_setactive_method.md). Он принимает идентификатор листа в качестве параметра: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Переключение на второй лист +spreadsheet.sheets.setActive("sheet_2"); + +// Проверка переключения +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**Связанный пример:** [Spreadsheet. Установка активного листа](https://snippet.dhtmlx.com/iowl449t) + +## Получение активного листа {#getting-active-sheet} + +Вы можете получить текущий активный лист с помощью метода [`sheets.getActive()`](api/sheetmanager_getactive_method.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +Метод возвращает объект с атрибутами name и id текущего активного листа. + +## Получение всех листов {#getting-all-sheets} + +Метод [`sheets.getAll()`](api/sheetmanager_getall_method.md) возвращает все листы таблицы в виде массива объектов листов: + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +## Получение листа по идентификатору {#getting-a-sheet-by-id} + +Чтобы получить объект одного листа по его идентификатору, используйте метод [`sheets.get()`](api/sheetmanager_get_method.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +## Очистка листов {#clearing-sheets} + +Вы можете очистить данные указанного листа по его идентификатору с помощью метода [`sheets.clear()`](api/sheetmanager_clear_method.md): + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Очистка конкретного листа по идентификатору +spreadsheet.sheets.clear("sheet_1"); + +// Очистка текущего активного листа +spreadsheet.sheets.clear(); +~~~ + +**Связанный пример:** [Spreadsheet. Очистка](https://snippet.dhtmlx.com/szmtjn72) + +Если нужно очистить всю таблицу сразу, используйте метод [`clear()`](api/spreadsheet_clear_method.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/working_with_ssheet.md b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_ssheet.md new file mode 100644 index 00000000..06d797db --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/working_with_ssheet.md @@ -0,0 +1,302 @@ +--- +sidebar_label: Работа с таблицей +title: Работа с таблицей +description: В документации вы можете узнать о работе с таблицей в библиотеке DHTMLX JavaScript Spreadsheet. Изучите руководства для разработчиков и справочник API, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX Spreadsheet. +--- + +# Работа с таблицей {#work-with-spreadsheet} + +Пока пользователи взаимодействуют со Spreadsheet через его интерфейс, вы можете работать с компонентом посредством его [простого API](api/api_overview.md). + +## Операции Undo/Redo {#undoredo-actions} + +Метод API [](api/spreadsheet_undo_method.md) отменяет последнее действие: + +~~~jsx +spreadsheet.undo(); +~~~ + +Чтобы повторить отменённое действие, используйте метод [](api/spreadsheet_redo_method.md): + +~~~jsx +spreadsheet.redo(); +~~~ + +## Добавление/удаление строк и столбцов {#addingremoving-rows-and-columns} + +### Столбцы {#columns} + +Для добавления/удаления столбца используйте соответствующие методы API: + +- [](api/spreadsheet_addcolumn_method.md) +- [](api/spreadsheet_deletecolumn_method.md) + +Передайте в методы идентификатор ячейки, содержащей идентификатор столбца, который нужно добавить/удалить. + +~~~jsx +// добавляет пустой столбец "C" +spreadsheet.addColumn("C1"); +// удаляет столбец "C" +spreadsheet.deleteColumn("C1"); +~~~ + +При добавлении нового столбца соседние столбцы смещаются вправо. + +:::note +Вы можете удалить несколько столбцов, передав диапазон идентификаторов ячеек в качестве параметра метода `deleteColumn()`, например: "A1:C3". +::: + +### Строки {#rows} + +Для добавления/удаления строки используйте следующие методы API: + +- [](api/spreadsheet_addrow_method.md) +- [](api/spreadsheet_deleterow_method.md) + +Передайте в методы идентификатор ячейки, содержащей идентификатор строки, которую нужно добавить/удалить. + +~~~jsx +// добавляет пустую вторую строку +spreadsheet.addRow("A2"); +// удаляет вторую строку +spreadsheet.deleteRow("A2"); +~~~ + +При добавлении новой строки соседние строки смещаются на одну ячейку вниз. + +:::note +Вы можете удалить несколько строк, передав диапазон идентификаторов ячеек в качестве параметра метода `deleteRow()`, например: "A1:C3". +::: + +## Автоподбор ширины столбца {#autofit-column-width} + +Чтобы изменить ширину столбца так, чтобы она автоматически подстраивалась под самое длинное содержимое в столбце, применяйте метод [`fitColumn()`](api/spreadsheet_fitcolumn_method.md). Метод принимает один параметр — идентификатор ячейки, содержащей имя нужного столбца. + +~~~jsx +// подстраивает ширину столбца "G" +spreadsheet.fitColumn("G2"); +~~~ + +## Закрепление/открепление строк и столбцов {#freezingunfreezing-rows-and-columns} + +Вам может потребоваться зафиксировать («закрепить») некоторые столбцы или строки, чтобы они оставались статичными при прокрутке страницы, пока остальные столбцы и строки остаются подвижными. + +### Столбцы {#columns-1} + +Для закрепления/открепления столбцов используйте соответствующие методы API: + +- [](api/spreadsheet_freezecols_method.md) +- [](api/spreadsheet_unfreezecols_method.md) + +Передайте в методы идентификатор ячейки для определения идентификатора столбца. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка. + +~~~jsx +// закрепление столбцов +spreadsheet.freezeCols("B2"); // столбцы до столбца "B" будут зафиксированы +spreadsheet.freezeCols("sheet2!B2"); // столбцы до столбца "B" на "sheet2" будут зафиксированы + +// открепление столбцов +spreadsheet.unfreezeCols(); // зафиксированные столбцы на текущем листе будут откреплены +spreadsheet.unfreezeCols("sheet2!A1"); // зафиксированные столбцы на "sheet2" будут откреплены +~~~ + +### Строки {#rows-1} + +Для закрепления/открепления строк используйте соответствующие методы API: + +- [](api/spreadsheet_freezerows_method.md) +- [](api/spreadsheet_unfreezerows_method.md) + +Передайте в методы идентификатор ячейки для определения идентификатора строки. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка. + +~~~jsx +// закрепление строк +spreadsheet.freezeRows("B2"); // строки до строки "2" будут зафиксированы +spreadsheet.freezeRows("sheet2!B2"); // строки до строки "2" на "sheet2" будут зафиксированы + +// открепление строк +spreadsheet.unfreezeRows(); // зафиксированные строки на текущем листе будут откреплены +spreadsheet.unfreezeRows("sheet2!A1"); // зафиксированные строки на "sheet2" будут откреплены +~~~ + +### Закрепление строк/столбцов в наборе данных {#freezing-rowscolumns-in-the-dataset} + +Вы также можете фиксировать строки и столбцы для конкретных листов в наборе данных при парсинге данных в Spreadsheet. +Для этого используйте свойство `freeze` в объекте `sheets` метода [`parse()`](api/spreadsheet_parse_method.md): + +~~~jsx {10-13} +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // другие настройки "sheet_1" + }, + // другие объекты конфигурации листов + ] +}; + +spreadsheet.parse(data); +~~~ + +## Скрытие/отображение строк и столбцов {#hidingshowing-rows-and-columns} + +Вы можете скрывать и отображать отдельные строки и столбцы с помощью соответствующих методов API. + +### Столбцы {#columns-2} + +Для скрытия/отображения столбца используйте следующие методы: + +- [](api/spreadsheet_hidecols_method.md) +- [](api/spreadsheet_showcols_method.md) + +Передайте в методы идентификатор ячейки для определения идентификатора столбца. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка. + +~~~jsx +// скрытие столбцов +spreadsheet.hideCols("B2"); // столбец "B" будет скрыт +spreadsheet.hideCols("sheet2!B2"); // столбец "B" на "sheet2" будет скрыт +spreadsheet.hideCols("B2:C2"); // столбцы "B" и "C" будут скрыты + +// отображение столбцов +spreadsheet.showCols("B2"); // столбец "B" снова станет видимым +spreadsheet.showCols("sheet2!B2"); // столбец "B" на "sheet2" снова станет видимым +spreadsheet.showCols("B2:C2"); // столбцы "B" и "C" снова станут видимыми +~~~ + +### Строки {#rows-2} + +Для скрытия/отображения строки используйте следующие методы API: + +- [](api/spreadsheet_hiderows_method.md) +- [](api/spreadsheet_showrows_method.md) + +Передайте в методы идентификатор ячейки для определения идентификатора строки. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка. + +~~~jsx +// скрытие строк +spreadsheet.hideRows("B2"); // строка "2" будет скрыта +spreadsheet.hideRows("sheet2!B2"); // строка "2" на "sheet2" будет скрыта +spreadsheet.hideRows("B2:C4"); // строки с "2" по "4" будут скрыты + +// отображение строк +spreadsheet.showRows("B2"); // строка "2" снова станет видимой +spreadsheet.showRows("sheet2!B2"); // строка "2" на "sheet2" снова станет видимой +spreadsheet.showRows("B2:C2"); // строки с "2" по "4" снова станут видимыми +~~~ + +## Фильтрация данных {#filtering-data} + +### Установка фильтра {#set-filter} + +Вы можете фильтровать данные в таблице и отображать только записи, соответствующие заданным критериям. Для этого используйте метод [`setFilter()`](api/spreadsheet_setfilter_method.md) и укажите правила фильтрации для нужного(ых) столбца(ов). + +Например, можно задать критерии фильтрации для отдельного столбца: + +~~~jsx +// фильтрация данных по критериям для столбца A +spreadsheet.setFilter("A2", [{condition: { factor: "tc", value: "e" }, exclude: ["Peru"]}]); + +// фильтрация данных по критериям для столбца C +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); +~~~ + +В этом случае значок фильтра появляется для каждого столбца в диапазоне данных. + +Также можно задать критерии фильтрации для диапазона ячеек: + +~~~jsx +// фильтрация данных по критериям для столбца C +spreadsheet.setFilter("C1:C9", [{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); + +// фильтрация данных по критериям для столбцов A и C +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); +~~~ + +и значок фильтра появляется только для столбцов в указанном диапазоне. + +**Связанный пример:** [Spreadsheet. Фильтрация через API](https://snippet.dhtmlx.com/effrcsg6) + +### Сброс фильтра {#reset-filter} + +Если вы хотите сбросить фильтрацию, применяйте метод [`setFilter()`](api/spreadsheet_setfilter_method.md) без параметров или передайте только первый параметр в метод: + +~~~jsx +spreadsheet.setFilter("A2"); +~~~ + +### Получение фильтра {#get-filter} + +Чтобы получить критерии, по которым в данный момент фильтруются данные на листе, применяйте метод [`getFilter()`](api/spreadsheet_getfilter_method.md). Передайте идентификатор нужного листа в качестве параметра метода. + +~~~jsx +const filter = spreadsheet.getFilter("Income"); +~~~ + +Передавать идентификатор листа не нужно, если вы хотите получить критерии фильтра, применённые к текущему активному листу: + +~~~jsx +const filter = spreadsheet.getFilter(); +~~~ + +## Поиск данных {#searching-for-data} + +Вы можете получить ячейки, содержащие определённые записи, передав нужное для поиска значение в метод [`search()`](api/spreadsheet_search_method.md). + +~~~jsx +spreadsheet.search("min"); // -> ['D1'] +~~~ + +Также можно передать `true` в качестве второго параметра, чтобы открыть строку поиска и выделить найденные ячейки в таблице: + +~~~jsx +spreadsheet.search("min", true); +~~~ + +По умолчанию таблица выполняет поиск по ячейкам текущего активного листа. Чтобы искать записи на другом листе, передайте его идентификатор в качестве третьего параметра метода: + +~~~jsx +spreadsheet.search("min", false, "Income"); +~~~ + +### Закрытие строки поиска {#close-search-bar} + +Для скрытия строки поиска используйте метод [`hideSearch()`](api/spreadsheet_hidesearch_method.md): + +~~~jsx +spreadsheet.hideSearch(); +~~~ + +## Сортировка данных {#sorting-data} + +Начиная с версии v4.3, вы можете сортировать данные в таблице с помощью метода [`sortCells()`](api/spreadsheet_sortcells_method.md). Передайте в метод два параметра: +- `cell` — идентификатор(ы) ячейки(ек) или диапазон ячеек, по которому нужно отсортировать данные в таблице +- `dir` — направление сортировки: 1 — по возрастанию, -1 — по убыванию + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // параметры конфигурации +}); + +spreadsheet.sortCells("B2:B11", -1); +~~~ + +## Очистка таблицы {#clearing-spreadsheet} + +Вы можете очистить всю таблицу сразу с помощью метода [`clear()`](api/spreadsheet_clear_method.md): + +~~~jsx +spreadsheet.clear(); +~~~ + +**Связанный пример:** [Spreadsheet. Очистка](https://snippet.dhtmlx.com/szmtjn72) + +Если нужно очистить конкретный лист, используйте метод [`sheets.clear()`](api/sheetmanager_clear_method.md). diff --git a/i18n/ru/docusaurus-theme-classic/footer.json b/i18n/ru/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..2ad4af62 --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Центр разработки", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Сообщество", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Компания", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Spreadsheet": { + "message": "Скачать Spreadsheet", + "description": "The label of footer link with label=Download Spreadsheet linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml" + }, + "link.item.label.Examples": { + "message": "Примеры", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/ihtkdcoc?tag=spreadsheet" + }, + "link.item.label.Blog": { + "message": "Блог", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/?s=spreadsheet" + }, + "link.item.label.Forum": { + "message": "Форум", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/spreadsheet/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "О нас", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Связаться с нами", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Лицензирование", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses" + } +} diff --git a/i18n/ru/docusaurus-theme-classic/navbar.json b/i18n/ru/docusaurus-theme-classic/navbar.json new file mode 100644 index 00000000..5d931759 --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "Документация JavaScript Spreadsheet", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "Документация DHTMLX Spreadsheet", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Примеры", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Форум", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Поддержка", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Скачать", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/zh/code.json b/i18n/zh/code.json new file mode 100644 index 00000000..2a044336 --- /dev/null +++ b/i18n/zh/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "页面已崩溃。", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "回到顶部", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "历史博文", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "历史博文", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "博文列表分页导航", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "较新的博文", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "较旧的博文", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "博文分页导航", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "较新一篇", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "较旧一篇", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "查看所有标签", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "跟随系统", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "浅色模式", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "暗黑模式", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "切换浅色/暗黑模式（当前为{mode}）", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 个项目", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "页面路径", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "文件选项卡", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "上一页", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "下一页", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count} 篇文档带有标签", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged}「{tagName}」", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "版本：{versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "最新版本", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "编辑此页", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}的直接链接", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": "于 {date} ", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": "由 {user} ", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "最后{byUser}{atDate}更新", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "选择版本", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "找不到页面", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "标签：", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "注意", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "危险", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "信息", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "备注", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "提示", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "警告", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "最近博文导航", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "展开侧边栏分类 '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "折叠侧边栏分类 '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "（在新标签页中打开）", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "主导航", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "选择语言", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "我们找不到您要找的页面。", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "本页总览", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "阅读更多", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "阅读 {title} 的全文", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "阅读需 {readingTime} 分钟", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "复制", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "复制成功", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "复制代码到剪贴板", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "主页面", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "文档侧边栏", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "关闭导航栏", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 回到主菜单", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "切换导航栏", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "展开下拉菜单", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "折叠下拉菜单", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "找到 {count} 份文件", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "「{query}」的搜索结果", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "在文档中搜索", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "在此输入搜索词", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "搜索", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "由 Algolia 提供", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "未找到结果", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "正在获取新的搜索结果...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "搜索", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "清除查询", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "取消", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "搜索文档", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "再问一个问题……", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "正在回答……", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "搜索", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "回车", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "搜索", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "返回关键词搜索", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "返回关键词搜索", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "最近搜索", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "没有最近搜索", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "保存这个搜索", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "从历史记录中删除这个搜索", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "收藏", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "从收藏列表中删除这个搜索", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "最近的对话", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "从历史记录中删除此对话", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "无法获取结果", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "你可能需要检查网络连接。", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "询问 AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "回答由 AI 生成，可能会出错。请核实回答内容。", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "相关来源", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "正在思考……", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "复制", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "已复制！", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "复制", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "赞", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "踩", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "感谢您的反馈！", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "正在搜索……", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "正在搜索 ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "已搜索", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "选中", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "提交问题", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Enter 键", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "导航", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "向上键", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "向下键", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "关闭", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 键", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "搜索提供", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "返回搜索", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "没有结果：", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "试试搜索", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "认为这个查询应该有结果？", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "请告知我们。", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "搜索文档", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.SearchBar.seeAll": { + "message": "查看全部 {count} 个结果" + }, + "theme.blog.post.plurals": { + "message": "{count} 篇博文", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} 含有标签「{tagName}」", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "作者", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "查看所有作者", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "该作者尚未撰写任何文章。", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "未列出的页面", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "此页面未列出。搜索引擎不会将其编入索引，只有拥有直接链接的用户才能访问。", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "草稿页面", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "此页面为草稿。它仅在开发环境中可见，并将从生产构建中排除。", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "重试", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "跳到主要内容", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "标签", + "description": "The title of the tag list page" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-blog/options.json b/i18n/zh/docusaurus-plugin-content-blog/options.json new file mode 100644 index 00000000..9239ff70 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current.json b/i18n/zh/docusaurus-plugin-content-docs/current.json new file mode 100644 index 00000000..9635a464 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,106 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "新功能与迁移", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "新功能与迁移", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet methods": { + "message": "Spreadsheet 方法", + "description": "The label for category 'Spreadsheet methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet events": { + "message": "Spreadsheet 事件", + "description": "The label for category 'Spreadsheet events' in sidebar 'docs'" + }, + "sidebar.docs.category.Spreadsheet properties": { + "message": "Spreadsheet 属性", + "description": "The label for category 'Spreadsheet properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Sheet Manager API": { + "message": "Sheet Manager API", + "description": "The label for category 'Sheet Manager API' in sidebar 'docs'" + }, + "sidebar.docs.category.Selection methods": { + "message": "Selection 方法", + "description": "The label for category 'Selection methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Events Bus methods": { + "message": "Event Bus 方法", + "description": "The label for category 'Events Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Export methods": { + "message": "Export 方法", + "description": "The label for category 'Export methods' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "指南", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides": { + "message": "开发者指南", + "description": "The label for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Developer guides.link.generated-index.title": { + "message": "开发者指南", + "description": "The generated-index page title for category 'Developer guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Localization": { + "message": "本地化", + "description": "The label for category 'Localization' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes": { + "message": "主题", + "description": "The label for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.Themes.link.generated-index.title": { + "message": "主题", + "description": "The generated-index page title for category 'Themes' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides": { + "message": "用户指南", + "description": "The label for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.User guides.link.generated-index.title": { + "message": "用户指南", + "description": "The generated-index page title for category 'User guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells": { + "message": "使用单元格", + "description": "The label for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Work with cells.link.generated-index.title": { + "message": "使用单元格", + "description": "The generated-index page title for category 'Work with cells' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations": { + "message": "框架与集成", + "description": "The label for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.Frameworks & integrations.link.generated-index.title": { + "message": "框架与集成", + "description": "The generated-index page title for category 'Frameworks & integrations' in sidebar 'docs'" + }, + "sidebar.docs.category.React Spreadsheet": { + "message": "React Spreadsheet", + "description": "The label for category 'React Spreadsheet' in sidebar 'docs'" + }, + "sidebar.docs.category.API reference": { + "message": "API 参考", + "description": "The label for category 'API reference' in sidebar 'docs'" + }, + "sidebar.docs.category.Data & state management": { + "message": "数据与状态管理", + "description": "The label for category 'Data & state management' in sidebar 'docs'" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 00000000..21f1d705 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +56cb339f2b6521d48a19870cbf0a65ef15c84b9c diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/angular_integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/angular_integration.md new file mode 100644 index 00000000..1ca0ce21 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/angular_integration.md @@ -0,0 +1,284 @@ +--- +sidebar_label: 与 Angular 集成 +title: Angular 集成 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的 Angular 集成方式。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 与 Angular 集成 {#integration-with-angular} + +:::tip +使用本文档前，您应熟悉 **Angular** 的基本概念和模式。如需复习，请参阅 [**Angular 文档**](https://angular.dev/overview)。 +::: + +DHTMLX Spreadsheet 与 **Angular** 兼容。我们已准备了如何在 **Angular** 中使用 DHTMLX Spreadsheet 的代码示例。更多信息请参阅对应的 [**GitHub 示例**](https://github.com/DHTMLX/angular-spreadsheet-demo)。 + +## 创建项目 {#creating-a-project} + +:::info +在开始创建新项目之前，请先安装 [**Angular CLI**](https://angular.dev/tools/cli) 和 [**Node.js**](https://nodejs.org/en/)。 +::: + +使用 Angular CLI 创建一个新的 *my-angular-spreadsheet-app* 项目。运行以下命令： + +~~~json +ng new my-angular-spreadsheet-app +~~~ + +:::note +如果您希望按照本指南操作，在创建新 Angular 应用时请禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering）。 +::: + +上述命令会安装所有必要的工具，因此您无需运行任何额外的命令。 + +### 安装依赖项 {#installation-of-dependencies} + +完成后，进入应用目录： + +~~~json +cd my-angular-spreadsheet-app +~~~ + +安装依赖项并启动开发服务器。为此，请使用 [**yarn**](https://yarnpkg.com/) 包管理器： + +~~~json +yarn +yarn start +~~~ + +应用应在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 Spreadsheet {#creating-spreadsheet} + +现在您需要获取 DHTMLX Spreadsheet 源代码。首先停止应用并安装 Spreadsheet 包。 + +### 第一步：安装包 {#step-1-package-installation} + +下载 [**试用版 Spreadsheet 包**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) 并按照 README 文件中的步骤操作。请注意，试用版 Spreadsheet 仅可使用 30 天。 + +### 第二步：创建组件 {#step-2-component-creation} + +现在您需要创建一个 Angular 组件，以便将 Spreadsheet 添加到应用中。在 *src/app/* 目录下创建 *spreadsheet* 文件夹，在其中添加一个新文件并命名为 *spreadsheet.component.ts*。然后完成以下步骤。 + +#### 导入源文件 {#importing-source-files} + +打开该文件并导入 Spreadsheet 源文件。请注意： + +- 如果您使用 PRO 版本并从本地文件夹安装 Spreadsheet 包，导入路径如下： + +~~~jsx +import { Spreadsheet } from 'dhx-spreadsheet-package'; +~~~ + +- 如果您使用试用版 Spreadsheet，请指定以下路径： + +~~~jsx +import { Spreadsheet } from '@dhx/trial-spreadsheet'; +~~~ + +本教程展示如何配置 **试用版** Spreadsheet。 + +#### 设置容器并初始化 Spreadsheet {#set-the-container-and-initialize-spreadsheet} + +要在页面上显示 Spreadsheet，您需要设置渲染组件的容器并使用相应的构造函数初始化 Spreadsheet： + +~~~jsx {1,8,12-13,18-19} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', // 模板名称，用于 "app.component.ts" 文件中的 + styleUrls: ['./spreadsheet.component.css'], // 引入 css 文件 + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + // 初始化 Spreadsheet 的容器 + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + // 初始化 Spreadsheet 组件 + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); // 销毁 Spreadsheet + } +} +~~~ + +#### 添加样式 {#adding-styles} + +要正确显示 Spreadsheet，您需要提供相应的样式。为此，可以在 *src/app/spreadsheet/* 目录下创建 *spreadsheet.component.css* 文件，并为 Spreadsheet 及其容器指定重要样式： + +~~~css title="spreadsheet.component.css" +/* 导入 Spreadsheet 样式 */ +@import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css"; + +/* 指定初始页面样式 */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* 指定 Spreadsheet 容器样式 */ +.widget { + height: 100%; +} +~~~ + +#### 加载数据 {#loading-data} + +要向 Spreadsheet 中添加数据，您需要提供一个数据集。可以在 *src/app/spreadsheet/* 目录下创建 *data.ts* 文件并添加一些数据： + +~~~jsx title="data.ts" +export function getData(): any { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // 更多包含数据的单元格 + ] + } +} +~~~ + +然后打开 *spreadsheet.component.ts* 文件。导入数据文件并在 `ngOnInit()` 方法中使用 [`parse()`](api/spreadsheet_parse_method.md) 方法应用数据，如下所示。 + +~~~jsx {2,18,21} title="spreadsheet.component.ts" +import { Spreadsheet } from "@dhx/trial-spreadsheet"; +import { getData } from "./data"; // 导入数据 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: 'spreadsheet', + styleUrls: ['./spreadsheet.component.css'], + template: `
` +}) + +export class SpreadsheetComponent implements OnInit, OnDestroy { + @ViewChild('container', { static: true }) spreadsheet_container!: ElementRef; + + private _spreadsheet!: Spreadsheet; + + ngOnInit() { + const data = getData(); // 初始化数据属性 + this._spreadsheet = new Spreadsheet( this.spreadsheet_container.nativeElement, {}); + + this._spreadsheet.parse(data); + } + + ngOnDestroy() { + this._spreadsheet.destructor(); + } +} +~~~ + +现在 Spreadsheet 组件已可以使用。当元素添加到页面时，它会用数据初始化 Spreadsheet。您也可以根据需要提供配置项。请访问我们的 [Spreadsheet API 文档](api/overview/events_overview.md) 查看所有可用属性的完整列表。 + +#### 处理事件 {#handling-events} + +当用户在 Spreadsheet 中执行操作时，widget 会触发相应事件。您可以使用这些事件检测操作并运行所需代码。请参阅[事件完整列表](api/overview/events_overview.md)。 + +打开 *spreadsheet.component.ts* 文件，按如下方式完成 `ngOnInit()` 方法： + +~~~jsx {5-8} title="spreadsheet.component.ts" +// ... +ngOnInit() { + this._spreadsheet = new Spreadsheet(this.spreadsheet_container.nativeElement,{}); + + spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); + }); +} + +ngOnDestroy() { + this._spreadsheet.destructor(); +} +~~~ + +### 第三步：将 Spreadsheet 添加到应用 {#step-3-adding-spreadsheet-into-the-app} + +要将 `SpreadsheetComponent` 组件添加到应用中，打开 *src/app/app.component.ts* 文件，并将默认代码替换为以下内容： + +~~~jsx {5} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` // 在 "spreadsheet.component.ts" 文件中创建的模板 +}) +export class AppComponent { + name = ""; +} +~~~ + +然后在 *src/app/* 目录下创建 *app.module.ts* 文件，并按如下方式指定 `SpreadsheetComponent`： + +~~~jsx {4-5,8} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component"; + +@NgModule({ + declarations: [AppComponent, SpreadsheetComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +最后一步是打开 *src/main.ts* 文件，并将现有代码替换为以下内容： + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +完成后，您可以启动应用，在页面上查看加载了数据的 Spreadsheet。 + +![Angular 应用中已加载示例数据的 DHTMLX Spreadsheet](/img/integrations/trial_spreadsheet.png) + +现在您已了解如何将 DHTMLX Spreadsheet 与 Angular 集成。您可以根据具体需求自定义代码。最终示例可在 [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo) 上找到。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md new file mode 100644 index 00000000..4ed58314 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -0,0 +1,140 @@ +--- +sidebar_label: API 概览 +title: API 概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的 API 概览。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# API 概览 {#api-overview} + +## 构造函数 {#constructor} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + rowsCount: 20, + colsCount: 20 +}); +~~~ + +参数： + +- 一个 HTML 容器（或 HTML 容器的 ID） +- 一个配置选项的哈希对象（见下文） + +## Spreadsheet 方法 {#spreadsheet-methods} + +| 名称 | 描述 | +| :------------------------------------------- | :-------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(api/spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(api/spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(api/spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(api/spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(api/spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(api/spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(api/spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(api/spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(api/spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(api/spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(api/spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(api/spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(api/spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(api/spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(api/spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(api/spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(api/spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(api/spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(api/spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(api/spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(api/spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(api/spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(api/spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(api/spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(api/spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(api/spreadsheet_redo_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(api/spreadsheet_serialize_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(api/spreadsheet_search_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(api/spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(api/spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(api/spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(api/spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(api/spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(api/spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(api/spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(api/spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(api/spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(api/spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(api/spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(api/spreadsheet_unlock_method.md) | + +## Spreadsheet 事件 {#spreadsheet-events} + +| 名称 | 描述 | +| :---------------------------------------------- | :----------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(api/spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(api/spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(api/spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(api/spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(api/spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(api/spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(api/spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(api/spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(api/spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(api/spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(api/spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(api/spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(api/spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(api/spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(api/spreadsheet_beforesheetchange_event.md) | + +## Spreadsheet 属性 {#spreadsheet-properties} + +| 名称 | 描述 | +| ---------------------------------------------- | ----------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(api/spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(api/spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(api/spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(api/spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(api/spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(api/spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(api/spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(api/spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(api/spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(api/spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(api/spreadsheet_toolbarblocks_config.md) | + + +## Sheet Manager 方法 {#sheet-manager-methods} + +| 名称 | 描述 | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(api/sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(api/sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(api/sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(api/sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(api/sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(api/sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(api/sheetmanager_setactive_method.md) | + +## Selection 方法 {#selection-methods} + +| 名称 | 描述 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(api/selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(api/selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(api/selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(api/selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(api/selection_setselectedcell_method.md) | + +## Events Bus 方法 {#events-bus-methods} + +| 名称 | 描述 | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(api/eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(api/eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(api/eventsbus_on_method.md) | + +## 导出方法 {#export-methods} + +| 名称 | 描述 | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(api/export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(api/export_xlsx_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md new file mode 100644 index 00000000..1d54c5bb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_detach_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: detach() +title: detach events bus 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 detach events bus 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# detach() + +### 描述 {#description} + +@short: 从事件中移除一个处理器（该处理器之前通过 `on()` 方法附加） + +### 用法 {#usage} + +~~~jsx +detach(name: string): void; +~~~ + +### 参数 {#parameters} + +- `name` - （必填）要移除处理器的事件名称 + +### 示例 {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); + +spreadsheet.events.detach("StyleChange"); +~~~ + +:::info +默认情况下，`detach()` 会移除目标事件的所有事件处理器。您可以使用上下文标记来移除特定的事件处理器。 +::: + +~~~jsx +const marker = "any"; // 可以使用任意字符串|对象值 + +spreadsheet.events.on("StyleChange", handler1); +spreadsheet.events.on("StyleChange", handler2, marker); +// 以下命令将只删除 handler2 +spreadsheet.events.detach("StyleChange", marker); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md new file mode 100644 index 00000000..3623e214 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_fire_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: fire() +title: fire events bus 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 fire events bus 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# fire() + +### 描述 {#description} + +@short: 触发一个内部事件 + +:::info +通常情况下，事件会自动调用，您无需使用此方法。 +::: + +### 用法 {#usage} + +~~~jsx +fire(name: string, arguments: array): boolean; +~~~ + +### 参数 {#parameters} + +- `name` - （必填）事件名称，不区分大小写 +- `arguments` - （必填）与事件相关的数据数组 + +### 返回值 {#returns} + +若某个事件处理器返回 `false`，则该方法返回 `false`；否则返回 `true` + +### 示例 {#example} + +~~~jsx {10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("CustomEvent", function(param1, param2){ + return true; +}); + +const res = spreadsheet.events.fire("CustomEvent", [12, "abc"]); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md new file mode 100644 index 00000000..7def4054 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/eventsbus_on_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: on() +title: on events bus 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 on events bus 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# on() + +### 描述 {#description} + +@short: 为 Spreadsheet 的内部事件附加一个处理器 + +### 用法 {#usage} + +~~~jsx +on(name: string, callback: function): void; +~~~ + +### 参数 {#parameters} + +- `name` - （必填）事件名称，不区分大小写 +- `callback` - （必填）处理器函数 + +### 示例 {#example} + +~~~jsx {6-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +spreadsheet.events.on("StyleChange", function(id){ + console.log("The style of cell "+spreadsheet.selection.get()+" is changed"); +}); +~~~ + +:::info +Spreadsheet 事件的完整列表请参见[此处](api/api_overview.md#spreadsheet-events)。 + +您可以为同一事件附加多个处理器，它们都将被执行。如果某些处理器返回 `false`，则相关操作将被阻止。事件处理器按附加顺序依次执行。 +::: + +**相关文章：** [事件处理](handling_events.md) + +**相关示例：** [Spreadsheet. 事件](https://snippet.dhtmlx.com/2vkjyvsi) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/export_json_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/export_json_method.md new file mode 100644 index 00000000..91b46ad7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/export_json_method.md @@ -0,0 +1,35 @@ +--- +sidebar_label: json() +title: json 导出方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 json 导出方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# json() + +### 描述 {#description} + +@short: 将电子表格中的数据导出为 JSON 文件 + +### 用法 {#usage} + +~~~jsx +json(): void; +~~~ + +### 示例 {#example} + +~~~jsx {7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// 将电子表格中的数据导出为 JSON 文件 +spreadsheet.export.json(); +~~~ + +**更新日志：** 在 v4.3 中新增 + +**相关文章：** [数据加载与导出](loading_data.md) + +**相关示例：** [Spreadsheet. 导出/导入 JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md new file mode 100644 index 00000000..07964df0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/export_xlsx_method.md @@ -0,0 +1,48 @@ +--- +sidebar_label: xlsx() +title: xlsx 导出方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 xlsx 导出方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# xlsx() + +### 描述 {#description} + +@short: 将电子表格中的数据导出为 Excel (.xlsx) 文件 + +### 用法 {#usage} + +~~~jsx +xlsx(name:string): void; +~~~ + +### 参数 {#parameters} + +- `name` - （可选）导出的 .xlsx 文件名称 + +### 示例 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); +spreadsheet.parse(data); + +// 将电子表格中的数据导出为 Excel 文件 +spreadsheet.export.xlsx(); + +// 将电子表格中的数据导出为带有自定义名称的 Excel 文件 +spreadsheet.export.xlsx("MyData"); +~~~ + +:::note +请注意，该组件仅支持导出扩展名为 `.xlsx` 的 Excel 文件。 +::: + +:::info +DHTMLX Spreadsheet 使用基于 WebAssembly 的库 [Json2Excel](https://github.com/dhtmlx/json2excel) 将数据导出为 Excel。[查看详情](loading_data.md#exporting-data)。 +::: + +**相关文章：** [数据加载与导出](loading_data.md) + +**相关示例：** [Spreadsheet. 导出 Xlsx](https://snippet.dhtmlx.com/btyo3j8s) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md new file mode 100644 index 00000000..fd4417e8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/actions_overview.md @@ -0,0 +1,86 @@ +--- +sidebar_label: Spreadsheet 操作 +title: 操作概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的操作概览。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# 操作概览 {#actions-overview} + +本节介绍与 Spreadsheet 事件交互的新方式。 + +从 v4.3 起，DHTMLX Spreadsheet 引入了一对 [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md) 事件，使您的代码更简洁明了。这两个事件分别在操作执行前后触发，并精确指明执行的是哪个操作。 + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + // more actions +}); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "addColumn") { + console.log(actionName, config) + }, + // more actions +}); +~~~ + +[可用操作的完整列表见下文。](#list-of-actions) + +>这意味着您不再需要添加成对的 [**before- 和 after-**](api/overview/events_overview.md) 事件来跟踪和处理在电子表格中执行更改时的操作。 + +>但如需要，您可以使用**旧方式**，因为所有现有事件仍然如常工作： +~~~jsx +spreadsheet.events.on("afterColumnAdd", function(cell){ + console.log("A new column is added", cell); +}); +~~~ +~~~jsx +spreadsheet.events.on("beforeColumnAdd", function(cell){ + console.log("A new column will be added", cell); + return true; +}); +~~~ + + + + +## 操作列表 {#list-of-actions} + +| 操作 | 描述 | +| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **addColumn** | 添加新列时执行该操作 | +| **addRow** | 添加新行时执行该操作 | +| **addSheet** | 添加新工作表时执行该操作 | +| **clear** | 通过 clear() 方法清空电子表格时执行该操作 | +| **clearSheet** | 通过 sheets.clear() 方法清空工作表时执行该操作 | +| **deleteColumn** | 删除列时执行该操作 | +| **deleteRow** | 删除行时执行该操作 | +| **deleteSheet** | 删除工作表时执行该操作 | +| **filter** | 在工作表中筛选数据时执行该操作 | +| **fitColumn** | 自动适配列宽时执行该操作 | +| **groupAction** | 选中一组单元格并对其执行某些操作时执行该操作（例如：更改单元格的样式或格式、锁定/解锁单元格，或清除单元格的值或样式） | +| **insertLink** | 在单元格中插入超链接时执行该操作 | +| **lockCell** | 锁定/解锁单元格时执行该操作 | +| **merge** | 合并一组单元格时执行该操作 | +| **removeCellStyles** | 清除单元格样式时执行该操作 | +| **renameSheet** | 重命名工作表时执行该操作 | +| **resizeCol** | 调整列宽时执行该操作 | +| **resizeRow** | 调整行高时执行该操作 | +| **setCellFormat** | 更改单元格格式时执行该操作 | +| **setCellValue** | 更改或删除单元格值时执行该操作 | +| **setValidation** | 为单元格设置数据验证时执行该操作 | +| **sortCells** | 在电子表格中排序数据时执行该操作 | +| **setCellStyle** | 更改单元格样式时执行该操作 | +| **toggleVisibility** | 隐藏/显示列/行时执行该操作 | +| **toggleFreeze** | 冻结/取消冻结列/行时执行该操作 | +| **unmerge** | 拆分单元格时执行该操作 | + +**更新日志：** + +- **toggleFreeze** 和 **toggleVisibility** 操作在 v5.2 中新增 +- **merge**、**unmerge**、**filter**、**fitColumn**、**insertLink** 操作在 v5.0 中新增 + +**相关示例：** [Spreadsheet. 操作](https://snippet.dhtmlx.com/efcuxlkt) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md new file mode 100644 index 00000000..d5127e7b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/eventbus_overview.md @@ -0,0 +1,13 @@ +--- +sidebar_label: Event Bus 方法概览 +title: Event Bus 方法概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的 Event Bus 方法概览。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# Event Bus 方法概览 {#event-bus-methods-overview} + +| 名称 | 描述 | +| ---------------------------------- | ----------------------------------------- | +| [](api/eventsbus_detach_method.md) | @getshort(../eventsbus_detach_method.md) | +| [](api/eventsbus_fire_method.md) | @getshort(../eventsbus_fire_method.md) | +| [](api/eventsbus_on_method.md) | @getshort(../eventsbus_on_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 00000000..f832aaa4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,25 @@ +--- +sidebar_label: 事件概览 +title: 事件概览 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中查看事件概览。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# 事件概览 {#events-overview} + +| 名称 | 描述 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/spreadsheet_afteraction_event.md) | @getshort(../spreadsheet_afteraction_event.md) | +| [](api/spreadsheet_afterclear_event.md) | @getshort(../spreadsheet_afterclear_event.md) | +| [](api/spreadsheet_afterdataloaded_event.md) | @getshort(../spreadsheet_afterdataloaded_event.md) | +| [](api/spreadsheet_aftereditend_event.md) | @getshort(../spreadsheet_aftereditend_event.md) | +| [](api/spreadsheet_aftereditstart_event.md) | @getshort(../spreadsheet_aftereditstart_event.md) | +| [](api/spreadsheet_afterfocusset_event.md) | @getshort(../spreadsheet_afterfocusset_event.md) | +| [](api/spreadsheet_afterselectionset_event.md) | @getshort(../spreadsheet_afterselectionset_event.md) | +| [](api/spreadsheet_aftersheetchange_event.md) | @getshort(../spreadsheet_aftersheetchange_event.md) | +| [](api/spreadsheet_beforeaction_event.md) | @getshort(../spreadsheet_beforeaction_event.md) | +| [](api/spreadsheet_beforeclear_event.md) | @getshort(../spreadsheet_beforeclear_event.md) | +| [](api/spreadsheet_beforeeditend_event.md) | @getshort(../spreadsheet_beforeeditend_event.md) | +| [](api/spreadsheet_beforeeditstart_event.md) | @getshort(../spreadsheet_beforeeditstart_event.md) | +| [](api/spreadsheet_beforefocusset_event.md) | @getshort(../spreadsheet_beforefocusset_event.md) | +| [](api/spreadsheet_beforeselectionset_event.md) | @getshort(../spreadsheet_beforeselectionset_event.md) | +| [](api/spreadsheet_beforesheetchange_event.md) | @getshort(../spreadsheet_beforesheetchange_event.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/export_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/export_overview.md new file mode 100644 index 00000000..49289747 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/export_overview.md @@ -0,0 +1,12 @@ +--- +sidebar_label: 导出方法概览 +title: 导出方法概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的导出方法概览。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天试用版的 DHTMLX Spreadsheet。 +--- + +# 导出方法概览 {#export-methods-overview} + +| 名称 | 描述 | +| ----------------------------- | ------------------------------------ | +| [](api/export_json_method.md) | @getshort(../export_json_method.md) | +| [](api/export_xlsx_method.md) | @getshort(../export_xlsx_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 00000000..3852c1a3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,50 @@ +--- +sidebar_label: 方法概览 +title: 方法概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的方法概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 方法概览 {#methods-overview} + +| 名称 | 描述 | +| :------------------------------------------ | :------------------------------------------------- | +| [](api/spreadsheet_addcolumn_method.md) | @getshort(../spreadsheet_addcolumn_method.md) | +| [](api/spreadsheet_addformula_method.md) | @getshort(../spreadsheet_addformula_method.md) | +| [](api/spreadsheet_addrow_method.md) | @getshort(../spreadsheet_addrow_method.md) | +| [](api/spreadsheet_clear_method.md) | @getshort(../spreadsheet_clear_method.md) | +| [](api/spreadsheet_deletecolumn_method.md) | @getshort(../spreadsheet_deletecolumn_method.md) | +| [](api/spreadsheet_deleterow_method.md) | @getshort(../spreadsheet_deleterow_method.md) | +| [](api/spreadsheet_eachcell_method.md) | @getshort(../spreadsheet_eachcell_method.md) | +| [](api/spreadsheet_endedit_method.md) | @getshort(../spreadsheet_endedit_method.md) | +| [](api/spreadsheet_fitcolumn_method.md) | @getshort(../spreadsheet_fitcolumn_method.md) | +| [](api/spreadsheet_freezecols_method.md) | @getshort(../spreadsheet_freezecols_method.md) | +| [](api/spreadsheet_freezerows_method.md) | @getshort(../spreadsheet_freezerows_method.md) | +| [](api/spreadsheet_getfilter_method.md) | @getshort(../spreadsheet_getfilter_method.md) | +| [](api/spreadsheet_getformat_method.md) | @getshort(../spreadsheet_getformat_method.md) | +| [](api/spreadsheet_getformula_method.md) | @getshort(../spreadsheet_getformula_method.md) | +| [](api/spreadsheet_getstyle_method.md) | @getshort(../spreadsheet_getstyle_method.md) | +| [](api/spreadsheet_hidecols_method.md) | @getshort(../spreadsheet_hidecols_method.md) | +| [](api/spreadsheet_hiderows_method.md) | @getshort(../spreadsheet_hiderows_method.md) | +| [](api/spreadsheet_hidesearch_method.md) | @getshort(../spreadsheet_hidesearch_method.md) | +| [](api/spreadsheet_getvalue_method.md) | @getshort(../spreadsheet_getvalue_method.md) | +| [](api/spreadsheet_insertlink_method.md) | @getshort(../spreadsheet_insertlink_method.md) | +| [](api/spreadsheet_islocked_method.md) | @getshort(../spreadsheet_islocked_method.md) | +| [](api/spreadsheet_load_method.md) | @getshort(../spreadsheet_load_method.md) | +| [](api/spreadsheet_lock_method.md) | @getshort(../spreadsheet_lock_method.md) | +| [](api/spreadsheet_mergecells_method.md) | @getshort(../spreadsheet_mergecells_method.md) | +| [](api/spreadsheet_parse_method.md) | @getshort(../spreadsheet_parse_method.md) | +| [](api/spreadsheet_redo_method.md) | @getshort(../spreadsheet_redo_method.md) | +| [](api/spreadsheet_search_method.md) | @getshort(../spreadsheet_search_method.md) | +| [](api/spreadsheet_serialize_method.md) | @getshort(../spreadsheet_serialize_method.md) | +| [](api/spreadsheet_setfilter_method.md) | @getshort(../spreadsheet_setfilter_method.md) | +| [](api/spreadsheet_setformat_method.md) | @getshort(../spreadsheet_setformat_method.md) | +| [](api/spreadsheet_setstyle_method.md) | @getshort(../spreadsheet_setstyle_method.md) | +| [](api/spreadsheet_setvalidation_method.md) | @getshort(../spreadsheet_setvalidation_method.md) | +| [](api/spreadsheet_setvalue_method.md) | @getshort(../spreadsheet_setvalue_method.md) | +| [](api/spreadsheet_showcols_method.md) | @getshort(../spreadsheet_showcols_method.md) | +| [](api/spreadsheet_showrows_method.md) | @getshort(../spreadsheet_showrows_method.md) | +| [](api/spreadsheet_startedit_method.md) | @getshort(../spreadsheet_startedit_method.md) | +| [](api/spreadsheet_undo_method.md) | @getshort(../spreadsheet_undo_method.md) | +| [](api/spreadsheet_unfreezecols_method.md) | @getshort(../spreadsheet_unfreezecols_method.md) | +| [](api/spreadsheet_unfreezerows_method.md) | @getshort(../spreadsheet_unfreezerows_method.md) | +| [](api/spreadsheet_unlock_method.md) | @getshort(../spreadsheet_unlock_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 00000000..67519b6f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 属性概览 +title: 属性概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的属性概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 属性概览 {#properties-overview} + +| 名称 | 描述 | +| --------------------------------------------- | ---------------------------------------------------- | +| [](api/spreadsheet_colscount_config.md) | @getshort(../spreadsheet_colscount_config.md) | +| [](api/spreadsheet_editline_config.md) | @getshort(../spreadsheet_editline_config.md) | +| [](api/spreadsheet_exportmodulepath_config.md) | @getshort(../spreadsheet_exportmodulepath_config.md) | +| [](api/spreadsheet_formats_config.md) | @getshort(../spreadsheet_formats_config.md) | +| [](api/spreadsheet_importmodulepath_config.md) | @getshort(../spreadsheet_importmodulepath_config.md) | +| [](api/spreadsheet_localization_config.md) | @getshort(../spreadsheet_localization_config.md) | +| [](api/spreadsheet_menu_config.md) | @getshort(../spreadsheet_menu_config.md) | +| [](api/spreadsheet_multisheets_config.md) | @getshort(../spreadsheet_multisheets_config.md) | +| [](api/spreadsheet_readonly_config.md) | @getshort(../spreadsheet_readonly_config.md) | +| [](api/spreadsheet_rowscount_config.md) | @getshort(../spreadsheet_rowscount_config.md) | +| [](api/spreadsheet_toolbarblocks_config.md) | @getshort(../spreadsheet_toolbarblocks_config.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md new file mode 100644 index 00000000..ee7839b9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/selection_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: Selection 方法概览 +title: Selection 方法概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的 Selection 方法概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# Selection 方法概览 {#selection-methods-overview} + +| 名称 | 描述 | +| :--------------------------------------------- | :---------------------------------------------------- | +| [](api/selection_getfocusedcell_method.md) | @getshort(../selection_getfocusedcell_method.md) | +| [](api/selection_getselectedcell_method.md) | @getshort(../selection_getselectedcell_method.md) | +| [](api/selection_removeselectedcell_method.md) | @getshort(../selection_removeselectedcell_method.md) | +| [](api/selection_setfocusedcell_method.md) | @getshort(../selection_setfocusedcell_method.md) | +| [](api/selection_setselectedcell_method.md) | @getshort(../selection_setselectedcell_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md new file mode 100644 index 00000000..ff15d4db --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/sheetmanager_overview.md @@ -0,0 +1,17 @@ +--- +sidebar_label: Sheet Manager API 概览 +title: Sheet Manager API 概览 +description: 您可以在文档中查看 DHTMLX JavaScript Spreadsheet 库的 Sheet Manager API 概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# Sheet Manager API 概览 {#sheet-manager-api-overview} + +| 名称 | 描述 | +| :---------------------------------------- | :----------------------------------------------- | +| [](api/sheetmanager_add_method.md) | @getshort(../sheetmanager_add_method.md) | +| [](api/sheetmanager_clear_method.md) | @getshort(../sheetmanager_clear_method.md) | +| [](api/sheetmanager_get_method.md) | @getshort(../sheetmanager_get_method.md) | +| [](api/sheetmanager_getactive_method.md) | @getshort(../sheetmanager_getactive_method.md) | +| [](api/sheetmanager_getall_method.md) | @getshort(../sheetmanager_getall_method.md) | +| [](api/sheetmanager_remove_method.md) | @getshort(../sheetmanager_remove_method.md) | +| [](api/sheetmanager_setactive_method.md) | @getshort(../sheetmanager_setactive_method.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md new file mode 100644 index 00000000..57d280fc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getfocusedcell_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getFocusedCell() +title: getFocusedCell selection 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getFocusedCell selection 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getFocusedCell() + +### 描述 {#description} + +@short: 返回当前焦点单元格的 id + +### 用法 {#usage} + +~~~jsx +getFocusedCell(): string; +~~~ + +### 返回值 {#returns} + +该方法返回焦点单元格的 id + +### 示例 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +// 将焦点设置到某个单元格 +spreadsheet.selection.setFocusedCell("D4"); + +// 获取焦点单元格 +const focused = spreadsheet.selection.getFocusedCell(); // ->"D4" +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md new file mode 100644 index 00000000..f7fb4217 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_getselectedcell_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: getSelectedCell() +title: getSelectedCell selection 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getSelectedCell selection 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getSelectedCell() + +### 描述 {#description} + +@short: 返回选中单元格的 id（可为多个） + +### 用法 {#usage} + +~~~jsx +getSelectedCell(): string; +~~~ + +### 返回值 {#returns} + +该方法返回选中单元格的 id 或单元格区域 + +### 示例 {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// 获取选中的单元格 +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md new file mode 100644 index 00000000..11883a6f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_removeselectedcell_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: removeSelectedCell() +title: removeSelectedCell selection 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Selection 的 removeSelectedCell 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# removeSelectedCell() + +### 描述 {#description} + +@short: 取消指定单元格的选中状态 + +### 用法 {#usage} + +~~~jsx +removeSelectedCell(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）选中单元格的 id 或单元格区域 + +### 示例 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +// 选中分散的单元格 +spreadsheet.selection.setSelectedCell("A1:A9,C2,B4,D6"); + +// 取消指定单元格的选中状态 +spreadsheet.selection.removeSelectedCell("A3:A6,C2"); +~~~ + +**更新日志：** 在 v4.2 中新增 + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md) + +**相关示例：** [Spreadsheet. 取消选中](https://snippet.dhtmlx.com/u4j76cuh) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md new file mode 100644 index 00000000..914cab5f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setfocusedcell_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: setFocusedCell() +title: setFocusedCell selection 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setFocusedCell selection 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setFocusedCell() + +### 描述 {#description} + +@short: 将焦点设置到指定单元格 + +### 用法 {#usage} + +~~~jsx +setFocusedCell(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）要设置焦点的单元格 id + +### 示例 {#example} + +~~~jsx {6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md new file mode 100644 index 00000000..7bd1af66 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/selection_setselectedcell_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setSelectedCell() +title: setSelectedCell selection 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setSelectedCell selection 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setSelectedCell() + +### 描述 {#description} + +@short: 选中指定单元格（可为多个） + +### 用法 {#usage} + +~~~jsx +setSelectedCell(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）选中单元格的 id 或单元格区域 + +### 示例 {#example} + +~~~jsx {7,10,13} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +// 选中单个单元格 +spreadsheet.selection.setSelectedCell("B5"); + +// 选中单元格区域 +spreadsheet.selection.setSelectedCell("B1:B5"); + +// 选中分散的单元格 +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md new file mode 100644 index 00000000..f0a7243c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_add_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: add() +title: add 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 add 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# add() + +### 描述 {#description} + +@short: 向电子表格中添加一个新的空工作表，并返回新建工作表的唯一标识符 + +如果未提供名称，系统将自动生成默认名称（例如 "Sheet 2" 或 "Sheet 3"）。 + +:::info +要使用此方法，您需要启用 [`multiSheets`](api/spreadsheet_multisheets_config.md) 配置选项。 +::: + +### 用法 {#usage} + +~~~ts +add: (name?: string) => Id; +~~~ + +### 参数 {#parameters} + +- `name` - （`string`）可选，新工作表标签页的显示名称。若省略，则自动分配默认名称。 + +### 返回值 {#returns} + +- `Id` - （`string | number`）新建工作表的唯一标识符。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 添加一个自定义名称的工作表 +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // 例如 "sheet_2" + +// 添加一个自动命名的工作表 +const anotherSheetId = spreadsheet.sheets.add(); +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md new file mode 100644 index 00000000..00eca4c4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_clear_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: clear() +title: clear 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 clear 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# clear() + +### 描述 {#description} + +@short: 清除指定工作表的内容（删除所有单元格值、样式和格式），但不删除工作表本身 + +如果未提供 id，则清除当前活动的工作表。 + +### 用法 {#usage} + +~~~ts +clear: (id?: Id) => void; +~~~ + +### 参数 {#parameters} + +- `id` - (*string | number*) 可选，要清除的工作表的唯一标识符。如果省略，则清除当前活动的工作表。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 按 id 清除指定工作表 +spreadsheet.sheets.clear("sheet_1"); + +// 清除当前活动的工作表 +spreadsheet.sheets.clear(); +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md new file mode 100644 index 00000000..3a8bea37 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_get_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: get() +title: get 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 get 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# get() + +### 描述 {#description} + +@short: 根据标识符返回单个工作表对象 + +### 用法 {#usage} + +~~~ts +get: (id: Id) => ISheet; +~~~ + +### 参数 {#parameters} + +- `id` - (*string | number*) 必填，要获取的工作表的唯一标识符。 + +### 返回值 {#returns} + +- `ISheet` - (*object*) 与给定 id 匹配的工作表对象。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md new file mode 100644 index 00000000..8885b6e3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getactive_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: getActive() +title: getActive 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 getActive 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# getActive() + +### 描述 {#description} + +@short: 返回当前在电子表格中处于活动状态（可见）的工作表对象 + +### 用法 {#usage} + +~~~ts +getActive: () => ISheet; +~~~ + +### 返回值 {#returns} + +- `ISheet` - (*object*) 当前活动的工作表对象，包含 `id` 和 `name` 属性。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md new file mode 100644 index 00000000..2d1aec0c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_getall_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: getAll() +title: getAll 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 getAll 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# getAll() + +### 描述 {#description} + +@short: 返回电子表格中当前所有工作表对象组成的数组 + +:::info +每个工作表对象包含该工作表的 id 和 name。 +::: + +### 用法 {#usage} + +~~~ts +getAll: () => ISheet[]; +~~~ + +### 返回值 {#returns} + +- `ISheet[]` - (*array*) 工作表对象数组。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md new file mode 100644 index 00000000..85301adb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_remove_method.md @@ -0,0 +1,45 @@ +--- +sidebar_label: remove() +title: remove 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 remove 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# remove() + +### 描述 {#description} + +@short: 根据标识符从电子表格中移除工作表 + +如果被移除的工作表处于活动状态，电子表格会自动切换到另一个可用的工作表。 + +:::info +要使用此方法，需要启用 [`multiSheets`](api/spreadsheet_multisheets_config.md) 配置选项。 + +另请注意，如果电子表格中的工作表数量少于 2 个，则不会删除工作表。 +::: + +### 用法 {#usage} + +~~~ts +remove: (id: Id) => void; +~~~ + +### 参数 {#parameters} + +- `id` - (*string | number*) 必填，要移除的工作表的唯一标识符。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 按 id 移除工作表 +spreadsheet.sheets.remove("sheet_2"); +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md new file mode 100644 index 00000000..de3f4b6e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/sheetmanager_setactive_method.md @@ -0,0 +1,43 @@ +--- +sidebar_label: setActive() +title: setActive 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Sheet Manager 的 setActive 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# setActive() + +### 描述 {#description} + +@short: 将活动（可见）工作表切换为指定标识符对应的工作表 + +电子表格 UI 会重新渲染以显示目标工作表的内容。 + +### 用法 {#usage} + +~~~ts +setActive: (id: Id) => void; +~~~ + +### 参数 {#parameters} + +- `id` - (*string | number*) 必填，要激活的工作表的唯一标识符。 + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// 切换到第二个工作表 +spreadsheet.sheets.setActive("sheet_2"); + +// 验证切换结果 +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关文章：** [使用工作表](working_with_sheets.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md new file mode 100644 index 00000000..ae9b6ea5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addcolumn_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addColumn() +title: addColumn 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 addColumn 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# addColumn() + +### 描述 {#description} + +@short: 向电子表格中添加新列 + +:::info +该方法会找到指定的单元格并选中它，将该单元格所在列向左移动一格，并在原位插入一个空列。 +::: + +### 用法 {#usage} + +~~~jsx +addColumn(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）包含要添加列的列标识符的单元格 id + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 添加空的 "G" 列 +spreadsheet.addColumn("G1"); +~~~ + +**相关文章：** [使用电子表格](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md new file mode 100644 index 00000000..230b8c65 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addformula_method.md @@ -0,0 +1,55 @@ +--- +sidebar_label: addFormula() +title: addFormula 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 addFormula 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# addFormula() + +### 描述 {#description} + +@short: 注册可在单元格公式中使用的自定义公式函数 + +注册完成后，该公式可在任意单元格中以大写名称使用（例如 `=MYFUNC(A1, B2)`）。 + +### 用法 {#usage} + +~~~ts +type cellValue = string | number | boolean +type mathArgument = cellValue | cellValue[]; +type mathFunction = (...x: mathArgument[]) => cellValue; + +addFormula: (name: string, handler: mathFunction) => void; +~~~ + +### 参数 {#parameters} + +- `name` - (*string*) 必填，公式名称（不区分大小写，内部以大写形式存储） +- `handler` - (*function*) 必填，处理输入参数（字符串、数字、布尔值或这些类型的数组）并返回单个值的 callback 函数 + +:::note +`handler` callback 函数必须是同步的。不允许在函数内部使用 `Promise` 或 `fetch`。 +::: + +### 示例 {#example} + +~~~jsx {4-6} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +// 添加一个将值翻倍的自定义公式 +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); + +// 在单元格中使用：=DOUBLE(A1) +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +**更新日志：** 在 v6.0 中新增 + +**相关示例：** [Spreadsheet. 添加自定义公式](https://snippet.dhtmlx.com/wvxdlahp) + +**相关文章：** [公式与函数](functions.md#custom-formulas) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md new file mode 100644 index 00000000..0949bd9d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_addrow_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: addRow() +title: addRow 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 addRow 方法。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# addRow() + +### 描述 {#description} + +@short: 向电子表格中添加新行 + +:::info +该方法会找到指定的单元格并选中它，将该单元格所在行向下移动一格，并在原位插入一个空行。 +::: + +### 用法 {#usage} + +~~~jsx +addRow(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）包含要添加行的行标识符的单元格 id + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 添加空的第二行 +spreadsheet.addRow("G2"); +~~~ + +**相关文章：** [使用电子表格](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md new file mode 100644 index 00000000..f6bfa8c2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afteraction_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: afterAction +title: afterAction 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterAction 事件。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# afterAction + +### 描述 {#description} + +@short: 在操作执行完成后触发 + +### 用法 {#usage} + +~~~jsx +afterAction: (action: string, config: object) => void; +~~~ + +### 参数 {#parameters} + +事件的 callback 接收以下参数： + +- `action` - （必填）操作名称。查看可用操作的完整列表，请参阅[此处](api/overview/actions_overview.md#list-of-actions) +- `config` - （必填）包含操作参数的对象 + +### 示例 {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + } +}); +~~~ + +**更新日志：** 在 v4.3 中新增 + +**相关文章：** +- [Spreadsheet 操作](api/overview/actions_overview.md) +- [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md new file mode 100644 index 00000000..21a2c9d8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterclear_event.md @@ -0,0 +1,48 @@ +--- +sidebar_label: afterClear +title: afterClear 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterClear 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterClear + +:::caution +`afterClear` 事件已在 v4.3 中弃用。它仍然可用，但建议采用新方式： + +~~~jsx +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + } +}); +~~~ + +有关新概念的更多详情，请参阅 **[Spreadsheet 操作](api/overview/actions_overview.md)**。 +::: + +### 描述 {#description} + +@short: 在电子表格被清空后触发 + +### 用法 {#usage} + +~~~jsx +afterClear: () => void; +~~~ + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterClear" 事件 +spreadsheet.events.on("afterClear", function(){ + console.log("A spreadsheet is cleared"); + return false; +}); +~~~ + +**更新日志：** 在 v4.2 中新增 + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md new file mode 100644 index 00000000..ce287889 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterdataloaded_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterDataLoaded +title: afterDataLoaded 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterDataLoaded 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterDataLoaded + +### 描述 {#description} + +@short: 在数据加载完成后触发 + +### 用法 {#usage} + +~~~jsx +afterDataLoaded: () => void; +~~~ + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); +spreadsheet.parse(data); + +// 订阅 "afterDataLoaded" 事件 +spreadsheet.events.on("afterDataLoaded", () => { + dhx.message({ + text: "Data is successfully loaded into Spreadsheet!", + css: "dhx_message--success", + expire: 5000 + }); +}); +~~~ + +**更新日志：** 在 v5.2 中新增 + +**相关文章：** [事件处理](handling_events.md) + +**相关示例：** [Spreadsheet. 数据加载事件](https://snippet.dhtmlx.com/vxr7amz6) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md new file mode 100644 index 00000000..8b86bafa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditend_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditEnd +title: afterEditEnd 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterEditEnd 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterEditEnd + +### 描述 {#description} + +@short: 在单元格编辑结束后触发 + +### 用法 {#usage} + +~~~jsx +afterEditEnd: (cell: string, value: string) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id +- `value` - （必填）单元格的值 + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterEditEnd" 事件 +spreadsheet.events.on("afterEditEnd", function(cell, value){ + console.log("Editing is finished"); + console.log(cell, value); +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md new file mode 100644 index 00000000..e649bd09 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftereditstart_event.md @@ -0,0 +1,39 @@ +--- +sidebar_label: afterEditStart +title: afterEditStart 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterEditStart 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterEditStart + +### 描述 {#description} + +@short: 在单元格编辑开始后触发 + +### 用法 {#usage} + +~~~jsx +afterEditStart: (cell: string, value: string) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id +- `value` - （必填）单元格的值 + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterEditStart" 事件 +spreadsheet.events.on("afterEditStart", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md new file mode 100644 index 00000000..831a3925 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterfocusset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterFocusSet +title: afterFocusSet 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterFocusSet 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterFocusSet + +### 描述 {#description} + +@short: 在单元格获得焦点后触发 + +### 用法 {#usage} + +~~~jsx +afterFocusSet: (cell: string) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterFocusSet" 事件 +spreadsheet.events.on("afterFocusSet", function(cell){ + console.log("Focus is set on a cell " + spreadsheet.selection.getSelectedCell()); + console.log(cell); +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md new file mode 100644 index 00000000..dfe4d3df --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_afterselectionset_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: afterSelectionSet +title: afterSelectionSet 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterSelectionSet 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterSelectionSet + +### 描述 {#description} + +@short: 在单元格被选中后触发 + +### 用法 {#usage} + +~~~jsx +afterSelectionSet: (cell: string) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id（可为多个） + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterSelectionSet" 事件 +spreadsheet.events.on("afterSelectionSet", function(cell){ + console.log("The cells " + spreadsheet.selection.getSelectedCell() + " are selected"); + console.log(cell); +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md new file mode 100644 index 00000000..8d041b46 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_aftersheetchange_event.md @@ -0,0 +1,40 @@ +--- +sidebar_label: afterSheetChange +title: afterSheetChange 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 afterSheetChange 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# afterSheetChange + +### 描述 {#description} + +@short: 在当前活动工作表切换后触发 + +### 用法 {#usage} + +~~~jsx +afterSheetChange: (sheet: object) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `sheet` - （必填）包含新活动工作表名称和 id 的对象 + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "afterSheetChange" 事件 +spreadsheet.events.on("afterSheetChange", function(sheet) { + console.log("The newly active sheet is " + sheet.name); + console.log(sheet); +}); +~~~ + +**更新日志：** 在 v4.1 中新增 + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md new file mode 100644 index 00000000..46cb7834 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeaction_event.md @@ -0,0 +1,50 @@ +--- +sidebar_label: beforeAction +title: beforeAction 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeAction 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# beforeAction + +### 描述 {#description} + +@short: 在操作执行之前触发 + +### 用法 {#usage} + +~~~jsx +beforeAction: (action: string, config: object) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `action` - （必填）操作的名称。完整的可用操作列表请查看[此处](api/overview/actions_overview.md#list-of-actions) +- `config` - （必填）包含操作参数的对象 + +### 返回值 {#returns} + +返回 `false` 可阻止操作执行；否则返回 `true` + +### 示例 {#example} + +~~~jsx {6-11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(dataset); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return false; + } +}); +~~~ + +**更新日志：** 在 v4.3 中新增 + +**相关文章：** +- [Spreadsheet 操作](api/overview/actions_overview.md) +- [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md new file mode 100644 index 00000000..86150fe9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeclear_event.md @@ -0,0 +1,53 @@ +--- +sidebar_label: beforeClear +title: beforeClear 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeClear 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# beforeClear + +:::caution +`beforeClear` 事件已在 v4.3 中弃用。它仍然可用，但建议采用新方式： + +~~~jsx +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "clear") { + console.log(actionName, config); + return false; + } +}); +~~~ + +有关新概念的更多详情，请参阅 **[Spreadsheet 操作](api/overview/actions_overview.md)**。 +::: + +### 描述 {#description} + +@short: 在电子表格被清空之前触发 + +### 用法 {#usage} + +~~~jsx +beforeClear: () => void | boolean; +~~~ + +### 返回值 {#returns} + +返回 `false` 可阻止清空电子表格；否则返回 `true`。 + +### 示例 {#example} + +~~~jsx {5-8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeClear" 事件 +spreadsheet.events.on("beforeClear", function(){ + console.log("A spreadsheet will be cleared"); + return false; +}); +~~~ + +**更新日志：** 在 v4.2 中新增 + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md new file mode 100644 index 00000000..cc0496ee --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditend_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditEnd +title: beforeEditEnd 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeEditEnd 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# beforeEditEnd + +### 描述 {#description} + +@short: 在单元格编辑结束之前触发 + +### 用法 {#usage} + +~~~jsx +beforeEditEnd: (cell: string, value: string) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id +- `value` - （必填）单元格的值 + +### 返回值 {#returns} + +返回 `true` 可完成单元格编辑，返回 `false` 可阻止编辑器关闭 + +### 示例 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeEditEnd" 事件 +spreadsheet.events.on("beforeEditEnd", function(cell, value){ + console.log("Editing has started"); + console.log(cell, value); + return true; +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md new file mode 100644 index 00000000..658b0114 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeeditstart_event.md @@ -0,0 +1,44 @@ +--- +sidebar_label: beforeEditStart +title: beforeEditStart 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeEditStart 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# beforeEditStart + +### 描述 {#description} + +@short: 在单元格开始编辑之前触发 + +### 用法 {#usage} + +~~~jsx +beforeEditStart: (cell: string, value: string) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id +- `value` - （必填）单元格的值 + +### 返回值 {#returns} + +返回 `true` 以允许编辑单元格，返回 `false` 以阻止编辑 + +### 示例 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeEditStart" 事件 +spreadsheet.events.on("beforeEditStart", function(cell, value){ + console.log("Editing is about to start"); + console.log(cell, value); + return true; +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md new file mode 100644 index 00000000..9899f0f5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforefocusset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeFocusSet +title: beforeFocusSet 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeFocusSet 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# beforeFocusSet + +### 描述 {#description} + +@short: 在单元格获得焦点之前触发 + +### 用法 {#usage} + +~~~jsx +beforeFocusSet: (cell: string) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id + +### 返回值 {#returns} + +返回 `true` 以在单元格上设置焦点，返回 `false` 以阻止设置焦点 + +### 示例 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeFocusSet" 事件 +spreadsheet.events.on("beforeFocusSet", function(cell){ + console.log("Focus will be set on a cell "+spreadsheet.selection.getSelectedCell()); + console.log(cell); + return true; +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md new file mode 100644 index 00000000..ed8f27ac --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforeselectionset_event.md @@ -0,0 +1,43 @@ +--- +sidebar_label: beforeSelectionSet +title: beforeSelectionSet 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeSelectionSet 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# beforeSelectionSet + +### 描述 {#description} + +@short: 在选中单元格之前触发 + +### 用法 {#usage} + +~~~jsx +beforeSelectionSet: (cell: string) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `cell` - （必填）单元格的 id（可为多个） + +### 返回值 {#returns} + +返回 `true` 以选中单元格，返回 `false` 以阻止选中单元格 + +### 示例 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeSelectionSet" 事件 +spreadsheet.events.on("beforeSelectionSet", function(cell){ + console.log("Cells "+spreadsheet.selection.getSelectedCell()+" will be selected"); + console.log(cell); + return true; +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md new file mode 100644 index 00000000..16893775 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_beforesheetchange_event.md @@ -0,0 +1,45 @@ +--- +sidebar_label: beforeSheetChange +title: beforeSheetChange 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 beforeSheetChange 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# beforeSheetChange + +### 描述 {#description} + +@short: 在切换当前活动工作表之前触发 + +### 用法 {#usage} + +~~~jsx +beforeSheetChange: (sheet: object) => void | boolean; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `sheet` - （必填）包含当前活动工作表名称和 id 的对象 + +### 返回值 {#returns} + +返回 `true` 以切换活动工作表，返回 `false` 以阻止切换活动工作表 + +### 示例 {#example} + +~~~jsx {5-9} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "beforeSheetChange" 事件 +spreadsheet.events.on("beforeSheetChange", function(sheet) { + console.log("The active sheet will be changed"); + console.log(sheet); + return true; +}); +~~~ + +**更新日志：** 在 v4.1 中新增 + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md new file mode 100644 index 00000000..9f23a8e1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_clear_method.md @@ -0,0 +1,33 @@ +--- +sidebar_label: clear() +title: clear 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 clear 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# clear() + +### 描述 {#description} + +@short: 清空电子表格 + +### 用法 {#usage} + +~~~jsx +clear(): void; +~~~ + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 清空电子表格 +spreadsheet.clear(); +~~~ + +**更新日志：** 在 v4.2 中新增 + +**相关文章：** [清空电子表格](working_with_ssheet.md#clearing-spreadsheet) + +**相关示例：** [Spreadsheet. Clear](https://snippet.dhtmlx.com/szmtjn72) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md new file mode 100644 index 00000000..9fb573aa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_colscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: colsCount +title: colsCount 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 colsCount 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# colsCount + +### 描述 {#description} + +@short: 可选。设置电子表格初始化时的列数 + +### 用法 {#usage} + +~~~jsx +colsCount?: number; +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + colsCount: 10, + // 其他配置参数 +}); +~~~ + +**相关文章：** [配置](configuration.md#number-of-rows-and-columns) + +**相关示例：** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md new file mode 100644 index 00000000..1deb43a7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deletecolumn_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteColumn() +title: deleteColumn 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 deleteColumn 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# deleteColumn() + +### 描述 {#description} + +@short: 从电子表格中删除一列 + +:::info +该方法会查找指定单元格，选中它，删除该单元格所在的列，并将左侧的列移至该位置。 +::: + +### 用法 {#usage} + +~~~jsx +deleteColumn(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）包含待删除列名称的单元格 id + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 删除 "G" 列 +spreadsheet.deleteColumn("G2"); +~~~ + +:::note +您可以通过提供单元格 id 范围作为方法参数来删除多列，例如："A1:C3"。 +::: + +**相关文章：** [使用电子表格](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md new file mode 100644 index 00000000..a9492ccf --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_deleterow_method.md @@ -0,0 +1,41 @@ +--- +sidebar_label: deleteRow() +title: deleteRow 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 deleteRow 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# deleteRow() + +### 描述 {#description} + +@short: 从电子表格中删除一行 + +:::info +该方法会查找指定单元格，选中它，删除该单元格所在的行，并将下方的行移至该位置。 +::: + +### 用法 {#usage} + +~~~jsx +deleteRow(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）包含待删除行 id 的单元格 id + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 删除第二行 +spreadsheet.deleteRow("G2"); +~~~ + +:::note +您可以通过提供单元格 id 范围作为方法参数来删除多行，例如："A1:C3"。 +::: + +**相关文章：** [使用电子表格](working_with_ssheet.md#addingremoving-rows-and-columns) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md new file mode 100644 index 00000000..4fe9f504 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_eachcell_method.md @@ -0,0 +1,77 @@ +--- +sidebar_label: eachCell() +title: eachCell 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 eachCell 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# eachCell() + +### 描述 {#description} + +@short: 遍历电子表格中的单元格 + +:::info +如果未指定单元格范围，该方法将遍历当前选中的单元格。 +::: + +### 用法 {#usage} + +~~~jsx +eachCell( + cb: (cellName: string, cellValue: any) => any, + range?: string +): void; +~~~ + +### 参数 {#parameters} + +- `callback` - （必填）回调函数 +- `range` - （可选）要遍历的单元格范围 + +### 示例 {#example} + +~~~jsx {21-27} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); + +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + items: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); + +function checkValue(check) { + spreadsheet.eachCell(function (cell, value) { + if (!check(value)) { + spreadsheet.setStyle(cell, { background: "#e57373" }); + } else { + spreadsheet.setStyle(cell, { background: "" }); + } + }, spreadsheet.selection.getSelectedCell()); +} + +spreadsheet.menu.events.on("click", function (id) { + switch (id) { + case "isNumber": + checkValue(function (value) { return !isNaN(value) }); + break; + case "isEven": + checkValue(function (value) { return value % 2 === 0 }); + break; + } +}); +~~~ + +**相关文章：** [自定义](customization.md#menu) + +**相关示例：** [Spreadsheet. Menu](https://snippet.dhtmlx.com/2mlv2qaz) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md new file mode 100644 index 00000000..e7453781 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_editline_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: editLine +title: editLine 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 editLine 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费试用版本。 +--- + +# editLine + +### 描述 {#description} + +@short: 可选。显示/隐藏编辑栏 + +### 用法 {#usage} + +~~~jsx +editLine?: boolean; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +editLine: true +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + editLine: true, + // 其他配置参数 +}); +~~~ + +**相关文章：** [配置](configuration.md#editing-bar) + +**相关示例：** [Spreadsheet. Disabled Line](https://snippet.dhtmlx.com/unem2jkh) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md new file mode 100644 index 00000000..8a82801b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_endedit_method.md @@ -0,0 +1,29 @@ +--- +sidebar_label: endEdit() +title: endEdit 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 endEdit 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# endEdit() + +### 描述 {#description} + +@short: 结束对选定单元格的编辑，关闭编辑器并保存输入的值 + +### 用法 {#usage} + +~~~jsx +endEdit(): void; +~~~ + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 结束对选定单元格的编辑 +spreadsheet.endEdit(); +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_cells.md#editing-a-cell) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md new file mode 100644 index 00000000..142c24a6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_exportmodulepath_config.md @@ -0,0 +1,43 @@ +--- +sidebar_label: exportModulePath +title: exportModulePath 配置 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 exportModulePath 配置。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# exportModulePath + +### 描述 {#description} + +@short: 可选。设置导出模块的路径 + +### 用法 {#usage} + +~~~jsx +exportModulePath?: string; +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx", // 导出模块 `worker.js` 文件的本地路径 + // 其他配置参数 +}); +~~~ + +### 详细说明 {#details} + +:::note +DHTMLX Spreadsheet 使用基于 WebAssembly 的库 [JSON2Excel](https://github.com/dhtmlx/json2excel) 将数据导出为 Excel 格式。 +::: + +要导出文件，您需要通过 `exportModulePath` 选项指定 [Json2Excel](https://github.com/dhtmlx/json2excel) 库中 *worker.js* 文件的路径（导出处理在该文件中进行）。默认使用 `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`。 +- 如果您使用公共导出服务器，则无需指定链接，因为默认已使用该地址 +- 如果您使用自己的导出服务器，则需要： + - 安装 [**Json2Excel**](https://github.com/dhtmlx/json2excel) 库 + - 对特定版本使用 `"../libs/json2excel/x.x/worker.js?vx"`（将 `x.x` 替换为您服务器上部署的版本号） + + +**相关文章：** [数据加载与导出](loading_data.md#exporting-data) + +**相关示例：** [Spreadsheet. 自定义导入导出路径](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md new file mode 100644 index 00000000..9461662d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_fitcolumn_method.md @@ -0,0 +1,36 @@ +--- +sidebar_label: fitColumn() +title: fitColumn 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 fitColumn 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# fitColumn() + +### 描述 {#description} + +@short: 将列宽调整为与其最长值匹配 + + +### 用法 {#usage} + +~~~jsx +fitColumn(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）包含目标列名称的单元格 id + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 调整 "G" 列的宽度 +spreadsheet.fitColumn("G2"); +~~~ + +**更新日志：** v5.0 中新增 + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#autofit-column-width) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md new file mode 100644 index 00000000..904f349f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_formats_config.md @@ -0,0 +1,83 @@ +--- +sidebar_label: formats +title: formats 配置 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 formats 配置。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# formats + +### 描述 {#description} + +@short: 可选。定义数字格式列表 + +### 用法 {#usage} + +~~~jsx +formats?: array; +~~~ + +### 参数 {#parameters} + +`formats` 属性是一个数字格式对象数组，每个对象包含一组属性： + +- `id` - 格式的 id，用于通过 [](api/spreadsheet_setformat_method.md) 方法为单元格设置格式 +- `mask` - 数字格式的掩码 +- `name` - 格式名称，显示在工具栏和菜单下拉列表中 +- `example` - 示例，展示格式化后的数字外观。数字 2702.31 被用作格式示例的默认值 + +### 默认配置 {#default-config} + +默认数字格式如下： + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // 取决于 timeFormat 配置 + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" } +]; +~~~ + + +### 示例 {#example} + +~~~jsx {2-19} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + formats: [ + { + name: "U.S. Dollar", + id: "currency", + mask: "$#,##0.00" + }, + { + name: "Euro", + id: "euro", + mask: "[$€]#.##0,00", + example: "1000.50" + }, + { + name: "Swiss franc", + id: "franc", + mask: "[$CHF ]#.##0,00" + } + ], + // 其他配置参数 +}); +~~~ + +**更新日志：** +- "Time" 格式在 v4.3 中新增 +- "Date" 格式在 v4.2 中新增 +- "Text" 格式在 v4.0 中新增 + +**相关文章：** +- [数字格式化](number_formatting.md) +- [格式自定义](number_formatting.md#formats-customization) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md new file mode 100644 index 00000000..20042b93 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeCols() +title: freezeCols 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 freezeCols 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# freezeCols() + +### 描述 {#description} + +@short: 固定（"冻结"）列 + +### 用法 {#usage} + +~~~jsx +freezeCols(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定列 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.freezeCols("B2"); // "B" 列及其左侧的列将被固定 +spreadsheet.freezeCols("sheet2!B2"); // "sheet2" 中 "B" 列及其左侧的列将被固定 +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**相关 API：** [`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md) + +**相关示例：** [Spreadsheet. 通过 API 冻结列和行](https://snippet.dhtmlx.com/a12xd1mn) + +**更新日志：** +v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md new file mode 100644 index 00000000..567bc144 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_freezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: freezeRows() +title: freezeRows 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 freezeRows 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# freezeRows() + +### 描述 {#description} + +@short: 固定（"冻结"）行 + +### 用法 {#usage} + +~~~jsx +freezeRows(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定行 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.freezeRows("B2"); // 第 "2" 行及其上方的行将被固定 +spreadsheet.freezeRows("sheet2!B2"); // "sheet2" 中第 "2" 行及其上方的行将被固定 +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**相关 API：** [`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +**相关示例：** [Spreadsheet. 通过 API 冻结列和行](https://snippet.dhtmlx.com/a12xd1mn) + +**更新日志：** +v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md new file mode 100644 index 00000000..a2e40cb2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getfilter_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: getFilter() +title: getFilter 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getFilter 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getFilter() + +### 描述 {#description} + +@short: 返回包含数据筛选条件的对象 + +### 用法 {#usage} + +~~~jsx +getFilter(id?: string): {cell, rules}; +~~~ + +### 参数 {#parameters} + +- `id` - （可选）工作表的 id。如果未指定，则对当前工作表调用该方法 + +### 返回值 {#returns} + +该方法返回一个包含筛选条件的对象。该对象包含两个属性： + +- `cell` - 应用筛选的单元格范围 +- `rules` - 包含筛选规则的对象数组 + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 获取当前工作表的筛选条件 +const filter = spreadsheet.getFilter(); // -> {cell:"A1:A8", rules: [{…}, {…}, {…}, {…}, {…}]} +~~~ + +**更新日志：** v5.0 中新增 + +**相关文章：** [筛选数据](working_with_ssheet.md#filtering-data) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md new file mode 100644 index 00000000..b5f0f7fa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformat_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormat() +title: getFormat 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getFormat 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getFormat() + +### 描述 {#description} + +@short: 返回应用于单元格值的数字格式 + +### 用法 {#usage} + +~~~jsx +getFormat(cell: string): string | array; +~~~ + +### 参数 {#parameters} + +`cell` - （必填）单元格或单元格范围的 id + +### 返回值 {#returns} + +该方法返回应用于单元格值的格式 + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 返回 "currency" +const format = spreadsheet.getFormat("A1"); +~~~ + +:::info +从 v4.1 起，单元格引用可以使用以下格式指定： + +~~~jsx +// 返回 "number" +const cellFormat = spreadsheet.getFormat("sheet1!A2"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法返回当前活动标签页中单元格值所应用的格式。 +::: + +**相关文章：** [数字格式化](number_formatting.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md new file mode 100644 index 00000000..e71cc8b0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getformula_method.md @@ -0,0 +1,50 @@ +--- +sidebar_label: getFormula() +title: getFormula 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getFormula 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getFormula() + +### 描述 {#description} + +@short: 返回单元格的公式 + +### 用法 {#usage} + +~~~jsx +getFormula(cell: string): string | array; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格的 id + +### 返回值 {#returns} + +该方法返回单元格的公式 + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 返回 "ABS(C2)" +const formula = spreadsheet.getFormula("B2"); +~~~ + +:::info +单元格引用可以使用以下格式指定： + +~~~jsx +// 返回 "ABS(C2)" +const formula = spreadsheet.getFormula("sheet1!B2"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法返回活动标签页中单元格的公式。 +::: + +**更新日志：** v4.1 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md new file mode 100644 index 00000000..6f7bb9eb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getstyle_method.md @@ -0,0 +1,68 @@ +--- +sidebar_label: getStyle() +title: getStyle 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getStyle 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getStyle() + +### 描述 {#description} + +@short: 返回应用于单元格的样式 + +### 用法 {#usage} + +~~~jsx +getStyle(cell: string): any; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格或单元格范围的 id + +### 返回值 {#returns} + +该方法返回单元格已设置的样式 + +### 示例 {#example} + +~~~jsx {5,9,12} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 获取单个单元格的样式 +const style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// 获取单元格范围的样式 +const rangeStyles = spreadsheet.getStyle("A1:D1"); // -> 详见说明 + +// 获取多个不同单元格的样式 +const values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +:::info +对于多个单元格，该方法返回一个对象数组，包含每个单元格的样式： + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ +::: + +:::info +从 v4.1 起，单元格或单元格范围的引用可以使用以下格式指定： + +~~~jsx +const style = spreadsheet.getStyle("sheet1!A2"); +//-> {justify-content: "flex-end", text-align: "right"} +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法返回活动标签页中单元格的样式。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md new file mode 100644 index 00000000..eaed5549 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_getvalue_method.md @@ -0,0 +1,54 @@ +--- +sidebar_label: getValue() +title: getValue 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 getValue 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# getValue() + +### 描述 {#description} + +@short: 返回单元格的值 + +### 用法 {#usage} + +~~~jsx +getValue(cell: string): any | array; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格或单元格范围的 id + +### 返回值 {#returns} + +该方法返回单元格的值 + +### 示例 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 返回单个单元格的值 +const cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// 返回单元格范围的值 +const rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// 返回多个离散单元格的值 +const values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +:::info +从 v4.1 开始，可以使用以下格式指定单元格或单元格范围的引用： + +~~~jsx +const cellValue = spreadsheet.getValue("sheet1!A2"); //-> 25000 +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将返回活动标签页中单元格的值。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md new file mode 100644 index 00000000..0de8577e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_groupfill_event.md @@ -0,0 +1,38 @@ +--- +sidebar_label: groupFill +title: groupFill 事件 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 groupFill 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# groupFill + +### 描述 {#description} + +@short: 在自动填充单元格时触发 + +### 用法 {#usage} + +~~~jsx +groupFill: (focusedCell: string, selectedCell: string) => void; +~~~ + +### 参数 {#parameters} + +事件的回调函数接受以下参数： + +- `focusedCell` - （必填）当前获得焦点的单元格 id +- `selectedCell` - （必填）已选中单元格的 id + +### 示例 {#example} + +~~~jsx {5-7} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 订阅 "groupFill" 事件 +spreadsheet.events.on("groupFill", function (focusedCell, selectedCell) { + console.log(focusedCell, selectedCell); +}); +~~~ + +**相关文章：** [事件处理](handling_events.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md new file mode 100644 index 00000000..92ddb2fc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidecols_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: hideCols() +title: hideCols 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 hideCols 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# hideCols() + +### 描述 {#description} + +@short: 隐藏列 + +### 用法 {#usage} + +~~~jsx +hideCols(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定列 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.hideCols("B2"); // "B" 列将被隐藏 +spreadsheet.hideCols("sheet2!B2"); // "sheet2" 中的 "B" 列将被隐藏 +spreadsheet.hideCols("B2:C2"); // "B" 列和 "C" 列将被隐藏 +~~~ + + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**相关 API：** [`showCols()`](api/spreadsheet_showcols_method.md) + +**相关示例：** [Spreadsheet. 通过 API 隐藏列和行](https://snippet.dhtmlx.com/zere1ote) + +**更新日志：** 在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md new file mode 100644 index 00000000..2814209f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hiderows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: hideRows() +title: hideRows 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 hideRows 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# hideRows() + +### 描述 {#description} + +@short: 隐藏行 + +### 用法 {#usage} + +~~~jsx +hideRows(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定行 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.hideRows("B2"); // 第 "2" 行将被隐藏 +spreadsheet.hideRows("sheet2!B2"); // "sheet2" 中的第 "2" 行将被隐藏 +spreadsheet.hideRows("B2:C4"); // 第 "2" 行到第 "4" 行将被隐藏 +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**相关 API：** [`showRows()`](api/spreadsheet_showrows_method.md) + +**相关示例：** [Spreadsheet. 通过 API 隐藏列和行](https://snippet.dhtmlx.com/zere1ote) + +**更新日志：** 在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md new file mode 100644 index 00000000..aac3184f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_hidesearch_method.md @@ -0,0 +1,34 @@ +--- +sidebar_label: hideSearch() +title: hideSearch 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 hideSearch 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# hideSearch() + +### 描述 {#description} + +@short: 隐藏搜索栏 + +### 用法 {#usage} + +~~~jsx +hideSearch(): void; +~~~ + +### 示例 {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 打开搜索栏并高亮显示找到的单元格 +spreadsheet.search("min", true); + +// 隐藏搜索栏 +spreadsheet.hideSearch(); +~~~ + +**更新日志：** 在 v5.0 中新增 + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#searching-for-data) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md new file mode 100644 index 00000000..b6961db7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_importmodulepath_config.md @@ -0,0 +1,45 @@ +--- +sidebar_label: importModulePath +title: importModulePath 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 importModulePath 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# importModulePath + +### 描述 {#description} + +@short: 可选。设置导入模块的路径 + +### 用法 {#usage} + +~~~jsx +importModulePath?: string; +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + importModulePath: "../libs/excel2json/1.0/worker.js", + // 其他配置参数 +}); +~~~ + +### 详情 {#details} + +:::note +DHTMLX Spreadsheet 使用基于 WebAssembly 的库 [Excel2json](https://github.com/DHTMLX/excel2json) 从 Excel 导入数据。 +::: + +要导入文件，您需要： + +- 安装 **Excel2json** 库 +- 通过 `importModulePath` 选项以以下两种方式之一设置 *worker.js* 文件的路径： + - 提供文件在本地计算机上的路径，例如：`"../libs/excel2json/1.0/worker.js"` + - 提供 CDN 上文件的链接：`"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +默认情况下使用 CDN 链接。 + +**相关文章：** [数据加载与导出](loading_data.md#loading-excel-file-xlsx) + +**相关示例：** [Spreadsheet. 自定义导入导出路径](https://snippet.dhtmlx.com/wykwzfhm) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md new file mode 100644 index 00000000..df3eca25 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_insertlink_method.md @@ -0,0 +1,53 @@ +--- +sidebar_label: insertLink() +title: insertLink 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 insertLink 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# insertLink() + +### 描述 {#description} + +@short: 在单元格中插入或移除超链接 + +### 用法 {#usage} + +~~~jsx +insertLink( + cell: string, + link? : { + text?: string, + href: string + } +): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格的 id +- `link` - （可选）链接配置对象： + - `text` - （可选）要为超链接显示的文本 + - `href` - （必填）超链接指向页面的 URL + +:::info +若要移除超链接但保留文本，请在调用该方法时不传入 `link` 参数。 +::: + +### 示例 {#example} + +~~~jsx {5-7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 在 "A2" 单元格中插入链接 +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); + +// 从 "A2" 单元格中移除链接 +spreadsheet.insertLink("A2"); +~~~ + +**更新日志：** 在 v5.0 中新增 + +**相关文章：** [使用 Spreadsheet](working_with_cells.md#inserting-a-hyperlink-into-a-cell) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md new file mode 100644 index 00000000..ac43397a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_islocked_method.md @@ -0,0 +1,57 @@ +--- +sidebar_label: isLocked() +title: isLocked 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 isLocked 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# isLocked() + +### 描述 {#description} + +@short: 检查单元格是否被锁定 + +### 用法 {#usage} + +~~~jsx +isLocked(cell: string): boolean; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格或单元格范围的 id + +### 返回值 {#returns} + +若单元格已锁定，该方法返回 `true`；若未锁定，则返回 `false` + +### 示例 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 检查单个单元格是否被锁定 +const cellLocked = spreadsheet.isLocked("A1"); + +// 检查多个单元格是否被锁定 +const rangeLocked = spreadsheet.isLocked("A1:C1"); + +// 检查离散单元格是否被锁定 +const cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +:::info +若同时检查多个单元格，只要其中有至少一个单元格被锁定，该方法即返回 `true`。 +::: + +:::info +从 v4.1 开始，可以使用以下格式指定单元格或单元格范围的引用： + +~~~jsx +const cellsLocked = spreadsheet.isLocked("sheet1!A2"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将检查活动标签页中的单元格。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md new file mode 100644 index 00000000..8be65033 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_load_method.md @@ -0,0 +1,102 @@ +--- +sidebar_label: load() +title: load 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 load 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# load() + +### 描述 {#description} + +@short: 从外部文件加载数据 + +### 用法 {#usage} + +~~~jsx +load(url: string, type?: string): promise; +~~~ + +### 参数 {#parameters} + +- `url` - （必填）外部文件的 URL +- `type` - （可选）要加载的数据类型："json"（默认）、"csv"、"xlsx" + +### 返回值 {#returns} + +该方法返回一个数据加载的 Promise 对象 + +### 示例 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 以 JSON 格式加载数据（默认） +spreadsheet.load("../common/data.json"); + +// 以 CSV 格式加载数据 +spreadsheet.load("../common/data.csv", "csv"); + +// 以 Excel 格式加载数据（仅支持 .xlsx） +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +**相关示例：** +- [Spreadsheet. 加载数据](https://snippet.dhtmlx.com/ih9zmc3e) + +- [Spreadsheet. CSV 加载](https://snippet.dhtmlx.com/1f87y71v) + +- [Spreadsheet. 导入 Xlsx](https://snippet.dhtmlx.com/cqlpy828) + +:::info +组件发出 AJAX 请求，并期望远程 URL 返回有效数据。 + +数据加载是异步的，因此需要将加载完成后的代码包装在 Promise 中： + +~~~jsx +spreadsheet.load("../some/data.json").then(function(){ + spreadsheet.selection.add(123); +}); +~~~ +::: + +### 加载 Excel 数据 {#loading-excel-data} + +:::note +请注意，该组件仅支持从扩展名为 `.xlsx` 的 Excel 文件导入。 +::: + +DHTMLX Spreadsheet 使用基于 WebAssembly 的库 [Excel2Json](https://github.com/dhtmlx/excel2json) 从 Excel 导入数据。[查看详情](loading_data.md#loading-excel-file-xlsx)。 + +### 加载 JSON 文件 {#loading-json-files} + +您可以让用户通过文件浏览器将 JSON 文件加载到电子表格中。操作步骤如下： + +- 指定一个按钮，用于打开可选择 ".json" 文件的文件浏览器： + +~~~html +
+ +
+~~~ + + +- 以两个参数调用 `load()` 方法：空字符串作为 URL，以及要加载的数据类型（"json"）： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: true, +}); + +spreadsheet.parse(dataset); + +function json() { + spreadsheet.load("", "json"); // 从 .json 文件加载数据 +} +~~~ + +查看[示例](https://snippet.dhtmlx.com/e3xct53l)。 + +**更新日志：** 通过文件浏览器加载 JSON 文件的功能已在 v4.3 中新增 + +**相关文章：** [数据加载与导出](loading_data.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md new file mode 100644 index 00000000..58b4f2ca --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_localization_config.md @@ -0,0 +1,86 @@ +--- +sidebar_label: localization +title: localization 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 localization 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# localization + +### 描述 {#description} + +@short: 可选。定义数字、日期、时间和货币的格式 + +### 用法 {#usage} + +~~~jsx +localization?: object; +~~~ + +### 参数 {#parameters} + +`localization` 对象可包含以下属性： + +- `decimal` - （可选）用作小数分隔符的符号，默认为 `"."`。
可选值为 `"." | ","` +- `thousands` - （可选）用作千位分隔符的符号，默认为 `","`。
可选值为 `"." | "," | " " | ""` +- `currency` - （可选）货币符号，默认为 `"$"` +- `dateFormat` - （可选）以字符串形式设置的日期显示格式。默认格式为 `"%d/%m/%Y"`。详见[下方](#characters-for-setting-date-format)说明 +- `timeFormat` - （可选）时间显示格式，取值为 `12` 或 `24`。默认格式为 `12` + +### 默认配置 {#default-config} + +~~~jsx +const defaultLocales = { + decimal: ".", + thousands: ",", + currency: "$", + dateFormat: "%d/%m/%Y", + timeFormat: 12, +}; +~~~ + +### 示例 {#example} + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +### 日期格式字符说明 {#characters-for-setting-date-format} + +DHTMLX Spreadsheet 使用以下字符来设置日期格式： + +| 字符 | 含义 | +|-----------|---------------------------------------------------| +| **%d** | 带前导零的数字日期，01..31 | +| **%j** | 不带前导零的数字日期，1..31 | +| **%D** | 星期的简写名称，Su Mo Tu... | +| **%l** | 星期的全称，Sunday Monday Tuesday... | +| **%m** | 带前导零的数字月份，01..12 | +| **%n** | 不带前导零的数字月份，1..12 | +| **%M** | 月份的简写名称，Jan Feb Mar... | +| **%F** | 月份的全称，January February March... | +| **%y** | 两位数字年份 | +| **%Y** | 四位数字年份 | +| **%h** | 带前导零的 12 小时制小时，01..12 | +| **%g** | 不带前导零的 12 小时制小时，1..12 | +| **%H** | 带前导零的 24 小时制小时，00..23 | +| **%G** | 不带前导零的 24 小时制小时，0..23 | +| **%i** | 带前导零的分钟，01..59 | +| **%s** | 带前导零的秒钟，01..59 | +| **%a** | am 或 pm | +| **%A** | AM 或 PM | +| **%u** | 毫秒 | + +**更新日志：** +- 在 v5.1 中新增 + +**相关文章：** [数字、日期、时间、货币本地化](number_formatting.md#number-date-time-currency-localization) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md new file mode 100644 index 00000000..dec10aef --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_lock_method.md @@ -0,0 +1,51 @@ +--- +sidebar_label: lock() +title: lock 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 lock 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# lock() + +### 描述 {#description} + +@short: 锁定指定的单元格 + +### 用法 {#usage} + +~~~jsx +lock(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格或单元格区域的 id + +### 示例 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 锁定单个单元格 +spreadsheet.lock("A1"); + +// 锁定单元格区域 +spreadsheet.lock("A1:C1"); + +// 锁定指定的多个单元格 +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +:::info +从 v4.1 起，单元格或单元格区域的引用可以使用以下格式指定： + +~~~jsx +spreadsheet.lock("sheet1!A2"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +若未指定标签页名称，该方法将锁定当前活动标签页中的单元格。 +::: + +**相关示例**：[Spreadsheet. 锁定单元格](https://snippet.dhtmlx.com/czeyiuf8) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md new file mode 100644 index 00000000..b61ed08f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_menu_config.md @@ -0,0 +1,36 @@ +--- +sidebar_label: menu +title: menu 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 menu 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# menu + +### 描述 {#description} + +@short: 可选。显示/隐藏菜单栏 + +### 用法 {#usage} + +~~~jsx +menu?: boolean; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +menu: true +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + menu: false, + // 其他配置参数 +}); +~~~ + +**相关文章：** [配置](configuration.md#menu) + +**相关示例：** [Spreadsheet. 菜单栏](https://snippet.dhtmlx.com/uulux27v) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md new file mode 100644 index 00000000..e630419f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_mergecells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: mergeCells() +title: mergeCells 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 mergeCells 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# mergeCells() + +### 描述 {#description} + +@short: 将一组单元格合并为一个，或拆分已合并的单元格 + +### 用法 {#usage} + +~~~jsx +mergeCells( + cell: string, + remove?: boolean +); +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单元格区域（例如 "A1:A5"） +- `remove` - （可选）定义对单元格执行的操作： + - `false` - 合并单元格（默认值） + - `true` - 拆分单元格 + +### 示例 {#example} + +~~~jsx {5,8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 合并单元格 A3、A4 和 A5 +spreadsheet.mergeCells("A2:A5"); + +// 拆分单元格 A3、A4 和 A5 +spreadsheet.mergeCells("A2:A5", true); +~~~ + +**更新日志：** 在 v5.0 中新增 + +**相关文章：** [使用单元格](working_with_cells.md#merging-cells) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md new file mode 100644 index 00000000..c82ea468 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_multisheets_config.md @@ -0,0 +1,38 @@ +--- +sidebar_label: multiSheets +title: multiSheets 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 multiSheets 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# multiSheets + +### 描述 {#description} + +@short: 可选。启用/禁用在电子表格中使用多个工作表的功能 + +### 用法 {#usage} + +~~~jsx +multiSheets?: boolean; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +multiSheets: true +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + multiSheets: false, + // 其他配置参数 +}); +~~~ + +:::info +将该属性设置为 `false` 时，底部带有工作表标签的标签栏将被隐藏。 +::: + +**更新日志：** 在 v4.1 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md new file mode 100644 index 00000000..d026fb38 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_parse_method.md @@ -0,0 +1,297 @@ +--- +sidebar_label: parse() +title: parse 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 parse 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# parse() + +### 描述 {#description} + +@short: 从本地数据源向电子表格中加载数据 + +### 用法 {#usage} + +~~~jsx title="向单个工作表加载数据" +parse([ + { + cell: string, + value: string | number | Date, + css?: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // 更多单元格对象 +]): void; +~~~ + +~~~jsx title="向多个工作表加载数据" +parse({ + sheets: [ + { + name?: string, + id?: string, + cols?: [ + { + width?: number, + hidden?: boolean, + }, + // 更多列对象 + ], + rows?: [ + { + height?: number, + hidden?: boolean, + }, + // 更多行对象 + ], + data: [ + { + cell: string, + value: string | number | Date, + css: string, + format?: string, + editor?: { + type: string, // type: "select" + options: string | array + }, + locked?: boolean, + link?: { + text?: string, + href: string + } + }, + // 更多单元格对象 + ], + merged?: [ + { + from: { column: index, row: index }, + to: { column: index, row: index } + }, + // 更多对象 + ], + freeze?: { + col?: number, + row?: number, + } + }, + // 更多工作表对象 + ] +}): void; +~~~ + +### 参数 {#parameters} + +若只需为*单个工作表*创建数据集，请将数据指定为**单元格对象数组**。每个**单元格**对象可指定以下参数： + +- `cell` - （必填）单元格的 id，由"列 id + 行 id"组成，例如 A1 +- `value` - （必填）单元格的值 +- `css` - （可选）CSS 类的名称 +- `format` - （可选）[默认数字格式](number_formatting.md#default-number-formats)或已添加的[自定义格式](number_formatting.md#formats-customization)的名称，用于应用到单元格值 +- `editor` - （可选）单元格编辑器的配置对象： + - `type` - （必填）单元格编辑器的类型："select" + - `options` - （必填）单元格区域（"A1:B8"）或字符串值数组 +- `locked` - （可选）定义单元格是否被锁定，默认为 `false` +- `link` - （可选）单元格中链接的配置对象： + - `text` - （可选）链接的文本 + - `href` - （必填）定义链接目标的 URL + +
+ +若需要*同时为多个工作表*创建数据集，请将数据指定为具有以下参数的**对象**： + +- `sheets` - （必填）**工作表**对象数组。每个对象具有以下属性： + - `name` - （可选）工作表名称 + - `id` - （可选）工作表 id + - `rows` - （可选）行配置对象数组。每个对象可包含以下属性： + - `height` - （可选）行高。若未指定，行高默认为 32px + - `hidden` - （可选）定义行的可见性 + - `cols` - （可选）列配置对象数组。每个对象可包含以下属性： + - `width` - （可选）列宽。若未指定，列宽默认为 120px + - `hidden` - （可选）定义列的可见性 + - `data` - （必填）**单元格**对象数组。每个对象具有以下属性： + - `cell` - （必填）单元格的 id，由"列 id + 行 id"组成，例如 A1 + - `value` - （必填）单元格的值 + - `css` - （可选）CSS 类的名称 + - `format` - （可选）[默认数字格式](number_formatting.md#default-number-formats)或已添加的[自定义格式](number_formatting.md#formats-customization)的名称，用于应用到单元格值 + - `editor` - （可选）单元格编辑器的配置对象： + - `type` - （必填）单元格编辑器的类型："select" + - `options` - （必填）单元格区域（"A1:B8"）或字符串值数组 + - `locked` - （可选）定义单元格是否被锁定，默认为 `false` + - `link` - （可选）单元格中链接的配置对象： + - `text` - （可选）链接的文本 + - `href` - （必填）定义链接目标的 URL + - `merged` - （可选）对象数组，每个对象定义需要合并的单元格区域。每个对象必须包含以下属性： + - `from` - 定义区域中第一个单元格位置的对象： + - `column` - 列的索引 + - `row` - 行的索引 + - `to` - 定义区域中最后一个单元格位置的对象： + - `column` - 列的索引 + - `row` - 行的索引 + - `freeze` - （可选）用于为特定工作表设置和调整固定列/行的对象。可包含以下属性： + - `col` - （可选）指定固定列的数量（例如 2），默认为 `0` + - `row` - （可选）指定固定行的数量（例如 2），默认为 `0` + +:::info +若 [`multisheets`](api/spreadsheet_multisheets_config.md) 配置选项设置为 `false`，则只会创建一个工作表。 +::: + +### 示例 {#example} + +~~~jsx {22} title="示例 1. 向单个工作表加载数据" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430 }, + { cell: "E2", value: 2872.4 }, + + // 向单元格添加下拉列表 + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // 更多数据 +]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); +~~~ + +~~~jsx title="示例 2. 向多个工作表加载数据" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + rows: [ + { height: 50, hidden: true }, // 第一行的配置 + { height: 50 }, // 第二行的配置 + // 其他行的高度为 32 + ], + cols: [ + { width: 300 }, // 第一列的配置 + { width: 300, hidden: true }, // 第二列的配置 + // 其他列的宽度为 120 + ], + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + merged: [ + // 合并单元格 A1 和 B1 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // 合并单元格 A2、A3、A4 和 A5 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } } + ], + freeze: { + col: 2, + row: 2 + }, + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + ] + } + ] +}; + +spreadsheet.parse(data); +~~~ + +## 解析带样式的数据 {#parsing-styled-data} + +您也可以在准备数据集时为单元格添加特定样式。为此，请将数据定义为包含以下两个参数的对象： + +- `styles` - （必填）包含要应用于特定单元格的 CSS 类的对象。[详情请参阅下方](#list-of-properties) +- `data` - （必填）要加载的数据 + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "a1", value: "Country" }, + { cell: "b1", value: "Product" }, + { cell: "c1", value: "Price" }, + { cell: "d1", value: "Amount" }, + { cell: "e1", value: "Total Price" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, css: "someclass" }, + { cell: "d2", value: 430, css: "someclass" }, + { cell: "e2", value: 2872.4 } + ], +}; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(styledData); +~~~ + +:::info +通过 `css` 属性为单元格设置 CSS 类。 +::: + +### 属性列表 {#list-of-properties} + +可在 `styles` 对象中指定的属性列表： + +- `background` +- `color` +- `textAlign` +- `verticalAlign` +- `textDecoration` +- `fontWeight` +- `fontStyle` +- `multiline: "wrap"`（自 v5.0.3 起） +- `border`、`border-right`、`border-left`、`border-top`、`border-bottom`（自 v5.2 起） + +:::note +如有需要，还可以使用以下属性： + +- `fontSize` +- `font` +- `fontFamily` +- `textShadow` + +但在某些情况下，这些属性可能无法按预期生效（例如，在应用 `position: absolute` 或 `display: box` 时） +::: + +**更新日志：** + +- `sheets` 对象的 `freeze` 属性以及 `rows` 和 `cols` 属性中的 `hidden` 参数在 v5.2 中新增 +- `cell` 对象的 `locked` 和 `link` 属性在 v5.1 中新增 +- `sheets` 对象的 `merged` 属性在 v5.0 中新增 +- `cell` 对象的 `editor` 属性在 v4.3 中新增 +- `sheets` 对象的 `rows` 和 `cols` 属性在 v4.2 中新增 +- 支持为多个工作表准备数据的功能在 v4.1 中新增 + +**相关文章：** [数据加载与导出](loading_data.md) + +**相关示例**： + +- [Spreadsheet. 带样式的数据](https://snippet.dhtmlx.com/abnh7glb) +- [Spreadsheet. 使用多个工作表初始化](https://snippet.dhtmlx.com/ihtkdcoc) +- [Spreadsheet. 使用合并单元格初始化](https://snippet.dhtmlx.com/0vtukep9) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md new file mode 100644 index 00000000..3be12162 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_readonly_config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: readonly +title: readonly 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 readonly 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# readonly + +### 描述 {#description} + +@short: 可选。启用/禁用只读模式 + +### 用法 {#usage} + +~~~jsx +readonly?: boolean; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +readonly: false +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + readonly: true, + // 其他配置参数 +}); +~~~ + +**相关文章：** +- [配置](configuration.md#read-only-mode) +- [自定义](customization.md#custom-read-only-mode) + +**相关示例：** [Spreadsheet. 只读模式](https://snippet.dhtmlx.com/2w959gx2) + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md new file mode 100644 index 00000000..8043d2f7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_redo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: redo() +title: redo 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 redo 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# redo() + +### 描述 {#description} + +@short: 重新执行已撤销的操作 + +### 用法 {#usage} + +~~~jsx +redo(): void; +~~~ + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 重新执行已撤销的操作 +spreadsheet.redo(); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md new file mode 100644 index 00000000..c81c2d19 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_rowscount_config.md @@ -0,0 +1,30 @@ +--- +sidebar_label: rowsCount +title: rowsCount 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 rowsCount 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# rowsCount + +### 描述 {#description} + +@short: 可选。设置电子表格初始化时的行数 + +### 用法 {#usage} + +~~~jsx +rowsCount?: number; +~~~ + +### 示例 {#example} + +~~~jsx {2} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + rowsCount: 10, + // 其他配置参数 +}); +~~~ + +**相关文章：** [配置](configuration.md#number-of-rows-and-columns) + +**相关示例：** [Spreadsheet. 完整工具栏](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md new file mode 100644 index 00000000..77617dd0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_search_method.md @@ -0,0 +1,47 @@ +--- +sidebar_label: search() +title: search 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 search 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# search() + +### 描述 {#description} + +@short: 根据指定参数搜索单元格 + +该方法还可以在电子表格右上角打开搜索框，并高亮显示匹配结果 + +### 用法 {#usage} + +~~~jsx +search( + text?: string, + openSearch?: boolean, + sheetId?: string | number +): string[]; +~~~ + +### 参数 {#parameters} + +- `text` - （可选）要搜索的值 +- `openSearch` - （可选）若为 `true`，则打开搜索框并高亮显示匹配结果所在的单元格；默认为 `false` +- `sheetId` - （可选）工作表的 ID。默认情况下，该方法在当前活动工作表中搜索单元格 + +### 返回值 {#returns} + +该方法返回一个包含所找到单元格 ID 的数组 + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 返回匹配结果的单元格 ID，打开搜索栏并高亮显示找到的单元格 +spreadsheet.search("feb", true, "Income"); // -> ['C1'] +~~~ + +**更新日志：** 在 v5.0 中新增 + +**相关文章：** [使用电子表格](working_with_ssheet.md#searching-for-data) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md new file mode 100644 index 00000000..0e3c4bf2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_serialize_method.md @@ -0,0 +1,42 @@ +--- +sidebar_label: serialize() +title: serialize 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 serialize 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# serialize() + +### 描述 {#description} + +@short: 将电子表格数据序列化为 JSON 对象 + +### 用法 {#usage} + +~~~jsx +serialize(): object; +~~~ + +### 返回值 {#returns} + +该方法返回一个序列化后的 JSON 对象 + +序列化后的数据是一个包含以下属性的对象： + +- `formats` - 数字格式对象的数组 +- `styles` - 包含已应用 CSS 类的对象 +- `sheets` - 工作表对象的数组。每个对象包含以下属性： + - `name` - 工作表名称 + - `data` - 数据对象的数组 + - `rows` - 行高对象的数组 + - `cols` - 列宽对象的数组 + +### 示例 {#example} + +~~~jsx {4} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +const data = spreadsheet.serialize(); +~~~ + +**相关文章：** [数据加载与导出](loading_data.md#saving-and-restoring-state) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md new file mode 100644 index 00000000..e2789f0e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setfilter_method.md @@ -0,0 +1,94 @@ +--- +sidebar_label: setFilter() +title: setFilter 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setFilter 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setFilter() + +### 描述 {#description} + +@short: 按指定条件筛选电子表格中的数据 + +### 用法 {#usage} + +~~~jsx +setFilter( + cell?: string, + rules?: [ + { + condition?: { + factor: "string", + value: date | number |string | [number, number] + }, + exclude?: any[] + }, + // more rule objects + ] +): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）包含被筛选列 id 的单元格 id（或单元格区域），例如 "A1"、"A1:C10" 或 "sheet2!A1" +- `rules` - （可选）包含筛选规则的对象数组。每个对象可包含以下参数： + - `condition` - （可选）用于对工作表进行条件筛选的参数对象： + - `factor` - （必填）定义筛选比较表达式的字符串值。请参阅[下方](#list-of-factors)可用值列表 + - `value` - （必填）按指定条件进行筛选时使用的值 + - `exclude` - （可选）需从工作表中排除的数据点数组 + +:::note +要重置筛选，请不带参数调用该方法，或仅将 `cell` 参数传入该方法。 +::: + +### 示例 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 按为列 A 指定的条件筛选数据 +spreadsheet.setFilter("A2", [{condition: {factor: "te", value:"r" }}]); + +// 按为 Date 工作表列 A 指定的条件筛选数据 +spreadsheet.setFilter("Date!A1", [{condition: {factor: "db", value:"18/10/2022" }, exclude: ["25/06/2022"]}]); + +// 按为列 C 指定的条件筛选数据 +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}}]); + +// 按为列 A 和列 C 指定的条件筛选数据 +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); + + +// 重置筛选 +spreadsheet.setFilter(); +~~~ + +### 条件因子列表 {#list-of-factors} + +| 因子 | 含义 | +| ------ | --------------------- | +| "e" | 为空 | +| "ne" | 不为空 | +| "tc" | 文本包含 | +| "tdc" | 文本不包含 | +| "ts" | 文本开头为 | +| "te" | 文本结尾为 | +| "tex" | 文本完全匹配 | +| "d" | 日期为 | +| "db" | 日期早于 | +| "da" | 日期晚于 | +| "gt" | 大于 | +| "geq" | 大于或等于 | +| "lt" | 小于 | +| "leq" | 小于或等于 | +| "eq" | 等于 | +| "neq" | 不等于 | +| "ib" | 介于之间 | +| "inb" | 不介于之间 | + +**更新日志：** 在 v5.0 中新增 + +**相关文章：** [筛选数据](working_with_ssheet.md#filtering-data) + +**相关示例：** [Spreadsheet. Filtering via API](https://snippet.dhtmlx.com/effrcsg6) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md new file mode 100644 index 00000000..4134b5f4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setformat_method.md @@ -0,0 +1,46 @@ +--- +sidebar_label: setFormat() +title: setFormat 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setFormat 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setFormat() + +### 描述 {#description} + +@short: 为单元格的值设置指定格式 + +### 用法 {#usage} + +~~~jsx +setFormat(cell: string, format: string | array): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单个或多个单元格的 id，或单元格区域 +- `format` - （必填）应用于单元格值的数字格式名称（可为一个或多个） + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 将货币格式应用于单元格 A1 +spreadsheet.setFormat("A1","currency"); +~~~ + +:::info +从 v4.1 起，可以使用以下格式指定单元格引用： + +~~~jsx +spreadsheet.setFormat("sheet1!A2", "number"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将为当前活动标签页中单元格的值设置格式。 +::: + +**相关文章：** [数字格式](number_formatting.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md new file mode 100644 index 00000000..a8c95e06 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setstyle_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setStyle() +title: setStyle 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setStyle 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setStyle() + +### 描述 {#description} + +@short: 为单元格设置样式 + +:::info +该方法为指定的单元格设置相同的样式。如果您希望为电子表格单元格应用不同的样式，请使用 [](api/spreadsheet_parse_method.md) 方法。 +::: + +### 用法 {#usage} + +~~~jsx +setStyle(cell: string, styles: array | object): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单个或多个单元格的 id，或单元格区域 +- `styles` - （必填）应用于单元格的样式。[查看可用于设置单元格样式的属性列表](api/spreadsheet_parse_method.md#list-of-properties) + +### 示例 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 为单个单元格设置样式 +spreadsheet.setStyle("A1", {background: "red"}); + +// 为单元格区域设置相同的样式 +spreadsheet.setStyle("A1:D1", {color: "blue"}); + +// 为不同单元格设置相同的样式 +spreadsheet.setStyle("B6,A1:D1", {color:"blue"}); + +// 从数组中依次为区域内的单元格设置样式 +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +**相关示例：** [Spreadsheet. Styled Data](https://snippet.dhtmlx.com/abnh7glb) + +:::info +从 v4.1 起，可以使用以下格式指定单元格或单元格区域的引用： + +~~~jsx +spreadsheet.setStyle("sheet1!A2", {background: "red"}); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将为当前活动标签页中的单元格应用样式。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md new file mode 100644 index 00000000..9c018f6b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalidation_method.md @@ -0,0 +1,58 @@ +--- +sidebar_label: setValidation() +title: setValidation 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setValidation 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setValidation() + +### 描述 {#description} + +@short: 通过向单元格添加下拉列表来为单元格设置验证 + +该方法也可用于移除单元格的数据验证。 + +### 用法 {#usage} + +~~~jsx +setValidation( + cell: string, + options: string | string[] +): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单个或多个单元格的 id，或单元格区域 +- `options` - （必填）包含单元格区域的字符串（如 "C1:C3"）或字符串值数组 + +### 示例 {#example} + +~~~jsx {8} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); + +spreadsheet.parse(dataset); + +// 为 B10 单元格设置验证，并创建一个包含 3 个选项的下拉列表 +spreadsheet.setValidation("B10", ["Apple", "Mango", "Avocado"]); +~~~ + +### 详情 {#details} + +如需移除单元格的验证，请将 `null`、`0`、`false` 或 `undefined` 作为方法的第二个参数传入，而非选项列表： + +~~~jsx +spreadsheet.setValidation("B15"); + +//或 +spreadsheet.setValidation("B15", null); + +//或 +spreadsheet.setValidation("B15", false); +~~~ + +**更新日志：** 在 v4.3 中新增 + +**相关文章：** [验证单元格](working_with_cells.md#validating-cells) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md new file mode 100644 index 00000000..1b8afc51 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_setvalue_method.md @@ -0,0 +1,59 @@ +--- +sidebar_label: setValue() +title: setValue 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 setValue 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# setValue() + +### 描述 {#description} + +@short: 为单元格设置值 + +:::info +该方法为指定的单元格设置相同（重复）的值。如果您希望为电子表格单元格添加不同的值，请使用 [](api/spreadsheet_parse_method.md) 方法。 +::: + +### 用法 {#usage} + +~~~jsx +setValue(cell: string, value: string | number | array): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单个或多个单元格的 id，或单元格区域 +- `value` - （必填）为单元格设置的值 + +### 示例 {#example} + +~~~jsx {5,8,11,14} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 为单个单元格设置值 +spreadsheet.setValue("A1",5); + +// 为单元格区域设置相同的值 +spreadsheet.setValue("A1:D1",5); + +// 为不同单元格设置相同的值 +spreadsheet.setValue("B6,A1:D1",5); + +// 从数组中依次为区域内的单元格设置值 +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +**相关示例：** [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) + +:::info +从 v4.1 起，可以使用以下格式指定单元格或单元格区域的引用： + +~~~jsx +spreadsheet.setValue("sheet1!A1",5); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将为当前活动标签页中的单元格设置值。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md new file mode 100644 index 00000000..b7d8c8d6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showcols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showCols() +title: showCols 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 showCols 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# showCols() + +### 描述 {#description} + +@short: 显示隐藏的列 + +### 用法 {#usage} + +~~~jsx +showCols(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定列 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.showCols("B2"); // "B" 列将重新变为可见 +spreadsheet.showCols("sheet2!B2"); // "sheet2" 中的 "B" 列将重新变为可见 +spreadsheet.showCols("B2:C2"); // "B" 列和 "C" 列将重新变为可见 +~~~ + +**相关文章：** [使用电子表格](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**相关 API：** [`hideCols()`](api/spreadsheet_hidecols_method.md) + +**相关示例：** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**更新日志：** 在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md new file mode 100644 index 00000000..f34830fa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_showrows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: showRows() +title: showRows 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 showRows 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# showRows() + +### 描述 {#description} + +@short: 显示隐藏的行 + +### 用法 {#usage} + +~~~jsx +showRows(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于确定行 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.showRows("B2"); // 第 "2" 行将重新变为可见 +spreadsheet.showRows("sheet2!B2"); // "sheet2" 中的第 "2" 行将重新变为可见 +spreadsheet.showRows("B2:C2"); // 第 "2" 行到第 "4" 行将重新变为可见 +~~~ + +**相关文章：** [使用电子表格](working_with_ssheet.md#hidingshowing-rows-and-columns) + +**相关 API：** [`hideRows()`](api/spreadsheet_hiderows_method.md) + +**相关示例：** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote) + +**更新日志：** 在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md new file mode 100644 index 00000000..a04521cd --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_sortcells_method.md @@ -0,0 +1,44 @@ +--- +sidebar_label: sortCells() +title: sortCells 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 sortCells 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# sortCells() + +### 描述 {#description} + +@short: 对电子表格中的数据进行排序 + +### 用法 {#usage} + +~~~jsx +sortCells(cell: string, dir: number): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）用于对电子表格数据排序的单元格 id 或单元格区域 +- `dir` - （必填）排序方向： + - 1 - 升序 + - -1 - 降序 + +### 示例 {#example} + +~~~jsx {7,10} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // 配置参数 +}); +spreadsheet.parse(data); + +// 对第一个工作表的数据进行排序 +spreadsheet.sortCells("B2:B11", -1); + +// 对多个工作表的数据进行排序 +spreadsheet.sortCells("Income!B2:B11, Report!B2:B11, Expenses!C2:C11", 1); +~~~ + + +**相关示例：** [Spreadsheet. Initialization with multiple sheets](https://snippet.dhtmlx.com/ihtkdcoc) + +**相关文章：** [排序数据](working_with_ssheet.md#sorting-data) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md new file mode 100644 index 00000000..f59ed30f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_startedit_method.md @@ -0,0 +1,38 @@ +--- +sidebar_label: startEdit() +title: startEdit 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 startEdit 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# startEdit() + +### 描述 {#description} + +@short: 开始编辑选中的单元格 + +:::info +如果未传入单元格 id，则在当前选中的单元格中开始编辑。 +::: + +### 用法 {#usage} + +~~~jsx +startEdit(cell?: string, initialValue?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）单元格的 id +- `initialValue` - （可选）单元格的值 + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 开始编辑当前选中的单元格 +spreadsheet.startEdit(); +~~~ + +**相关文章：** [使用电子表格](working_with_cells.md#editing-a-cell) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md new file mode 100644 index 00000000..34698626 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_toolbarblocks_config.md @@ -0,0 +1,71 @@ +--- +sidebar_label: toolbarBlocks +title: toolbarBlocks 配置项 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 toolbarBlocks 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# toolbarBlocks + +### 描述 {#description} + +@short: 可选。指定电子表格工具栏中显示的按钮分组 + +### 用法 {#usage} + +~~~jsx +toolbarBlocks?: array; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +toolbarBlocks: ["undo", "colors", "font", "decoration", "align", "cell", "format", "actions"] +~~~ + +### 示例 {#example} + +~~~jsx {3-17} +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // 完整工具栏 + toolbarBlocks: [ + "undo", + "colors", + "font", + "decoration", + "align", + "cell", + "format", + "actions", + "lock", + "clear", + "columns", + "rows", + "file", + "help" + ] +}); +~~~ + +### 详情 {#details} + +您可以通过在 `toolbarBlocks` 数组中按所需顺序列举必要元素来自定义工具栏结构，例如： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +查看如何[自定义工具栏](customization.md#toolbar)。 + +**更新日志：** + +- `"font"` 分组在 v6.0 中添加 +- `"cell"` 分组在 v5.2 中添加 +- `"actions"` 分组在 v5.0 中添加 + +**相关文章：** +- [配置](configuration.md#toolbar) +- [自定义](customization.md) + +**相关示例：** [Spreadsheet. Full Toolbar](https://snippet.dhtmlx.com/kpm017nx) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md new file mode 100644 index 00000000..5e3962a0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_undo_method.md @@ -0,0 +1,27 @@ +--- +sidebar_label: undo() +title: undo 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 undo 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# undo() + +### 描述 {#description} + +@short: 撤销最近一次操作 + +### 用法 {#usage} + +~~~jsx +undo(): void; +~~~ + +### 示例 {#example} + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 执行一步撤销操作 +spreadsheet.undo(); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md new file mode 100644 index 00000000..768fb63d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezecols_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeCols() +title: unfreezeCols 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 unfreezeCols 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# unfreezeCols() + +### 描述 {#description} + +@short: 取消固定（"冻结"）的列 + +### 用法 {#usage} + +~~~jsx +unfreezeCols(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于定义列 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.unfreezeCols(); // 当前工作表中的固定列将被取消冻结 +spreadsheet.unfreezeCols("sheet2!A1"); // "sheet2" 中的固定列将被取消冻结 +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**相关 API：** [`freezeCols()`](api/spreadsheet_freezecols_method.md) + +**相关示例：** [Spreadsheet. 通过 API 冻结列和行](https://snippet.dhtmlx.com/a12xd1mn) + +**更新日志：** +在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md new file mode 100644 index 00000000..2953441f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unfreezerows_method.md @@ -0,0 +1,37 @@ +--- +sidebar_label: unfreezeRows() +title: unfreezeRows 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 unfreezeRows 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# unfreezeRows() + +### 描述 {#description} + +@short: 取消固定（"冻结"）的行 + +### 用法 {#usage} + +~~~jsx +unfreezeRows(cell?: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （可选）用于定义行 id 的单元格 id。如果未传入单元格 id，则使用当前选中的单元格 + +### 示例 {#example} + +~~~jsx +spreadsheet.unfreezeRows(); // 当前工作表中的固定行将被取消冻结 +spreadsheet.unfreezeRows("sheet2!A1"); // "sheet2" 中的固定行将被取消冻结 +~~~ + +**相关文章：** [使用 Spreadsheet](working_with_ssheet.md#freezingunfreezing-rows-and-columns) + +**相关 API：** [`freezeRows()`](api/spreadsheet_freezerows_method.md) + +**相关示例：** [Spreadsheet. 通过 API 冻结列和行](https://snippet.dhtmlx.com/a12xd1mn) + +**更新日志：** +在 v5.2 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md new file mode 100644 index 00000000..0f9da68c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/spreadsheet_unlock_method.md @@ -0,0 +1,49 @@ +--- +sidebar_label: unlock() +title: unlock 方法 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 unlock 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# unlock() + +### 描述 {#description} + +@short: 解锁已锁定的单元格 + +### 用法 {#usage} + +~~~jsx +unlock(cell: string): void; +~~~ + +### 参数 {#parameters} + +- `cell` - （必填）单个或多个单元格的 id，或单元格区域 + +### 示例 {#example} + +~~~jsx {5,8,11} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", {}); +spreadsheet.parse(data); + +// 解锁单个单元格 +spreadsheet.unlock("A1"); + +// 解锁单元格区域 +spreadsheet.unlock("A1:C1"); + +// 解锁指定的多个单元格 +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +:::info +从 v4.1 开始，对单元格或单元格区域的引用可以采用以下格式： + +~~~jsx +spreadsheet.unlock("sheet1!A2"); +~~~ + +其中 `sheet1` 是标签页的名称。 + +如果未指定标签页名称，该方法将解锁活动标签页中的单元格。 +::: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/awaitredraw.md b/i18n/zh/docusaurus-plugin-content-docs/current/awaitredraw.md new file mode 100644 index 00000000..0456521f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/awaitredraw.md @@ -0,0 +1,28 @@ +--- +sidebar_label: AwaitRedraw 辅助函数 +title: AwaitRedraw 辅助函数 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 AwaitRedraw 辅助函数。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# AwaitRedraw 辅助函数 {#awaitredraw-helper} + +DHTMLX Spreadsheet 的某些 API 方法只有在组件渲染到页面后才会生效。在某些情况下，这可能需要一点时间，因此您需要等待浏览器完成渲染后再运行下一段代码。 + +对于此类情况，您可以使用 `dhx.awaitRedraw` 辅助函数。它会追踪渲染周期，并在 Spreadsheet 完成渲染后立即执行您的代码。 + +~~~js +dhx.awaitRedraw().then(() => { + // 您的代码 +}); +~~~ + +例如，在 `afterDataLoaded` 内使用 `awaitRedraw`，以确保在读取单元格值之前该值已可用： + +~~~js +spreadsheet.events.on("afterDataLoaded", () => { + dhx.awaitRedraw().then(() => { + const value = spreadsheet.getValue("A1"); + console.log(value); + }); +}); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/configuration.md new file mode 100644 index 00000000..40916c7d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/configuration.md @@ -0,0 +1,71 @@ +--- +sidebar_label: 配置 +title: 配置 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的配置方式。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 配置 {#configuration} + +您可以根据需要调整 DHTMLX Spreadsheet 的各项设置。可用的配置选项允许您限制行数和列数、更改工具栏外观，以及控制菜单和编辑栏的显示。如有需要，您还可以将 Spreadsheet 初始化为只读模式。 + +## 工具栏 {#toolbar} + +Spreadsheet 的工具栏由若干控件块组成，可根据需要进行修改。默认情况下，工具栏包含以下控件块：`"undo"`、`"colors"`、`"font"`、`"decoration"`、`"align"`、`"cell"`、`"format"`、`"actions"`。您还可以从以下列表中添加更多控件块：`"lock"`、`"clear"`、`"rows"`、`"columns"`、`"file"`、`"help"`。 + + + +工具栏结构可通过组件的 [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 配置选项进行调整，该选项是一个包含控件名称字符串的数组。 + +您也可以通过在 `toolbarBlocks` 数组中按所需顺序列举必要元素来自定义工具栏结构，例如：`"colors"`、`"align"`、`"cell"`、`"decoration"`、`"lock"`、`"clear"`。 + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"] +}); +~~~ + +工具栏[高度可定制](customization.md)。您可以添加新控件、更改控件图标，以及应用所需的图标集。 + +## 编辑栏 {#editing-bar} + +由于 Spreadsheet 结构灵活，您可以切换编辑栏的显示状态，以获得所需的组件外观。使用 [`editLine`](api/spreadsheet_editline_config.md) 配置选项来隐藏或显示编辑栏。 + + + +## 行数和列数 {#number-of-rows-and-columns} + +Spreadsheet 初始化时，默认以 26 列和 1000 行的网格启动。当达到此限制后，系统会自动渲染额外的行和列，无需手动添加。不过，如果您希望对其进行限制，可以指定精确的行数和列数。为此，请使用 [`colsCount`](api/spreadsheet_colscount_config.md) 和 [`rowsCount`](api/spreadsheet_rowscount_config.md) 选项。 + + + +## 菜单 {#menu} + +Spreadsheet 的菜单默认隐藏。您可以通过相应的配置选项 [`menu`](api/spreadsheet_menu_config.md) 切换其显示状态： + + + +## 只读模式 {#read-only-mode} + +您还可以通过 [`readonly`](api/spreadsheet_readonly_config.md) 配置选项启用只读模式，以防止对 Spreadsheet 单元格进行编辑。 + +您也可以[自定义 Spreadsheet 的只读行为](customization.md#custom-read-only-mode)。 + + + +## 单元格自定义数字格式 {#custom-number-formats-for-cells} + +您可以对单元格值应用 7 种默认格式："Common"（通用）、"Number"（数字）、"Percent"（百分比）、"Currency"（货币）、"Date"（日期）、"Time"（时间）、"Text"（文本）。 + +您可以通过 [`formats`](api/spreadsheet_formats_config.md) 配置选项重新定义默认格式或指定自定义数字格式。详细信息请参阅[数字格式化](number_formatting.md)文章。 + + + +## 导出/导入模块路径 {#path-to-exportimport-modules} + +DHTMLX Spreadsheet 支持以 Excel 格式导入和导出数据。该组件使用基于 WebAssembly 的库：[Excel2Json](https://github.com/dhtmlx/excel2json) 和 [JSON2Excel](https://github.com/dhtmlx/json2excel) 来处理数据的导入/导出。 + +安装必要的库后，您需要通过相应的配置选项设置 *worker.js* 文件的路径（本地路径或 CDN 地址）：[`importModulePath`](api/spreadsheet_importmodulepath_config.md) 或 [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md)。 + +详细信息请参阅[数据加载与导出](loading_data.md)文章。 + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/customization.md b/i18n/zh/docusaurus-plugin-content-docs/current/customization.md new file mode 100644 index 00000000..1c8fa13f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/customization.md @@ -0,0 +1,458 @@ +--- +sidebar_label: 自定义 +title: 自定义 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的自定义方式。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 自定义 {#customization} + +您可以自定义工具栏、菜单和上下文菜单的外观、结构与功能，并为 Spreadsheet 定义自定义只读行为。 + +## 默认图标与自定义图标 {#default-and-custom-icons} + +DHTMLX Spreadsheet 默认使用基于 [Material Design](https://pictogrammers.com/library/mdi/?welcome) 的图标。如有需要，您也可以使用任何其他图标字体包。为此，您需要在页面上引入所需的图标字体，并在 spreadsheet 的任意部分应用图标：工具栏控件、菜单和上下文菜单项。 + +例如，您可以在 DHTMLX Spreadsheet 源文件之后引入 [Font Awesome](https://fontawesome.com/) 图标包的 [CDN 链接](https://docs.fontawesome.com/web/setup/get-started)： + +~~~html + + + + +~~~ + +之后，您可以将图标名称作为工具栏、菜单或上下文菜单控件参数对象中 `icon` 属性的值。详见下文。 + +## 控件类型与操作 {#controls-types-and-operations} + +### 类型 {#types} + +您可以添加以下类型的控件：`button`、`menuItem`、`separator` 和 `spacer`。 + +`button` 对象具有以下属性： + +- `type` - 按钮类型，设置为 "button" +- `id` - 按钮的 id +- `icon` - 所用图标字体中图标的名称 +- `hotkey` - 按钮的快捷键名称 +- `value` - 按钮的值 +- `tooltip` - 按钮的提示文本 +- `twoState` - 定义按钮是否可处于两种状态的标志 +- `active` - 按钮状态：`true` 为激活，`false` 为未激活 + +`menuItem` 对象具有以下属性： + +- `type` - 菜单项类型，设置为 "menuItem" +- `id` - 菜单项的 id +- `icon` - 所用图标字体中图标的名称 +- `hotkey` - 菜单项的快捷键名称 +- `value` - 菜单项的值 +- `childs` - 子控件数组（注意所有子项类型均应为 `menuItem`） + +**工具栏**、**菜单**和**上下文菜单**的数据集合 API 允许您管理控件：添加自定义控件、移除不需要的控件，或更新控件（例如更改其图标）。 + +### 添加控件 {#adding-controls} + +要添加新控件，请使用 `spreadsheet.{name}.data.add()` 方法。该方法接受以下参数： + +- `config` - (*object*) 包含控件配置的对象 +- `index` - (*number*) 控件的插入位置索引 +- `parent` - (*string*) 父控件的 id（用于 `menuItem` 类型） + +对于 button： + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "button", // "menuItem" + id: "button-id", + tooltip: "Some tooltip", + icon: "icon-name" +}, 2); +~~~ + +对于 menuItem： + +~~~jsx +// spreadsheet.menu.data.add / spreadsheet.contextMenu.data.add +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "menuitem-id", + value: "Some value", +}, -1, "parent-id"); +~~~ + +### 更新控件 {#updating-controls} + +您可以通过 `spreadsheet.{name}.data.update()` 方法更改控件的图标及其他配置选项。该方法接受两个参数： + +- 控件的 id +- 包含控件新配置的对象 + +~~~jsx +// spreadsheet.menu.data.update / spreadsheet.contextMenu.data.update +spreadsheet.toolbar.data.update("add", { + icon: "icon_name" +}); +~~~ + +### 删除控件 {#deleting-controls} + +要移除控件，请使用 `spreadsheet.{name}.data.remove()` 方法，并将要移除的控件 id 传入该方法： + +~~~jsx +// spreadsheet.menu.data.remove / spreadsheet.contextMenu.data.remove +spreadsheet.toolbar.data.remove("control-id"); +~~~ + +## 工具栏 {#toolbar} + +### 默认控件 {#default-controls} + +[默认工具栏](/#toolbar) 包含以下控件块： + +- **撤销（Undo）**块 + - *Undo* 按钮（id: "undo"） + - *Redo* 按钮（id: "redo"） +- **颜色（Colors）**块 + - *文字颜色（Text color）*按钮（id: "color"） + - *背景颜色（Background color）*按钮（id: "background"） +- **字体（Font）**块 + - *字号（Font size）*下拉框（id: "font-size"） +- **装饰（Decoration）**块 + - *粗体（Bold）*按钮（id: "font-weight-bold"） + - *斜体（Italic）*按钮（id: "font-style-italic"） + - *下划线（Underline）*按钮（id: "text-decoration-underline"） + - *删除线（Strikethrough）*按钮（id: "text-decoration-line-through"） +- **对齐（Align）**块 + - **水平对齐**子块 + - *左对齐（Left）*按钮（id: "halign-left"） + - *居中（Center）*按钮（id: "halign-center"） + - *右对齐（Right）*按钮（id: "halign-right"） + - **垂直对齐**子块 + - *顶部（Top）*按钮（id: "valign-top"） + - *居中（Center）*按钮（id: "valign-center"） + - *底部（Bottom）*按钮（id: "valign-bottom"） + - **文字换行**子块 + - *截断（Clip）*按钮（id: "multiline-clip"） + - *换行（Wrap）*按钮（id: "multiline-wrap"） +- **单元格（Cell）**块 + - *边框（Border）*按钮（id: "border"） + - *合并/取消合并（Merge/Unmerge）*按钮（id: "merge"） +- **格式（Format）**块 + - *格式（Format）* menuItem（id: "format"） +- **操作（Actions）**块 + - *筛选（Filter）*按钮（id: "filter"） + - *插入链接（Insert link）*按钮（id: "link"） + +还可以添加以下块： + +- **锁定（Lock）**块 + - *锁定（Lock）*按钮（id: "lock"） +- **清除（Clear）**块 + - *清除组（Clear group）* menuItem（id: "clear-group"） + - *清除值（Clear value）* menuItem（id: "clear-value"） + - *清除样式（Clear styles）* menuItem（id: "clear-styles"） + - *全部清除（Clear all）* menuItem（id: "clear-all"） +- **行（Rows）**块 + - *添加行（Add row）*按钮（id: "add-row"） + - *删除行（Remove row）*按钮（id: "remove-row"） + - *取消冻结行（Unfreeze rows）*按钮（id: "unfreeze-rows"） + - *冻结到第 [id] 行（Freeze up to row [id]）*（id: "freeze-rows"） + - *隐藏行 [id]（Hide row(s) [id]）*（id: "hide-rows"） +- **列（Columns）**块 + - *添加列（Add column）*按钮（id: "add-col"） + - *删除列（Remove column）*按钮（id: "remove-col"） + - *取消冻结列（Unfreeze columns）*按钮（id: "unfreeze-cols"） + - *冻结到第 [id] 列（Freeze up to column [id]）*（id: "freeze-cols"） + - *隐藏列 [id]（Hide column(s) [id]）*（id: "hide-cols"） +- **文件（File）**块 + - *导出（Export）* menuItem（id: "export"） + - *"Microsoft Excel(.xlsx)"* menuItem（id: "export-xlsx"） + - *导入（Import）* menuItem（id: "import"） + - *"Microsoft Excel(.xlsx)"* menuItem（id: "import-xlsx"） +- **帮助（Help）**块 + - *帮助（Help）*按钮（id: "help"） + +### 添加控件 {#adding-controls-1} + +以下示例向工具栏中添加一个新按钮： + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "button", + icon: "dxi dxi-delete", + tooltip: "Remove all", + id: "remove-all" +}); +~~~ + +![通过自定义添加了"删除全部"按钮的 DHTMLX Spreadsheet 工具栏](/img/custom_toolbar_button.png) + +**相关示例**：[Spreadsheet. 自定义工具栏按钮](https://snippet.dhtmlx.com/qopk6lta) + +以下示例向 "clear-group" 控件中添加一个新 menuItem 选项： + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2" +}, -1, "clear-group"); +~~~ + +添加 menuItem 还有一种简写方式，适用于不需要精确指定新项位置的情况： + +~~~jsx +spreadsheet.toolbar.data.add({ + type: "menuItem", + id: "clear-value2", + value: "Clear value2", + parent: "clear-group" +}); +~~~ + +### 更新控件 {#updating-controls-1} + +以下示例将工具栏中撤销/重做按钮的默认图标替换为 Font Awesome 图标： + +~~~jsx +spreadsheet.toolbar.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.toolbar.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![使用了 Font Awesome 自定义撤销和重做图标的 DHTMLX Spreadsheet 工具栏](/img/custom_toolbar_icons.png) + +**相关示例**：[Spreadsheet. 自定义工具栏图标](https://snippet.dhtmlx.com/mvnx43o0) + +### 删除控件 {#deleting-controls-1} + +以下示例从工具栏中删除撤销按钮： + +~~~jsx +spreadsheet.toolbar.data.remove("undo"); +~~~ + +### 自定义字号 {#custom-font-size} + +您可以通过移除 `"font-size"` 下拉框中的现有项并添加自定义项来重新定义**字体**工具栏块中的可用字号列表： + +~~~jsx +const FONT_SIZES = [8, 10, 12, 14, 16, 20]; + +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + // 配置选项 +}); + +spreadsheet.toolbar.data.removeAll("font-size"); +spreadsheet.toolbar.data.add( + FONT_SIZES.map(size => ({ value: size, id: `font-size-${size}` })), + -1, + "font-size" +); + +spreadsheet.parse(dataset); +~~~ + +**相关示例：** [Spreadsheet. 设置自定义字号](https://snippet.dhtmlx.com/tffbf11g) + +## 菜单 {#menu} + +### 默认控件 {#default-controls-1} + +[默认菜单](/#menu) 具有以下结构： + +- **文件（File）** menuItem（id: "edit"） + - *导入为...（Import as...）* menuItem（id: "import"） + - *"Microsoft Excel(.xlsx)"* menuItem（id: "import-xlsx"） + - *下载为...（Download as...）* menuItem（id: "download"） + - *"Microsoft Excel(.xlsx)"* menuItem（id: "export-xlsx"） +- **编辑（Edit）** menuItem（id: "edit"） + - *撤销（Undo）* menuItem（id: "undo"） + - *重做（Redo）* menuItem（id: "redo"） + - 分隔符 + - *冻结（Freeze）* menuItem（id: "freeze"） + - *取消冻结列（Unfreeze columns）* menuItem（id: "unfreeze-cols"） + - *冻结到第 [id] 列（Freeze up to column [id]）*（id: "freeze-cols"） + - 分隔符（id: "freeze-sep"） + - *取消冻结行（Unfreeze rows）* menuItem（id: "unfreeze-rows"） + - *冻结到第 [id] 行（Freeze up to row [id]）*（id: "freeze-rows"） + - *锁定（Lock）* menuItem（id: "lock"） + - 分隔符 + - *清除（Clear）* menuItem（id: "clear"） + - *清除值（Clear value）* menuItem（id: "clear-value"） + - *清除样式（Clear styles）* menuItem（id: "clear-styles"） + - *全部清除（Clear all）* menuItem（id: "clear-all"） +- **插入（Insert）** menuItem（id: "insert"） + - *列（Columns）* menuItem（id: "columns"） + - *添加列（Add column）* menuItem（id: "add-col"） + - *删除列（Remove column）* menuItem（id: "remove-col"） + - *行（Rows）* menuItem（id: "rows"） + - *添加行（Add row）* menuItem（id: "add-row"） + - *删除行（Remove row）* menuItem（id: "remove-row"） + - *插入链接（Insert link）* menuItem（id: "link"） +- **格式（Format）** menuItem（id: "configuration"） + - *粗体（Bold）* menuItem（id: "font-weight-bold"） + - *斜体（Italic）* menuItem（id: "font-style-italic"） + - *下划线（Underline）* menuItem（id: "text-decoration-underline"） + - *删除线（Strikethrough）* menuItem（id: "text-decoration-line-through"） + - 分隔符 + - *水平对齐（Horizontal align）* menuItem（id: "halign"） + - *左对齐（Left）* menuItem（id: "halign-left"） + - *居中（Center）* menuItem（id: "halign-center"） + - *右对齐（Right）* menuItem（id: "halign-right"） + - *垂直对齐（Vertical align）* menuItem（id: "valign"） + - *顶部（Top）* menuItem（id: "valign-top"） + - *居中（Center）* menuItem（id: "valign-center"） + - *底部（Bottom）* menuItem（id: "valign-bottom"） + - *文字换行（Text wrapping）* menuItem（id: "multiline"） + - *截断（Clip）* menuItem（id: "multiline-clip"） + - *换行（Wrap）* menuItem（id: "multiline-wrap"） + - *格式（Format）* menuItem（id: "format"） + - *合并/取消合并（Merge/Unmerge）* menuItem（id: "merge"） +- **数据（Data）** menuItem（id: "data"） + - *数据验证（Data validation）* menuItem（id: "validation"） + - *搜索（Search）* menuItem（id: "search"） + - *筛选（Filter）* menuItem（id: "filter"） + - *排序（Sort）* menuItem（id: "sort"） + - *升序排序（Sort A to Z）* menuItem（id: "asc-sort"） + - *降序排序（Sort Z to A）* menuItem（id: "desc-sort"） +- **帮助（Help）** menuItem（id: "help"） + +### 添加控件 {#adding-controls-2} + +以下示例向菜单中添加一个新 menuItem： + +~~~jsx +spreadsheet.menu.data.add({ + id: "validate", + value: "Validate", + childs: [ + { + id: "isNumber", + value: "Is number" + }, + { + id: "isEven", + value: "Is even number" + } + ] +}); +~~~ + +![带有用于检查数字的自定义验证选项的 DHTMLX Spreadsheet 菜单](/img/custom_menuitem.png) + +**相关示例**：[Spreadsheet. 菜单数据](https://snippet.dhtmlx.com/2mlv2qaz) + +### 更新控件 {#updating-controls-2} + +以下示例将撤销/重做 menuItem 的默认图标替换为 Font Awesome 图标： + +~~~jsx +spreadsheet.menu.data.update("undo", { icon: "fa fa-undo" }); +spreadsheet.menu.data.update("redo", { icon: "fa fa-redo" }); +~~~ + +![使用了 Font Awesome 自定义撤销和重做图标的 DHTMLX Spreadsheet 菜单](/img/custom_menu_icons.png) + +### 删除控件 {#deleting-controls-2} + +以下示例从菜单中删除撤销 menuItem： + +~~~jsx +spreadsheet.menu.data.remove("undo"); +~~~ + +## 上下文菜单 {#context-menu} + +### 默认控件 {#default-controls-2} + +[默认上下文菜单](/#context-menu) 具有以下结构： + +- **锁定（Lock）** menuItem（id: "lock"） +- **清除（Clear）** menuItem（id: "clear"） + - *清除值（Clear value）* menuItem（id: "clear-value"） + - *清除样式（Clear styles）* menuItem（id: "clear-styles"） + - *全部清除（Clear all）* menuItem（id: "clear-all"） +- **列（Columns）** menuItem（id: "columns"） + - *添加列（Add column）* menuItem（id: "add-col"） + - *删除列（Remove column）* menuItem（id: "remove-col"） + - *适应数据宽度（Fit to data）* menuItem（id: "fit-col"） + - 分隔符 + - *取消冻结列（Unfreeze columns）* menuItem（id: "unfreeze-cols"） + - *冻结到第 [id] 列（Freeze up to column [id]）* menuItem（id: "freeze-cols"） + - *显示列（Show columns）* menuItem（id: "show-cols"） + - *隐藏列 [id]（Hide column(s) [id]）* menuItem（id: "hide-cols"） +- **行（Rows）** menuItem（id: "rows"） + - *添加行（Add row）* menuItem（id: "add-row"） + - *删除行（Remove row）* menuItem（id: "remove-row"） + - 分隔符 + - *取消冻结行（Unfreeze rows）* menuItem（id: "unfreeze-rows"） + - *冻结到第 [id] 行（Freeze up to row [id]）* menuItem（id: "freeze-rows"） + - *显示行（Show rows）* menuItem（id: "show-rows"） + - *隐藏行 [id]（Hide row(s) [id]）* menuItem（id: "hide-rows"） +- **排序（Sort）** menuItem（id: "sort"） + - *升序排序（Sort A to Z）* menuItem（id: "asc-sort"） + - *降序排序（Sort Z to A）* menuItem（id: "desc-sort"） +- **插入链接（Insert link）** menuItem（id: "link"） + +### 添加控件 {#adding-controls-3} + +以下示例向上下文菜单中添加一个新 menuItem： + +~~~jsx +spreadsheet.contextMenu.data.add({ + icon: "mdi mdi-eyedropper-variant", + value: "Paint format", + id: "paint-format" +}); +~~~ + +![带有自定义"格式刷"选项的 DHTMLX Spreadsheet 上下文菜单](/img/custom_context_menuitem.png) + +**相关示例**：[Spreadsheet. 上下文菜单](https://snippet.dhtmlx.com/atl9gd4h) + +### 更新控件 {#updating-controls-3} + +以下示例将锁定 menuItem 的默认图标替换为 Font Awesome 图标： + +~~~jsx +spreadsheet.contextMenu.data.update("lock", { icon: "fa fa-key" }); +~~~ + +![使用了 Font Awesome 自定义锁定图标的 DHTMLX Spreadsheet 上下文菜单](/img/custom_context_icon.png) + +### 删除控件 {#deleting-controls-3} + +以下示例从上下文菜单中删除撤销 menuItem： + +~~~jsx +spreadsheet.contextMenu.data.remove("lock"); +~~~ + +## 自定义只读模式 {#custom-read-only-mode} + +除了对整个 Spreadsheet 应用[只读模式](configuration.md#read-only-mode)外，您还可以通过名称以 `before` 开头的事件来阻止特定操作，例如： + +- [](api/spreadsheet_beforeeditstart_event.md) +- [](api/spreadsheet_beforeaction_event.md) + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {}); + +spreadsheet.events.on("beforeEditStart", function(){ + return false; +}); + +spreadsheet.events.on("beforeAction", function(actionName){ + if (actionName === "setCellValue" || actionName === "setCellStyle") { + return false; + } +}); + +spreadsheet.parse(data); +~~~ + +**相关示例**：[Spreadsheet. 自定义只读模式](https://snippet.dhtmlx.com/8xcursbe) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/data_formatting.md b/i18n/zh/docusaurus-plugin-content-docs/current/data_formatting.md new file mode 100644 index 00000000..f52f8592 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/data_formatting.md @@ -0,0 +1,112 @@ +--- +sidebar_label: 数据格式化 +title: 数据格式化 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解数据格式化的相关内容。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 数据格式化 {#data-formatting} + +## 颜色与样式 {#color-and-style} + +DHTMLX Spreadsheet 的工具栏包含多个用于修改单元格数据样式的按钮区块。 + +![DHTMLX Spreadsheet 工具栏中用于文字颜色、背景色、粗体和斜体的颜色与文字样式按钮](/img/color.png) + +您可以进行以下操作： + +- 使用**文字颜色**按钮的颜色选择器更改**文字颜色** +- 使用**背景颜色**按钮的颜色选择器更改**背景颜色** +- 对文字应用*粗体*、*斜体*和*下划线*样式 +- 对文字应用*删除线*格式 + +## 对齐 {#alignment} + +### 水平对齐 {#horizontal-alignment} + +要水平对齐单元格中的数据，请按以下步骤操作： + +1\. 选择要对齐的一个或多个单元格 + +2\. 选择以下操作之一： + +- 单击工具栏中的"水平对齐"按钮，然后选择*左对齐*、*居中*或*右对齐* + +![DHTMLX Spreadsheet 工具栏中显示左对齐、居中和右对齐选项的水平对齐下拉菜单](/img/align.png) + +- 或通过菜单操作：*格式* -> *水平对齐* -> 选择*左对齐*、*居中*或*右对齐* + +![DHTMLX Spreadsheet 格式菜单中的水平对齐子菜单选项](/img/horizontal_alignment.png) + +### 垂直对齐 {#vertical-alignment} + +要垂直对齐单元格中的数据，请按以下步骤操作： + +1\. 选择要对齐的一个或多个单元格 + +2\. 选择以下操作之一： + +- 单击工具栏中的"垂直对齐"按钮，然后选择*顶部*、*居中*或*底部* + +![DHTMLX Spreadsheet 工具栏中显示顶部、居中和底部选项的垂直对齐下拉菜单](/img/vertical_align.png) + +- 或通过菜单操作：*格式* -> *垂直对齐* -> 选择*顶部*、*居中*或*底部* + +![DHTMLX Spreadsheet 格式菜单中的垂直对齐子菜单选项](/img/vertical_alignment.png) + +### 单元格文字换行 {#wrap-text-in-a-cell} + +您可以通过以下方式对单元格中的文字进行换行： + +1\. 选择要格式化的一个或多个单元格 + +2\. 选择以下操作之一： + +- 单击工具栏中的"文字换行"按钮，然后选择*截断*或*换行* + +![DHTMLX Spreadsheet 工具栏中显示截断和换行选项的文字换行下拉菜单](/img/wrap.png) + +- 或通过菜单操作：*格式* -> *文字换行* -> 选择*截断*或*换行* + +![DHTMLX Spreadsheet 格式菜单中显示截断和换行的文字换行子菜单](/img/text_wrapping.png) + +:::tip +当您更改列宽时，文字换行会自动调整。 +::: + +## 删除样式和值 {#removing-styles-and-values} + +您可以清除单元格值、单元格样式，或同时清除两者。有以下两种方式可供选择： + +1\. 通过工具栏按钮： + +- 选择目标单元格或多个单元格。 +- 使用工具栏中的**清除**按钮。 +- 在下拉列表中选择所需选项： + +![DHTMLX Spreadsheet 工具栏中用于清除值或样式的清除按钮下拉菜单](/img/clear_button.png) + +2\. 通过单元格的上下文菜单： + +- 选择目标单元格或多个单元格。 +- 右键单击选区以调出上下文菜单。 +- 选择**清除**选项，然后在下拉列表中选择所需选项： + +![DHTMLX Spreadsheet 上下文菜单中用于清除值、样式或全部的清除选项](/img/clear_option.png) + +## 单元格样式边框 {#styled-borders-for-cells} + +您可以为单个单元格或一组单元格添加样式边框。 + +### 设置样式边框 {#setting-styled-borders} + +- 选择需要设置样式边框的单元格或一组单元格 +- 单击工具栏中的**边框**按钮，选择所需的边框类型、颜色和样式 + +![DHTMLX Spreadsheet 边框工具栏按钮，显示边框类型、颜色和样式选项](/img/styled_cell_border.png) + +### 移除样式边框 {#removing-styled-borders} + +- 选择需要移除样式边框的单元格或一组单元格 +- 单击工具栏中的**边框**按钮，选择*清除边框*选项 + +![DHTMLX Spreadsheet 边框工具栏按钮，高亮显示清除边框选项](/img/clear_cells_border.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/data_search.md b/i18n/zh/docusaurus-plugin-content-docs/current/data_search.md new file mode 100644 index 00000000..efe458d8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/data_search.md @@ -0,0 +1,14 @@ +--- +sidebar_label: 搜索数据 +title: 搜索数据 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解数据搜索的相关内容。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 搜索数据 {#searching-for-data} + +要打开搜索栏，请使用以下两种方式之一： + +- 将焦点设置到任意单元格，然后按 **Ctrl（Cmd）+ F** +- 或通过菜单操作：*数据* -> *搜索* + +![DHTMLX Spreadsheet 搜索栏，带有用于查找数据的文本输入框](/img/search_data.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/excel_import_export.md b/i18n/zh/docusaurus-plugin-content-docs/current/excel_import_export.md new file mode 100644 index 00000000..a3ab0d99 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/excel_import_export.md @@ -0,0 +1,39 @@ +--- +sidebar_label: Excel 导入/导出 +title: Excel 导入与导出 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解 Excel 导入与导出的相关内容。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# Excel 导入/导出 {#excel-importexport} + +## 从 Excel 导入 {#import-from-excel} + +您可以将 Excel 文件中的数据加载到 Spreadsheet 中。操作步骤如下： + +1\. 单击工具栏中的**导入**按钮，然后选择 *Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet 工具栏中用于导入 Microsoft Excel XLSX 文件的导入按钮](/img/import_xlsx.png) + +或： + +通过菜单操作：*文件 -> 导入为... -> Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet 文件菜单中用于导入 Microsoft Excel XLSX 文件的"导入为"选项](/img/file_import.png) + +2\. 在您的计算机上选择一个 Excel 文件，其内容将导入当前工作表中。 + +## 导出到 Excel {#export-to-excel} + +您可以将 Spreadsheet 中输入的数据导出为 Excel 文件。请按以下步骤操作： + +1\. 单击工具栏中的**导出**按钮： + +![DHTMLX Spreadsheet 工具栏中用于保存为 Microsoft Excel XLSX 格式的导出按钮](/img/export_xlsx.png) + +或： + +通过菜单操作：*文件 -> 下载为... -> Microsoft Excel (.xlsx)* + +![DHTMLX Spreadsheet 文件菜单中用于导出 Microsoft Excel XLSX 文件的"下载为"选项](/img/file_export.png) + +2\. 在您的下载目录中查找包含 Spreadsheet 数据的 Excel 文件。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/filtering_data.md b/i18n/zh/docusaurus-plugin-content-docs/current/filtering_data.md new file mode 100644 index 00000000..332a8c85 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/filtering_data.md @@ -0,0 +1,62 @@ +--- +sidebar_label: 筛选数据 +title: 筛选数据 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解数据筛选的相关内容。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 筛选数据 {#filtering-data} + +您可以对电子表格中的数据进行筛选，以仅显示符合指定条件的记录。 + +要激活筛选，请使用以下两种方式之一： + +- 将焦点设置到单元格或选择一组单元格，然后单击工具栏中的**筛选**按钮 + +![DHTMLX Spreadsheet 工具栏中用于启用数据筛选的筛选按钮](/img/filter_button.png) + +- 将焦点设置到单元格或选择一组单元格，然后通过菜单操作：*数据 -> 筛选* + +![DHTMLX Spreadsheet 数据菜单中用于激活列筛选的筛选选项](/img/filter_menu.png) + +之后，**筛选**图标将出现在选定范围内每个列标题的右侧。 + +## 按条件筛选 {#filtering-by-condition} + +- 单击目标列的**筛选**图标 + +- 选择一个内置比较运算符，例如**大于** + +- 指定筛选条件并单击**应用** + +![DHTMLX Spreadsheet 列筛选下拉菜单，显示"大于"等比较运算符](/img/filter_by_condition.png) + +### 清除筛选 {#clearing-a-filter} + +要清除筛选，请单击列标题中的**筛选**图标，选择_按条件：**无**_，然后单击**应用**。 + +![DHTMLX Spreadsheet 筛选对话框，显示用于清除筛选的"按条件：无"选项](/img/clear_filter_bycondition.png) + +## 按值筛选 {#filtering-by-values} + +- 单击目标列的**筛选**图标 + +- 单击**取消全选**按钮 + +![DHTMLX Spreadsheet 列筛选，显示取消全选按钮和值复选框](/img/unselect_all_button.png) + +- 勾选您想要显示的值的复选框，然后单击**应用** + +### 清除筛选 {#clearing-a-filter-1} + +要清除筛选，请单击列标题中的**筛选**图标，单击**全选**按钮，然后单击**应用**。 + +![DHTMLX Spreadsheet 列筛选对话框，显示用于清除值筛选的全选按钮](/img/clear_filter_by_values.png) + +## 移除筛选 {#removing-filters} + +要禁用筛选，请执行以下操作之一： + +- 单击工具栏中的**筛选**按钮 +- 或通过菜单操作：*数据 -> 筛选* + +列标题上的**筛选**图标将消失，所有隐藏的记录将重新显示。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/formulas_locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/formulas_locale.md new file mode 100644 index 00000000..74adb34f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/formulas_locale.md @@ -0,0 +1,1168 @@ +--- +sidebar_label: 公式的默认语言环境 +title: 公式的默认语言环境 +description: DHTMLX Spreadsheet 公式弹窗的完整默认英语语言环境，包含所有内置公式的参数名称和描述。 +--- + +# 公式的默认语言环境 {#default-locale-for-formulas} + +您可以在 `dhx.i18n.formulas` 对象中找到 Spreadsheet 弹窗的 i18n 语言环境，其中包含公式的描述。完整的默认英语语言环境如下所示。 + +有关如何为公式应用自定义语言环境的说明，请参阅[本地化](localization.md#custom-locale-for-formulas)指南。 + +~~~jsx +const en = { + "SUM": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + "SUMIF": [ + ["Range", "Required. Range to apply criteria to."], + ["Criteria", "Required. Criteria to apply."], + ["Sum_range", "Optional. Range to sum. If omitted, cells in range are summed."] + ], + "SUMIFS": [ + ["Sum_range", "Required. The range to be summed."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "AVERAGE": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "AVERAGEA": [ + ["Value1", "Required. A value or reference to a value that can be evaluated as a number."], + ["Value2", "Optional. A value or reference to a value that can be evaluated as a number."] + ], + "AVERAGEIF": [ + ["Range", "Required. One or more cells, including numbers or names, arrays, or references."], + ["Criteria", "Required. A number, expression, cell reference, or text."], + ["Average_range", "Optional. The cells to average. When omitted, range is used."] + ], + "AVERAGEIFS": [ + ["Avg_rng", "Required. The range to average."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "COUNT": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTA": [ + ["Value1", "Required. An item, cell reference, or range."], + ["Value2", "Optional. An item, cell reference, or range."] + ], + "COUNTIF": [ + ["Range", "Required. The range of cells to count."], + ["Criteria", "Required. The criteria that controls which cells should be counted."] + ], + "COUNTIFS": [ + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MIN": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MINIFS": [ + ["Min_range", "Required. Range of values used to determine minimum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "MAX": [ + ["Number1", "Required. Number, reference to numeric value, or range that contains numeric values."], + ["Number2", "Optional. Number, reference to numeric value, or range that contains numeric values."] + ], + "MAXIFS": [ + ["Max_range", "Required. Range of values used to determine maximum."], + ["Range1", "Required. The first range to evaluate."], + ["Criteria1", "Required. The criteria to use on range1."], + ["Range2", "Optional. The second range to evaluate."], + ["Criteria2", "Optional. The criteria to use on range2."] + ], + "SQRT": [ + ["Number", "Required. The number to get the square root of."] + ], + "POWER": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "LOG": [ + ["Number", "Required. Number for which you want the logarithm."], + ["Base", "Optional. Base of the logarithm. Defaults to 10."] + ], + "EXP": [ + ["Number", "Required. The power that e is raised to."] + ], + "PRODUCT": [ + ["Number1", "Required. The first number or range to multiply."], + ["Number2", "Optional. The second number or range to multiply."] + ], + "SUMPRODUCT": [ + ["Array1", "Required. The first array or range to multiply, then add."], + ["Array2", "Optional. The second array or range to multiply, then add."] + ], + "ABS": [ + ["Number", "Required. The number to get the absolute value of."] + ], + "RAND": [], + "RANDBETWEEN": [ + ["Bottom", "Required. An integer representing the lower value of the range."], + ["Top", "Required. An integer representing the upper value of the range."] + ], + "ROUND": [ + ["Number", "Required. The number to round."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDUP": [ + ["Number", "Required. The number to round up."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "ROUNDDOWN": [ + ["Number", "Required. The number to round down."], + ["Num_digits", "Required. The place at which number should be rounded."] + ], + "INT": [ + ["Number", "Required. The number from which you want an integer."] + ], + "CEILING": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "FLOOR": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "CONCATENATE": [ + ["Text1", "Required. The first text value to join together."], + ["Text2", "Required. The second text value to join together."], + ["Text3", "Optional. The third text value to join together."] + ], + "MID": [ + ["Text", "Required. The text to extract from."], + ["Start_num", "Required. The location of the first character to extract."], + ["Num_chars", "Required. The number of characters to extract."] + ], + "LEFT": [ + ["Text", "Required. The text from which to extract characters."], + ["Num_chars", "Optional. The number of characters to extract, starting on the left side of text. Default = 1."] + ], + "RIGHT": [ + ["Text", "Required. The text from which to extract characters on the right."], + ["Num_chars", "Optional. The number of characters to extract, starting on the right. Optional, default = 1."] + ], + "LOWER": [ + ["Text", "Required. The text that should be converted to lower case."] + ], + "UPPER": [ + ["Text", "Required. The text that should be converted to upper case."] + ], + "PROPER": [ + ["Text", "Required. The text that should be converted to proper case."] + ], + "TRIM": [ + ["Text", "Required. The text from which to remove extra space."] + ], + "LEN": [ + ["Text", "Required. The text for which to calculate length."] + ], + "SEARCH": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. Starting position. Optional, defaults to 1."] + ], + "FIND": [ + ["Find_text", "Required. The substring to find."], + ["Within_text", "Required. The text to search within."], + ["Start_num", "Optional. The starting position in the text to search. Optional, defaults to 1."] + ], + "REPLACE": [ + ["Old_text", "Required. The text to replace."], + ["Start_num", "Required. The starting location in the text to search."], + ["Num_chars", "Required. The number of characters to replace."], + ["New_text", "Required. The text to replace old_text with."] + ], + "SUBSTITUTE": [ + ["Text", "Required. The text to change."], + ["Old_text", "Required. The text to replace."], + ["New_text", "Required. The text to replace with."], + ["Instance", "Optional. The instance to replace. If not supplied, all instances are replaced."] + ], + "NOW": [], + "DATE": [ + ["Year", "Required. Number for year."], + ["Month", "Required. Number for month."], + ["Day", "Required. Number for day."] + ], + "TIME": [ + ["Hour", "Required. The hour for the time you wish to create."], + ["Minute", "Required. The minute for the time you wish to create."], + ["Second", "Required. The second for the time you wish to create."] + ], + "YEAR": [ + ["Date", "Required. A valid Excel date."] + ], + "MONTH": [ + ["Serial_number", "Required. A valid Excel date."] + ], + "DAY": [ + ["Date", "Required. A valid Excel date."] + ], + "HOUR": [ + ["Serial_number", "Required. A valid Excel time."] + ], + "MINUTE": [ + ["Serial_number", "Required. A valid date or time."] + ], + "SECOND": [ + ["Serial_number", "Required. A valid time in a format Excel recognizes."] + ], + "DATEDIF": [ + ["Start_date", "Required. Start date in Excel date serial number format."], + ["End_date", "Required. End date in Excel date serial number format."], + ["Unit", "Required. The time unit to use (years, months, or days)."] + ], + "INDEX": [ + ["Array", "Required. A range of cells, or an array constant."], + ["Row_num", "Required. The row position in the reference or array."], + ["Col_num", "Optional. The column position in the reference or array."], + ["Area_num", "Optional. The range in reference that should be used."] + ], + "XMATCH": [ + ["Lookup_value", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "XLOOKUP": [ + ["Lookup", "Required. The lookup value."], + ["Lookup_array", "Required. The array or range to search."], + ["Return_array", "Required. The array or range to return."], + ["Not_found", "Optional. Value to return if no match found."], + ["Match_mode", "Optional. 0 = exact match (default), -1 = exact match or next smallest, 1 = exact match or next larger, 2 = wildcard match."], + ["Search_mode", "Optional. 1 = search from first (default), -1 = search from last, 2 = binary search ascending, -2 = binary search descending."] + ], + "LOOKUP": [ + ["Lookup_value", "Required. The value to search for."], + ["Lookup_vector", "Required. The one-row, or one-column range to search."], + ["Result_vector", "Optional. The one-row, or one-column range of results."] + ], + "HLOOKUP": [ + ["Lookup_value", "Required. The value to look up."], + ["Table_array", "Required. The table from which to retrieve data."], + ["Row_index", "Required. The row number from which to retrieve data."], + ["Range_lookup", "Optional. A Boolean to indicate exact match or approximate match. Default = TRUE = approximate match."] + ], + "VLOOKUP": [ + ["Lookup_value", "Required. The value to look for in the first column of a table."], + ["Table_array", "Required. The table from which to retrieve a value."], + ["Column_index_num", "Required. The column in the table from which to retrieve a value."], + ["Range_lookup", "Optional. TRUE = approximate match (default). FALSE = exact match."] + ], + "MATCH": [ + ["Lookup_value", "Required. The value to match in lookup_array."], + ["Lookup_array", "Required. A range of cells or an array reference."], + ["Match_type", "Optional. 1 = exact or next smallest (default), 0 = exact match, -1 = exact or next largest."] + ], + "CHOOSE": [ + ["Index_num", "Required. The value to choose. A number between 1 and 254."], + ["Value1", "Required. The first value from which to choose."], + ["Value2", "Optional. The second value from which to choose."] + ], + "ISBLANK": [ + ["Value", "Required. The value to check."] + ], + "ISBINARY": [ + ["Value", "Required. The value to check."] + ], + "ISEVEN": [ + ["Value", "Required. The numeric value to check."] + ], + "ISODD": [ + ["Value", "Required. The numeric value to check."] + ], + "ISNONTEXT": [ + ["Value", "Required. The value to check."] + ], + "ISNUMBER": [ + ["Value", "Required. The value to check."] + ], + "ISTEXT": [ + ["Value", "Required. The value to check."] + ], + "N": [ + ["Value", "Required. The value to convert to a number."] + ], + "IF": [ + ["Logical_test", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."], + ["Value_if_true", "Optional. The value to return when logical_test evaluates to TRUE."], + ["Value_if_false", "Optional. The value to return when logical_test evaluates to FALSE."] + ], + "AND": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "NOT": [ + ["Logical", "Required. A value or logical expression that can be evaluated as TRUE or FALSE."] + ], + "OR": [ + ["Logical1", "Required. The first condition or logical value to evaluate."], + ["Logical2", "Optional. The second condition or logical value to evaluate."] + ], + "FALSE": [], + "TRUE": [], + "ACOS": [ + ["Number", "Required. The value to get the inverse cosine of. The number must be between -1 and 1 inclusive."] + ], + "ACOSH": [ + ["Number", "Required. Any real number equal to or greater than 1."] + ], + "ACOT": [ + ["Number", "Required. Number is the cotangent of the angle you want. This must be a real number."] + ], + "ACOTH": [ + ["Number", "Required. The absolute value of Number must be greater than 1."] + ], + "ADD": [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Required. The second value to sum."] + ], + "ARABIC": [ + ["Roman_text", "Required. The Roman numeral in text that you want to convert."] + ], + "ASIN": [ + ["Number", "Required. The value to get the inverse sine of. The number must be between -1 and 1 inclusive."] + ], + "ASINH": [ + ["Number", "Required. Any real number."] + ], + "ATAN": [ + ["Number", "Required. The value to get the inverse tangent of."] + ], + "ATAN2": [ + ["X_num", "Required. The x coordinate of the input point."], + ["Y_num", "Required. The y coordinate of the input point."] + ], + "ATANH": [ + ["Number", "Required. Any real number between 1 and -1."] + ], + "AVEDEV": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "BASE": [ + ["Number", "Required. The number to convert to a given base."], + ["Radix", "Required. The base to convert to."], + ["Min_length", "Optional. The minimum string length to return, achieved by padding with zeros."] + ], + "BINOMDIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BINOM.INV": [ + ["Trials", "Required. The number of Bernoulli trials."], + ["Probability_s", "Required. The probability of a success on each trial."], + ["Alpha", "Required. The criterion value."] + ], + "BINOM.DIST.RANGE": [ + ["Trials", "Required. The number of independent trials. Must be greater than or equal to 0."], + ["Probability_s", "Required. The probability of success in each trial. Must be greater than or equal to 0 and less than or equal to 1."], + ["Number_s", "Required. The number of successes in trials. Must be greater than or equal to 0 and less than or equal to Trials."], + ["Number_s2", "Optional. If provided, returns the probability that the number of successful trials will fall between Number_s and number_s2. Must be greater than or equal to Number_s and less than or equal to Trials."] + ], + "BINOM.DIST": [ + ["Number_s", "Required. The number of successes."], + ["Trials", "Required. The number of independent trials."], + ["Probability_s", "Required. The probability of success on each trial."], + ["Cumulative", "Required. TRUE = cumulative distribution function, FALSE = probability mass function."] + ], + "BITAND": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITLSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift, if negative shifts bits to the right instead."] + ], + "BITOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "BITRSHIFT": [ + ["Number", "Required. The number to be bit shifted."], + ["Shift_amount", "Required. The amount of bits to shift to the right, if negative shifts bits to the left instead."] + ], + "BITXOR": [ + ["Number1", "Required. A positive decimal number."], + ["Number2", "Required. A positive decimal number."] + ], + "COMBIN": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMBINA": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "COMPLEX": [ + ["Real_num", "Required. The real number."], + ["I_num", "Required. The imaginary number."], + ["Suffix", "Optional. The suffix, either \"i\" or \"j\"."] + ], + "CORREL": [ + ["Array1", "Required. A range of cell values."], + ["Array2", "Required. A second range of cell values."] + ], + "COS": [ + ["Number", "Required. The angle in radians for which you want the cosine."] + ], + "COSH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "COT": [ + ["Number", "Required. The angle provided in radians."] + ], + "COTH": [ + ["Number", "Required."] + ], + "COUNTBLANK": [ + ["Range", "Required. The range in which to count blank cells."] + ], + "COVAR": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.P": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "COVARIANCE.S": [ + ["Array1", "Required. The first cell range of integers."], + ["Array2", "Required. The second cell range of integers."] + ], + "CSC": [ + ["Number", "Required. The angle provided in radians."] + ], + "CSCH": [ + ["Number", "Required."] + ], + "DEC2BIN": [ + ["Number", "Required. The decimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2HEX": [ + ["Number", "Required. The decimal number you want to convert to hexadecimal."], + ["Places", "Optional. Pads the resulting number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DEC2OCT": [ + ["Number", "Required. The decimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting octal number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "DECIMAL": [ + ["Number", "Required. A text string representing a number."], + ["Radix", "Required. The base of the number to be converted, an integer between 2-36."] + ], + "DEGREES": [ + ["Angle", "Required. Angle in radians that you want to convert to degrees."] + ], + "DELTA": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "DEVSQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "DIVIDE": [ + ["Number1", "Required. The number we are dividing."], + ["Number2", "Required. The number by which we divide."] + ], + "EQ": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "ERF": [ + ["Lower_limit", "Required. The lower bound for integrating ERF."], + ["Upper_limit", "Optional. The upper bound for integrating ERF. If omitted, ERF integrates between zero and lower_limit."] + ], + "ERFC": [ + ["X", "Required. The lower bound for integrating ERFC."] + ], + "EVEN": [ + ["Number", "Required. The number to round up to an even integer."] + ], + "FACT": [ + ["Number", "Required. The number to get the factorial of."] + ], + "FACTDOUBLE": [ + ["Number", "Required. A number greater than or equal to -1."] + ], + "FISHER": [ + ["X", "Required. A numeric value for which you want the transformation."] + ], + "FISHERINV": [ + ["Y", "Required. The value for which you want to perform the inverse of the transformation."] + ], + "GAMMA": [ + ["Number", "Required. Returns a number."] + ], + "GCD": [ + ["Number1", "Required. The first number."], + ["Number2", "Optional. The second number."] + ], + "GEOMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "GESTEP": [ + ["Number", "Required. The value to test against step."], + ["Step", "Optional. The threshold value. If you omit a value for step, GESTEP uses zero."] + ], + "GT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "GTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "HARMEAN": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Optional. Second value or reference."] + ], + "HEX2BIN": [ + ["Number", "Required. The hexadecimal number you want to convert to binary."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "HEX2DEC": [ + ["Number", "Required. The hexadecimal number you want to convert to decimal."] + ], + "HEX2OCT": [ + ["Number", "Required. The hexadecimal number you want to convert to octal."], + ["Places", "Optional. Pads the resulting binary number with zeros up to the specified number of digits. If omitted returns the least number of characters required to represent the number."] + ], + "IMABS": [ + ["Inumber", "Required. A complex number."] + ], + "IMAGINARY": [ + ["Inumber", "Required. A complex number."] + ], + "IMCONJUGATE": [ + ["Inumber", "Required. A complex number for which you want the conjugate."] + ], + "IMCOS": [ + ["Inumber", "Required. A complex number for which you want the cosine."] + ], + "IMCOSH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosine."] + ], + "IMCOT": [], + "IMCSC": [ + ["Inumber", "Required. A complex number for which you want the cosecant."] + ], + "IMCSCH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic cosecant."] + ], + "IMDIV": [ + ["Inumber1", "Required. The complex numerator or dividend."], + ["Inumber2", "Required. The complex denominator or divisor."] + ], + "IMEXP": [ + ["Inumber", "Required. A complex number for which you want the exponential."] + ], + "IMLN": [ + ["Inumber", "Required. A complex number for which you want the natural logarithm."] + ], + "IMPOWER": [ + ["Inumber", "Required. A complex number."], + ["Number", "Required. Power to raise number."] + ], + "IMPRODUCT": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMREAL": [ + ["Inumber", "Required. A complex number."] + ], + "IMSEC": [ + ["Inumber", "Required. A complex number for which you want the secant."] + ], + "IMSECH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic secant."] + ], + "IMSIN": [ + ["Inumber", "Required. A complex number for which you want the sine."] + ], + "IMSINH": [ + ["Inumber", "Required. A complex number for which you want the hyperbolic sine."] + ], + "IMSQRT": [ + ["Inumber", "Required. A complex number for which you want the square root."] + ], + "IMSUB": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Required. Complex number 2."] + ], + "IMSUM": [ + ["Inumber1", "Required. Complex number 1."], + ["Inumber2", "Optional. Complex number 2."] + ], + "IMTAN": [ + ["Inumber", "Required. A complex number for which you want the tangent."] + ], + "LARGE": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the largest value."] + ], + "LN": [ + ["Number", "Required. A number to take the natural logarithm of."] + ], + "LOG10": [ + ["Number", "Required. Number for which you want the logarithm."] + ], + "LT": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "LTE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "MEDIAN": [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + "MINUS": [ + ["Number1", "Required. The number from which we subtract."], + ["Number2", "Required. The number by which we subtract."] + ], + "MOD": [ + ["Number", "Required. The number to be divided."], + ["Divisor", "Required. The number to divide with."] + ], + "MROUND": [ + ["Number", "Required. The number that should be rounded."], + ["Significance", "Required. The multiple to use when rounding."] + ], + "MULTINOMIAL": [ + ["Number1, number2, ...", "Required. Number1 is required, subsequent numbers are optional. 1 to 255 values for which you want the multinomial."] + ], + "MULTIPLY": [ + ["Number1", "Required. The number to multiply."], + ["Number2", "Required. The number to multiply by."] + ], + "NE": [ + ["Number1", "Required. First value or reference."], + ["Number2", "Required. Second value or reference."] + ], + "OCT2BIN": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 characters. The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2BIN uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "OCT2DEC": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."] + ], + "OCT2HEX": [ + ["Number", "Required. The octal number you want to convert. Number may not contain more than 10 octal characters (30 bits). The most significant bit of number is the sign bit. The remaining 29 bits are magnitude bits. Negative numbers are represented using two's-complement notation."], + ["Places", "Optional. The number of characters to use. If places is omitted, OCT2HEX uses the minimum number of characters necessary. Places is useful for padding the return value with leading 0s (zeros)."] + ], + "ODD": [ + ["Number", "Required. The number to round up to an odd integer."] + ], + "PERCENTILE": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.INC": [ + ["Array", "Required. Data values."], + ["K", "Required. Number representing kth percentile."] + ], + "PERCENTILE.EXC": [ + ["Array", "Required. Data values."], + ["K", "Required. A value between 0 and 1 that represents the k:th percentile."] + ], + "PERMUT": [ + ["Number", "Required. The total number of items."], + ["Number_chosen", "Required. The number of items in each combination."] + ], + "PI": [], + "POW": [ + ["Number", "Required. Number to raise to a power."], + ["Power", "Required. Power to raise number to (the exponent)."] + ], + "QUARTILE": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.INC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return."] + ], + "QUARTILE.EXC": [ + ["Array", "Required. A reference containing data to analyze."], + ["Quart", "Required. The quartile value to return, 1-3."] + ], + "QUOTIENT": [ + ["Numerator", "Required. The number to be divided."], + ["Denominator", "Required. The number to divide by."] + ], + "RADIANS": [ + ["Angle", "Required. Angle in degrees to convert to radians."] + ], + "ROMAN": [ + ["Number", "Required. Number (in Arabic numeral) you want to convert to Roman numeral."], + ["Form", "Optional. The type of Roman numeral you want."] + ], + "SEC": [ + ["Number", "Required. The angle in radians for which you want the secant."] + ], + "SECH": [], + "SIGN": [ + ["Number", "Required. The number to get the sign of."] + ], + "SIN": [ + ["Number", "Required. The angle in radians for which you want the sine."] + ], + "SINH": [ + ["Number", "Required. The hyperbolic angle."] + ], + "SMALL": [ + ["Array", "Required. An array or range of numeric values."], + ["K", "Required. Position as an integer, where 1 corresponds to the smallest value."] + ], + "SQRTPI": [ + ["Number", "Required. The number by which pi is multiplied."] + ], + "STDEV": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.S": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEV.P": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVP": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STDEVPA": [ + ["Number1", "Required. First number or reference in the sample."], + ["Number2", "Optional. Second number or reference."] + ], + "STEYX": [ + ["Known_y's", "Required. An array or range of dependent data points."], + ["Known_x's", "Required. An array or range of independent data points."] + ], + "SUBTOTAL": [ + ["Function_num", "Required. A number that specifies which function to use in calculating subtotals within a list. See table below for full list."], + ["Ref1", "Required. A named range or reference to subtotal."], + ["Ref2", "Optional. A named range or reference to subtotal."] + ], + "SUMSQ": [ + ["Number1", "Required. The first argument containing numeric values."], + ["Number2", "Optional. The second argument containing numeric values."] + ], + "SUMX2MY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMX2PY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "SUMXMY2": [ + ["Array_x", "Required. The first range or array containing numeric values."], + ["Array_y", "Required. The second range or array containing numeric values."] + ], + "TAN": [ + ["Number", "Required. The angle in radians for which you want the tangent."] + ], + "TANH": [ + ["Number", "Required. Any real number."] + ], + "TRUNC": [ + ["Number", "Required. The number to truncate."], + ["Num_digits", "Optional. The precision of the truncation (default is 0)."] + ], + "VAR": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.S": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VAR.P": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARP": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "VARPA": [ + ["Number1", "Required. First number or reference."], + ["Number2", "Optional. Second number or reference."] + ], + "WEIBULL": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "WEIBULL.DIST": [ + ["X", "Required. The value at which to evaluate the function."], + ["Alpha", "Required. A parameter to the distribution."], + ["Beta", "Required. A parameter to the distribution."], + ["Cumulative", "Required. Determines the form of the function."] + ], + "CHAR": [ + ["Number", "Required. A number between 1 and 255."] + ], + "CLEAN": [ + ["Text", "Required. The text to clean."] + ], + "CODE": [ + ["Text", "Required. The text for which you want a numeric code."] + ], + "EXACT": [ + ["Text1", "Required. The first text string to compare."], + ["Text2", "Required. The second text string to compare."] + ], + "FIXED": [ + ["Number", "Required. The number to round and format."], + ["Decimals", "Optional. Number of decimals to use. Default is 2."], + ["No_commas", "Optional. Suppress commas. TRUE = no commas, FALSE = commas. Default is FALSE."] + ], + "NUMBERVALUE": [ + ["Text", "Required. The text to convert to a number."], + ["Decimal_separator", "Optional. The character for decimal values."], + ["Group_separator", "Optional. The character for grouping by thousands."] + ], + "REGEXEXTRACT": [ + ["Text", "Required. The input text."], + ["Regular_expression", "Required. The first part of text that matches this expression will be returned."] + ], + "REGEXMATCH": [ + ["Text", "Required. The text to be tested against the regular expression."], + ["Regular_expression", "Required. The regular expression to test the text against."] + ], + "REGEXREPLACE": [ + ["Text", "Required. The text, a part of which will be replaced."], + ["Regular_expression", "Required. The regular expression. All matching instances in text will be replaced."], + ["Replacement", "Required. The text which will be inserted into the original text."] + ], + "REPT": [ + ["Text", "Required. The text to repeat."], + ["Number_times", "Required. The number of times to repeat text."] + ], + "T": [ + ["Value", "Required. The value to return as text."] + ], + "JOIN": [ + ["Text1, text2, ...", "Text values you want to combine."] + ], + "ARRAYTOTEXT": [ + ["Array", "Required. The array or range to convert to text."], + ["Format", "Optional. Output format. 0 = concise (default), and 1 = strict."] + ], + "DATEVALUE": [ + ["Date_text", "Required. A valid date in text format."] + ], + "DAYS": [ + ["End_date", "Required. The end date."], + ["Start_date", "Required. The start date."] + ], + "DAYS360": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Method", "Optional. Day count method. FALSE (default) = US method, TRUE = European method."] + ], + "EDATE": [ + ["Start_date", "Required. Start date as a valid Excel date."], + ["Months", "Required. Number of months before or after start_date."] + ], + "EOMONTH": [ + ["Start_date", "Required. A date that represents the start date in a valid Excel serial number format."], + ["Months", "Required. The number of months before or after start_date."] + ], + "ISOWEEKNUM": [ + ["Date", "Required. A valid Excel date in serial number format."] + ], + "NETWORKDAYS": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Holidays", "Optional. A list of non-work days as dates."] + ], + "NETWORKDAYS.INTL": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A reference to dates that should be considered non-work days."] + ], + "TIMEVALUE": [ + ["Time_text", "Required. A date and/or time in a text format recognized by Excel."] + ], + "WEEKNUM": [ + ["Serial_num", "Required. A valid Excel date in serial number format."], + ["Return_type", "Optional. The day the week begins. Default is 1."] + ], + "WEEKDAY": [ + ["Serial_number", "Required. The date for which you want to get the day of week."], + ["Return_type", "Optional. A number representing day of week mapping scheme. Default is 1."] + ], + "WORKDAY": [ + ["Start_date", "Required. The date from which to start."], + ["Days", "Required. The working days before or after start_date."], + ["Holidays", "Optional. A list dates that should be considered non-work days."] + ], + "WORKDAY.INTL": [ + ["Start_date", "Required. The start date."], + ["Days", "Required. The end date."], + ["Weekend", "Optional. Setting for which days of the week should be considered weekends."], + ["Holidays", "Optional. A list of one or more dates that should be considered non-work days."] + ], + "YEARFRAC": [ + ["Start_date", "Required. The start date."], + ["End_date", "Required. The end date."], + ["Basis", "Optional. The type of day count basis to use (see below)."] + ], + "ACCRINT": [ + ["Id", "Required. Issue date of the security."], + ["Fd", "Required. First interest date of security."], + ["Sd", "Required. Settlement date of security."], + ["Rate", "Required. Interest rate of security."], + ["Par", "Required. Par value of security."], + ["Freq", "Required. Coupon payments per year (annual = 1, semiannual = 2; quarterly = 4)."], + ["Basis", "Optional. Day count basis (see below, default = 0)."], + ["Calc", "Optional. Calculation method (see below, default = TRUE)."] + ], + "PMT": [ + ["Rate", "Required. The interest rate for the loan."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all loan payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0 (zero)."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "FV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The total number of payment periods."], + ["Pmt", "Required. The payment made each period. Must be entered as a negative number."], + ["Pv", "Optional. The present value of future payments. If omitted, assumed to be zero. Must be entered as a negative number."], + ["Type", "Optional. When payments are due. 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "DB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Month", "Optional. Number of months in the first year. Defaults to 12."] + ], + "DDB": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."], + ["Factor", "Optional. Rate at which the balance declines. If omitted, defaults to 2."] + ], + "DOLLAR": [ + ["Number", "Required. The number to convert."], + ["Decimals", "Required. The number of digits to the right of the decimal point. Default is 2."] + ], + "DOLLARDE": [ + ["Fractional_dollar", "Required. Dollar component in special fractional notation."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "DOLLARFR": [ + ["Decimal_dollar", "Required. Pricing as a normal decimal number."], + ["Fraction", "Required. The denominator in the fractional unit. 8 = 1/8, 16 = 1/16, 32 = 1/32, etc."] + ], + "EFFECT": [ + ["Nominal_rate", "Required. The nominal or stated interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "FVSCHEDULE": [ + ["Principal", "Required. The initial investment sum."], + ["Schedule", "Required. Schedule of interest rates, provided as range or array."] + ], + "IRR": [ + ["Values", "Required. Array or reference to cells that contain values."], + ["Guess", "Optional. An estimate for expected IRR. Default is .1 (10%)."] + ], + "IPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payment periods."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "ISPMT": [ + ["Rate", "Required. Interest rate."], + ["Per", "Required. Period (starts with zero, not 1)."], + ["Nper", "Required. Number of periods."], + ["Pv", "Required. Present value."] + ], + "NPV": [ + ["Rate", "Required. Discount rate over one period."], + ["Value1", "Required. First value(s) representing cash flows."], + ["Value2", "Optional. Second value(s) representing cash flows."] + ], + "NOMINAL": [ + ["Effect_rate", "Required. The effective annual interest rate."], + ["Npery", "Required. Number of compounding periods per year."] + ], + "NPER": [ + ["Rate", "Required. The interest rate per period."], + ["Pmt", "Required. The payment made each period."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The future value, or a cash balance you want after the last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PDURATION": [ + ["Rate", "Required. Interest rate per period."], + ["Pv", "Required. Present value of the investment."], + ["Fv", "Required. Future value of the investment."] + ], + "PPMT": [ + ["Rate", "Required. The interest rate per period."], + ["Per", "Required. The payment period of interest."], + ["Nper", "Required. The total number of payments for the loan."], + ["Pv", "Required. The present value, or total value of all payments now."], + ["Fv", "Optional. The cash balance desired after last payment is made. Defaults to 0."], + ["Type", "Optional. When payments are due. 0 = end of period. 1 = beginning of period. Default is 0."] + ], + "PV": [ + ["Rate", "Required. The interest rate per period."], + ["Nper", "Required. The number of payment periods."], + ["Pmt", "Required. The payment made each period."], + ["Fv", "Optional. Future value. If omitted, defaults to zero."], + ["Type", "Optional. Payment type, 0 = end of period, 1 = beginning of period. Default is 0."] + ], + "SYD": [ + ["Cost", "Required. Initial cost of asset."], + ["Salvage", "Required. Asset value at the end of the depreciation."], + ["Life", "Required. Periods over which asset is depreciated."], + ["Period", "Required. Period to calculation depreciation for."] + ], + "TBILLPRICE": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Discount", "Required. The discount rate for the security."] + ], + "TBILLYIELD": [ + ["Settlement", "Required. Settlement date of the security."], + ["Maturity", "Required. Maturity date of the security."], + ["Price", "Required. Price per $100."] + ], + "UNIQUE": [ + ["Array", "Required. Range or array from which to extract unique values."], + ["By_col", "Optional. How to compare and extract. By row = FALSE (default); by column = TRUE."], + ["Exactly_once", "Optional. TRUE = values that occur once, FALSE = all unique values (default)."] + ], + "RANDARRAY": [ + ["Rows", "Optional. Row count. Default = 1."], + ["Columns", "Optional. Column count. Default = 1."], + ["Min", "Optional. Minimum value. Default = 0."], + ["Max", "Optional. Maximum value. Default = 1."], + ["Integer", "Optional. Whole numbers. Boolean, TRUE or FALSE. Default = FALSE."] + ], + "TOROW": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Control to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TOCOL": [ + ["Array", "Required. The array to transform."], + ["Ignore", "Optional. Setting to ignore blanks and errors."], + ["Scan_by_column", "Optional. Scan array by column. TRUE = by column, FALSE = by row (default)."] + ], + "TEXTSPLIT": [ + ["Text", "Required. The text string to split."], + ["Col_delimiter", "Required. The character(s) to delimit columns."], + ["Row_delimiter", "Optional. The character(s) to delimit rows."], + ["Ignore_empty", "Optional. Ignore empty values. TRUE = ignore, FALSE = preserve. Default is FALSE."], + ["Match_mode", "Optional. Case-sensitivity. 0 = enabled, 1 = disabled. Default is 0."], + ["Pad_with", "Optional. Value to pad missing values in 2d arrays."] + ], + "WRAPROWS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each row."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "WRAPCOLS": [ + ["Vector", "Required. The array or range to wrap."], + ["Wrap_count", "Required. Max values in each column."], + ["Pad_with", "Optional. Value to use for unfilled places."] + ], + "TAKE": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to return as an integer."], + ["Columns", "Optional. Number of columns to return as an integer."] + ], + "DROP": [ + ["Array", "Required. The source array or range."], + ["Rows", "Optional. Number of rows to drop."], + ["Columns", "Optional. Number of columns to drop."] + ], + "SEQUENCE": [ + ["Rows", "Required. Number of rows to return."], + ["Columns", "Optional. Number of columns to return."], + ["Start", "Optional. Starting value (defaults to 1)."], + ["Step", "Optional. Increment between each value (defaults to 1)."] + ], + "CHOOSEROWS": [ + ["Array", "Required. The array to extract rows from."], + ["Row_num1", "Required. The numeric index of the first row to return."], + ["Row_num2", "Optional. The numeric index of the second row to return."] + ], + "CHOOSECOLS": [ + ["Array", "Required. The array to extract columns from."], + ["Col_num1", "Required. The numeric index of the first column to return."], + ["Col_num2", "Optional. The numeric index of the second column to return."] + ], + "EXPAND": [ + ["Array", "Required. The array to expand."], + ["Rows", "Optional. The final number of rows. Default is total rows."], + ["Columns", "Optional. The final number of columns. Default is total columns."], + ["Pad_with", "Optional. Value to use for new cells. Default is #N/A."] + ], + "SORT": [ + ["Array", "Required. Range or array to sort."], + ["Sort_index", "Optional. Column index to use for sorting. Default is 1."], + ["Sort_order", "Optional. 1 = Ascending, -1 = Descending. Default is ascending order."], + ["By_col", "Optional. TRUE = sort by column. FALSE = sort by row. Default is FALSE."] + ], + "SORTBY": [ + ["Array", "Required. Range or array to sort."], + ["By_array", "Required. Range or array to sort by."], + ["Sort_order", "Optional. Sort order. 1 = ascending (default), -1 = descending."], + ["Array/order", "Optional. Additional array and sort order pairs."] + ] +}; +~~~ + +**相关示例**：[Spreadsheet. 本地化](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/functions.md b/i18n/zh/docusaurus-plugin-content-docs/current/functions.md new file mode 100644 index 00000000..536ab206 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/functions.md @@ -0,0 +1,1476 @@ +--- +sidebar_label: 公式与函数 +title: 公式与函数 +description: 您可以在本文档中了解 DHTMLX JavaScript Spreadsheet 库的公式与函数。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 公式与函数 {#formulas-and-functions} + +从 v4.0 起，DHTMLX Spreadsheet 软件包内置了一组预定义公式，可用于对字符串和数字进行各类计算。这些公式与 Excel 和 Google Sheets 兼容。 + +:::note +公式中的小写字母会自动转换为大写字母。 +::: + + + +## 函数 {#functions} + +以下列出了所有可用函数及其详细说明。 + +### 布尔运算符 {#boolean-operators} + +您可以使用逻辑表达式比较两个值，表达式返回 TRUE 或 FALSE。 + +| Operator | Example | Description | +| :------- | :------------ | :------------------------------------------------------------------------------------------------------- | +| = | =A1=B1 | 若单元格 A1 的值等于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | +| <> | =A1<>B1 | 若单元格 A1 的值不等于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | +| > | =A1>B1 | 若单元格 A1 的值大于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | +| < | =A1<B1 | 若单元格 A1 的值小于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | +| >= | =A1>=B1 | 若单元格 A1 的值大于或等于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | +| <= | =A1<=B1 | 若单元格 A1 的值小于或等于单元格 B1 的值，则返回 TRUE；否则返回 FALSE。 | + +请在我们的[在线示例工具](https://snippet.dhtmlx.com/wux2b35b)中查看示例。 + +### 日期函数 {#date-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionFormulaDescription
DATE=DATE(year,month,day)将年、月、日三个独立值合并并返回一个日期。
DATEDIF=DATEDIF(start_date,end_date,unit)返回两个日期之间的天数、月数或年数。
unit 参数用于指定返回信息的类型。
DATEVALUE=DATEVALUE(date_text)将以文本形式存储的日期转换为序列号。
DAY=DAY(date)从指定日期中返回该月中的日期数，范围为 1 到 31。
DAYS=DAYS(end_date, start_date)返回两个日期之间的天数。
DAYS360=DAYS360(start_date,end_date,[method]])基于 360 天年（即 12 个 30 天月）计算两个日期之间的天数。
EDATE=EDATE(start_date, months)返回距起始日期之前或之后 n 个月的同一天日期。
EOMONTH=EOMONTH(start_date, months)返回指定起始日期之前或之后 n 个月的最后一天日期。
ISOWEEKNUM=ISOWEEKNUM(date)返回指定日期在当年中对应的 ISO 周编号。
MONTH=MONTH(date)返回指定日期所在的月份。
NETWORKDAYS=NETWORKDAYS(start_date, end_date, [holidays])返回两个日期之间完整工作日的天数。工作日不包括周末以及 holidays 中指定的任何日期。
NETWORKDAYSINTL=NETWORKDAYSINTL(start_date, end_date, [weekend], [holidays])返回两个日期之间完整工作日的天数。
可选的 weekend 参数用于指定一周中哪些天视为周末。
周末和节假日不计入工作日。
NOW=NOW()返回当前日期。
TIMEVALUE
added in v4.3		=TIMEVALUE(time_text)返回文本字符串所表示时间的十进制数值。
WEEKDAY=WEEKDAY(date,[return_type])返回指定日期对应的星期几。
return_type 参数用于指定将一周的哪一天视为第一天。
WEEKNUM=WEEKNUM(date,[return_type])返回指定日期所在的周编号。
return_type 参数用于指定将一周的哪一天视为第一天。
WORKDAY=WORKDAY(start_date, days, [holidays])返回距起始日期之前或之后 n 个工作日的最近工作日日期。
工作日不包括周末以及 holidays 中指定的任何日期。
WORKDAYINTL=WORKDAYINTL(start_date, days, [weekend], [holidays])返回距起始日期之前或之后 n 个工作日的最近工作日日期。
可选的 weekend 参数用于指定一周中哪些天视为周末。
周末和节假日不计入工作日。
YEAR=YEAR(date)返回指定日期的年份。
YEARFRAC=YEARFRAC(start_date, end_date, [basis])返回指定日期的年份。
可选的 basis 参数用于指定日期计算基准类型。
+
+ +请在我们的[在线示例工具](https://snippet.dhtmlx.com/wux2b35b)中查看示例。 +### 财务函数 {#financial-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
ACCRINT =ACCRINT(issue, id, sd, rate, par, frequency, [basis], [calc_method]),

where:
  • issue - the issue date of the security;
  • id - the security's first interest date;
  • sd - the security's settlement date;
  • rate - the security's annual coupon rate;
  • par - the security's par value, $1,000 by default;
  • frequency - the number of coupon payments per year (1 for annual payments);
  • basis - optional, the type of day count basis to use;
  • calc_method - optional, the way to calculate the total accrued interest when the date of settlement is later than the date of first interest (0 or 1(default)).
返回定期付息证券的应计利息。
BINOM.DIST
added in v4.3		=BINOM.DIST(number_s, trials, probability_s, cumulative),

where:
  • number_s - the number of successes in trials;
  • trials - the number of independent trials;
  • probability_s - the probability of success on each trial;
  • cumulative - if TRUE, then BINOM.DIST returns the cumulative distribution function; if FALSE (use 0), it returns the probability mass function.
返回单项二项分布的概率值。
BINOM.DIST.RANGE
added in v4.3		=BINOM.DIST.RANGE(trials, probability_s, number_s, [number_s2]),

where:
  • trials - the number of independent trials (must be ≥ 0);
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • number_s - the number of successes in trials (must be ≥ 0 and ≤ trials);
  • number_s2 - optional. If provided, returns the probability that the number of successful trials will fall between number_s and number_s2
    ([number_s2] must be ≥ number_s and ≤ trials).
使用二项分布返回试验结果的概率。
BINOM.INV
added in v4.3		=BINOM.INV(trials, probability_s, alpha),

where:
  • trials - the number of Bernoulli trials;
  • probability_s - the probability of success in each trial (must be ≥ 0 and ≤ 1);
  • alpha - the criterion value (must be ≥ 0 and ≤ 1);
返回使累积二项分布大于或等于临界值的最小值。
BITLSHIFT
added in v4.3		=BITLSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0
  • shift_amount - the amount of bits to shift, if negative, shifts bits to the right instead
返回向左移动指定位数后的数字。
BITOR
added in v4.3		=BITOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
返回表示两个数字按位 OR 运算结果的十进制数。
BITRSHIFT
added in v4.3		=BITRSHIFT(number, shift_amount),

where:
  • number - the number to be shifted (must be an integer greater than or equal to 0);
  • shift_amount - the amount of bits to shift, if negative shifts bits to the left instead;
返回向右移动指定位数后的数字。
BITXOR
added in v4.3		=BITXOR(number1, number2),

where:
  • number1 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
  • number2 - a decimal number (must be greater than or equal to 0 and no larger than 2^48 - 1);
返回表示两个数字按位 XOR 运算结果的十进制数。
COMPLEX
added in v4.3		=COMPLEX(real_num, i_num, [suffix]),

where:
  • real_num - the real coefficient of the complex number;
  • i_num - the imaginary coefficient of the complex number;
  • suffix - optional ("i" by default) - the suffix for the imaginary component of the complex number;
    (must be lowercase "i" or "j") .
将实部系数和虚部系数转换为 x + yi 或 x + yj 形式的复数。
CORREL
added in v4.3		=CORREL(array1, array2),

where:
  • array1 - a range of cell values;
  • array2 - a second range of cell values;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
返回两个单元格区域的相关系数。
COVAR
added in v4.3		=COVAR(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
返回协方差，即两个数据集中每对数据点偏差乘积的平均值。
COVARIANCE.P
added in v4.3		=COVARIANCE.P(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
返回总体协方差，即两个数据集中每对数据点偏差乘积的平均值。
COVARIANCE.S
added in v4.3		=COVARIANCE.S(array1, array2),

where:
  • array1 - The first cell range of integers;
  • array2 - The second cell range of integers;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included. The arrays must have equal number of data points.
返回样本协方差，即两个数据集中每对数据点偏差乘积的平均值。
DB=DB(cost, salvage, life, period, [month]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • month - optional, the number of months in the first year, 12 by default.
使用固定余额递减法计算指定期间内资产的折旧值。
DDB=DDB(cost, salvage, life, period, [factor]),

where:
  • cost - the initial cost of the asset;
  • salvage - the value of the asset at the end of the depreciation;
  • life - the number of periods over which the asset is being depreciated;
  • period - the period to calculate depreciation for;
  • factor - optional, the rate at which the balance declines, 2 (the double-declining balance method) by default
使用双倍余额递减法或其他指定方法计算指定期间内资产的折旧值。
DEC2BIN
added in v4.3		=DEC2BIN(number),

where:
  • number - the decimal integer you want to convert (must be greater than -512 but less than 511);
将十进制数转换为二进制数。
DEC2HEX
added in v4.3		=DEC2HEX(number),

where:
  • number - the decimal integer you want to convert (must be greater than -549755813888 but less than 549755813887);
将十进制数转换为十六进制数。
DEC2OCT
added in v4.3		=DEC2OCT(number),

where:
  • number - the decimal integer you want to convert (must be greater than -536870912 but less than 536870911);
将十进制数转换为八进制数。
DELTA
added in v4.3		=DELTA(number1, [number2]),

where:
  • number1 - the first number;
  • number2 - optional, the second number. If omitted, number2 is assumed to be zero.
测试两个数字是否相等。若 number1 = number2 则返回 1；否则返回 0。
DEVSQ
added in v4.3		=DEVSQ(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the sum of squared deviations;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
返回数据点与其样本均值之间偏差的平方和。
DOLLARDE=DOLLARDE(fractional_dollar, fraction)将以整数部分和分数部分表示的美元价格转换为以小数表示的美元价格。
DOLLARFR=DOLLARFR(decimal_dollar, fraction)将十进制数表示的美元价格转换为分数形式的美元价格。
EFFECT=EFFECT(nominal_rate, npery)

nominal_rate must be >= 0, npery must be > 1.		根据给定的名义年利率和每年的复利计算期数，返回有效年利率。
仅适用于数值。
ERF
added in v4.3		=ERF(lower_limit, [upper_limit]),

where:
  • lower_limit - the lower bound for integrating ERF;
  • upper_limit - the upper bound for integrating ERF. If omitted, ERF integrates between 0 and lower_limit.
返回在 lower_limit 与 upper_limit 之间积分的误差函数值。
ERFC
added in v4.3		=ERFC(x),

where:
  • x - the lower bound for integrating ERFC
返回在 x 到无穷大之间积分的互补误差函数值。
EXP
added in v4.3		=EXP(number),

where:
  • number - the power that e is raised to
返回常数 e（等于 2.71828182845904）的指定次幂的值。
FISHER
added in v4.3		=FISHER(x),

where:
  • x - the value for which you want to calculate the transformation
计算给定值的 Fisher 变换。
FISHERINV
added in v4.3		=FISHERINV(y),

where:
  • y - the value for which you want to perform the inverse of the transformation
计算 Fisher 变换的反变换，返回介于 -1 与 +1 之间的值。
FV=FV(rate, nper, pmt, [pv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period;
  • pv - optional, the present value, or the lump-sum amount that a series of future payments is worth right now, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
计算投资的终值。
FVSCHEDULE=FVSCHEDULE(principal, schedule),

where:
  • principal - the present value;
  • schedule - an array of interest rates to apply. The values in the array can be numbers or blank cells; any other value produces the error value. Blank cells are taken as zeros.
返回初始本金（即现值）在应用一系列复利利率后的终值。
GAMMA
added in v4.3		=GAMMA(number)

+ If Number is a negative integer or 0, GAMMA returns the #Error value.		返回 Gamma 函数的值。
GEOMEAN
added in v4.3		=GEOMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
返回一组正数数组或区域的几何平均值。
GESTEP
added in v4.3		=GESTEP(number, [step])

where:
  • number - the value to test against step;
  • step - optional, the threshold value. If you omit a value for step, GESTEP uses zero;
若 number ≥ step 则返回 1；否则返回 0。
HARMEAN
added in v4.3		=HARMEAN(number1, [number2], ...)

where:
  • number1, number2,... - from 1 to 255 arguments for which you want to calculate the mean;

    • Text, logical values, or empty cells are ignored. Cells with zero values are included.
返回数据集的调和平均值。
HEX2BIN
added in v4.3		=HEX2BIN(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
将十六进制数转换为二进制数。
HEX2DEC
added in v4.3		=HEX2DEC(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
将十六进制数转换为十进制数。
HEX2OCT
added in v4.3		=HEX2OCT(number)

where:
  • number - the hexadecimal number you want to convert. Number can't contain more than 10 characters;
将十六进制数转换为八进制数。
IMABS
added in v4.3		=IMABS(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的绝对值。
IMAGINARY
added in v4.3		=IMAGINARY(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的虚部系数。
IMCONJUGATE
added in v4.3		=IMCONJUGATE(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的共轭复数。
IMCOS
added in v4.3		=IMCOS(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的余弦值。
IMCOSH
added in v4.3		=IMCOSH(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的双曲余弦值。
IMCOT
added in v4.3		=IMCOT(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的余切值。
IMCSC
added in v4.3		=IMCSC(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的余割值。
IMCSCH
added in v4.3		=IMCSCH(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的双曲余割值。
IMDIV
added in v4.3		=IMDIV(inumber1, inumber2)

where:
  • inumber1 - the complex numerator or dividend
  • inumber2 - the complex denominator or divisor
返回 x + yi 或 x + yj 格式两个复数的商。
IMEXP
added in v4.3		=IMEXP(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的指数值。
IMLN
added in v4.3		=IMLN(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的自然对数值。
IMPOWER
added in v4.3		=IMPOWER(inumber, number)

where:
  • inumber - a complex number
  • number - the power to which you want to raise the complex number
返回以 x + yi 或 x + yj 文本格式表示的复数的指定次幂。
IMPRODUCT
added in v4.3		=IMPRODUCT(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to multiply
返回 x + yi 或 x + yj 格式的 1 至 255 个复数的乘积。
IMREAL
added in v4.3		=IMREAL(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的实部系数。
IMSEC
added in v4.3		=IMSEC(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的正割值。
IMSECH
added in v4.3		=IMSECH(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的双曲正割值。
IMSIN
added in v4.3		=IMSIN(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的正弦值。
IMSINH
added in v4.3		=IMSINH(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的双曲正弦值。
IMSQRT
added in v4.3		=IMSQRT(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的平方根。
IMSUB
added in v4.3		=IMSUB(inumber1, inumber2)

where:
  • inumber1 - a complex number from which to subtract inumber2;
  • inumber2 - the complex number to subtract from inumber1
返回 x + yi 或 x + yj 格式两个复数的差。
IMSUM
added in v4.3		=IMSUB(inumber1, [inumber2], ...)

where:
  • inumber1, inumber2,... - from 1 to 255 complex numbers to add
返回 x + yi 或 x + yj 格式两个或多个复数的和。
IMTAN
added in v4.3		=IMTAN(inumber)

where:
  • inumber - a complex number
返回 x + yi 或 x + yj 格式复数的正切值。
IPMT=IPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
返回基于定期、固定付款及固定利率的投资在给定期间内的利息偿还额。
IRR=IRR(values, [guess]),

where:
  • values - an array or reference to cells that contain values. The array must contain at least one positive value and one negative value;
  • guess - optional, an estimate for expected IRR, .1 (=10%) by default.
返回一系列定期现金流的内部收益率（IRR）。
ISPMT=ISPMT(rate, per, nper, pv),

where:
  • rate - the interest rate for the investment. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment periods for the investment. For monthly payments, nper=nper*12;
  • pv - the present value of the investment. For a loan, pv is the loan amount.
计算等额本金贷款（或投资）在指定期间内支付（或收取）的利息。
LARGE
added in v4.3		=LARGE(array, k),

where:
  • array - the array or range of data for which you want to determine the k-th largest value;
  • k - the position (from the largest) in the array or cell range of data to return.
返回数组中第 k 个最大值。
MEDIAN
added in v4.3		=MEDIAN(number1, [number2], ...),

where:
  • number1, number2,... - from 1 to 255 numbers for which you want to calculate the median;
返回给定数字的中位数。
NOMINAL=NOMINAL(effect_rate, npery),

effect_rate must be >= 0, npery must be > 1. 		根据给定的有效利率和每年的复利计算期数，返回名义年利率。
NPER=NPER(rate,pmt,pv,[fv],[type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pmt - the payment made each period;
  • pv - the present value, or the lump-sum amount that a series of future payments is worth right now;
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
返回基于定期、固定付款及固定利率的投资的付款期数。
NPV=NPV(rate,value1,[value2],...),

where:
  • rate - the rate of discount over one year;
  • value1, value2,... - from 1 to 254 values representing cash flows (future payments and income).
    Empty cells, logical values, text, or error values are ignored.
使用折现率及一系列未来支出（负值）和收益（正值）计算投资的净现值。
OCT2BIN
added in v4.3		=OCT2BIN(number),

where:
  • number - the octal number you want to convert. It can't contain more than 10 characters;
将八进制数转换为二进制数。
OCT2DEC
added in v4.3		=OCT2DEC(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
将八进制数转换为十进制数。
OCT2HEX
added in v4.3		=OCT2HEX(number),

where:
  • number - the octal number you want to convert. Number may not contain more than 10 octal characters (30 bits)
将八进制数转换为十六进制数。
PDURATION=PDURATION(rate, pv, fv),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • pv - the present value of the investment;
  • fv - the desired future value of the investment.

All arguments must be positive values.		返回投资达到指定价值所需的期数。
PERCENTILE
added in v4.3		=PERCENTILE(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
返回区域中数值的第 k 个百分位数。
PERCENTILE.EXC
added in v4.3		=PERCENTILE.EXC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, exclusive.
返回区域中数值的第 k 个百分位数。
PERCENTILE.INC
added in v4.3		=PERCENTILE.INC(array, k),

where:
  • array - an array of data values;
  • k - the percentile value between 0 and 1, inclusive.
返回区域中数值的第 k 个百分位数。
PERMUT
added in v4.3		=PERMUT(number, number_chosen),

where:
  • number - the total number of items;
  • number_chosen - the number of items in each combination.
返回给定数量元素的排列数。
PMT=PMT(rate, nper, pv, [fv], [type]),

where:
  • rate - the interest rate for the loan. For monthly payments, rate = rate/12;
  • nper - the total number of months of payments for the loan. For monthly payments, nper=nper*12;
  • pv - the present value (or the current total amount of loan);
  • fv - optional, the future value, 0 by default;
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
根据固定付款额和固定利率计算贷款的每月还款额。
PPMT=PPMT(rate, per, nper, pv, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • per - the period for which you want to find the interest and must be in the range between 1 and nper;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pv - the present value - the total amount that a series of future payments is worth now;
  • fv - the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
返回基于定期、固定付款及固定利率的投资在指定期间内的本金偿还额。
PV=PV(rate, nper, pmt, [fv], [type]),

where:
  • rate - the interest rate per period. For monthly payments, rate = rate/12;
  • nper - the total number of payment years in an annuity. For monthly payments, nper=nper*12;
  • pmt - the payment made each period. If pmt is omitted, you must include the fv argument;
  • fv - optional, the desired future value or a cash balance.
  • type - optional, 0(default) - the payments are due at the end of the period, 1 - at the beginning of the period.
返回基于固定利率的贷款或投资的现值。
QUARTILE
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
返回数据集的四分位数。
QUARTILE.EXC
added in v4.3		=QUARTILE(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (1-3).
根据 0 到 1 之间（不含端点）的百分位值，返回数据集的四分位数。
QUARTILE.INC
added in v4.3		=QUARTILE.INC(array, quart),

where:
  • array - the array or cell range of numeric values;
  • quart - indicates which value to return (0-4).
根据 0 到 1 之间（含端点）的百分位值，返回数据集的四分位数。
SIGN
added in v4.3		=SIGN(number),

where:
  • number - any real number
返回数字的符号。若数字为正数则返回 1，若为 0 则返回 0，若为负数则返回 -1。
SMALL
added in v4.3		=SMALL(array, k),

where:
  • array - an array or range of numeric values;
  • k - the position (from 1 - the smallest value) in the data set.
返回数据集中按位置排列的第 k 个最小值。
STEYX
added in v4.3		=STEYX(known_y's, known_x's),

where:
  • known_y's - an array or range of dependent data points;
  • known_x's - an array or range of independent data points.

Text, logical values, or empty cells are ignored. Zero values are included.		返回回归中每个 x 对应的预测 y 值的标准误差。
SYD
added in v4.3		=SYD(cost, salvage, life, per),

where:
  • cost - the initial cost of the asset;
  • salvage - the asset value at the end of the depreciation;
  • life - the number of periods over which the asset is depreciated;
  • per - the period and must use the same units as life.
返回资产在指定期间内按年数总和法计算的折旧值。
TBILLPRICE
added in v4.3		=TBILLPRICE(settlement, maturity, discount),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • discount - the Treasury bill's percentage discount rate.
返回国库券每 $100 面值的价格。
TBILLYIELD
added in v4.3		=TBILLYIELD(settlement, maturity, pr),

where:
  • settlement - the settlement date of the Treasury bill;
  • maturity - the maturity date of the Treasury bill;
  • pr - the Treasury bill's price per $100 face value.
返回国库券的收益率。
WEIBULL
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
返回威布尔分布。
WEIBULL.DIST
added in v4.3		=WEIBULL(x, alpha, beta, cumulative),

where:
  • x - the value at which the function must be calculated (must be ≥ 0);
  • alpha - the alpha parameter to the distribution (must be > 0);
  • beta - the beta parameter to the distribution (must be > 0);
  • cumulative - the logical (true/false) argument which defines the type of distribution to be used. If True - Weibull cumulative distribution function, if False - Weibull probability density function
返回威布尔分布。
+ +请在我们的[代码片段工具](https://snippet.dhtmlx.com/wux2b35b)中查看示例。 +### 信息函数 {#information-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
ISBINARY=ISBINARY(value)如果值为二进制，则返回 TRUE；否则返回 FALSE。
ISBLANK=ISBLANK(A1)如果单元格为空，则返回 TRUE；否则返回 FALSE。
ISEVEN=ISEVEN(number)如果数字为偶数，则返回 TRUE；如果数字为奇数，则返回 FALSE。
仅适用于整数。
ISNONTEXT=ISNONTEXT(value)如果单元格包含文本以外的任何值，则返回 TRUE；否则返回 FALSE。
ISNUMBER=ISNUMBER(value)如果单元格包含数字，则返回 TRUE；否则返回 FALSE。
ISODD=ISODD(number)如果数字为奇数，则返回 TRUE；如果数字为偶数，则返回 FALSE。
仅适用于整数。
ISTEXT=ISTEXT(value)如果值为文本，则返回 TRUE；否则返回 FALSE。
N=N(value)返回转换为数字的值。
+
+ +在我们的[示例工具](https://snippet.dhtmlx.com/wux2b35b)中查看示例。 + +### 查找函数 {#lookup-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
HLOOKUP
added in v4.3		=HLOOKUP(lookup_value, table_array, row_index, [range_lookup]),

where:
  • lookup_value - the value to search for;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the row number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
在水平表格中查找某个值
INDEX
added in v4.3		=INDEX(array, row_num, [column_num]),

where:
  • array - a range of cells or an array constant;
  • row_num - the row position in the reference or array;
  • column_num - optional, the column position in the reference or array.
返回区域或数组中指定位置的值。
LOOKUP
added in v4.3		=LOOKUP(lookup_value, lookup_vector, [result_vector]),

where:
  • lookup_value - the value to search for;
  • lookup_vector - the one-row, or one-column range to search;
  • result_vector - optional, the one-row, or one-column range of results.
在单列或单行区域中查找某个值，并返回另一个单列或单行区域中相同位置的值。
MATCH
added in v4.3		=MATCH(lookup_value, lookup_array, [match_type]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_type - optional (1 by default):
    1- finds the largest value that is less than or equal to lookup_value
    0 - finds the value that is exactly equal to lookup_value
    -1 - finds the smallest value that is greater than or equal to lookup_value
在单元格区域中搜索指定项，然后返回该项在区域中的相对位置。
VLOOKUP
added in v4.3		=VLOOKUP(lookup_value, table_array, column_index_num, [range_lookup]),

where:
  • lookup_value - the value to search for in the first column of a table;
  • table_array - the table from which to retrieve a value;
  • column_index_num - the column number in the table from which to retrieve a value;
  • range_lookup - optional (1 by default):
    0 - exact match, 1 - approximate match
在垂直表格中通过匹配第一列来查找某个值
XLOOKUP
added in v4.3		=XLOOKUP(lookup_value, lookup_array, return_array, [if_not_found], [match_mode]),

where:
  • lookup_value - the value to search for;
  • lookup_array - the array or range to search;
  • return_array - the array or range to return;
  • if_not_found - optional, if a valid match is not found, returns the [if_not_found] text you supply;
  • match_mode - optional (0 by default):
    0 - Exact match
    -1 - Exact match. If not found, returns the next smaller item
    1 - Exact match. If not found, returns the next larger item
在区域或数组中进行搜索，并返回与第一个匹配项对应的值。如果不存在匹配项，XLOOKUP 可以返回最接近的（近似）匹配结果。
XMATCH
added in v4.3		=XMATCH(lookup_value, lookup_array, [match_mode]),

where:
  • lookup_value - the value that you want to match in lookup_array;
  • lookup_array - the range of cells;
  • match_mode - optional, 0 - exact match (default), -1 - exact match or next smallest, 1 - exact match or next larger
执行查找并返回在垂直或水平区域中的位置。
+
+ +### 数学函数 {#math-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABS返回数字的绝对值。数字的绝对值始终为正数。
ACOS返回数字的反余弦值（即反三角余弦）。反余弦是余弦值为 number 的角度。数字必须在 -1 到 1 之间（含端点）。返回的角度以弧度表示，范围为 0（零）到 pi。
ACOSH返回数字的反双曲余弦值。数字必须大于或等于 1。
ACOT返回数字的反余切主值（即反三角余切）。返回的角度以弧度表示，范围为 0（零）到 pi。
ACOTH返回数字的反双曲余切值。数字的绝对值必须大于 1。
ADD返回两个值的和。
空单元格、逻辑值（如 TRUE）或文本将被忽略。
ARABIC将罗马数字转换为阿拉伯数字。
ASIN返回数字的反正弦值（即反三角正弦）。反正弦是正弦值为 number 的角度。数字必须在 -1 到 1 之间（含端点）。返回的角度以弧度表示，范围为 -pi/2 到 pi/2。
ASINH返回数字的反双曲正弦值。反双曲正弦是双曲正弦值为 number 的数值。适用于实数。
ATAN返回数字的反正切值（即反三角正切）。反正切是正切值为 number 的角度。返回的角度以弧度表示，范围为 -pi/2 到 pi/2。适用于目标角度的正切值。
ATAN2返回坐标 (x,y) 的反正切值。返回值以弧度表示，范围为 -pi 到 pi（不含 -pi）。
ATANH返回数字的反双曲正切值。数字必须在 -1 到 1 之间（不含 -1 和 1）。适用于实数。
AVEDEV
added in v4.3		返回数据点与其均值的绝对偏差的平均值。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。值为 0 的单元格会被计入。
AVERAGE计算一组数字的平均值（算术平均数）。
数组或引用中的逻辑值、空单元格以及包含文本的单元格将被忽略。
但值为零的单元格会被计入。
AVERAGEA
added in v4.3		计算参数列表中所有值的平均值（算术平均数）。
参数可以是：数字；包含数字的名称、数组或引用；数字的文本表示形式；或引用中的逻辑值（如 TRUE 和 FALSE）。
数组或引用中的空单元格和文本值将被忽略。
AVERAGEIF
added in v6.0		返回满足给定条件的区域内所有单元格的平均值（算术平均数）。
接受两个必需参数（要计算的区域和条件）以及一个可选参数（若与计算区域不同，则为要求平均值的单元格区域）。
AVERAGEIFS
added in v6.0		返回满足多个条件的所有单元格的平均值（算术平均数）。
接受一个必需的平均值区域参数，后跟一对或多对条件区域与条件参数。
BASE将数字转换为指定的进制（基数）。
数字必须为整数，且大于或等于 0 且小于 2^53。
基数是要将数字转换成的进制，必须为 2 到 36 之间的整数（含端点）。
BITAND
added in v4.3		返回两个数字的按位"与"运算结果。
数字必须为整数，且大于或等于 0 且小于 (2^48)-1。
CEILING将数字向上舍入到最接近的整数，或最接近指定有效位数的倍数。
COMBIN返回两个给定整数的组合数：项目总数（number）和每个组合中的项目数（number_chosen）：
  • number 必须大于或等于零，且大于或等于 number_chosen；
  • number_chosen 必须大于或等于零。
COMBINA返回两个给定整数（允许重复）的组合数。参数为：项目总数（number）和每个组合中的项目数（number_chosen）：
  • number 必须大于或等于零，且大于或等于 number_chosen；
  • number_chosen 必须大于或等于零。
COS返回以弧度表示的角度的余弦值。
COSH返回实数的双曲余弦值。
CSC返回以弧度表示的角度的余割值。
CSCH返回以弧度表示的角度的双曲余割值。
COT返回以弧度表示的角度的余切值。
COTH返回双曲角度的双曲余切值。
COUNT统计包含数字的单元格数量，以及参数列表中数字的个数。
数组或引用中的空单元格、逻辑值、文本或错误值不会被计入。
COUNTA统计包含数字、文本、逻辑值、错误值及空文本（""）的单元格数量；值为零的单元格不计入。
该函数不计入空单元格。
COUNTBLANK返回指定区域中空单元格的数量。
值为零的单元格不计入。
COUNTIF
added in v6.0		统计区域内满足给定条件的单元格数量。
接受两个参数：要计算的单元格区域和定义哪些单元格需要计入的条件。
COUNTIFS
added in v6.0		统计满足多个条件的单元格数量。
接受一对或多对区域与条件参数；只有满足所有条件的单元格才会被计入。
DECIMAL将给定进制（基数）的数字文本表示形式转换为十进制数字。
基数必须为 2 到 36 之间的整数（含端点）。
DEGREES将弧度转换为度。
DIVIDE返回一个数除以另一个数的结果。
EQ若第一个参数等于第二个参数，则返回 TRUE；否则返回 FALSE。
EVEN返回数字向上舍入到最接近的偶数整数的结果。
FACT返回数字的阶乘。数字必须在 1 到 n 之间。如果数字不是整数，则截断小数部分。
FACTDOUBLE返回数字的双阶乘。数字必须在 1 到 n 之间。如果数字不是整数，则截断小数部分。
FLOOR将数字向下舍入（趋向零）到最接近指定有效位数倍数的值。有效位数必须在 1 到 n 之间。
若数字为正数，则向下舍入并趋向零；若数字为负数，则向下舍入并远离零。
GCD返回两个或多个整数的最大公约数。该函数接受 1 到 255 个数值，这些值应为整数。若某个值不是整数，则截断小数部分。
GT若第一个参数大于第二个参数，则返回 TRUE；否则返回 FALSE。
GTE若第一个参数大于或等于第二个参数，则返回 TRUE；否则返回 FALSE。
INT返回数字向下舍入到最接近整数的结果。
LN返回正实数的自然对数。
LOG返回正实数以指定底数的对数。若省略底数，则默认为 10。
LOG10返回正实数以 10 为底的对数。
LT若第一个参数小于第二个参数，则返回 TRUE；否则返回 FALSE。
LTE若第一个参数小于或等于第二个参数，则返回 TRUE；否则返回 FALSE。
MAX返回一组值中的最大值。
该函数忽略空单元格、逻辑值 TRUE 和 FALSE 以及文本值。若参数中不包含数字，MAX 返回 0（零）。
MAXIFS
added in v6.0		返回满足一组给定条件的单元格中的最大值。
接受一个必需的最大值区域参数，后跟一对或多对条件区域与条件参数。
MIN返回一组值中的最小值。
数组或引用中的空单元格、逻辑值或文本将被忽略。若参数中不包含数字，MIN 返回 0（零）。
MINIFS
added in v6.0		返回满足一组给定条件的单元格中的最小值。
接受一个必需的最小值区域参数，后跟一对或多对条件区域与条件参数。
MINUS返回两个数字的差值。
MOD返回数字除以除数后的余数。结果与除数的符号相同。
MROUND返回数字舍入到最接近指定有效位数倍数的结果。number 和 multiple 的值必须具有相同的符号。
MULTINOMIAL返回一组值的和的阶乘与各值阶乘之积的比值。该函数接受 1 到 255 个数值，这些值必须大于或等于 0。
MULTIPLY返回两个数字相乘的结果。
NE若第一个参数不等于第二个参数，则返回 TRUE；否则返回 FALSE。
ODD返回数字向上舍入到最接近的奇数整数的结果。
PI返回数字 3.14159265358979（数学常数 pi，精确到 15 位）。
POW返回数字的指定次幂的结果。
适用于实数。
POWER返回数字的指定次幂的结果。
适用于实数。
PRODUCT将所有以参数形式给出的数字相乘并返回乘积。
+只有数组或引用中的数字才会参与相乘。数组或引用中的空单元格、逻辑值和文本将被忽略。
QUOTIENT返回整除的结果（不含余数）。
适用于实数。
RADIANS将度转换为弧度。
RAND返回一个大于或等于 0 且小于 1 的随机数。
每次重新计算电子表格时都会返回一个新的随机数。
RANDBETWEEN返回两个指定数字之间的随机数。
每次重新计算电子表格时都会返回一个新的随机数。
ROMAN将阿拉伯数字转换为罗马数字。
ROUND返回数字舍入到指定位数的结果。
ROUNDDOWN返回数字向下舍入到指定位数的结果。
ROUNDUP返回数字向上舍入到指定位数的结果。
SEC返回以弧度表示的角度的正割值。
适用于数值。
SECH返回以弧度表示的角度的双曲正割值。
适用于数值。
SIN返回以弧度表示的角度的正弦值。
SINH返回实数的双曲正弦值。
SQRT返回数字的正平方根。
SQRTPI返回数字与 pi 的乘积的平方根。数字必须大于或等于 0。
STDEV基于代表总体样本的数据计算标准差。
标准差衡量数值相对于平均值（均值）的分散程度。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
STDEVA基于样本计算标准差。
标准差衡量数值相对于平均值（均值）的分散程度。
数组或引用中的空单元格和文本值将被忽略。
STDEVP基于全部数字总体计算标准差。
标准差衡量数值相对于平均值（均值）的分散程度。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
STDEVPA基于以参数形式给出的全部总体（包含文本（计为 0）和逻辑值（TRUE 计为 1，FALSE 计为 0））计算标准差。
标准差衡量数值相对于平均值（均值）的分散程度。
若参数为数组或引用，则只使用其中的值。数组或引用中的空单元格和文本值将被忽略。
错误值会导致错误。
STDEV.S
added in v4.3		基于样本估算标准差（忽略样本中的逻辑值和文本）。
标准差衡量数值相对于平均值（均值）的分散程度。
若参数为数组或引用，则只使用其中的值。数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
错误值会导致错误。
SUBTOTAL返回列表或数据库中的分类汇总值。
SUM返回所提供值的总和。
空单元格、逻辑值（如 TRUE）或文本将被忽略。
SUMIF
added in v6.0		将区域内满足指定条件的单元格相加。
接受两个必需参数（要计算的区域和条件）以及一个可选参数（若与计算区域不同，则为要求和的单元格区域）。
SUMIFS
added in v6.0		将区域内满足多个条件的单元格相加。
接受一个必需的求和区域参数，后跟一对或多对条件区域与条件参数；只有满足所有条件的单元格才会被计入求和。
SUMPRODUCT将单元格区域或数组相乘并返回乘积之和。
只有数字才参与有效乘积的计算。
空单元格、逻辑值和文本将被忽略。
非数值型数组元素视为零处理。
SUMSQ返回各参数的平方和。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
SUMX2MY2返回两个数组中对应值的平方差之和。
参数应为数字，或包含数字的名称、数组或引用。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。零值会被计入。
SUMX2PY2返回两个数组中对应值的平方和之和。
参数应为数字，或包含数字的名称、数组或引用。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。零值会被计入。
SUMXMY2返回两个数组中对应值之差的平方和。
参数应为数字，或包含数字的名称、数组或引用。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。零值会被计入。
TAN返回以弧度表示的角度的正切值。
TANH返回实数的双曲正切值。
TRUNC通过移除数字的小数部分将其截断为整数。
VAR返回基于样本的方差。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
VARA返回基于总体样本的方差，包含文本（计为 0）和逻辑值（TRUE 计为 1，FALSE 计为 0）。
数组或引用中的空单元格和文本值将被忽略。
VARP返回基于全部数字总体的总体方差。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
VARPA返回基于全部总体的总体方差，包含文本（计为 0）和逻辑值（TRUE 计为 1，FALSE 计为 0）。
数组或引用中的空单元格和文本值将被忽略。
VAR.S
added in v4.3		返回基于样本的方差（忽略样本中的逻辑值和文本）。
数组或引用中的空单元格、逻辑值、文本或错误值将被忽略。
+
+ +请在我们的[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中查看示例。 +### 数组函数 {#array-functions} + +以下数组函数已在 v6.0 中添加。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
CHOOSECOLS=CHOOSECOLS(array, col_num1, [col_num2], ...)从数组或区域中返回指定的列。
CHOOSEROWS=CHOOSEROWS(array, row_num1, [row_num2], ...)从数组或区域中返回指定的行。
DROP=DROP(array, [rows], [columns])从数组的起始或末尾移除指定数量的行或列。
EXPAND=EXPAND(array, [rows], [columns], [pad_with])将数组扩展或填充至指定的行数和列数。
RANDARRAY=RANDARRAY([rows], [columns], [min], [max], [integer])默认返回一个由 0 到 1 之间的随机数组成的数组。可以指定要填充的行数和列数、最小值和最大值，以及是否返回整数或小数。
SEQUENCE=SEQUENCE(rows, [columns], [start], [step])在数组中生成一组连续数字序列，例如 1、2、3、4。
SORT=SORT(array, [sort_index], [sort_order], [by_col])对区域或数组的内容进行排序。默认按第一列升序排列。
SORTBY=SORTBY(array, by_array, [sort_order], ...)根据对应区域或数组中的值，对区域或数组的内容进行排序。
TAKE=TAKE(array, [rows], [columns])从数组的起始或末尾返回指定数量的连续行或列。
TEXTSPLIT=TEXTSPLIT(text, col_delimiter, [row_delimiter], [ignore_empty], [match_mode], [pad_with])使用指定的分隔符将文本字符串拆分为行和列。
TOCOL=TOCOL(array, [ignore], [scan_by_column])将数组或区域转换为单列。
TOROW=TOROW(array, [ignore], [scan_by_column])将数组或区域转换为单行。
UNIQUE=UNIQUE(array, [by_col], [exactly_once])从区域或数组中返回唯一值列表。
WRAPCOLS=WRAPCOLS(vector, wrap_count, [pad_with])在达到指定数量的值后，按列将行或列向量折叠为二维数组。
WRAPROWS=WRAPROWS(vector, wrap_count, [pad_with])在达到指定数量的值后，按行将行或列向量折叠为二维数组。
+
+ +请参阅我们[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中的示例。 +### 正则表达式函数 {#regex-functions} + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
REGEXREPLACE=REGEXREPLACE(text, regular_expression, replacement)使用正则表达式将文本字符串的一部分替换为另一个文本字符串。
REGEXMATCH=REGEXMATCH(text, regular_expression)若文本字符串与正则表达式中的模式匹配，则返回 TRUE；否则返回 FALSE。
REGEXEXTRACT=REGEXEXTRACT(text, regular_expression)返回字符串中与正则表达式模式匹配的部分。
+
+ +请参阅我们[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中的示例。 + +### 字符串函数 {#string-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数公式描述
ARRAYTOTEXT
added in v4.3		=ARRAYTOTEXT(array, [format])根据指定的格式（0 - 简洁格式（默认）或 1 - 严格格式），从任意指定范围返回文本值数组。
CHAR=CHAR(number)返回由数字指定的字符（来自计算机所用字符集）。数字必须在 1 到 255 之间。
CLEAN=CLEAN(text)从文本中删除使用打印选项时不会打印出来的字符。
CODE=CODE(text)返回文本字符串中第一个字符的数字代码。
CONCATENATE=CONCATENATE(A1,"",B2:C3)将两个或多个文本字符串合并为一个字符串。
DOLLAR=DOLLAR(number, decimals)使用货币格式将数字转换为文本，根据您指定的小数点右侧/左侧位数（默认为 2）进行格式化。
EXACT=EXACT(text1, text2)比较两个字符串，若完全相同则返回 TRUE；否则返回 FALSE。
FIND=FIND(find_text, within_text, [start_num])返回一个文本字符串在另一个文本字符串中的位置（以数字表示），从您指定的位置开始搜索（默认为 1）。
FIXED=FIXED(number, [decimals], [no_commas])将数字四舍五入到指定的小数位数，使用句点和逗号以十进制格式对数字进行格式化，并将结果转换为文本。若 no_commas 设置为 1，则返回的文本不包含逗号。
JOIN=JOIN(separator, value1, value2,...)使用指定的分隔符连接多个值。
LEFT=LEFT(text, count)根据您指定的字符数，返回文本字符串中的第一个或前几个字符。
LEN=LEN(text)返回指定字符串的长度。
LOWER=LOWER(text)将指定字符串中的所有字母转换为小写。
MID=MID(text, start, count)从文本字符串中返回指定数量的字符，
从您指定的位置开始，根据您指定的
字符数提取。
NUMBERVALUE=NUMBERVALUE (text, [decimal_separator], [group_separator])使用指定的小数分隔符和千位分隔符，将文本格式的数字转换为数值。
PROPER=PROPER(text)将每个单词的第一个字符设置为大写，
并将所有其他字符转换为小写。
REPLACE
added in v4.3		=REPLACE(old_text, start_num, num_chars, new_text),

where:
  • old_text - the text in which you want to replace some characters;
  • start_num - the position of the character in old_text that you want to replace with new_text;
  • num_chars - the number of characters to be replaced in old_text;
  • new_text - the text that will replace characters in old_text.
根据您指定的字符数，将文本字符串的一部分替换为另一个文本字符串。
REPT=REPT(text, number_times)将文本重复指定的次数。
RIGHT=RIGHT(text, count)根据您指定的字符数，返回文本字符串中最后一个或最右侧的几个字符。
SEARCH=SEARCH(find_text, within_text, [start_num])返回 find_text 在 within_text 中第一个字符的位置（以数字表示），从您指定的位置开始搜索（默认为 1）。
SUBSTITUTE=SUBSTITUTE(text, old_text, new_text, [instance_num])将文本字符串中的旧文本替换为新文本。若指定了 instance_num，则仅替换该实例的 old_text；否则替换所有实例。
T=T(value)当给定文本值时返回文本，当给定数字、日期及逻辑值 TRUE/FALSE 时返回空字符串 ("")。
TRIM=TRIM(text)删除文本中除单词间单个空格之外的所有空格。
UPPER=UPPER(text)将文本转换为大写。
+
+ +请参阅我们[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中的示例。 + +### 其他函数 {#other-functions} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数示例描述
AND=AND(logical1, [logical2], ...)根据是否满足多个条件，
返回 TRUE 或 FALSE。
CHOOSE=CHOOSE(index_num, value1, [value2], ...)根据您指定的位置或索引，从值参数列表中返回一个值。
FALSE=FALSE()返回逻辑值 FALSE。
IF=IF(condition, [value_if_true], [value_if_false])当条件为 TRUE 时返回一个值，
当条件为 FALSE 时返回另一个值。
NOT=NOT(logical)返回给定逻辑值或布尔值的相反值。
OR=OR(logical1, [logical2], ...)若至少有一个逻辑表达式为 TRUE，则返回 TRUE；否则返回 FALSE。
TRUE=TRUE()返回逻辑值 TRUE。
+
+ +请参阅我们[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中的示例。 + +## 获取单元格公式 {#getting-cell-formula} + +从 v4.1 起，您可以使用 [`getFormula()`](api/spreadsheet_getformula_method.md) 方法获取应用于单元格的公式。该方法以单元格 id 作为参数： + +~~~js +var formula = spreadsheet.getFormula("B2"); +// -> "ABS(C2)" +~~~ + +## 公式描述弹出框 {#popup-with-formula-description} + +当您输入公式时，会出现一个包含函数描述及其参数说明的弹出框。 + +![DHTMLX Spreadsheet formula popup showing a function description and parameters while typing](/img/formula_popup.png) + +请参阅我们[代码示例工具](https://snippet.dhtmlx.com/wux2b35b)中的示例。 + +您可以修改公式参数弹出框的默认语言环境并添加自定义语言环境。详情请参阅[本地化](localization.md#default-locale-for-formulas)指南。 + +## 自定义公式 {#custom-formulas} + +从 v6.0 起，您可以使用 [`addFormula()`](api/spreadsheet_addformula_method.md) 方法注册自定义公式函数。注册后，该公式即可在任意单元格中通过其大写名称使用。 + +该方法接受两个参数：公式名称和一个同步处理函数，该函数接收解析后的单元格值作为参数并返回结果： + +~~~js +spreadsheet.addFormula("DOUBLE", (value) => { + return value * 2; +}); +~~~ + +之后，您可以像使用任何内置函数一样在单元格中使用该公式： + +~~~js +spreadsheet.parse([ + { cell: "A1", value: 4, format: "number" }, + { cell: "B1", value: "=DOUBLE(A1)", format: "number" } +]); +~~~ + +:::note +处理函数必须是同步的。不允许在函数内部使用 `Promise` 或 `fetch`。 +::: + +**相关示例：** [Spreadsheet. 添加自定义公式](https://snippet.dhtmlx.com/wvxdlahp) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides.md new file mode 100644 index 00000000..30328128 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides.md @@ -0,0 +1,52 @@ +--- +sidebar_label: 指南概览 +title: 开发者与用户指南 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中查阅开发者与用户指南。浏览 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 指南 {#guides} + +DHTMLX Spreadsheet 提供了丰富的功能：支持多种格式的数据导入与导出、便捷的单元格内容与样式操作、灵活的表格结构、只读模式、广泛的外观自定义，以及与主流框架的集成。 + +## 开发者指南 {#developer-guides} + +### 创建 Spreadsheet {#creating-spreadsheet} + +介绍安装与创建 Spreadsheet、调整配置以及设置所需语言标签的主要步骤。 + +- [初始化](initialization.md) +- [配置](configuration.md) +- [本地化](localization.md) + +### 探索 Spreadsheet 功能 {#exploring-spreadsheet-features} + +演示如何向 Spreadsheet 中加载数据、处理事件，并使用主要功能，同时涵盖对 Spreadsheet 各主要部分的自定义。 + +- [数据加载与导出](loading_data.md) +- [使用 Spreadsheet](working_with_ssheet.md) +- [使用工作表](working_with_sheets.md) +- [使用单元格](category/work-with-cells.md) +- [数字格式化](number_formatting.md) +- [公式与函数](functions.md) +- [事件处理](handling_events.md) +- [自定义](customization.md) + +### 框架与集成 {#frameworks--integrations} + +- [React Spreadsheet](react.md) - 官方 React 组件，支持 props、events 及 TypeScript +- [与 Angular 集成](angular_integration.md) - 在 Angular 应用中使用 Spreadsheet 的 GitHub 示例 +- [与 Svelte 集成](svelte_integration.md) - 在 Svelte 应用中使用 Spreadsheet 的 GitHub 示例 +- [与 Vue.js 集成](vuejs_integration.md) - 在 Vue 应用中使用 Spreadsheet 的 GitHub 示例 + +## 用户指南 {#user-guides} + +用户指南帮助您的用户轻松使用 Spreadsheet。 + +- [快捷键列表](hotkeys.md) +- [使用工作表](work_with_sheets.md) +- [使用行与列](work_with_rows_cols.md) +- [使用单元格](work_with_cells.md) +- [搜索数据](data_search.md) +- [排序数据](sorting_data.md) +- [筛选数据](filtering_data.md) +- [Excel 导入/导出](excel_import_export.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/handling_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/handling_events.md new file mode 100644 index 00000000..8650a386 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/handling_events.md @@ -0,0 +1,43 @@ +--- +sidebar_label: 事件处理 +title: 事件处理 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解事件处理的相关内容。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 事件处理 {#event-handling} + + + +## 添加事件监听器 {#attaching-event-listeners} + +您可以使用 [`spreadsheet.events.on()`](api/eventsbus_on_method.md) 方法添加事件监听器： + +~~~jsx +spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +~~~ + +## 移除事件监听器 {#detaching-event-listeners} + +要移除事件，请使用 [`spreadsheet.events.detach()`](api/eventsbus_detach_method.md)： + +~~~jsx +var addcolumn = spreadsheet.events.on("AfterColumnAdd", function(cells){ + console.log("A new column is added"); +}); +spreadsheet.events.detach(addcolumn); +~~~ + +## 触发事件 {#calling-events} + +要触发事件，请使用 [`spreadsheet.events.fire()`](api/eventsbus_fire_method.md)： + +~~~jsx +spreadsheet.events.fire("name",args); +// where args is an array of arguments +~~~ + +事件列表可在 [API 部分](api/api_overview.md#spreadsheet-events)查阅。 + +{{note 事件名称不区分大小写。}} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/hotkeys.md b/i18n/zh/docusaurus-plugin-content-docs/current/hotkeys.md new file mode 100644 index 00000000..3e10c1f6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/hotkeys.md @@ -0,0 +1,241 @@ +--- +sidebar_label: 快捷键列表 +title: 快捷键 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解快捷键的相关内容。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 快捷键列表 {#hot-keys-list} + +以下是在使用 DHTMLX Spreadsheet 时可以使用的快捷键列表。 + +## 编辑 {#editing} + + + + + + + + + + + + + + + + + + + + +
Enter激活单元格中的编辑器
Ctrl (Cmd) + Enter停止单元格编辑，保持选中该单元格
F2在选中的单元格中打开编辑器
Esc关闭单元格中的编辑器，不保存更改
+ +## 格式化单元格 {#formatting-cells} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + C复制单元格的值
Ctrl (Cmd) + V将值粘贴到单元格中，替换任何已选中的内容
Ctrl (Cmd) + X剪切单元格的值
Ctrl (Cmd) + Z撤销工作表中的最后一个操作
Ctrl (Cmd) + Y重做工作表中的最后一个操作
Ctrl (Cmd) + Shift + Z重做工作表中的最后一个操作
Ctrl (Cmd) + B将单元格的值设为粗体
Ctrl (Cmd) + I将单元格的值设为斜体
Ctrl (Cmd) + U为单元格的值添加下划线
Alt + Shift + 5 (Cmd + Shift + X)为单元格的值添加删除线
Ctrl (Cmd) + Shift + E将单元格的值水平居中对齐
Ctrl (Cmd) + Shift + R将单元格的值右对齐
Ctrl (Cmd) + Shift + L将单元格的值左对齐
Ctrl (Cmd) + K在单元格中插入超链接
Delete删除单元格内容，保留已应用的样式
Backspace删除单元格内容，保留已应用的样式
+ +## 导航 {#navigation} + +{{note 导航仅在没有单元格处于编辑状态时有效。}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enter激活单元格中的编辑器。关闭编辑器并将选中项向下移动一个单元格（在列中）。如果选中了单元格区域，则在区域范围内向下移动一个单元格。
Shift + Enter将选中项向上移动一个单元格（在列中）。如果选中了单元格区域，则在区域范围内向上移动一个单元格。到达列的第一个单元格时停止。
Tab将选中项向右移动一个单元格（在行中）。如果选中了单元格区域，则在区域范围内向右移动一个单元格。到达行的最右侧单元格时停止。
Tab + Shift将选中项向左移动一个单元格（在行中）。如果选中了单元格区域，则在区域范围内向左移动一个单元格。到达行的最左侧单元格时停止。
方向键在工作表的单元格之间导航
Home将选中项移至行中的第一个单元格
End将选中项移至行中的最后一个单元格
Ctrl (Cmd) + 左方向键将选中项移至行中的第一个单元格
Ctrl (Cmd) + 右方向键将选中项移至行中的最后一个单元格
Ctrl (Cmd) + 上方向键将选中项移至列中的第一个单元格
Ctrl (Cmd) + 下方向键将选中项移至列中的最后一个单元格
Ctrl (Cmd) + Home将选中项移至工作表的起始位置（左上角单元格）
Ctrl (Cmd) + End将选中项移至工作表的末尾位置（右下角单元格）
Shift + 上/下/左/右方向键从选中的单元格扩展选区
Page Up向上滚动工作表一屏
Page Down向下滚动工作表一屏
+ +## 搜索 {#search} + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + F在电子表格右上角打开搜索框
Ctrl (Cmd) + G将选中项移至下一个匹配结果
Ctrl (Cmd) + Shift + G将选中项移至上一个匹配结果
+ +## 选择 {#selection} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ctrl (Cmd) + A选中工作表中的所有单元格
Ctrl (Cmd) + 鼠标左键单击允许选中多个不连续的单元格
Shift + 鼠标左键单击允许选中单元格区域，其中选中的单元格为区域的第一个单元格，单击的单元格为区域的最后一个单元格
Ctrl (Cmd) + Shift + 鼠标左键单击允许选中多个不连续的单元格区域
Ctrl (Cmd) + Space选中整列
Shift + Space选中整行
+ +## 使用工作表 {#work-with-sheets} + + + + + + + + + + + + +
Shift + F11在电子表格中添加新工作表
Alt + 上方向键/下方向键切换到下一个/上一个工作表
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 00000000..246cc2fa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,147 @@ +--- +sidebar_label: 快速入门 +title: DHTMLX Spreadsheet 快速入门 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解如何快速入门。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 快速入门 {#how-to-start} + +本教程将引导您完成在页面上创建完整功能的 DHTMLX Spreadsheet 的各个步骤。该组件在需要保存计算结果并重现数据时，尤其适合处理大量数据。 + +![在浏览器窗口中初始化了示例数据表的 DHTMLX Spreadsheet](/img/how_to_start.png) + +## 第一步：引入源文件 {#step-1-including-source-files} + +首先创建一个名为 *index.html* 的 HTML 文件，然后在其中引入 Spreadsheet 的源文件。[DHTMLX Spreadsheet 包的详细说明请参见此处](initialization.md#including-source-files)。 + +需要引入两个必要文件： + +- DHTMLX Spreadsheet 的 *JS* 文件 +- DHTMLX Spreadsheet 的 *CSS* 文件 + +以及 + +- Google Fonts 源文件的链接，用于正确渲染字体。 + +~~~html {5-8} title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + + + + +~~~ + +### 通过 npm 或 yarn 安装 Spreadsheet {#installing-spreadsheet-via-npm-or-yarn} + +您可以使用 `yarn` 或 `npm` 包管理器将 JavaScript Spreadsheet 导入到项目中。 + +#### 通过 npm 或 yarn 安装试用版 Spreadsheet {#installing-trial-spreadsheet-via-npm-or-yarn} + +:::info +如果您想使用试用版 Spreadsheet，请下载[**试用版 Spreadsheet 包**](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml)，并按照 *README* 文件中的步骤进行操作。请注意，试用版 Spreadsheet 仅可使用 30 天。 +::: + +#### 通过 npm 或 yarn 安装 PRO 版 Spreadsheet {#installing-pro-spreadsheet-via-npm-or-yarn} + +:::info +您可以在[客户专区](https://dhtmlx.com/clients/)生成 **npm** 的登录名和密码，从而直接访问 DHTMLX 私有 **npm**。详细的安装指南也可在那里找到。请注意，只有在您的 Spreadsheet 商业许可证有效期间，才能访问私有 **npm**。 +::: + +## 第二步：创建 Spreadsheet {#step-2-creating-spreadsheet} + +现在您可以将 Spreadsheet 添加到页面了。首先创建一个 DIV 容器，并将 DHTMLX Spreadsheet 放置其中。操作步骤如下： + +- 在 *index.html* 文件中指定一个 DIV 容器 +- 使用 `dhx.Spreadsheet` 构造函数初始化 DHTMLX Spreadsheet + +构造函数接受两个参数：放置 Spreadsheet 的 HTML 容器，以及 Spreadsheet 配置对象。 + +~~~html title="index.html" + + + + How to Start with DHTMLX Spreadsheet + + + + + + +
+ + + +~~~ + +## 第三步：设置 Spreadsheet 配置 {#step-3-setting-spreadsheet-configuration} + +接下来，您可以指定希望 Spreadsheet 组件在初始化时具有的其他配置选项（除默认选项外）。 + +您可以使用多个选项来调整 Spreadsheet 的外观与行为，例如：`toolbarBlocks`、`rowsCount` 和 `colsCount`。[查看详情](configuration.md)。 + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + toolbarBlocks: ["columns", "rows", "clear"], + rowsCount: 10, + colsCount: 10 +}); +~~~ + +DHTMLX Spreadsheet 的配置非常灵活，您可以随时更改。[阅读相关指南](configuration.md)，深入了解 Spreadsheet 配置的基础知识。 + +## 第四步：向 Spreadsheet 中加载数据 {#step-4-loading-data-into-spreadsheet} + +最后一步是将数据填充到 Spreadsheet 中。DHTMLX Spreadsheet 接受 JSON 格式的数据。除数据外，您还可以在数据集中传入所需的样式。加载内联数据时，需要使用 `parse()` 方法，并向其传入包含数据的对象，如下例所示： + +~~~jsx title="data.json" +const data = [ + { "cell": "a1", "value": "Country" }, + { "cell": "b1", "value": "Product" }, + { "cell": "c1", "value": "Price" }, + { "cell": "d1", "value": "Amount" }, + { "cell": "e1", "value": "Total Price" }, + + { "cell": "a2", "value": "Ecuador" }, + { "cell": "b2", "value": "Banana" }, + { "cell": "c2", "value": 6.68 }, + { "cell": "d2", "value": 430 }, + { "cell": "e2", "value": 2872.4 }, + + { "cell": "a3", "value": "Belarus" }, + { "cell": "b3", "value": "Apple" }, + { "cell": "c3", "value": 3.75 }, + { "cell": "d3", "value": 600 }, + { "cell": "e3", "value": 2250 } +] + +// initializing spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + //config +}); +// loading data into spreadsheet +spreadsheet.parse(data); +~~~ + +**相关示例**：[Spreadsheet. 自定义单元格数量](https://snippet.dhtmlx.com/vc3mstsw) + +## 下一步 {#whats-next} + +完成了。仅需四个步骤，您就拥有了一个便捷的表格数据处理工具。现在您可以开始处理数据，或者继续深入了解 DHTMLX Spreadsheet。 + +- [Spreadsheet 概览](/) +- [](guides.md) +- [](api/api_overview.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 00000000..901d1248 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,68 @@ +--- +sidebar_label: Spreadsheet 概览 +title: DHTMLX Spreadsheet 概览 +slug: / +description: 您可以在 DHTMLX 文档中查阅 JavaScript Spreadsheet 库的概览。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# DHTMLX Spreadsheet 概览 {#dhtmlx-spreadsheet-overview} + +DHTMLX Spreadsheet 是一款用于在线编辑和格式化电子表格数据的客户端 JavaScript 组件。它提供可配置的工具栏、便捷的菜单与上下文菜单，以及可调整的表格，支持快捷键导航，可从外部和本地数据源加载数据，并支持将界面本地化为所需语言。 + +:::tip +[用户指南](guides.md#user-guides)可帮助您的用户轻松使用 Spreadsheet。 +::: + +## Spreadsheet 结构 {#spreadsheet-structure} + +### 工具栏 {#toolbar} + +**工具栏**部分相当灵活。它包含几个默认控件组："undo"、"colors"、"decoration"、"align"、"cell"、"format"、"actions"。您可以[更改工具栏结构](configuration.md#toolbar)，添加更多控件组，或自定义控件组的排列顺序。 + +![DHTMLX Spreadsheet 工具栏，包含撤销、颜色、装饰、对齐、单元格、格式和操作控件](/img/overview_toolbar.png) + +您还可以通过添加自定义控件和更新控件配置来[自定义工具栏](customization.md#toolbar)。 + +### 编辑栏 {#editing-line} + +**编辑栏**具有两个用途： + +- 编辑选中单元格的内容 +- 控制当前编辑单元格中的更改 + +![DHTMLX Spreadsheet 编辑栏，用于编辑单元格内容和跟踪更改](/img/overview_editline.png) + +如有需要，您可以通过相应的[配置选项](configuration.md#editing-bar)关闭编辑栏。 + +### 表格 {#grid} + +**表格**是一个以字母标识列、以数字标识行的网格。因此，表格中的单元格由列字母和行数字共同定义，例如 C3。 + +![DHTMLX Spreadsheet 表格，列以字母标识，行以数字标识](/img/spreadsheet_init.png) + +### 上下文菜单 {#context-menu} + +**上下文菜单**包含 6 个主菜单项——**锁定**、**清除**、**列**、**行**、**排序**和**插入链接**——每项均有子菜单。 + +![DHTMLX Spreadsheet 上下文菜单，包含锁定、清除、列、行、排序和插入链接选项](/img/overview_contextmenu.png) + +[上下文菜单的结构同样可自定义](customization.md#context-menu)。您可以添加自定义控件、更新控件配置，以及移除不需要的控件。 + +### 菜单 {#menu} + +**菜单**部分包含几个功能块，将工具栏和上下文菜单中最常用的选项汇集在一起，便于快速访问。 + +默认情况下，**菜单**部分处于隐藏状态，但您可以通过相关的[配置选项](configuration.md#menu)将其开启。 + +![DHTMLX Spreadsheet 菜单部分，汇集了常用的工具栏和上下文菜单选项](/img/overview_menu.png) + +您可以通过使用自定义控件、更新控件配置和移除不需要的控件来[修改菜单结构](customization.md#menu)。 + +## 下一步 {#whats-next} + +现在您可以开始在应用程序中使用 DHTMLX Spreadsheet 了。请参阅[快速入门](how_to_start.md)教程以获取指引。 + +如需进一步了解 DHTMLX Spreadsheet，请查阅以下指南： + +- [API 概览](api/api_overview.md) +- [指南](guides.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/initialization.md new file mode 100644 index 00000000..dcde3c93 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/initialization.md @@ -0,0 +1,68 @@ +--- +sidebar_label: 初始化 +title: 初始化 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解初始化的相关内容。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 初始化 {#initialization} + +本指南介绍如何在页面上创建 DHTMLX Spreadsheet，并将完整功能的工作表添加到您的应用程序中。请按照以下步骤获取一个可用的组件： + +1. [在页面上引入 DHTMLX Spreadsheet 源文件](#including-source-files)。 +2. [为 DHTMLX Spreadsheet 创建容器](#creating-container)。 +3. [使用对象构造函数初始化 DHTMLX Spreadsheet](#initializing-dhtmlx-spreadsheet)。 + + + +## 引入源文件 {#including-source-files} + +[下载安装包](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml)并将其解压到项目的某个文件夹中。 + +要创建 DHTMLX Spreadsheet，您需要在页面上引入 2 个源文件： + +- spreadsheet.js +- spreadsheet.css + +请确保正确设置这些文件的相对路径： + +~~~html title="index.html" + + +~~~ + +Spreadsheet 安装包的结构如下： + +- *sources* - 库的源代码文件；便于阅读，主要用于调试； +- *codebase* - 库的混淆代码文件；体积更小，用于生产环境。**当应用程序准备就绪后，请在应用中引入这些文件**； +- *samples* - 代码示例； +- *docs* - 组件的完整文档。 + +## 创建容器 {#creating-container} + +为 Spreadsheet 添加一个容器并为其设置 id，例如 "spreadsheet"： + +~~~html title="index.html" +
+~~~ + +## 初始化 DHTMLX Spreadsheet {#initializing-dhtmlx-spreadsheet} + +使用 `dhx.Spreadsheet` 对象构造函数初始化 DHTMLX Spreadsheet。构造函数接受两个参数： + +- Spreadsheet 的 HTML 容器， +- 包含配置属性的对象。[请参阅下方的完整列表](#configuration-properties)。 + +~~~jsx title="index.js" +// creating DHTMLX Spreadsheet +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config options +}); +~~~ + +### 配置属性 {#configuration-properties} + +请参阅可在 Spreadsheet 配置对象中指定的[属性](api/api_overview.md#spreadsheet-properties)完整列表。 + +您可以在初始化时将配置选项作为构造函数的第二个参数进行设置： + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/loading_data.md b/i18n/zh/docusaurus-plugin-content-docs/current/loading_data.md new file mode 100644 index 00000000..95789989 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/loading_data.md @@ -0,0 +1,355 @@ +--- +sidebar_label: 数据加载与导出 +title: 加载数据 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解数据加载的相关内容。浏览开发者指南和 API 参考、尝试代码示例和在线演示，并下载免费 30 天试用版 DHTMLX Spreadsheet。 +--- + +# 数据加载与导出 {#data-loading-and-export} + +您可以将包含单元格数据和样式的预设数据集填充到 DHTMLX Spreadsheet 中。该组件支持两种数据加载方式： + +- 从外部文件加载 +- 从本地数据源加载 + +该组件还支持[将数据导出为 Excel 文件](#exporting-data)。 + +## 准备数据 {#preparing-data} + +DHTMLX Spreadsheet 接受 JSON 格式的数据。 + +数据可以是一个包含单元格对象的简单数组。如果只需要为一个工作表创建数据集，请使用此方式。 + +~~~jsx title="为单个工作表准备数据" +const data = [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, format:"currency" }, + { cell: "D2", value: 430, format:"percent" }, + // "myFormat" is the id of a custom format + { cell: "E2", value: 2872.4, format:"myFormat" }, + + // add drop-down lists to cells + { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} }, + { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } }, + + // more cell objects +]; +~~~ + +或者可以是一个对象，包含需要同时加载到多个工作表的数据。例如： + +~~~jsx title="为多个工作表准备数据" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ], + merged: [ + // merge cells A1 and B1 + { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } }, + // merge cells A2, A3, A4, and A5 + { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } }, + ] + }, + { + name: "sheet 2", + id: "sheet_2", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + // more data + ] + }, + // more sheet objects + ] +}; +~~~ + +请在 [API 参考](api/spreadsheet_parse_method.md)中查阅这两种方式的可用属性完整列表。 + +:::tip +仅在以工作表对象格式准备数据时，才支持加载合并单元格。 +::: + +### 为单元格设置样式 {#setting-styles-for-cells} + +您可能需要在数据集中定义单元格样式。在这种情况下，数据应为一个对象，其中包含*独立属性*，分别描述数据对象和应用于特定单元格的 CSS 类。 + +使用 `css` 属性为单元格设置 CSS 类。 + +~~~jsx +const styledData = { + styles: { + someclass: { + background: "#F2F2F2", + color: "#F57C00" + } + }, + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" }, + { cell: "C1", value: "Price" }, + { cell: "D1", value: "Amount" }, + { cell: "E1", value: "Total Price" }, + + { cell: "A2", value: "Ecuador" }, + { cell: "B2", value: "Banana" }, + { cell: "C2", value: 6.68, css: "someclass" }, + { cell: "D2", value: 430, css: "someclass" }, + { cell: "E2", value: 2872.4 } + ], +} +~~~ + +:::info +[查看可用于单元格样式设置的属性列表](api/spreadsheet_parse_method.md#list-of-properties) +::: + +### 设置单元格的锁定状态 {#setting-the-locked-state-for-a-cell} + +如果要在数据集中指定锁定单元格，请使用单元格的 `locked` 属性并将其设置为 `true`： + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country", locked: true }, //locks a cell + { cell: "b1", value: "Product", locked: true }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + // more cells +]; +~~~ + +请在 [API 参考](api/spreadsheet_parse_method.md#parameters)中查阅可用单元格属性的完整列表。 + +**相关示例**：[Spreadsheet. 锁定单元格](https://snippet.dhtmlx.com/czeyiuf8?tag=spreadsheet) + +### 在单元格中添加链接 {#adding-a-link-into-a-cell} + +您可以直接在数据集中为单元格指定链接。为此，请将 `link` 属性设置为一个对象，并提供必要的设置： + +- `text` - （可选）链接的文本 +- `href` - （必填）定义链接目标的 URL + +在数据集中的示例如下： + +~~~jsx +const dataset = [ + { cell: "a1", value: "Country"}, //locks a cell + { cell: "b1", value: "Product"}, + + { cell: "a2", value: "Ecuador"}, + { + cell: "b2", + value: "Banana", + link:{ + href:"http://localhost:8080/" + } + }, + // more cells +]; +~~~ + +:::note +请注意，不应同时使用 `cell` 对象的 `value` 属性和 `link` 对象的 `text` 属性，因为它们是互斥的。 +::: + +**相关示例**：[Spreadsheet. JSON 导入导出](https://snippet.dhtmlx.com/e3xct53l?tag=spreadsheet) + +## 外部数据加载 {#external-data-loading} + +### 加载 JSON 数据 {#loading-json-data} + +默认情况下，Spreadsheet 接受 JSON 格式的数据。要从外部数据源加载数据，请使用 [](api/spreadsheet_load_method.md) 方法。该方法接受数据文件的 URL 作为参数： + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.json"); +~~~ + +**相关示例**：[Spreadsheet. 加载数据](https://snippet.dhtmlx.com/ih9zmc3e?tag=spreadsheet) + + +:::info +如果您需要允许用户通过文件资源管理器将 JSON 文件导入到电子表格中，请阅读[加载 JSON 文件](api/spreadsheet_load_method.md#loading-json-files)。 +::: + +### 加载 CSV 数据 {#loading-csv-data} + +您也可以加载 CSV 格式的数据。为此，需要调用 [](api/spreadsheet_load_method.md) 方法，并将格式名称（"csv"）作为第二个参数传入： + +~~~jsx +var spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.load("../common/data.csv", "csv"); +~~~ + +**相关示例**：[Spreadsheet. 加载 CSV](https://snippet.dhtmlx.com/1f87y71v?tag=spreadsheet) + +### 加载 Excel 文件（.xlsx） {#loading-excel-file-xlsx} + +您可以将 `.xlsx` 扩展名的 Excel 格式文件加载到电子表格中。用户界面的工具栏和菜单中提供了相应的控件： + +- 菜单：文件 -> 导入为.. -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet 文件菜单，包含导入 Microsoft Excel XLSX 文件的选项](/img/file_import.png) + +- 工具栏：导入 -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet 工具栏，包含导入 Microsoft Excel XLSX 文件的按钮](/img/import_xlsx.png) + +#### 如何导入数据 {#how-to-import-data} + +{{note 请注意，导入功能在 Internet Explorer 中不可用。}} + +DHTMLX Spreadsheet 使用基于 WebAssembly 的库 [Excel2Json](https://github.com/dhtmlx/excel2json) 从 Excel 导入数据。要将 Excel 数据加载到 Spreadsheet 中，您需要： + +- 安装 **Excel2Json** 库 +- 在 Spreadsheet 配置中指定 [](api/spreadsheet_importmodulepath_config.md) 选项，并通过以下两种方式之一设置 *worker.js* 文件的路径： + - 提供文件在您计算机上的本地路径，例如：`"../libs/excel2json/1.0/worker.js"` + - 提供 CDN 上文件的链接：`"https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"` + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + importModulePath: "../libs/excel2json/1.0/worker.js" +}); +~~~ + +**相关示例**：[Spreadsheet. 自定义导入导出路径](https://snippet.dhtmlx.com/wykwzfhm) + +要从 Excel 文件加载数据，请将扩展名类型字符串（"xlsx"）作为 [](api/spreadsheet_load_method.md) 方法的第二个参数传入： + +~~~jsx +// .xlsx only +spreadsheet.load("../common/data.xlsx", "xlsx"); +~~~ + +{{note 请注意，该组件仅支持从 `.xlsx` 扩展名的 Excel 文件导入。}} + +**相关示例**：[Spreadsheet. 导入 Xlsx](https://snippet.dhtmlx.com/cqlpy828?tag=spreadsheet) + +如有需要，您也可以[将电子表格中的数据导出为 Excel 文件](#exporting-data)。 + +### 加载后处理代码 {#processing-after-loading-code} + +该组件会发起 AJAX 请求，并期望远程 URL 返回有效数据。由于数据加载是异步的，您需要将加载后的代码包裹在 Promise 中： + +~~~jsx +spreadsheet.load("/some/data").then(function(){ + // do something +}); +~~~ + +## 从本地数据源加载 {#loading-from-local-source} + +要从本地数据源加载数据，请使用 [](api/spreadsheet_parse_method.md) 方法。将[预先定义的数据集](#preparing-data)作为该方法的参数传入： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet"); +spreadsheet.parse(data); +~~~ + +**相关示例**：[Spreadsheet. 自定义单元格数量](https://snippet.dhtmlx.com/vc3mstsw) + +有关如何将多个工作表加载到电子表格中的详细信息，请参阅[使用工作表](working_with_sheets.md#loading-multiple-sheets)文章。 + +## 保存与恢复状态 {#saving-and-restoring-state} + +要保存电子表格的当前状态，请使用 [](api/spreadsheet_serialize_method.md) 方法。该方法将数据转换为 JSON 对象数组，每个 JSON 对象包含一个单元格的配置。 + +~~~jsx +// saving state of the spreadsheet1 +var state = spreadsheet1.serialize(); +~~~ + +然后，您可以将保存在状态数组中的数据解析到另一个电子表格中。例如： + +~~~jsx +// creating a new spreadsheet +var spreadsheet2 = new dhx.Spreadsheet(document.body); +// parsing the state of the spreadsheet1 into spreadsheet2 +spreadsheet2.parse(state); +~~~ + +## 导出数据 {#exporting-data} + +### 导出为 Excel {#export-into-excel} + +DHTMLX Spreadsheet 可以将电子表格中的数据导出为 Excel 文件。用户界面的工具栏和菜单中提供了相应的控件： + +- 菜单：文件 -> 下载为.. -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet 文件菜单，包含将数据下载为 Microsoft Excel XLSX 的选项](/img/file_export.png) + +- 工具栏：导出 -> Microsoft Excel(.xlsx) + +![DHTMLX Spreadsheet 工具栏，包含保存为 Microsoft Excel XLSX 的导出按钮](/img/export_xlsx.png) + +#### 如何导出数据 {#how-to-export-data} + +:::note +请注意，导出功能在 Internet Explorer 中不可用。 +::: + +该库使用基于 WebAssembly 的库 [Json2Excel](https://github.com/dhtmlx/json2excel) 将数据导出到 Excel。导出在 **Json2Excel** 库的 *worker.js* 文件中处理（默认链接为 `https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx`）。您可以使用公共导出服务器或本地导出服务器。要导出文件，您需要： + +- 在 Spreadsheet 配置中指定 [](api/spreadsheet_exportmodulepath_config.md) 选项，并设置 *worker.js* 文件的路径： + - 如果使用公共导出服务器，则无需指定链接，因为默认使用该服务器 + - 如果使用自己的导出服务器，您需要： + - 安装 [**Json2Excel**](https://github.com/dhtmlx/json2excel) 库 + - 使用 `"../libs/json2excel/x.x/worker.js?vx"` 指定特定版本（将 `x.x` 替换为您服务器上部署的版本号） + +~~~jsx +var spreadsheet = new dhx.Spreadsheet(document.body, { + exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // the path to the export module, if a local export server is used +}); +~~~ + +**相关示例**：[Spreadsheet. 自定义导入导出路径](https://snippet.dhtmlx.com/wykwzfhm) + +配置好所需资源后，您可以使用 Export 对象的相关 [](api/export_xlsx_method.md) API 方法导出组件数据，如下所示： + +~~~jsx +spreadsheet.export.xlsx(); +~~~ + +**相关示例**：[Spreadsheet. 导出 Xlsx](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +:::note +请注意，该组件仅支持导出为 `.xlsx` 扩展名的 Excel 文件。 +::: + +#### 如何为导出文件设置自定义名称 {#how-to-set-a-custom-name-for-an-exported-file} + +默认情况下，导出文件的名称为 "data"。您可以为导出文件提供自定义名称。为此，需要将自定义名称作为 [](api/export_xlsx_method.md) 方法的参数传入，如下所示： + +~~~jsx +spreadsheet.export.xlsx("MyData"); +~~~ + +**相关示例**：[Spreadsheet. 导出 Xlsx](https://snippet.dhtmlx.com/btyo3j8s?tag=spreadsheet) + +查看[从 Excel 文件向 Spreadsheet 导入数据](#loading-excel-file-xlsx)的步骤。 + +### 导出为 JSON {#export-into-json} + +从 v4.3 起，该库还支持将电子表格中的数据导出为 JSON 文件。请使用 Export 对象的 [json()](api/export_json_method.md) 方法： + +~~~jsx +spreadsheet.export.json(); +~~~ + +**相关示例**：[Spreadsheet. 导出/导入 JSON](https://snippet.dhtmlx.com/e3xct53l) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/localization.md b/i18n/zh/docusaurus-plugin-content-docs/current/localization.md new file mode 100644 index 00000000..851cf43e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/localization.md @@ -0,0 +1,276 @@ +--- +sidebar_label: 本地化 +title: 本地化 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的本地化功能。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 本地化 {#localization} + +您可以对 DHTMLX Spreadsheet 界面中的标签进行本地化，以任意语言呈现界面。为此，请为标签提供本地化字符串，并将您的语言区域应用到组件。 + + + +## 默认语言区域 {#default-locale} + +默认使用英语区域： + +~~~jsx +const en = { + // Toolbar + undo: "Undo", + redo: "Redo", + + textColor: "Text color", + backgroundColor: "Background color", + + bold: "Bold", + italic: "Italic", + underline: "Underline", + strikethrough: "Strikethrough", + + link: "Link", + + halign: "Horizontal align", + valign: "Vertical align", + left: "Left", + right: "Right", + center: "Center", + top: "Top", + bottom: "Bottom", + multiline: "Text wrapping", + clip: "Clip", + wrap: "Wrap", + merge: "Merge", + unmerge: "Unmerge", + + lockCell: "Lock cell", + unlockCell: "Unlock cell", + + clear: "Clear", + clearValue: "Clear value", + clearStyles: "Clear styles", + clearAll: "Clear all", + + columns: "Columns", + rows: "Rows", + addColumn: "Add column left", + removeColumn: "Remove column {col}", + removeColumns: "Remove columns {col}", + fitToData: "Fit to data", + addRow: "Add row above", + removeRow: "Remove row {row}", + removeRows: "Remove rows {row}", + row: "row", + col: "col", + freeze: "Freeze", + freezeToCol: "Freeze up to column {col}", + freezeToRow: "Freeze up to row {row}", + unfreezeRows: "Unfreeze rows", + unfreezeCols: "Unfreeze columns", + hideCol: "Hide column {col}", + hideCols: "Hide columns {col}", + showCols: "Show columns", + hideRows: "Hide rows {row}", + hideRow: "Hide row {row}", + showRows: "Show rows", + + format: "Format", + common: "Common", + number: "Number", + currency: "Currency", + percent: "Percent", + text: "Text", + date: "Date", + time: "Time", + + filter: "Filter", + + help: "Help", + + custom: "Custom", + + border: "Border", + border_all: "All borders", + border_inner: "Inner borders", + border_horizontal: "Horizontal borders", + border_vertical: "Vertical borders", + border_outer: "Outer borders", + border_color: "Border color", + border_left: "Left border", + border_top: "Top border", + border_right: "Right border", + border_bottom: "Bottom border", + border_clear: "Clear borders", + border_style: "Border style", + + // Tabbar + deleteSheet: "Delete", + renameSheet: "Rename", + renameSheetAlert: "A sheet with the name $name already exists. Please enter another name. ", + + // Menu + file: "File", + import: "Import", + export: "Export", + downloadAs: "Download as...", + importAs: "Import as...", + + data: "Data", + validation: "Data validation", + search: "Search", + sort: "Sort", + ascSort: "Sort A to Z", + descSort: "Sort Z to A", + + //Actions + copy: "Copy", + edit: "Edit", + insert: "Insert", + remove: "Remove", + linkCopied: "Link copied to clipboard", + + + //filter + e: "Is empty", + ne: "Is not empty", + tc: "Text contains", + tdc: "Text doesn't contain", + ts: "Text starts with", + te: "Text ends with", + tex: "Text is exactly", + d: "Date is", + db: "Date is before", + da: "Date is after", + gt: "Greater than", + geq: "Greater or equal to", + lt: "Less than", + leq: "Less or equal to", + eq: "Is equal to", + neq: "Is not equal to", + ib: "Is between", + inb: "Is not between", + + none: "None", + value: "Value", + values: "By values", + condition: "By condition", + and: "And", + + blank: "(Blank)", + + // Buttons + cancel: "Cancel", + save: "Save", + removeValidation: "Remove validation", + selectAll: "Select all", + unselectAll: "Unselect all", + apply: "Apply", + ok: "Ok", + + // Messages + alertTitle: "There was a problem!", + mergeAlertMessage: "You can't $action a range containing merges!", + spanMergeAlert: "You can't merge frozen and non-frozen cells!", + dontShowAgain: "Don't show again", + spanPasteError: "You can't paste merges that cross the boundary of a frozen region", + spanMergeLockedError: "You can't merge locked cells!", + spanUnmergeLockedError: "You can't unmerge locked cells!", + spanOverFilteredRow: "You can't merge cells over a filtered row.", + removeAlert: "You can't remove last $name!", +}; +~~~ + +## 自定义语言区域 {#custom-locale} + +要应用不同的语言区域，您需要： + +- 为 Spreadsheet 中的所有文本标签提供翻译，例如，俄语区域： + +~~~jsx +const ru = { + // 语言设置 +}; +~~~ + +- 在初始化 Spreadsheet 之前，通过调用 `dhx.i18n.setLocale()` 方法应用新的语言区域： + +~~~jsx +dhx.i18n.setLocale("spreadsheet", ru); +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container"); +~~~ + +## 公式的默认语言区域 {#default-locale-for-formulas} + +`dhx.i18n.formulas` 对象包含 Spreadsheet 公式弹窗的 i18n 语言区域。公式的默认语言区域如下： + +~~~jsx +const en = { + SUM: [ + ["Number1", "Required. The first value to sum."], + ["Number2", "Optional. The second value to sum."], + ["Number3", "Optional. The third value to sum."] + ], + AVERAGE: [ + ["Number1", "Required. A number or cell reference that refers to numeric values."], + ["Number2", "Optional. A number or cell reference that refers to numeric values."] + ], + // more formulas' descriptions +}; +~~~ + +[查看完整的公式默认语言区域](formulas_locale.md)。 + +**相关示例**：[Spreadsheet. 本地化](https://snippet.dhtmlx.com/yn5hyyim?mode=wide) + +## 公式的自定义语言区域 {#custom-locale-for-formulas} + +要为 Spreadsheet 公式应用自定义语言区域，需要按以下方式使用 `dhx.i18n.setLocale()` 方法： + +~~~jsx +dhx.i18n.setLocale( + "formulas", + locale: { + // the structure of the formulas in the locale + name: [param: string, description: string][] + } +): void; +~~~ + +您需要向该方法传递以下参数： + + + + + + + + + + + + + + + + +
参数描述
"formulas"（*必填*）公式语言区域的名称
locale（*必填*）包含公式描述的语言区域对象，以 key:value 键值对形式表示，其中：
  • key 是函数的名称
  • value 是该函数接受的参数数组。函数的每个参数都是一个包含两个元素的数组，其中：
    • 第一个元素是参数的名称
    • 第二个元素是参数的描述
+ +请参见以下示例： + +~~~jsx +const de = { + AVERAGE: [ + ["Zahl1", "Erforderlich. Eine Zahl oder Zellreferenz, die sich auf numerische Werte bezieht."], + ["Zahl2", "Optional. Eine Zahl oder Zellreferenz, die auf numerische Werte verweist."] + ], + // other formulas' descriptions +}; + +dhx.i18n.setLocale("formulas", de); +~~~ + +## 示例 {#example} + +在此代码片段中，您可以了解如何在语言区域之间切换： + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/merge_cells.md b/i18n/zh/docusaurus-plugin-content-docs/current/merge_cells.md new file mode 100644 index 00000000..273fbbc1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/merge_cells.md @@ -0,0 +1,47 @@ +--- +sidebar_label: 合并单元格 +title: 合并单元格 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解有关合并单元格的内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 合并单元格 {#merging-cells} + +## 合并单元格 {#merge-cells} + +要合并单元格，请按以下步骤操作： + +1\. 选择您想要合并的单元格范围 + +2\. 点击工具栏中的 **合并** 按钮 + +![DHTMLX Spreadsheet toolbar with the Merge button for merging a range of cells](/img/merge_cells.png) + +或 + +1\. 选择您想要合并的单元格范围 + +2\. 在菜单中选择：*格式 -> 合并* + +![DHTMLX Spreadsheet Format menu with the Merge option for cell merging](/img/merge_cells_via_menu.png) + +:::info +合并后的单元格显示所选范围中左上角单元格的内容。 +::: + +## 拆分单元格 {#split-cells} + +要拆分已合并的单元格，请按以下步骤操作： + +1\. 选择已合并的单元格 + +2\. 点击工具栏中的 **取消合并** 按钮 + +![DHTMLX Spreadsheet toolbar with the Unmerge button for splitting merged cells](/img/unmerge_cells.png) + +或 + +1\. 选择已合并的单元格 + +2\. 在菜单中选择：*格式 -> 取消合并* + +![DHTMLX Spreadsheet Format menu with the Unmerge option for splitting merged cells](/img/unmerge_cells_via_menu.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/migration.md b/i18n/zh/docusaurus-plugin-content-docs/current/migration.md new file mode 100644 index 00000000..aacdf815 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/migration.md @@ -0,0 +1,335 @@ +--- +sidebar_label: 迁移到新版本 +title: 迁移 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解有关迁移的内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 迁移到新版本 {#migration-to-newer-versions} + +## 5.2 -> 6.0 {#52---60} + +### 已弃用的属性 {#deprecated-properties} + +以下 `ISpreadsheetConfig` 属性已弃用并被移除。请查看下方的当前用法： + +- `dateFormat` 配置属性。请在 [`localization`](api/spreadsheet_localization_config.md) 配置对象中进行设置，如下： + - `{ localization: { dateFormat: "%d/%m/%Y" } }` +- `timeFormat` 配置属性。请在 [`localization`](api/spreadsheet_localization_config.md) 配置对象中进行设置，如下： + - `{ localization: { timeFormat: 12 } }` + +### 已弃用的方法 {#deprecated-methods} + +以下 `ISpreadsheet` 实例方法已弃用并被移除。 + +请改用新的 [`sheets` 模块（Sheet Manager）API](api/overview/sheetmanager_overview.md)： + +
+ +| 已弃用方法 | 签名 | 新用法 | 新签名 | +| --- | --- | --- | --- | +| `clearSheet(id?)` | `(id?: string) => void` | [`sheets.clear(id?)`](api/sheetmanager_clear_method.md) | `(id?: Id) => void` | +| `removeSheet(id)` | `(id: string) => void` | [`sheets.remove(id)`](api/sheetmanager_remove_method.md) | `(id: Id) => void` | +| `addSheet(name?)` | `(name?: string) => string` | [`sheets.add(name?)`](api/sheetmanager_add_method.md) | `(name?: string) => Id` | +| `getSheets()` | `() => ISheet[]` | [`sheets.getAll()`](api/sheetmanager_getall_method.md) | `() => ISheet[]` | +| `getActiveSheet()` | `() => ISheet` | [`sheets.getActive()`](api/sheetmanager_getactive_method.md) | `() => ISheet` | +| `setActiveSheet(id)` | `(id: Id) => void` | [`sheets.setActive(id)`](api/sheetmanager_setactive_method.md) | `(id: Id) => void` | + +
+ +### 已弃用的事件 {#deprecated-events} + +以下事件已弃用并被移除。请改用通用的 [`beforeAction`](api/spreadsheet_beforeaction_event.md) / [`afterAction`](api/spreadsheet_afteraction_event.md) 事件对。 + +
+ +| 已弃用事件 | 回调签名 | 新用法 | +| --- | --- | --- | +| `beforeValueChange` | `(cell: string, value: string) => void \| boolean` | `beforeAction`，action 为 `"setCellValue"` | +| `afterValueChange` | `(cell: string, value: string) => void` | `afterAction`，action 为 `"setCellValue"` | +| `beforeStyleChange` | `(cell: string, style: ...) => void \| boolean` | `beforeAction`，action 为 `"setCellStyle"` | +| `afterStyleChange` | `(cell: string, style: ...) => void` | `afterAction`，action 为 `"setCellStyle"` | +| `beforeFormatChange` | `(cell: string, format: string) => void \| boolean` | `beforeAction`，action 为 `"setCellFormat"` | +| `afterFormatChange` | `(cell: string, format: string) => void` | `afterAction`，action 为 `"setCellFormat"` | +| `beforeRowAdd` | `(cell: string) => void \| boolean` | `beforeAction`，action 为 `"addRow"` | +| `afterRowAdd` | `(cell: string) => void` | `afterAction`，action 为 `"addRow"` | +| `beforeRowDelete` | `(cell: string) => void \| boolean` | `beforeAction`，action 为 `"deleteRow"` | +| `afterRowDelete` | `(cell: string) => void` | `afterAction`，action 为 `"deleteRow"` | +| `beforeColumnAdd` | `(cell: string) => void \| boolean` | `beforeAction`，action 为 `"addColumn"` | +| `afterColumnAdd` | `(cell: string) => void` | `afterAction`，action 为 `"addColumn"` | +| `beforeColumnDelete` | `(cell: string) => void \| boolean` | `beforeAction`，action 为 `"deleteColumn"` | +| `afterColumnDelete` | `(cell: string) => void` | `afterAction`，action 为 `"deleteColumn"` | +| `beforeSheetAdd` | `(name: string) => void \| boolean` | `beforeAction`，action 为 `"addSheet"` | +| `afterSheetAdd` | `(sheet: ISheet) => void` | `afterAction`，action 为 `"addSheet"` | +| `beforeSheetRemove` | `(sheet: ISheet) => void \| boolean` | `beforeAction`，action 为 `"deleteSheet"` | +| `afterSheetRemove` | `(sheet: ISheet) => void` | `afterAction`，action 为 `"deleteSheet"` | +| `beforeSheetRename` | `(sheet: ISheet, value: string) => void \| boolean` | `beforeAction`，action 为 `"renameSheet"` | +| `afterSheetRename` | `(sheet: ISheet) => void` | `afterAction`，action 为 `"renameSheet"` | +| `beforeSheetClear` | `(sheet: ISheet) => void \| boolean` | `beforeAction`，action 为 `"clearSheet"` | +| `afterSheetClear` | `() => void` | `afterAction`，action 为 `"clearSheet"` | + +
+ +## 5.1 -> 5.2 {#51---52} + +### 冻结/取消冻结功能 {#freezingunfreezing-functionality} + +在 v5.2 中，冻结/取消冻结列和行的方式已更改： + +- 之前用于固定列和行的 `leftSplit` 和 `topSplit` 配置属性已弃用并被移除 + +~~~jsx title="v5.2 之前" +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + topSplit: 1, // the number of row to "freeze" + leftSplit: 1 // the number of columns to "freeze" +}); +~~~ + +- 新增了以下 API 方法：[`freezeCols()`](api/spreadsheet_freezecols_method.md)、[`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md)、[`freezeRows()`](api/spreadsheet_freezerows_method.md)、[`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + +~~~jsx title="从 v5.2 开始" +// for rows +spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen + +// for columns +spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed +spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +- 新增了操作：[`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + +~~~jsx title="从 v5.2 开始" +// using the `toggleFreeze` action with the beforeAction/afterAction events +spreadsheet.events.on("afterAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); + +spreadsheet.events.on("beforeAction", (actionName, config) => { + if (actionName === "toggleFreeze") { + console.log(actionName, config); + } +}); +~~~ + +- 为 [`parse()`](api/spreadsheet_parse_method.md) 方法的 *sheets* 对象新增了 `freeze` 属性。该属性允许在将数据解析到 Spreadsheet 时，为特定工作表固定行和列： + +~~~jsx {10-13} title="从 v5.2 开始" +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // more "sheet_1" settings + }, + // more sheets configuration objects + ] +}; + +spreadsheet.parse(data); +~~~ + +## 4.3 -> 5.0 {#43---50} + +在 v5.0 中，[`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 属性的 `"help"` 选项被重命名为 `"helpers"`。此外，默认选项集现在新增了 `"actions"` 选项。 + +~~~jsx title="v5.0 之前" {8} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "help" +] +~~~ + +~~~jsx title="从 v5.0 开始" {8,9} +// default configuration +toolbarBlocks: [ + "undo", + "colors", + "decoration", + "align", + "format", + "actions", + "helpers" +] +~~~ + + +## 4.2 -> 4.3 {#42---43} + +:::info +版本 4.3 是最后一个提供 IE 支持的版本 +::: + +版本 4.3 引入了一种新的方式来追踪和处理在电子表格中执行更改时触发的操作。 + +新的 [`beforeAction`](api/spreadsheet_beforeaction_event.md) 和 [`afterAction`](api/spreadsheet_afteraction_event.md) 事件会在操作执行前/后触发，并指示执行了哪个操作。这种方式只需使用这两个事件，即可为多个操作添加必要的逻辑。例如： + +~~~jsx +spreadsheet.events.on("BeforeAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config); + return true; + } + if (actionName === "addColumn") { + console.log(actionName, config); + return false; + }, + ... +}); + +spreadsheet.events.on("AfterAction", (actionName, config) => { + if (actionName === "sortCells") { + console.log(actionName, config) + } + if (actionName === "addColumn") { + console.log(actionName, config); + }, + ... +}); +~~~ + +这种方式减少了代码量，因为您无需为每个独立操作添加成对的 [**before- 和 after-**](api/overview/events_overview.md) 事件。 + +旧的方式仍然照常工作。更多详情，请查看 [Spreadsheet 操作](api/overview/actions_overview.md)。 + +:::info +目前，有一组事件必须以旧方式使用，因为它们无法被任何操作替代：*beforeEditEnd、afterEditEnd、beforeEditStart、afterEditStart、beforeFocusSet、afterFocusSet、beforeSheetChange、afterSheetChange、groupFill*。 +::: + +## 4.1 -> 4.2 {#41---42} + +在 v4.2 中，Spreadsheet 工具栏的 [对齐](customization.md#default-controls) 块被划分为两个子块：水平对齐和垂直对齐。因此，对齐块默认控件的 id 列表已更改并扩展： + +`v4.2 之前`： + +**对齐** 块： + +- *左对齐* 按钮（id："align-left"） +- *居中对齐* 按钮（id："align-center"） +- *右对齐* 按钮（id："align-right"） + +`从 v4.2 开始`： + +**对齐** 块的 **水平对齐** 子块： + +- *左* 按钮（id："halign-left"） +- *居中* 按钮（id："halign-center"） +- *右* 按钮（id："halign-right"） + +**对齐** 块的 **垂直对齐** 子块： + +- *顶部* 按钮（id："valign-top"） +- *居中* 按钮（id："valign-center"） +- *底部* 按钮（id："valign-bottom"） + +### 本地化 {#localization} + +请注意，**对齐** 块的 [语言区域选项](localization.md) 也已更新： + +`v4.2 之前`： + +~~~jsx +const locale = { + align: "Align", + ... +} +~~~ + +`从 v4.2 开始`： + +~~~jsx +const locale = { + halign: "Horizontal align", + valign: "Vertical align", + ... +} +~~~ + +## 2.1 -> 3.0 {#21---30} + +此更改列表帮助您从版本 2.1（基于 PHP 的 DHTMLX Spreadsheet）迁移到完全用 JavaScript 重写的版本 3.0。请查看下方列表，了解所有更改内容。 + +:::info +**版本 2.1 的 API** 仍然可用，但与 [**从版本 3.0 开始的 API**](api/api_overview.md) 不兼容。如果您需要版本 2.1 的文档，请[联系我们](https://dhtmlx.com/docs/contact.shtml)，我们将向您发送。 +::: + +### 已变更的 API {#changed-api} + +- getStyle -> [spreadsheet.getStyle](api/spreadsheet_getstyle_method.md) - 返回应用于单元格的样式 +- getValue -> [spreadsheet.getValue](api/spreadsheet_getvalue_method.md) - 返回包含单元格值的对象 +- setStyle -> [spreadsheet.setStyle](api/spreadsheet_setstyle_method.md) - 为单元格或单元格范围设置样式 +- setValue -> [spreadsheet.setValue](api/spreadsheet_setvalue_method.md) - 为单元格或单元格范围设置值 +- lock -> [spreadsheet.lock](api/spreadsheet_lock_method.md) - 锁定单元格或单元格范围 +- unlock -> [spreadsheet.unlock](api/spreadsheet_unlock_method.md) - 解锁已锁定的单元格或单元格范围 + +### 已移除的 API {#removed-api} + +#### Spreadsheet 类 {#spreadsheet-class} + +- getCell +- getCells +- isCell +- setSheetId + +#### SpreadsheetCell {#spreadsheetcell} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting.md b/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting.md new file mode 100644 index 00000000..86402be3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting.md @@ -0,0 +1,204 @@ +--- +sidebar_label: 数字格式化 +title: 数字格式化 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中学习有关数字格式化的开发者指南。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 数字格式化 {#number-formatting} + +DHTMLX Spreadsheet 支持数字格式化，您可以将其应用于单元格中的数值。 + +![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) + +:::note +[用户指南](number_formatting_guide.md) 可以帮助您的用户更轻松地使用 Spreadsheet。 +::: + +## 默认数字格式 {#default-number-formats} + +数字格式是一个包含一组属性的对象： + +- `id` - 格式的 id，用于通过 [`setFormat()`](api/spreadsheet_setformat_method.md) 方法为单元格设置格式 +- `mask` - 数字格式的掩码。请查看掩码中可用字符的列表（[见下文](#the-structure-of-a-mask)） +- `name` - 在工具栏和菜单下拉列表中显示的格式名称 +- `example` - 显示格式化数字效果的示例。数字 2702.31 用作格式示例的默认值 + +默认数字格式如下： + +~~~jsx +defaultFormats = [ + { name: "Common", id: "common", mask: "", example: "1500.31" }, + { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" }, + { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" }, + { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" }, + { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" }, + { + name: "Time", + id: "time", + mask: hh:mm:ss am/pm || hh:mm:ss, // depending on the localization.timeFormat config + example: "13:30:00" + }, + { name: "Text", id: "text", mask: "@", example: "'1500.31'" }, + { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" } +]; +~~~ + +以下是包含各种数字格式数据的电子表格效果： + + + +## 日期格式 {#date-format} + +您可以通过 [`localization`](api/spreadsheet_localization_config.md) 属性的 `dateFormat` 选项定义电子表格中日期的显示格式。默认格式为 `"%d/%m/%Y"`。 + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + dateFormat: "%D/%M/%Y", + } +}); + +spreadsheet.parse({ + styles: { + // a set of styles + }, + data: [ + {cell: "B1", value: "03/10/2022", format: "date"}, + {cell: "B2", value: new Date(), format: "date"}, + ] +}); +~~~ + +查看[可用于创建格式的字符完整列表](api/spreadsheet_localization_config.md#characters-for-setting-date-format)。 + +## 时间格式 {#time-format} + +要定义时间在电子表格单元格中的显示格式，请使用 [`localization`](api/spreadsheet_localization_config.md) 属性的 `timeFormat` 选项： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + localization: { + timeFormat: 24, + } +}); + +spreadsheet.parse({ + styles: { + // a set of styles + }, + data: [ + { cell: "A1", value: "18:30", format: "time" }, + { cell: "A2", value: 44550.5625, format: "time" }, + { cell: "A3", value: new Date(), format: "time" }, + ] +}); +~~~ + +## 数字、日期、时间、货币本地化 {#number-date-time-currency-localization} + +通过 Spreadsheet 配置选项，您可以本地化时间和日期、指定所需的货币符号，以及提供期望的小数分隔符和千位分隔符。所有这些设置均可在 [`localization`](api/spreadsheet_localization_config.md) 属性中进行配置。该属性是一个包含以下属性的对象： + +- `decimal` - （可选）用作小数分隔符的符号，默认为 `"."（句点）`
可选值为 `"." | ","` +- `thousands` - （可选）用作千位分隔符的符号，默认为 `","（逗号）`
可选值为 `"." | "," | " " | ""` +- `currency` - （可选）货币符号，默认为 `"$"` +- `dateFormat` - （可选）以字符串形式设置的日期显示格式，默认为 `"%d/%m/%Y"`。详情请查看 [`localization`](api/spreadsheet_localization_config.md) API 页面 +- `timeFormat` - （可选）以 `12` 或 `24` 设置的时间显示格式，默认为 `12` + +例如，您可以按如下方式更改默认本地化设置： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + localization: { + decimal: ",", + thousands: " ", + currency: "¥", + dateFormat: "%D/%M/%Y", + timeFormat: 24 + } +}); + +spreadsheet.parse(dataset); +~~~ + +以下是为 Spreadsheet 配置 `localization` 对象的效果： + + + +## 科学计数法格式 {#scientific-number-format} + +科学计数法（指数表示法）作为默认格式提供，适用于简洁地表示非常大或非常小的数字。内置的 `"scientific"` 格式使用掩码 `0.00E+00`，例如将 1500.31 显示为 `1.50E+03`。 + +要将其应用于单元格，请使用 [`setFormat()`](api/spreadsheet_setformat_method.md) 方法： + +~~~jsx +spreadsheet.setFormat("A1", "scientific"); +~~~ + +您还可以通过 [`formats`](api/spreadsheet_formats_config.md) 配置选项使用不同掩码定义自定义科学格式。例如，`0.###E+0` 产生更紧凑的输出： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + formats: [ + { id: "scientific_compact", mask: "0.###E+0", name: "Scientific (compact)", example: "1.5E+3" } + ] +}); +~~~ + +## 格式自定义 {#formats-customization} + +您不仅限于[默认数字格式](#default-number-formats)。您可以通过以下两种方式自定义格式： + +- 修改默认数字格式的设置 +- 向电子表格中添加自定义数字格式 + + + +您可以使用 [`formats`](api/spreadsheet_formats_config.md) 配置选项进行所有这些修改。该选项是一个格式对象数组，每个对象包含一组属性： + +- `id` - （`string`）必填，格式的 id，用于通过 [`setFormat()`](api/spreadsheet_setformat_method.md) 方法为单元格设置格式 +- `mask` - （`string`）必填，数字格式的掩码。请查看掩码中可用字符的列表（[见下文](#the-structure-of-a-mask)） +- `name` - （`string`）可选，在工具栏和菜单下拉列表中显示的格式名称 +- `example` - （`string`）可选，显示格式化数字效果的示例 + +### 掩码结构 {#the-structure-of-a-mask} + +掩码可以包含一组通用语法字符，包括数字占位符、分隔符、百分号和货币符号等有效字符： + +- **0** - 数字中的一位数。用于显示不重要的零，当数字的位数少于格式中的零的数量时。例如，要将 2 显示为 2.0，请使用格式 0.0。 +- **#** - 数字中的一位数。仅显示有效数字（当数字的位数少于格式中的 # 符号数量时，不重要的零将被省略）。 +- **$** - 将数字格式化为美元值。要使用不同的货币符号，需要在掩码中将其定义为 **[$ your_currency_sign]**#,##0.00，例如 [$ €]#,##0.00。 +{{note 请注意，[$ 和 ] 之间的所有字符都将被解释为货币符号。}} +- **.(句点)** - 为数字添加小数点。 +- **,(逗号)** - 为数字添加千位分隔符。 +- **[用于设置日期格式的字符](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/)** - 用于创建日期和时间的掩码。例如，要将 27.09.2023 显示为 27, Sep 2023，请使用格式 `"%d, %M %Y"`。 +- **E+ / E-** - 以科学（指数）计数法格式化数字。`E` 后面的数字定义指数位的最小数量。`E+` 始终显示指数符号；`E-` 仅对负指数显示指数符号。例如，掩码 `0.00E+00` 将 1500.31 显示为 `1.50E+03`。 + +## 设置格式 {#setting-format} + +要将所需格式应用于数值，请使用 [`setFormat()`](api/spreadsheet_setformat_method.md) 方法。该方法接受两个参数： + +- `cell` - （`string`）需要格式化其值的单元格 id +- `format` - （`string`）要应用于单元格值的[默认数字格式](#default-number-formats)名称 + +例如： + +~~~jsx +// applies the percent format to cell A1 +spreadsheet.setFormat("A1","percent"); +~~~ + +## 获取格式 {#getting-format} + +您可以使用 [`getFormat()`](api/spreadsheet_getformat_method.md) 方法获取应用于单元格值的数字格式。该方法以单元格 id 作为参数。 + +~~~jsx +var format = spreadsheet.getFormat("A1"); +// ->"percent" +~~~ + +## 事件 {#events} + +您可以使用一对事件来控制单元格格式的更改： + +- [`beforeAction`](api/spreadsheet_beforeaction_event.md) - 在 `setCellFormat` 操作执行之前触发 +- [`afterAction`](api/spreadsheet_afteraction_event.md) - 在 `setCellFormat` 操作执行之后触发 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting_guide.md b/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting_guide.md new file mode 100644 index 00000000..0d5cc623 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/number_formatting_guide.md @@ -0,0 +1,61 @@ +--- +sidebar_label: 数字格式化 +title: 数字格式化指南 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中学习有关数字格式化的用户指南。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 数字格式化 {#number-formatting} + +## 支持的数字格式 {#supported-number-formats} + +您可以将多种数字格式应用于单元格值： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
通用数字按原样显示，不应用任何格式
数字数字以指定分隔符分隔十位、百位和千位后显示
货币数字以货币符号（$）显示
百分比数字以百分号（%）显示
日期数字以指定格式的日期显示
时间数字以 12 小时或 24 小时格式的时间显示
文本数字以文本形式显示，与您输入的完全一致
科学计数法数字以指数表示法显示（例如，1500.31 显示为 1.50E+03）；适用于非常大或非常小的数字
+ +## 如何设置格式 {#how-to-set-format} + +按照以下步骤，通过工具栏将特定数字格式应用于 Spreadsheet 数据： + +- 选择您想要格式化的一个或多个单元格。 +- 点击 **数字格式** 按钮： + +![DHTMLX Spreadsheet toolbar with the Number format button for applying numeric formatting](/img/number_format_button.png) + +- 从建议的选项中选择您想要应用的格式： + +![DHTMLX Spreadsheet Number format dropdown with Common, Number, Currency, Percent, Date, Time, and Text options](/img/number_format_options.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/events.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/events.md new file mode 100644 index 00000000..d29d134a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/events.md @@ -0,0 +1,219 @@ +--- +sidebar_label: Events +title: Events 参考 +description: "ReactSpreadsheet 的事件回调 props：操作、选区、编辑、工作表及派生状态。" +--- + +# Events 参考 {#events-reference} + +所有事件回调均为可选 props。"Before" 回调可返回 `false` 以取消相应操作。 + +:::note +React 封装器使用 `onCamelCase` 形式的 prop 名称（例如 `onAfterAction`），而 JS Spreadsheet API 在 event bus 上使用 `camelCase` 形式的事件名称（例如 `afterAction`）。命令式 API 请参见 [JS API Events 参考](api/overview/events_overview.md)。 +::: + +## 操作事件 {#action-events} + +在任何用户操作（如单元格编辑、格式设置或结构性更改）时触发。 + +| Prop | 可取消 | 描述 | +|------|:-----------:|-------------| +| `onBeforeAction` | 是 | 在任何用户操作执行之前触发。返回 `false` 可取消操作。Handler：[`BeforeActionHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeAction`](api/spreadsheet_beforeaction_event.md)。 | +| `onAfterAction` | 否 | 在任何用户操作完成之后触发。Handler：[`AfterActionHandler`](react/types.md#handler-type-aliases)。JS API：[`afterAction`](api/spreadsheet_afteraction_event.md)。 | + +**示例：禁止删除行** + +~~~tsx +import { Actions } from "@dhtmlx/trial-react-spreadsheet"; + + { + if (action === Actions.deleteRow) return false; + }} +/> +~~~ + +**示例：记录所有用户操作** + +~~~tsx + { + console.log("Action:", action, "Cell:", config.cell); + }} +/> +~~~ + +## 选区事件 {#selection-events} + +在单元格选区或焦点发生变化时触发。 + +| Prop | 可取消 | 描述 | +|------|:-----------:|-------------| +| `onBeforeSelectionSet` | 是 | 在单元格被加入选区之前触发。Handler：[`BeforeCellHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeSelectionSet`](api/spreadsheet_beforeselectionset_event.md)。 | +| `onAfterSelectionSet` | 否 | 在单元格被加入选区之后触发。Handler：[`AfterCellHandler`](react/types.md#handler-type-aliases)。JS API：[`afterSelectionSet`](api/spreadsheet_afterselectionset_event.md)。 | +| `onBeforeSelectionRemove` | 是 | 在单元格从选区中移除之前触发。Handler：[`BeforeCellHandler`](react/types.md#handler-type-aliases)。 | +| `onAfterSelectionRemove` | 否 | 在单元格从选区中移除之后触发。Handler：[`AfterCellHandler`](react/types.md#handler-type-aliases)。 | +| `onBeforeFocusSet` | 是 | 在焦点单元格发生变化之前触发。Handler：[`BeforeCellHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeFocusSet`](api/spreadsheet_beforefocusset_event.md)。 | +| `onAfterFocusSet` | 否 | 在焦点单元格发生变化之后触发。Handler：[`AfterCellHandler`](react/types.md#handler-type-aliases)。JS API：[`afterFocusSet`](api/spreadsheet_afterfocusset_event.md)。 | + +**示例：跟踪当前选中单元格** + +~~~tsx +const [selectedCell, setSelectedCell] = useState(""); + + setSelectedCell(cell)} +/> + +

Current cell: {selectedCell}

+~~~ + +## 编辑事件 {#edit-events} + +在单元格编辑开始或结束时触发。 + +| Prop | 可取消 | 描述 | +|------|:-----------:|-------------| +| `onBeforeEditStart` | 是 | 在单元格编辑开始之前触发。Handler：[`BeforeEditHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeEditStart`](api/spreadsheet_beforeeditstart_event.md)。 | +| `onAfterEditStart` | 否 | 在单元格编辑开始之后触发。Handler：[`AfterEditHandler`](react/types.md#handler-type-aliases)。JS API：[`afterEditStart`](api/spreadsheet_aftereditstart_event.md)。 | +| `onBeforeEditEnd` | 是 | 在单元格编辑结束之前触发。返回 `false` 可取消并保持编辑状态。Handler：[`BeforeEditHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeEditEnd`](api/spreadsheet_beforeeditend_event.md)。 | +| `onAfterEditEnd` | 否 | 在单元格编辑结束且值已提交之后触发。Handler：[`AfterEditHandler`](react/types.md#handler-type-aliases)。JS API：[`afterEditEnd`](api/spreadsheet_aftereditend_event.md)。 | + +**示例：提交前校验** + +~~~tsx + { + if (cell.startsWith("B") && isNaN(Number(value))) { + return false; // Cancel: column B must be numeric + } + }} +/> +~~~ + +## 工作表事件 {#sheet-events} + +在活动工作表标签页发生切换时触发。 + +| Prop | 可取消 | 描述 | +|------|:-----------:|-------------| +| `onBeforeSheetChange` | 是 | 在活动工作表切换之前触发。Handler：[`BeforeSheetHandler`](react/types.md#handler-type-aliases)。JS API：[`beforeSheetChange`](api/spreadsheet_beforesheetchange_event.md)。 | +| `onAfterSheetChange` | 否 | 在活动工作表切换之后触发。Handler：[`AfterSheetHandler`](react/types.md#handler-type-aliases)。JS API：[`afterSheetChange`](api/spreadsheet_aftersheetchange_event.md)。 | + +**示例：跟踪活动工作表** + +~~~tsx + { + console.log("Switched to sheet:", sheet.name); + }} +/> +~~~ + +## 数据事件 {#data-events} + +在电子表格数据加载完成时触发。 + +| Prop | 描述 | +|------|-------------| +| `onAfterDataLoaded` | 在数据加载完成后触发（通过 `sheets` 或 `loadUrl`）。JS API：[`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md)。 | + +**示例：显示加载状态** + +~~~tsx +const [loading, setLoading] = useState(true); + + setLoading(false)} +/> +~~~ + +## 输入事件 {#input-events} + +在用户于单元格或公式栏中输入时触发。 + +| Prop | 描述 | +|------|-------------| +| `onGroupFill` | 在自动填充（拖拽填充）操作过程中触发。Handler：`(focusedCell: string, selectedCell: string) => void`。JS API：[`groupFill`](api/spreadsheet_groupfill_event.md)。 | +| `onEditLineInput` | 在公式栏/编辑栏中有输入时触发。Handler：`(value: string) => void`。 | +| `onCellInput` | 在编辑状态下单元格中有输入时触发。Handler：`(cell: string, value: string) => void`。 | + +## 派生状态回调 {#derived-state-callbacks} + +这些回调用于通知计算状态的变更，而非直接的用户操作。 + +| Prop | 描述 | +|------|-------------| +| `onStateChange` | 在撤销/重做可用性发生变化时通知。Handler：`(state: { canUndo: boolean; canRedo: boolean }) => void`。 | +| `onSearchResults` | 当 `search` prop 激活时，将匹配的单元格引用通知给调用方。Handler：`(cells: string[]) => void`。 | +| `onFilterChange` | 在用户通过 UI 更改筛选器时通知。Handler：`(filter: SheetFilter) => void`。 | + +**示例：撤销/重做按钮** + +~~~tsx +import { useRef, useState } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + return ( + <> + + + + + ); +} +~~~ + +**示例：受控搜索及结果** + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +**示例：同步筛选器状态** + +~~~tsx +const [activeFilter, setActiveFilter] = useState(null); + + setActiveFilter(filter)} +/> +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/index.md new file mode 100644 index 00000000..856d354b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/index.md @@ -0,0 +1,45 @@ +--- +sidebar_label: React Spreadsheet +title: React Spreadsheet +description: "通过官方声明式封装器，在 React 中安装、配置和使用 DHTMLX Spreadsheet。" +--- + +# React Spreadsheet + +DHTMLX Spreadsheet 的官方声明式 React 封装器。使用基于组件的 API 构建电子表格 UI：以 props 形式传入数据，通过事件回调响应变更，在需要时通过 ref 访问底层 widget。 + +## 快速开始 {#get-started} + +- [安装](react/installation.md) - 安装评估版或商业版软件包 +- [快速上手](react/quick-start.md) - 逐步构建你的第一个电子表格应用 +- [在线示例](https://dhtmlx.com/react/demos/spreadsheet/) - 查看 React Spreadsheet 功能的在线演示 + +:::info +你还可以访问 [GitHub 示例仓库](https://github.com/DHTMLX/react-spreadsheet-examples) 获取完整的可运行示例。 +::: + +## API 参考 {#api-reference} + +- [Props 参考](react/props.md) - 所有组件 props 及其类型和默认值 +- [Events 参考](react/events.md) - 按类别分组的事件回调 props +- [Types 参考](react/types.md) - TypeScript 接口、枚举及类型别名 + +## 数据模型 {#data-model} + +[`sheets`](react/props.md#data-props) prop 是所有电子表格数据的唯一数据源。每个工作表均为一个 [`SheetData`](react/types.md#sheetdata) 对象，包含单元格、行列配置、合并区域、冻结窗格、筛选器和排序信息。 + +## 状态管理 {#state-management} + +了解如何使电子表格数据与应用状态保持同步： + +- [状态管理基础](react/state/state-management-basics.md) - 受控 props、事件回调及 ref 逃生舱 +- [Redux Toolkit](react/state/redux-toolkit.md) - 逐步集成指南 + +## 框架集成 {#framework-integrations} + +- [Next.js](react/nextjs.md) - 在 Next.js App Router 中使用 React Spreadsheet + +## 主题与本地化 {#theming-and-localization} + +- [主题](react/themes.md) - 内置主题与自定义 CSS 覆盖 +- [本地化](react/localization.md) - UI 翻译及数字/日期格式化 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/installation.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/installation.md new file mode 100644 index 00000000..e620fee4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/installation.md @@ -0,0 +1,84 @@ +--- +sidebar_label: Installation +title: React Spreadsheet 安装 +description: "如何通过 npm 安装 DHTMLX React Spreadsheet 的评估版或商业版。" +--- + +# React Spreadsheet 安装 {#react-spreadsheet-installation} + +React Spreadsheet 以 npm 包的形式发布，共有三个版本：公开评估版、私有评估版和商业正式版。本页介绍如何安装各版本、导入所需的 CSS 样式表以及配置 TypeScript 支持。 + +:::info 前提条件 +- [Node.js](https://nodejs.org/en/)（推荐使用 LTS 版本） +- React 18 或更高版本 +::: + +## 评估版（公开 npm） {#evaluation-version-public-npm} + +评估包已发布在公开 npm 注册表，无需额外配置，包含 30 天免费试用。 + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +或使用 yarn： + +~~~bash +yarn add @dhtmlx/trial-react-spreadsheet +~~~ + +## 评估版（私有 npm） {#evaluation-version-private-npm} + +评估版位于 DHTMLX 私有注册表。请先配置项目： + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +然后安装： + +~~~bash +npm install @dhx/trial-react-spreadsheet +~~~ + +## 商业版（私有 npm） {#commercial-version-private-npm} + +商业版使用相同的私有注册表。请登录 [客户区](https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses) 获取凭据。 + +~~~bash +npm config set @dhx:registry https://npm.dhtmlx.com +~~~ + +~~~bash +npm install @dhx/react-spreadsheet +~~~ + +## 版本对比 {#package-variants} + +| 版本 | 包名 | 注册表 | +|---------|-------------|----------| +| 评估版（公开 npm） | `@dhtmlx/trial-react-spreadsheet` | npmjs.org（公开） | +| 评估版（私有 npm） | `@dhx/trial-react-spreadsheet` | npm.dhtmlx.com（私有） | +| 商业版 | `@dhx/react-spreadsheet` | npm.dhtmlx.com（私有） | + +## CSS 导入 {#css-import} + +在应用入口文件或组件中导入样式表： + +~~~tsx +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +商业版使用以下路径： + +~~~tsx +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +## TypeScript {#typescript} + +TypeScript 类型定义已随包一同打包，无需额外安装 `@types/` 包。 + +## 后续步骤 {#next-steps} + +- [快速上手](react/quick-start.md) - 逐步构建你的第一个电子表格应用 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/localization.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/localization.md new file mode 100644 index 00000000..1ae01ad0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/localization.md @@ -0,0 +1,75 @@ +--- +sidebar_label: Localization +title: React Spreadsheet 本地化 +description: "在 React Spreadsheet 中本地化 UI 标签、公式名称以及数字/日期格式。" +--- + +# React Spreadsheet 本地化 {#react-spreadsheet-localization} + +React Spreadsheet 针对 UI 的不同方面提供了两套独立的本地化机制。 + +## 两种本地化机制 {#two-localization-mechanisms} + +| 机制 | Prop | 控制范围 | +|-----------|------|-----------------| +| UI 本地化 | `spreadsheetLocale` | 菜单标签、工具栏提示、对话框文字及本地化公式名称 | +| 数字/日期格式化 | `localization` | 小数分隔符、货币符号、日期/时间显示格式 | + +这两个 props 相互独立，可单独使用，也可同时使用。 + +## UI 本地化（spreadsheetLocale） {#ui-localization-spreadsheetlocale} + +`spreadsheetLocale` prop 接受一个 [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) 对象，该对象包含两个属性： + +- `locale` - `Record` 类型，用于覆盖 UI 字符串 +- `formulas` - `Record` 类型，按类别分组的本地化公式名称 + +~~~tsx +const locale: SpreadsheetLocale = { + locale: { + "File": "Datei", + "Edit": "Bearbeiten", + "Insert": "Einfügen", + "Undo": "Rückgängig", + "Redo": "Wiederherstellen", + // ... 更多 UI 字符串 + }, + formulas: { + "MATCH": [ + ["Suchwert", "Erforderlich. Der Wert, der im Sucharray abgeglichen werden soll."], + ["Sucharray", "Erforderlich. Ein Zellbereich oder ein Array-Bezug."], + ], + // ... 更多公式类别 + }, +}; + + +~~~ + +:::warning +`spreadsheetLocale` 是仅初始化 prop。在初次渲染后修改该值会导致 widget 被销毁并重新创建，撤销/重做历史记录及 UI 状态（选区、滚动位置）将被重置。 +::: + +## 数字/日期格式化（localization） {#numberdate-formatting-localization} + +`localization` prop 控制数字和日期的显示方式，包括小数分隔符、货币符号和日期格式。其格式与 DHTMLX Spreadsheet 的 [`localization`](api/spreadsheet_localization_config.md) 配置属性相同。 + +~~~tsx + +~~~ + +:::warning +`localization` 同样是仅初始化 prop。修改该值会触发完整的销毁/重建周期。 +::: + +## 相关 API 和指南 {#related-api-and-guides} + +- [本地化](localization.md) - DHTMLX Spreadsheet 本地化指南 +- [SpreadsheetLocale 类型](react/types.md#spreadsheetlocale) - TypeScript 接口参考 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/nextjs.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/nextjs.md new file mode 100644 index 00000000..08ca0a2f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/nextjs.md @@ -0,0 +1,101 @@ +--- +sidebar_label: Next.js +title: 在 Next.js 中使用 React Spreadsheet +description: "如何在使用 App Router 的 Next.js 应用中使用 DHTMLX React Spreadsheet。" +--- + +# 在 Next.js 中使用 React Spreadsheet {#react-spreadsheet-in-nextjs} + +DHTMLX Spreadsheet 是一个需要访问浏览器 DOM 的客户端 widget。在使用 App Router 的 Next.js 中，服务器组件是默认类型，因此必须使用 `"use client"` 指令将电子表格包裹在客户端组件中。 + +:::note +React Spreadsheet 封装器的 JS 输出已包含 `"use client"` 声明，但在导入它的组件文件中仍需自行添加该指令。 +::: + +## 配置 {#setup} + +创建新的 Next.js 项目并安装 React Spreadsheet： + +~~~bash +npx create-next-app@latest my-spreadsheet-app +cd my-spreadsheet-app +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +## 创建客户端组件 {#creating-a-client-component} + +为电子表格组件创建一个新文件，并添加 `"use client"` 指令： + +~~~tsx title="src/components/SpreadsheetView.tsx" +"use client"; + +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +const initialSheets: SheetData[] = [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Name", css: "bold" }, + B1: { value: "Value", css: "bold" }, + A2: { value: "Item 1" }, + B2: { value: 100 }, + }, + }, +]; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +export default function SpreadsheetView() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} +~~~ + +## CSS 导入 {#css-import} + +直接在客户端组件中导入 CSS 文件（如上所示），或在根布局中导入： + +~~~tsx title="src/app/layout.tsx" +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +## 容器尺寸 {#container-sizing} + +确保容器具有明确的尺寸。若要实现全页电子表格，请将以下样式添加到全局 CSS 中： + +~~~css title="src/app/globals.css" +html, +body { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## 完整示例 {#complete-example} + +在服务器页面中使用客户端组件： + +~~~tsx title="src/app/page.tsx" +import SpreadsheetView from "@/components/SpreadsheetView"; + +export default function Home() { + return ; +} +~~~ + +## 相关 API 和指南 {#related-api-and-guides} + +- [Props 参考](react/props.md) - 所有组件 props 及其类型和默认值 +- [Events 参考](react/events.md) - 响应用户操作 +- [状态管理基础](react/state/state-management-basics.md) - 在 React 状态中管理电子表格数据 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/overview.md new file mode 100644 index 00000000..ce34b43d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/overview.md @@ -0,0 +1,207 @@ +--- +sidebar_label: Overview +title: React Spreadsheet 概述 +description: "官方 React 封装器概述：声明式数据模型、props、主题、事件及 ref 访问。" +--- + +# React Spreadsheet 概述 {#react-spreadsheet-overview} + +`ReactSpreadsheet` 是 DHTMLX Spreadsheet widget 的声明式 React 封装器。它提供基于组件的 API，以 props 描述电子表格状态，封装器负责与底层 widget 的同步。 + +:::note +React Spreadsheet 封装器适用于 DHTMLX Spreadsheet 的 **Commercial**、**Enterprise** 和 **Ultimate** 授权版本。如需评估，请使用免费的 30 天评估包。安装说明请参见 [安装](react/installation.md)。 +::: + +## 电子表格功能 {#spreadsheet-features} + +React 封装器提供对 DHTMLX Spreadsheet 完整功能集的访问： + +- 多工作表电子表格，支持工作表标签页（添加、删除、重命名） +- 单元格值、公式（90 余个内置函数）及数字格式化 +- 单元格样式、合并单元格、冻结窗格、数据校验 +- 排序、筛选和搜索 +- 行/列操作（添加、删除、隐藏/显示、调整大小、自动适应） +- 通过 WebAssembly 模块实现 Excel（XLSX）导入和导出 +- 可自定义的工具栏和右键菜单 +- 单元格锁定和只读模式 +- 4 种内置主题（light、dark、contrast-light、contrast-dark），支持 CSS 变量自定义 +- UI 标签、公式名称及数字/日期格式的本地化 +- 撤销/重做历史记录 +- TypeScript 支持，内置类型定义和 JSDoc 注释 + +## 封装器设计原则 {#wrapper-design-principles} + +- **Props 描述状态，而非操作。** 没有"触发"类 props。传入数据，组件将相应地更新 widget。 +- **`sheets` 是唯一数据源**，涵盖所有电子表格数据：单元格、合并区域、冻结窗格、筛选器、排序。 +- **Ref 是逃生舱。** 对于无法映射到声明式 props 的操作（导出、程序化选区、撤销/重做），可通过 ref 访问底层 widget 实例。 +- **所有 widget 事件均以类型化的 `onXxx` 回调 props 形式暴露。** "Before" 回调可返回 `false` 以取消操作。 + +## 版本要求 {#version-requirements} + +- React 18+ +- 仅支持 ESM 包 + +## 快速开始 {#quick-start} + +以下是一个最简可运行示例，展示如何渲染包含一个工作表和格式化单元格的电子表格。 + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + }, + }, + ]); + + const styles = { + bold: { "font-weight": "bold" }, + }; + + return ; +} +~~~ + +## 导入路径 {#import-paths} + +**评估版**（公开 npm，30 天免费试用）： + +~~~tsx +import { ReactSpreadsheet } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +~~~ + +**商业版**（私有 npm，需要授权）： + +~~~tsx +import { ReactSpreadsheet } from "@dhx/react-spreadsheet"; +import "@dhx/react-spreadsheet/spreadsheet.react.css"; +~~~ + +注册表配置及所有可用版本说明，请参见 [安装](react/installation.md)。 + +## Prop 更新行为 {#prop-update-behavior} + +Props 按组件处理变更的方式分为以下几类： + +| 类别 | Props | 变更时的行为 | +|----------|-------|----------------------| +| **仅初始化** | `menu`、`editLine`、`toolbarBlocks`、`multiSheets`、`formats`、`localization`、`importModulePath`、`exportModulePath`、`spreadsheetLocale` | widget 被销毁并重新创建。电子表格数据会被保留，但撤销/重做历史记录及 UI 状态（选区、滚动位置）将被重置。 | +| **运行时** | `readonly`、`rowsCount`、`colsCount` | 立即生效，不会造成数据丢失或 UI 状态重置。 | +| **数据** | `sheets`、`activeSheet` | 增量应用；仅更新已变更的单元格、区域或设置。 | +| **重新解析** | `styles` | 样式变更需要完整的数据重新加载。电子表格数据会被保留，但撤销/重做历史记录及 UI 状态将被重置。 | +| **状态** | `search`、`theme`、`loadUrl` | 通过专用 widget API 应用，无副作用。 | +| **容器** | `className`、`style` | 作用于封装器 `
` 的标准 React DOM props。 | + +## 示例 {#examples} + +### 包含公式的多工作表 {#multi-sheet-with-formulas} + +两个工作表，包含单元格值和 `SUM` 公式，启用工作表标签页渲染。 + +~~~tsx +const [sheets] = useState([ + { + id: "revenue", + name: "Revenue", + cells: { + A1: { value: "Q1" }, B1: { value: "Q2" }, C1: { value: "Q3" }, D1: { value: "Q4" }, + A2: { value: 12000 }, B2: { value: 15000 }, C2: { value: 18000 }, D2: { value: 21000 }, + A3: { value: "Total" }, B3: { value: "=SUM(A2:D2)", format: "currency" }, + }, + }, + { + id: "expenses", + name: "Expenses", + cells: { + A1: { value: "Category" }, B1: { value: "Amount", format: "currency" }, + A2: { value: "Marketing" }, B2: { value: 5000, format: "currency" }, + A3: { value: "Operations" }, B3: { value: 8000, format: "currency" }, + }, + }, +]); + + +~~~ + +### 自定义工具栏 {#custom-toolbar} + +向 `toolbarBlocks` 传入块标识符数组，仅显示所需的工具栏区域。 + +~~~tsx + +~~~ + +### 只读模式与锁定单元格 {#read-only-with-locked-cells} + +设置 `readonly={true}` 可在 widget 层级禁用所有编辑。在单元格上添加 `locked: true` 可在非只读模式下单独保护特定单元格。 + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Report", + cells: { + A1: { value: "Metric", locked: true }, + B1: { value: "Value", locked: true }, + A2: { value: "Revenue", locked: true }, + B2: { value: 50000, format: "currency", locked: true }, + }, + }, +]; + + +~~~ + +## 通过 ref 进行命令式访问 {#imperative-access-via-ref} + +使用 `SpreadsheetRef` 可访问底层 widget 实例，用于无法映射到声明式 props 的操作，例如序列化数据、触发撤销/重做或以编程方式设置选区。 + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + + const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); + }; + + const handleUndo = () => { + ref.current?.instance?.undo(); + }; + + return ( + <> + + + + + ); +} +~~~ + +`instance` 属性在 widget 初始化之前及卸载之后均为 `null`。 + +## API 参考 {#api-reference} + +| 文档 | 内容 | +|----------|----------| +| [Props 参考](react/props.md) | 所有组件 props 及其类型、默认值和示例 | +| [Events 参考](react/events.md) | 按类别分组的事件回调 props | +| [Types 参考](react/types.md) | TypeScript 接口、枚举及类型别名 | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/props.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/props.md new file mode 100644 index 00000000..5be5b263 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/props.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Props +title: Props 参考 +description: "ReactSpreadsheet 组件所有 props 的完整参考，包含类型和示例。" +--- + +# Props 参考 {#props-reference} + +所有 props 均为可选。若未提供任何 props，组件将以默认设置渲染一个空白电子表格。 + +## 仅初始化 props {#init-only-props} + +修改这些 props 中的任意一个都会导致 widget 被销毁并重新创建。电子表格数据会被保留，但撤销/重做历史记录及 UI 状态（选区、滚动位置）将被重置。 + +
+ +| Prop | 类型 | 描述 | +|------|------|-------------| +| `menu` | `boolean` | 显示右键菜单。JS API 参见：[`menu`](api/spreadsheet_menu_config.md)。 | +| `editLine` | `boolean` | 在表格上方显示公式/编辑栏。JS API 参见：[`editLine`](api/spreadsheet_editline_config.md)。 | +| `toolbarBlocks` | `ToolbarBlocks[]` | 要显示的工具栏块。JS API 参见：[`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md)。 | +| `multiSheets` | `boolean` | 启用多工作表标签页。JS API 参见：[`multisheets`](api/spreadsheet_multisheets_config.md)。 | +| `formats` | `IFormats[]` | 自定义数字格式定义。JS API 参见：[`formats`](api/spreadsheet_formats_config.md)。 | +| `localization` | `ISpreadsheetConfig["localization"]` | 数字/日期格式化区域设置，例如小数分隔符和货币符号。与 `spreadsheetLocale` 独立。JS API 参见：[`localization`](api/spreadsheet_localization_config.md)。 | +| `importModulePath` | `string` | XLSX 导入模块的路径。JS API 参见：[`importModulePath`](api/spreadsheet_importmodulepath_config.md)。 | +| `exportModulePath` | `string` | XLSX 导出模块的路径。JS API 参见：[`exportModulePath`](api/spreadsheet_exportmodulepath_config.md)。 | +| `spreadsheetLocale` | [`SpreadsheetLocale`](react/types.md#spreadsheetlocale) | UI 翻译及本地化公式名称。与 `localization` 独立。 | + +
+ +:::warning +修改任何仅初始化 prop 都会触发完整的销毁/重建周期。撤销/重做历史记录、选区和滚动位置将被重置。 +::: + +## 运行时 props {#runtime-props} + +这些 props 无需销毁 widget 即可立即生效，不会造成数据丢失或 UI 状态重置。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `rowsCount` | `number` | 表格的行数。JS API 参见：[`rowsCount`](api/spreadsheet_rowscount_config.md)。 | +| `colsCount` | `number` | 表格的列数。JS API 参见：[`colsCount`](api/spreadsheet_colscount_config.md)。 | +| `readonly` | `boolean` | 启用只读模式。JS API 参见：[`readonly`](api/spreadsheet_readonly_config.md)。 | + +## 数据 props {#data-props} + +`sheets` prop 是所有电子表格内容的唯一数据源。变更以增量方式应用：仅将已修改的单元格、区域或设置更新到 widget 中。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `sheets` | [`SheetData[]`](react/types.md#sheetdata) | 所有电子表格数据的唯一数据源。每个条目代表一个工作表，包含其单元格、结构和元数据。变更以增量方式应用。 | +| `styles` | `Record>` | 由 `CellData.css` 引用的共享 CSS 样式定义。键为类名，值为 CSS 属性映射。参见 [样式示例](#styles-example)。 | +| `activeSheet` | `Id` | 活动（可见）工作表的 Id。更改此值将切换显示的工作表标签页。 | + +:::warning +修改 `styles` 会触发完整的数据重新加载。电子表格数据会被保留，但撤销/重做历史记录及 UI 状态（选区、滚动位置）将被重置。 +::: + +## 搜索 props {#search-props} + +从组件外部控制搜索栏状态。配合 `onSearchResults` 使用，可构建自定义搜索 UI。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `search` | [`SearchConfig`](react/types.md#searchconfig) | 受控搜索状态。传入 `SearchConfig` 对象以触发/更新搜索。传入 `undefined` 以关闭搜索栏。 | + +## 数据加载 props {#data-loading-props} + +从远程 URL 加载电子表格数据，而非通过 `sheets` prop 提供。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `loadUrl` | `string` | 加载电子表格数据的 URL。若同时提供 `loadUrl` 和 `sheets`，则 `sheets` 优先。 | +| `loadFormat` | `FileFormat` | `loadUrl` 的文件格式提示。默认值：`"json"`。 | + +## 主题 prop {#theme-prop} + +控制应用于电子表格的视觉主题。由于 `theme` 是运行时 prop，值变更后 widget 会立即更新。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `theme` | [`SpreadsheetTheme`](react/types.md#spreadsheettheme) | 颜色主题。内置值：`"light"`、`"dark"`、`"contrast-light"`、`"contrast-dark"`。也接受自定义主题名称字符串。参见 [主题](react/themes.md)。 | + +## 容器 props {#container-props} + +应用于包裹电子表格的 `
` 的标准 React DOM props，用于控制尺寸和布局。 + +| Prop | 类型 | 描述 | +|------|------|-------------| +| `className` | `string` | 追加到封装器 `
` 的 CSS 类名。 | +| `style` | `React.CSSProperties` | 应用于封装器 `
` 的内联样式。 | + +--- + +## 示例 {#examples} + +### 包含单元格数据的工作表 {#sheets-with-cell-data} + +一个完整的 `SheetData` 示例，包含单元格、行列尺寸、合并区域和冻结标题行。 + +~~~tsx +const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Budget", + cells: { + A1: { value: "Item", css: "header" }, + B1: { value: "Amount", css: "header", format: "currency" }, + A2: { value: "Rent" }, + B2: { value: 2000, format: "currency" }, + A3: { value: "=SUM(B2:B3)" }, + }, + rows: { 0: { height: 40 } }, + cols: { 0: { width: 150 }, 1: { width: 120 } }, + merged: [{ + from: { row: 0, column: 0 }, + to: { row: 0, column: 1 } + }], + freeze: { row: 1 }, + }, +]); + + +~~~ + +### 样式示例 {#styles-example} + +在 `styles` prop 中将命名样式定义为 CSS 属性映射，然后通过 `CellData.css` 按名称引用。 + +~~~tsx +const styles = { + header: { + "font-weight": "bold", + "background": "#e3f2fd", + "color": "#1565c0", + }, + highlight: { + "background": "#ffeb3b", + "color": "#333", + }, +}; + + +~~~ + +### 工具栏自定义 {#toolbar-customization} + +~~~tsx + +~~~ + +### 多工作表模式 {#multi-sheet-mode} + +通过 `multiSheets={true}` 启用工作表标签页。传入 `false` 可完全隐藏标签栏。 + +~~~tsx + +~~~ + +~~~tsx + +~~~ + +### Excel 导入/导出 {#excel-importexport} + +~~~tsx + +~~~ + +如需使用特定版本，请将 `next` 替换为版本号（参见 [Excel2Json](https://github.com/dhtmlx/excel2json) 和 [Json2Excel](https://github.com/dhtmlx/json2excel) GitHub 仓库）。 + +### 欧式数字格式化 {#european-number-formatting} + +~~~tsx + +~~~ + +### 受控搜索 {#controlled-search} + +传入 `SearchConfig` 对象以编程方式打开搜索栏。使用 `onSearchResults` 接收匹配的单元格引用。 + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} /> + +

Found in: {results.join(", ")}

+ + +~~~ + +### 主题切换 {#theme-switching} + +~~~tsx +const [theme, setTheme] = useState("light"); + + + + +~~~ + +### 只读模式 {#read-only-mode} + +~~~tsx + +~~~ + +### 从 URL 加载数据 {#loading-data-from-url} + +~~~tsx + +~~~ + +### 锁定单元格 {#locked-cells} + +使用 `locked: true` 将单个单元格标记为不可编辑。与 `readonly` 不同，此方式可在保持其余工作表可编辑的同时，保护特定单元格。 + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Protected", + cells: { + A1: { value: "Header", locked: true }, + A2: { value: "Editable" }, + }, + }, +]; + + +~~~ + +### 单元格校验 {#cell-validation} + +向 `CellData.validation` 传入字符串数组，将单元格限制为下拉列表中的允许值。 + +~~~tsx +const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Form", + cells: { + A1: { value: "Status" }, + B1: { validation: ["Active", "Inactive", "Pending"] }, + }, + }, +]; + + +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/quick-start.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/quick-start.md new file mode 100644 index 00000000..c1a43557 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/quick-start.md @@ -0,0 +1,107 @@ +--- +sidebar_label: 快速开始 +title: React Spreadsheet 快速开始 +description: "逐步指南：从零开始渲染您的第一个 DHTMLX React Spreadsheet 组件。" +--- + +# React Spreadsheet 快速开始 {#quick-start-with-react-spreadsheet} + +本教程将引导您从零开始创建一个包含 DHTMLX Spreadsheet 的 React 应用程序。 + +## 创建新项目 {#create-a-new-project} + +~~~bash +npm create vite@latest my-spreadsheet-app -- --template react-ts +cd my-spreadsheet-app +~~~ + +## 安装 React Spreadsheet {#install-react-spreadsheet} + +~~~bash +npm install @dhtmlx/trial-react-spreadsheet +~~~ + +有关其他软件包变体，请参阅[安装](react/installation.md)。 + +## 创建示例数据 {#create-demo-data} + +创建文件 `src/data.ts`，包含示例电子表格数据： + +~~~ts title="src/data.ts" +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +export const sheets: SheetData[] = [ + { + id: "sheet1", + name: "Sales", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Revenue", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 15000, format: "currency" }, + A3: { value: "Gadget" }, + B3: { value: 22000, format: "currency" }, + A4: { value: "Total" }, + B4: { value: "=SUM(B2:B3)", format: "currency" }, + }, + }, +]; + +export const styles = { + bold: { "font-weight": "bold" }, +}; +~~~ + +## 创建组件 {#create-the-component} + +替换 `src/App.tsx` 的内容： + +~~~tsx title="src/App.tsx" +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import { sheets as initialSheets, styles } from "./data"; + +function App() { + const [sheets] = useState(initialSheets); + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## 添加样式 {#add-styles} + +更新 `src/index.css` 以确保全高布局： + +~~~css title="src/index.css" +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} +~~~ + +## 启动应用 {#start-the-app} + +~~~bash +npm run dev +~~~ + +在终端中打开显示的 URL（通常为 `http://localhost:5173`）即可查看电子表格。 + +## 相关 API 和指南 {#related-api-and-guides} + +- [Props 参考](react/props.md) - 配置电子表格行为 +- [Events 参考](react/events.md) - 响应用户操作 +- [Types 参考](react/types.md) - TypeScript 接口和枚举 +- [数据与状态管理](react/state/state-management-basics.md) - 在应用状态中管理电子表格数据 + +您还可以探索 [GitHub 演示仓库](https://github.com/DHTMLX/react-spreadsheet-examples)，查看完整的工作示例。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/state/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/index.md new file mode 100644 index 00000000..3c155ab0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/index.md @@ -0,0 +1,21 @@ +--- +sidebar_label: "数据与状态" +title: "数据与状态管理" +description: "在 React 状态或状态管理库中管理 DHTMLX Spreadsheet 数据的模式。" +--- + +# 数据与状态管理 {#data--state-management} + +本节介绍将电子表格数据与应用状态同步管理的模式，涵盖从基本的 React `useState` 到状态管理库的各种方案。 + +## 从这里开始 {#start-here} + +- [状态管理基础](react/state/state-management-basics.md) - 核心模式：受控 props、事件回调、ref 逃生舱及性能技巧 + +## 状态库指南 {#state-library-guides} + +- [Redux Toolkit](react/state/redux-toolkit.md) - 与 Redux Toolkit 集成的逐步指南 + +## 关键概念 {#key-concept} + +`sheets` prop 是所有电子表格数据的**唯一真实来源**。传入一个 [`SheetData`](react/types.md#sheetdata) 对象数组，wrapper 会将您的数据与当前 widget 状态进行差异比对，仅应用发生变化的部分。使用不可变更新（展开运算符、函数式 `setState` 更新器），使 React 能够高效地检测变化。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md new file mode 100644 index 00000000..d8c23890 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/redux-toolkit.md @@ -0,0 +1,183 @@ +--- +sidebar_label: Redux toolkit +title: 结合 Redux Toolkit 使用 React Spreadsheet +description: "DHTMLX React Spreadsheet 与 Redux Toolkit 的逐步集成指南。" +--- + +# 结合 Redux Toolkit 使用 React Spreadsheet {#react-spreadsheet-with-redux-toolkit} + +本教程演示如何在 Redux Toolkit store 中管理电子表格数据。 + +## 前提条件 {#prerequisites} + +- 熟悉 React、TypeScript 及 [Redux Toolkit](https://redux-toolkit.js.org/) 基础知识 +- 已完成[状态管理基础](react/state/state-management-basics.md)指南 + +## 初始化设置 {#setup} + +创建 Vite 项目并安装依赖： + +~~~bash +npm create vite@latest my-rtk-spreadsheet -- --template react-ts +cd my-rtk-spreadsheet +npm install @dhtmlx/trial-react-spreadsheet @reduxjs/toolkit react-redux +~~~ + +## 创建 slice {#create-the-slice} + +在 Redux Toolkit slice 中定义电子表格的状态结构、初始数据和 reducers。 + +~~~ts title="src/store/spreadsheetSlice.ts" +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import type { SheetData } from "@dhtmlx/trial-react-spreadsheet"; + +interface SpreadsheetState { + sheets: SheetData[]; + activeSheet: string; +} + +const initialState: SpreadsheetState = { + sheets: [ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Price", css: "bold", format: "currency" }, + A2: { value: "Widget" }, + B2: { value: 25.99, format: "currency" }, + }, + }, + ], + activeSheet: "sheet1", +}; + +const spreadsheetSlice = createSlice({ + name: "spreadsheet", + initialState, + reducers: { + setSheets(state, action: PayloadAction) { + state.sheets = action.payload; + }, + setActiveSheet(state, action: PayloadAction) { + state.activeSheet = action.payload; + }, + updateCell( + state, + action: PayloadAction<{ sheetId: string; cell: string; value: string | number }> + ) { + const { sheetId, cell, value } = action.payload; + const sheet = state.sheets.find((s) => s.id === sheetId); + if (sheet) { + sheet.cells[cell] = { ...sheet.cells[cell], value }; + } + }, + }, +}); + +export const { setSheets, setActiveSheet, updateCell } = spreadsheetSlice.actions; +export default spreadsheetSlice.reducer; +~~~ + +## 配置 store {#configure-the-store} + +在 Redux store 中注册 slice，并导出类型化的 `RootState` 和 `AppDispatch` 辅助类型。 + +~~~ts title="src/store/index.ts" +import { configureStore } from "@reduxjs/toolkit"; +import spreadsheetReducer from "./spreadsheetSlice"; + +export const store = configureStore({ + reducer: { + spreadsheet: spreadsheetReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +使用 provider 包裹您的应用： + +~~~tsx title="src/main.tsx" +import React from "react"; +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import { store } from "./store"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + +); +~~~ + +## 创建组件 {#create-the-component} + +使用 `useSelector` 读取状态，使用 `useDispatch` 在每次用户操作后将变更同步回 store，从而将 `ReactSpreadsheet` 连接到 Redux store。 + +~~~tsx title="src/App.tsx" +import { useRef } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; +import type { RootState } from "./store"; +import { setSheets } from "./store/spreadsheetSlice"; + +const styles = { + bold: { "font-weight": "bold" }, +}; + +function App() { + const ref = useRef(null); + const dispatch = useDispatch(); + const sheets = useSelector((state: RootState) => state.spreadsheet.sheets); + const activeSheet = useSelector((state: RootState) => state.spreadsheet.activeSheet); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data?.sheets) { + dispatch(setSheets(data.sheets)); + } + }; + + return ( +
+ +
+ ); +} + +export default App; +~~~ + +## 通过 ref 读取数据 {#reading-data-via-ref} + +使用 `ref.current.instance` 执行只读操作，例如序列化或获取单元格值： + +~~~tsx +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + // 发送到 API、下载等 +}; + +const getCellValue = (cell: string) => { + return ref.current?.instance?.getValue(cell); +}; +~~~ + +## 相关 API 和指南 {#related-api-and-guides} + +- [Props 参考](react/props.md) - 所有组件 props +- [Events 参考](react/events.md) - 事件 callback props +- [状态管理基础](react/state/state-management-basics.md) - 核心模式 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md new file mode 100644 index 00000000..4fdca3d5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/state/state-management-basics.md @@ -0,0 +1,172 @@ +--- +sidebar_label: 基础 +title: 数据绑定与状态管理基础 +description: "在 React 中管理电子表格数据的核心模式：受控 props、事件 callbacks 及 ref 逃生舱。" +--- + +# 数据绑定与状态管理基础 {#data-binding--state-management-basics} + +## 声明式模型 {#the-declarative-model} + +React Spreadsheet 遵循声明式方法：将 sheet 数据存储在 React 状态中，以 props 的形式传入，wrapper 会自动将您的数据与当前 widget 状态进行差异比对，仅应用发生变化的部分。 + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets, setSheets] = useState([ + { + id: "sheet1", + name: "Data", + cells: { + A1: { value: "Hello" }, + }, + }, + ]); + + return ; +} +~~~ + +## 更新单元格 {#updating-cells} + +使用函数式 `setState` 更新器进行不可变状态更新： + +~~~tsx +const updateCell = (sheetId: string, cell: string, value: string | number) => { + setSheets((prev) => + prev.map((sheet) => + sheet.id === sheetId + ? { + ...sheet, + cells: { + ...sheet.cells, + [cell]: { ...sheet.cells[cell], value }, + }, + } + : sheet + ) + ); +}; +~~~ + +## 响应用户操作 {#responding-to-user-actions} + +使用 `onAfterAction` 响应用户更改。配合 `ref` 读取当前 widget 数据： + +~~~tsx +import { useRef } from "react"; +import { ReactSpreadsheet, type SpreadsheetRef } from "@dhtmlx/trial-react-spreadsheet"; + +function App() { + const ref = useRef(null); + const [sheets, setSheets] = useState([/* ... */]); + + const handleAfterAction = () => { + const data = ref.current?.instance?.serialize(); + if (data) { + // 将 widget 状态同步回 React 状态 + console.log("Spreadsheet data:", data); + } + }; + + return ( + + ); +} +~~~ + +## ref 逃生舱 {#the-ref-escape-hatch} + +对于无法映射到声明式 props 的操作，使用 [`SpreadsheetRef`](react/types.md#spreadsheetref) 访问底层 widget 实例： + +- **序列化数据：** `ref.current?.instance?.serialize()` +- **撤销/重做：** `ref.current?.instance?.undo()` / `ref.current?.instance?.redo()` +- **获取单元格值：** `ref.current?.instance?.getValue("A1")` +- **程序化选区：** `ref.current?.instance?.selection.setSelectedCell("A1:C5")` + +~~~tsx +const ref = useRef(null); + +const handleExport = () => { + const data = ref.current?.instance?.serialize(); + console.log(data); +}; + + +~~~ + +:::warning +避免将命令式写入操作（例如 `instance.setValue()`）与声明式 `sheets` prop 混用。wrapper 可能在下一个渲染周期覆盖命令式更改。ref 仅用于**读取**数据及执行撤销/重做、选区、导出等操作。 +::: + +## 受控搜索 {#controlled-search} + +使用 `search` prop 配合 `onSearchResults` 实现受控搜索： + +~~~tsx +const [search, setSearch] = useState(); +const [results, setResults] = useState([]); + + setSearch({ query: e.target.value, open: true })} +/> +

{results.length} cells found

+ + +~~~ + +## 撤销/重做 {#undo--redo} + +使用 `onStateChange` 跟踪撤销/重做的可用状态，通过 ref 调用 `undo()`/`redo()`： + +~~~tsx +const ref = useRef(null); +const [history, setHistory] = useState({ canUndo: false, canRedo: false }); + + + + + +~~~ + +## 性能 {#performance} + +- 使用 `useMemo` 缓存派生 sheets，避免不必要的重新计算： + +~~~tsx +const filteredSheets = useMemo( + () => sheets.filter((s) => s.name !== "Hidden"), + [sheets] +); + + +~~~ + +- 避免在每次渲染时重新创建 `styles` 对象。在组件外部定义，或使用 `useMemo` 包裹。 +- 使用函数式 `setState` 更新器，避免事件 callbacks 中出现过时闭包问题。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/themes.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/themes.md new file mode 100644 index 00000000..4d659e95 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/themes.md @@ -0,0 +1,93 @@ +--- +sidebar_label: 主题 +title: React Spreadsheet 主题 +description: "为 DHTMLX React Spreadsheet 应用内置主题或自定义主题。" +--- + +# React Spreadsheet 主题 {#react-spreadsheet-themes} + +React Spreadsheet 内置四个主题，并支持通过 CSS 变量定义自定义主题。使用 `theme` prop 选择内置主题，或应用您自定义的主题。 + +## 内置主题 {#built-in-themes} + +[`SpreadsheetTheme`](react/types.md#spreadsheettheme) 类型定义了四个内置主题： + +- `"light"`（默认） +- `"dark"` +- `"contrast-light"` +- `"contrast-dark"` + +也可以传入自定义主题名称字符串。 + +## 应用主题 {#applying-a-theme} + +将 `theme` prop 传递给 `ReactSpreadsheet`，指定要使用的主题名称： + +~~~tsx + +~~~ + +## 运行时切换 {#switching-at-runtime} + +使用 React 状态动态切换主题： + +~~~tsx +import { useState } from "react"; +import { ReactSpreadsheet, type SheetData, type SpreadsheetTheme } from "@dhtmlx/trial-react-spreadsheet"; +import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css"; + +function App() { + const [sheets] = useState([/* ... */]); + const [theme, setTheme] = useState("light"); + + return ( + <> + + + + + ); +} +~~~ + +## 自定义 CSS 变量 {#custom-css-variables} + +DHTMLX Spreadsheet 使用分层 CSS 变量系统。您可以覆盖这些变量，在内置主题之外进一步定制外观。 + +### 创建自定义主题 {#creating-a-custom-theme} + +定义自定义 `data-dhx-theme` 选择器，覆盖所需变量，并将主题名称作为 prop 传入： + +~~~css title="src/custom-theme.css" +[data-dhx-theme='corporate'] { + /* 配色方案 */ + --dhx-h-primary: 220; + --dhx-s-primary: 60%; + --dhx-l-primary: 45%; + + /* 工具栏和网格 */ + --dhx-s-toolbar-background: #f0f4f8; + --dhx-s-grid-header-background: #e2e8f0; + + /* 电子表格区域颜色 */ + --dhx-spreadsheet-range-background-1: #bee3f8; + --dhx-spreadsheet-range-color-1: #2b6cb0; +} +~~~ + +~~~tsx +import "./custom-theme.css"; + + +~~~ + +## 相关指南 {#related-guides} + +- [主题](/themes/) - DHTMLX Spreadsheet 内置主题概览 +- [内置主题配置](themes/base_themes_configuration.md) - 配置内置主题 +- [自定义主题](themes/custom_theme.md) - 创建自定义主题 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/react/types.md b/i18n/zh/docusaurus-plugin-content-docs/current/react/types.md new file mode 100644 index 00000000..785aef28 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/react/types.md @@ -0,0 +1,276 @@ +--- +sidebar_label: 类型 +title: 类型参考 +description: "从 @dhx/react-spreadsheet 导出的 TypeScript 接口、枚举和类型别名。" +--- + +# 类型参考 {#types-reference} + +所有类型均从 `@dhx/react-spreadsheet` 或 `@dhtmlx/trial-react-spreadsheet` 导出。 + +~~~tsx +import type { SheetData, CellData, SpreadsheetRef /* ... */ } from "@dhtmlx/trial-react-spreadsheet"; +~~~ + +## CellData {#celldata} + +单个单元格的声明式状态。所有属性均为可选；更新时省略的属性将保留其当前值。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `value` | `string \| number` | 单元格值：文本、数字或公式字符串（以 `=` 开头）。 | +| `css` | `string` | CSS 类名，引用顶层 `styles` 映射中的键。 | +| `format` | `string` | 数字格式掩码或别名（例如 `"currency"` 或 `"#,##0.00"`）。 | +| `locked` | `boolean` | 单元格是否锁定（禁止编辑）。 | +| `validation` | `string \| string[]` | 数据验证下拉选项。 | + +## RowConfig {#rowconfig} + +行元数据。只有具有非默认配置的行才需要条目。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `height` | `number` | 行高（像素）。 | +| `hidden` | `boolean` | 行是否隐藏。 | + +## ColConfig {#colconfig} + +列元数据。只有具有非默认配置的列才需要条目。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `width` | `number` | 列宽（像素）。 | +| `hidden` | `boolean` | 列是否隐藏。 | + +## MergedRange {#mergedrange} + +使用从 0 开始的行/列坐标定义合并单元格范围。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `from` | `{ row: number; column: number }` | 合并区域左上角（从 0 开始）。 | +| `to` | `{ row: number; column: number }` | 合并区域右下角（从 0 开始）。 | + +**示例：** + +~~~ts +// 合并 A1:B2 +const merge: MergedRange = { + from: { row: 0, column: 0 }, + to: { row: 1, column: 1 }, +}; +~~~ + +## FreezeConfig {#freezeconfig} + +sheet 的冻结窗格配置。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `col` | `number` | 冻结至此从 0 开始的列号之前的所有列。`undefined` 表示不冻结列。 | +| `row` | `number` | 冻结至此从 0 开始的行号之前的所有行。`undefined` 表示不冻结行。 | + +## SheetFilter {#sheetfilter} + +sheet 中某列的筛选配置。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `cell` | `string` | 标识筛选列的单元格引用（例如 `"A1"`）。 | +| `rules` | `IFilterRules[]` | 要应用的筛选规则。空数组将清除筛选。 | + +## SheetSort {#sheetsort} + +sheet 中某列的排序配置。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `cell` | `string` | 排序操作的单元格引用或范围（例如 `"B1"` 或 `"A1:E8"`）。使用范围可在保持行完整性的同时对多列排序。 | +| `dir` | `1 \| -1` | 排序方向：`1` = 升序，`-1` = 降序。 | + +## SheetData {#sheetdata} + +单个电子表格 sheet 的完整声明式状态。 + +| 属性 | 类型 | 必填 | 描述 | +|----------|------|:--------:|-------------| +| `id` | `Id` | 是 | 唯一的 sheet 标识符。必须在渲染间保持稳定。 | +| `name` | `string` | 是 | 显示在 sheet 标签上的名称。 | +| `cells` | `Record` | 是 | 以单元格引用为键的单元格数据（例如 `"A1"` 或 `"B2"`）。只有具有非默认数据的单元格才需要条目。 | +| `rows` | `Record` | 否 | 以从 0 开始的行号为键的行配置。 | +| `cols` | `Record` | 否 | 以从 0 开始的列号为键的列配置。 | +| `merged` | `MergedRange[]` | 否 | 合并单元格范围。 | +| `freeze` | `FreezeConfig` | 否 | 冻结窗格配置。 | +| `filter` | `SheetFilter` | 否 | 列筛选配置。设为 `undefined` 可清除筛选。 | +| `sort` | `SheetSort` | 否 | 排序配置。 | + +**示例：** + +~~~ts +const sheet: SheetData = { + id: "sheet1", + name: "Inventory", + cells: { + A1: { value: "Product", css: "bold" }, + B1: { value: "Quantity", css: "bold" }, + A2: { value: "Laptop" }, + B2: { value: 42 }, + }, + cols: { 0: { width: 200 } }, + freeze: { row: 1 }, +}; +~~~ + +## SearchConfig {#searchconfig} + +受控搜索状态。传入对象可触发/更新搜索，传入 `undefined` 可关闭搜索。 + +| 属性 | 类型 | 必填 | 描述 | +|----------|------|:--------:|-------------| +| `query` | `string` | 是 | 要搜索的文本。 | +| `open` | `boolean` | 否 | 是否打开内置搜索 UI。默认值：`false`。 | +| `sheetId` | `Id` | 否 | 按 id 将搜索限定在特定 sheet 中。 | + +## SpreadsheetLocale {#spreadsheetlocale} + +UI 标签和公式名称的本地化配置。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `locale` | `Record` | UI 字符串覆盖。键与库的语言字典匹配。 | +| `formulas` | `Record` | 按分类分组的本地化公式名称。每个条目为元组：`[localizedName, optionalDescription?]`。 | + +## SpreadsheetTheme {#spreadsheettheme} + +~~~ts +type SpreadsheetTheme = "light" | "dark" | "contrast-light" | "contrast-dark" | string; +~~~ + +内置颜色主题。也接受自定义主题名称字符串。 + +## IExecuteConfig {#iexecuteconfig} + +传递给 [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) 的操作执行配置。形状因操作类型而异。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `row` | `number` | 目标行索引。 | +| `col` | `number` | 目标列索引。 | +| `target` | `unknown` | 特定操作的目标。 | +| `val` | `unknown` | 新值。 | +| `prev` | `unknown` | 原值。 | +| `action` | `Actions \| string` | 操作标识符。 | +| `groupAction` | `Actions \| string` | 父组操作标识符。 | +| `cell` | `string` | 单元格引用（例如 `"A1"`）。 | +| `pageId` | `Id` | 目标 sheet id。 | +| `pageName` | `string` | 目标 sheet 名称。 | +| `[key: string]` | `unknown` | 其他特定操作属性。 | + +## SpreadsheetRef {#spreadsheetref} + +通过 `React.forwardRef` 暴露的命令式句柄。提供对底层 DHTMLX Spreadsheet 实例的直接访问，用于无法映射到声明式 props 的操作。 + +| 属性 | 类型 | 描述 | +|----------|------|-------------| +| `instance` | `ISpreadsheet \| null` | 底层 widget 实例。初始化前和卸载后为 `null`。 | + +**示例：** + +~~~tsx +const ref = useRef(null); + +// 序列化数据 +const data = ref.current?.instance?.serialize(); + +// 程序化选区 +ref.current?.instance?.selection.setSelectedCell("A1:C5"); + +// 撤销/重做 +ref.current?.instance?.undo(); +ref.current?.instance?.redo(); +~~~ + +## Actions 枚举 {#actions-enum} + +已知的电子表格操作标识符。在 [`onBeforeAction`](react/events.md#action-events) / [`onAfterAction`](react/events.md#action-events) 中用于类型安全的操作匹配。处理器参数上的 `| string` 联合类型可向前兼容未来新增的操作。 + +| 值 | 描述 | +|-------|-------------| +| `setCellStyle` | 为单元格应用 CSS 样式。 | +| `setCellValue` | 设置单元格值。 | +| `setCellFormat` | 为单元格设置数字格式。 | +| `removeCellStyles` | 移除单元格的 CSS 样式。 | +| `lockCell` | 锁定或解锁单元格。 | +| `deleteRow` | 删除行。 | +| `addRow` | 插入行。 | +| `deleteColumn` | 删除列。 | +| `addColumn` | 插入列。 | +| `groupAction` | 批量操作（多个子操作）。 | +| `groupRowAction` | 批量行操作。 | +| `groupColAction` | 批量列操作。 | +| `addSheet` | 添加新 sheet。 | +| `deleteSheet` | 删除 sheet。 | +| `renameSheet` | 重命名 sheet。 | +| `clearSheet` | 清除 sheet 中的所有数据。 | +| `clear` | 清除选中的单元格。 | +| `resizeCol` | 调整列宽。 | +| `resizeRow` | 调整行高。 | +| `setValidation` | 为单元格设置数据验证。 | +| `sortCells` | 对单元格排序。 | +| `insertLink` | 插入超链接。 | +| `fitColumn` | 自动调整列宽以适应内容。 | +| `filter` | 应用或更改列筛选。 | +| `merge` | 合并单元格。 | +| `unmerge` | 取消合并单元格。 | +| `toggleFreeze` | 切换冻结窗格。 | +| `toggleVisibility` | 切换行/列可见性。 | + +## 处理器类型别名 {#handler-type-aliases} + +事件 callback props 所用函数签名的便捷别名。导入这些别名可对处理器函数进行显式类型标注。 + +
+ +| 类型 | 签名 | 用于 | +|------|-----------|---------| +| `BeforeActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => boolean \| void` | `onBeforeAction` | +| `AfterActionHandler` | `(action: Actions \| string, config: IExecuteConfig) => void` | `onAfterAction` | +| `BeforeCellHandler` | `(cell: string) => boolean \| void` | `onBeforeSelectionSet`、`onBeforeSelectionRemove`、`onBeforeFocusSet` | +| `AfterCellHandler` | `(cell: string) => void` | `onAfterSelectionSet`、`onAfterSelectionRemove`、`onAfterFocusSet` | +| `BeforeEditHandler` | `(cell: string, value: string) => boolean \| void` | `onBeforeEditStart`、`onBeforeEditEnd` | +| `AfterEditHandler` | `(cell: string, value: string) => void` | `onAfterEditStart`、`onAfterEditEnd` | +| `BeforeSheetHandler` | `(sheet: ISheet) => boolean \| void` | `onBeforeSheetChange` | +| `AfterSheetHandler` | `(sheet: ISheet) => void` | `onAfterSheetChange` | + +
+ +## SpreadsheetConfigProps {#spreadsheetconfigprops} + +~~~ts +type SpreadsheetConfigProps = Omit< + ISpreadsheetConfig, + "leftSplit" | "topSplit" | "dateFormat" | "timeFormat" +>; +~~~ + +组件 props 的基础类型。将所有 `ISpreadsheetConfig` 构造函数选项作为扁平 props 暴露。 + +## 重新导出的上游类型 {#re-exported-upstream-types} + +以下类型从 `@dhx/ts-spreadsheet` 重新导出，以便使用： + +| 类型 | 描述 | +|------|-------------| +| `ISpreadsheet` | 主电子表格 widget 实例接口。 | +| `ISpreadsheetConfig` | 构造函数配置接口。 | +| `ISheet` | Sheet 实例接口（在 sheet 事件 callbacks 中使用）。 | +| `IFormats` | 自定义数字格式定义。 | +| `IFilterRules` | 筛选规则配置。 | +| `IFilter` | 筛选实例接口。 | +| `IStylesList` | 样式定义映射。 | +| `IDataWithStyles` | 含内嵌样式的数据结构（由 `serialize()`/`parse()` 使用）。 | +| `ICellInfo` | widget 方法返回的单元格信息。 | +| `FileFormat` | 数据加载的文件格式（例如 `"json"` 或 `"xlsx"`）。 | +| `ToolbarBlocks` | 工具栏块标识符（例如 `"default"`、`"undo"` 或 `"font"`）。 | +| `FilterConditions` | 可用筛选条件类型的枚举。 | +| `Id` | 通用标识符类型（`string \| number`）。 | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/sorting_data.md b/i18n/zh/docusaurus-plugin-content-docs/current/sorting_data.md new file mode 100644 index 00000000..b0f119f7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/sorting_data.md @@ -0,0 +1,41 @@ +--- +sidebar_label: 数据排序 +title: 数据排序 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解有关数据排序的内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 数据排序 {#sorting-data} + +## 按列排序数据 {#sorting-data-by-a-column} + +要按列对电子表格数据进行排序，请按以下步骤操作： + +1\. 右键单击您想要排序数据所依据的列标题 + +2\. 选择 *排序* -> *从 A 到 Z 排序* 或 *从 Z 到 A 排序* + +![DHTMLX Spreadsheet column header context menu with Sort A to Z and Sort Z to A options](/img/sort_col.png) + +或 + +1\. 单击列标题选择所需的列 + +2\. 在菜单中选择：*数据* -> *排序* -> *从 A 到 Z 排序* 或 *从 Z 到 A 排序* + +![DHTMLX Spreadsheet Data menu with the Sort submenu showing Sort A to Z and Sort Z to A](/img/sort_col_menu.png) + +## 按范围排序数据 {#sorting-data-by-a-range} + +要按独立范围对电子表格数据进行排序，请按以下步骤操作： + +1\. 在您想要排序数据所依据的列中选择一个单元格范围 + +2\. 选择以下两种操作之一： + +- 右键单击所选范围中的单元格，选择 *排序* -> *从 A 到 Z 排序* 或 *从 Z 到 A 排序* + +![DHTMLX Spreadsheet context menu on a selected range with the Sort submenu](/img/sort_range_menu.png) + +- 或在菜单中选择：*数据* -> *排序* -> *从 A 到 Z 排序* 或 *从 Z 到 A 排序* + +![DHTMLX Spreadsheet Data menu with the Sort submenu for sorting a selected cell range](/img/sort_range.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/svelte_integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/svelte_integration.md new file mode 100644 index 00000000..7c53898c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/svelte_integration.md @@ -0,0 +1,259 @@ +--- +sidebar_label: 与 Svelte 集成 +title: Svelte 集成 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的 Svelte 集成。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# 与 Svelte 集成 {#integration-with-svelte} + +:::tip +在阅读本文档之前，您应该熟悉 **Svelte** 的基本概念和模式。如需温习相关知识，请参阅 [**Svelte 文档**](https://svelte.dev/)。 +::: + +DHTMLX Spreadsheet 与 **Svelte** 兼容。我们已准备了如何将 DHTMLX Spreadsheet 与 **Svelte** 配合使用的代码示例。更多信息，请参阅相应的 [**GitHub 示例**](https://github.com/DHTMLX/svelte-spreadsheet-demo)。 + +## 创建项目 {#creating-a-project} + +:::info +在开始创建新项目之前，请安装 [**Vite**](https://vite.dev/)（可选）和 [**Node.js**](https://nodejs.org/en/)。 +::: + +要创建 **Svelte** JS 项目，请运行以下命令： + +~~~json +npm create vite@latest +~~~ + +将项目命名为 **my-svelte-spreadsheet-app**。 + +### 安装依赖 {#installation-of-dependencies} + +进入应用目录： + +~~~json +cd my-svelte-spreadsheet-app +~~~ + +然后安装依赖并运行应用。请使用包管理器执行以下操作： + +- 如果您使用 [**yarn**](https://yarnpkg.com/)，需要执行以下命令： + +~~~jsx +yarn +yarn dev // or yarn dev +~~~ + +- 如果您使用 [**npm**](https://www.npmjs.com/)，需要执行以下命令： + +~~~json +npm install +npm run dev +~~~ + +应用应在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 Spreadsheet {#creating-spreadsheet} + +现在您需要获取 DHTMLX Spreadsheet 源代码。首先停止应用并安装 Spreadsheet 包。 + +### 第一步：安装包 {#step-1-package-installation} + +下载[**试用版 Spreadsheet 包**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn)并按照 README 文件中的步骤操作。请注意，试用版 Spreadsheet 仅可使用 30 天。 + +### 第二步：创建组件 {#step-2-component-creation} + +现在您需要创建一个 Svelte 组件，将 Spreadsheet 添加到应用中。在 *src/* 目录中创建一个新文件，命名为 *Spreadsheet.svelte*。 + +#### 导入源文件 {#importing-source-files} + +打开 *Spreadsheet.svelte* 文件并导入 Spreadsheet 源文件。请注意： + +- 如果您使用专业版并从本地文件夹安装 Spreadsheet 包，导入路径如下： + +~~~html title="Spreadsheet.svelte" + +~~~ + +请注意，根据所使用的包，源文件可能已被压缩。此情况下，请确保导入的 CSS 文件为 *spreadsheet.min.css*。 + +- 如果您使用 Spreadsheet 试用版，请指定以下路径： + +~~~html title="Spreadsheet.svelte" + +~~~ + +本教程演示如何配置 Spreadsheet 的**试用**版本。 + +#### 设置容器并添加 Spreadsheet {#setting-the-container-and-adding-spreadsheet} + +要在页面上显示 Spreadsheet，您需要创建 Spreadsheet 的容器，并使用相应的构造函数初始化该组件： + +~~~html {3,6,10-11,19} title="Spreadsheet.svelte" + + +
+~~~ + +#### 添加样式 {#adding-styles} + +为了正确显示 Spreadsheet，您需要在项目的主 CSS 文件中为 Spreadsheet 及其容器指定重要样式： + +~~~css title="app.css" +/* specify styles for initial page */ +html, +body, +#app { /* make sure that you use the #app root container */ + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for the Spreadsheet container */ +.widget { + height: 100%; +} +~~~ + +#### 加载数据 {#loading-data} + +要向 Spreadsheet 中添加数据，您需要提供一个数据集。在 *src/* 目录中创建 *data.js* 文件，并向其中添加一些数据： + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // more cells with data + ] + } +} +~~~ + +然后打开 *App.svelte* 文件，导入数据，并将其作为 **props** 传递给新创建的 `` 组件： + +~~~html {3,5,8} title="App.svelte" + + + +~~~ + +进入 *Spreadsheet.svelte* 文件，使用 [`parse()`](api/spreadsheet_parse_method.md) 方法将传入的 **props** 应用到 Spreadsheet： + +~~~html {6,13} title="Spreadsheet.svelte" + + +
+~~~ + +现在 Spreadsheet 组件已准备好使用。当元素被添加到页面时，它会使用数据初始化 Spreadsheet。您也可以提供必要的配置设置。请访问我们的 [Spreadsheet API 文档](api/overview/properties_overview.md)查看可用属性的完整列表。 + +#### 处理事件 {#handling-events} + +当用户在 Spreadsheet 中执行操作时，widget 会触发相应事件。您可以使用这些事件检测操作并为其运行所需代码。请查看[事件完整列表](api/overview/events_overview.md)。 + +打开 *Spreadsheet.svelte* 并按以下方式完善 `onMount()` 方法： + +~~~html {8-11} title="Spreadsheet.svelte" + + +// ... +~~~ + +完成上述步骤后，启动应用时，您应该会看到 Spreadsheet 已在页面上加载数据。 + +![DHTMLX Spreadsheet initialized with sample data in a Svelte application](/img/integrations/trial_spreadsheet.png) + +现在您已完成将 DHTMLX Spreadsheet 与 Svelte 集成的基本设置。您可以根据具体需求自定义代码。您可以在 [**GitHub**](https://github.com/DHTMLX/svelte-spreadsheet-demo) 上找到最终示例。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md new file mode 100644 index 00000000..984d8005 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/themes/base_themes_configuration.md @@ -0,0 +1,101 @@ +--- +sidebar_label: 配置内置主题 +title: 配置内置主题 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解如何配置主题。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# 配置内置主题 {#configuring-built-in-themes} + +## 配置所有主题 {#configuring-all-themes} + +[默认](/themes/#light-theme-default)主题的 CSS 变量包含配色方案变量： + +~~~css +--dhx-h-primary: 200; +--dhx-s-primary: 98%; +--dhx-l-primary: 40%; + +--dhx-h-secondary: 0; +--dhx-s-secondary: 0%; +--dhx-l-secondary: 30%; + +--dhx-h-danger: 0; +--dhx-s-danger: 100%; +--dhx-l-danger: 60%; + +--dhx-h-success: 154; +--dhx-s-success: 89%; +--dhx-l-success: 37%; + +--dhx-h-background: 0; +--dhx-s-background: 0%; +--dhx-l-background: 100%; +--dhx-a-background: 0.5; +~~~ + +:::tip +颜色值以 [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) 格式指定，其中： + +- *色相* 是色轮上 0 到 360 之间的度数。0 为红色，120 为绿色，240 为蓝色； +- *饱和度* 为百分比值；0% 表示完全不饱和（灰色），100% 表示完全饱和； +- *亮度* 为百分比值；100% 为白色，0% 为黑色，50% 为"正常"。 +::: + +由于这些 CSS 变量的存在，配色方案会自动计算。这意味着，如果您在根元素中更改某个配色方案的值，`"contrast-light"`、`"dark"` 和 `"contrast-dark"` 主题的对应值会实时自动重新计算。 + +例如，您可以按如下方式一次性覆盖所有 Spreadsheet 主题的主色： + +~~~html + +~~~ + +此外，从主色计算得出的变量值也会相应重新计算。例如，焦点颜色的计算方式如下： + +~~~jsx +--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); +~~~ + +## 配置单个主题 {#configuring-a-separate-theme} + +如果您希望为某个单独的 [Spreadsheet 主题](/themes/)覆盖部分颜色值，请在 `data-dhx-theme` 属性中进行覆盖： + +~~~html {1-27,39} + + + +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/themes/custom_theme.md b/i18n/zh/docusaurus-plugin-content-docs/current/themes/custom_theme.md new file mode 100644 index 00000000..4555ff78 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/themes/custom_theme.md @@ -0,0 +1,97 @@ +--- +sidebar_label: 自定义主题 +title: 自定义主题 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解如何创建自定义主题。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# 自定义主题 {#custom-theme} + +如果 Spreadsheet 的内置主题不符合您的项目需求，您可以配置自己的颜色主题。 +在以下代码片段中查看**自定义浅色**和**自定义深色**主题： + + + +如需创建自定义主题，请按如下方式覆盖内部 CSS 变量的值： + +~~~html + + + +~~~ + +**相关示例：** [Spreadsheet. 自定义主题（皮肤）](https://snippet.dhtmlx.com/59nt1rcb?mode=wide) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/themes/themes.md b/i18n/zh/docusaurus-plugin-content-docs/current/themes/themes.md new file mode 100644 index 00000000..c429842d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/themes/themes.md @@ -0,0 +1,487 @@ +--- +sidebar_label: 内置主题 +title: 内置主题 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解内置主题。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX Spreadsheet 的 30 天免费评估版本。 +--- + +# 内置主题 {#built-in-themes} + +DHTMLX Spreadsheet 库提供 4 个预定义主题： + +- [浅色主题](#light-theme-default)（"light"）- 默认使用 +- [深色主题](#dark-theme)（"dark"） +- [浅色高对比度主题](#light-high-contrast-theme)（"contrast-light"） +- [深色高对比度主题](#dark-high-contrast-theme)（"contrast-dark"） + +Spreadsheet 主题根据国际标准开发。高对比度主题有助于视力障碍用户使用。更多详情，请阅读[无障碍支持](https://docs.dhtmlx.com/suite/common_features/accessibility_support/)文章。 + +您可以在下面的示例中试用所有主题： + + + +## 浅色主题（默认） {#light-theme-default} + +![DHTMLX Spreadsheet 默认浅色主题，白色背景配深色文字](/img/themes/default_theme.png) + +默认 `"light"` 主题使用以下 CSS 变量进行配置： + +~~~css +:root, [data-dhx-theme] { + /* 基础颜色 */ + --dhx-color-white: #fff; + --dhx-color-gray-100: #e6e6e6; + --dhx-color-gray-200: #ccc; + --dhx-color-gray-300: #b3b3b3; + --dhx-color-gray-400: #999; + --dhx-color-gray-500: #808080; + --dhx-color-gray-600: #666; + --dhx-color-gray-700: #4d4d4d; + --dhx-color-gray-800: #333; + --dhx-color-gray-900: #1a1a1a; + --dhx-color-black: #000; + /* 基础颜色结束 */ + + /* 字体 */ + --dhx-font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif; + + --dhx-font-weight-regular: 400; + --dhx-font-weight-medium: 500; + --dhx-font-weight-bold: 700; + + --dhx-font-size-small: 12px; + --dhx-font-size-normal: 14px; + --dhx-font-size-large: 16px; + + --dhx-line-height-small: 16px; + --dhx-line-height-normal: 20px; + --dhx-line-height-large: 24px; + + --dhx-font-color-primary: rgba(0, 0, 0, .7); + --dhx-font-color-secondary: rgba(0, 0, 0, .5); + --dhx-font-color-additional: rgba(0, 0, 0, .3); + --dhx-font-color-disabled: rgba(0, 0, 0, .3); + + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-color-white); + /* 字体结束 */ + + /* 图标 */ + --dhx-icon-size-small: 16px; + --dhx-icon-size-normal: 20px; + --dhx-icon-size-large: 24px; + /* 图标结束 */ + + /* 边框 */ + --dhx-border-width: 1px; + --dhx-border-radius: 2px; + --dhx-border-color: rgba(0, 0, 0, .1); + --dhx-border-color-focused: rgba(0, 0, 0, .3); + --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color); + /* 边框结束 */ + + /* 边框阴影 */ + --dhx-border-shadow-small: 0 2px 4px rgba(0, 0, 0, .15); + --dhx-border-shadow-normal: 0 2px 5px rgba(0, 0, 0, .3); + --dhx-border-shadow-large: 0px 1px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1); + + --dhx-shadow-input-size: inset 0px 0px 0px var(--dhx-border-width); + /* 边框阴影结束 */ + + /* 过渡动画 */ + --dhx-transition-time: 0.2s; + --dhx-transition-in: ease-in; + --dhx-transition-out: ease-out; + /* 过渡动画结束 */ + + /* z-index */ + --dhx-z-index-up: 1; + --dhx-z-index-force-up: 10; + --dhx-z-index-overlay: 999; + --dhx-z-index-overlay-total: 10000000; + /* z-index 结束 */ + + /* 仅服务配色方案 */ + --dhx-l-contrast-offset: 0%; /* 高对比度主题亮度偏移量 */ + --dhx-l-h-offset: 10%; /* 悬停状态亮度偏移量 */ + --dhx-s-d-offset: 30%; /* 禁用状态饱和度偏移量 */ + --dhx-l-d: 70%; /* 禁用状态亮度值 */ + --dhx-a-l-h: .15; /* 浅色悬停透明度值 */ + --dhx-a-l-a: .3; /* 浅色激活透明度值 */ + /* 仅服务配色方案结束 */ + + /* 配色方案 */ + --dhx-h-primary: 200; + --dhx-s-primary: 98%; + --dhx-l-primary: 40%; + + --dhx-h-secondary: 0; + --dhx-s-secondary: 0%; + --dhx-l-secondary: 30%; + + --dhx-h-danger: 0; + --dhx-s-danger: 100%; + --dhx-l-danger: 60%; + + --dhx-h-success: 154; + --dhx-s-success: 89%; + --dhx-l-success: 37%; + + --dhx-h-background: 0; + --dhx-s-background: 0%; + --dhx-l-background: 100%; + --dhx-a-background: 0.5; + /* 配色方案结束 */ + + /* 主题颜色 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 3%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) - 10%)); + --dhx-background-overlay: hsla(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) * -1), var(--dhx-a-background)); + --dhx-background-overlay-light: rgba(255, 255, 255, .5); + + --dhx-tooltip-background-dark: var(--dhx-color-gray-800); + --dhx-tooltip-background-light: var(--dhx-color-white); + + --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); + + --dhx-color-primary: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-hover: hsl(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-primary-active: var(--dhx-color-primary); + --dhx-color-primary-disabled: hsl(var(--dhx-h-primary), calc(var(--dhx-s-primary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-primary-light-hover: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-primary-light-active: hsla(var(--dhx-h-primary), var(--dhx-s-primary), calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-secondary: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-hover: hsl(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-secondary-active: var(--dhx-color-secondary); + --dhx-color-secondary-disabled: hsl(var(--dhx-h-secondary), calc(var(--dhx-s-secondary) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-secondary-light-hover: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-secondary-light-active: hsla(var(--dhx-h-secondary), var(--dhx-s-secondary), calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-danger: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-hover: hsl(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-danger-active: var(--dhx-color-danger); + --dhx-color-danger-disabled: hsl(var(--dhx-h-danger), calc(var(--dhx-s-danger) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-danger-light-hover: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-danger-light-active: hsla(var(--dhx-h-danger), var(--dhx-s-danger), calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + + --dhx-color-success: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset))); + --dhx-color-success-hover: hsl(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset))); + --dhx-color-success-active: var(--dhx-color-success); + --dhx-color-success-disabled: hsl(var(--dhx-h-success), calc(var(--dhx-s-success) - var(--dhx-s-d-offset)), var(--dhx-l-d)); + --dhx-color-success-light-hover: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-h)); + --dhx-color-success-light-active: hsla(var(--dhx-h-success), var(--dhx-s-success), calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)), var(--dhx-a-l-a)); + /* 主题颜色结束 */ + + /* DHTMLX Toolbar 服务变量*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* DHTMLX Toolbar 服务变量结束 */ + + /* DHTMLX Grid 服务变量*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* DHTMLX Grid 服务变量结束*/ + + /* DHTMLX Calendar 服务变量*/ + --dhx-s-calendar-muffled: .6; + /* DHTMLX Calendar 服务变量结束*/ + + /* DHTMLX Slider 服务变量*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* DHTMLX Slider 服务变量结束*/ +} +~~~ + +## 浅色高对比度主题 {#light-high-contrast-theme} + +![DHTMLX Spreadsheet 浅色高对比度主题，字体更大、边框更粗，适合无障碍访问](/img/themes/light_high_contrast_theme.png) + +`"contrast-light"` 主题使用[根 CSS 变量](#light-theme-default)以及以下变量进行配置： + +~~~css +[data-dhx-theme='contrast-light'] { + /* 字体 */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-secondary: rgba(0, 0, 0, .66); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + /* 字体结束 */ + + /* 边框 */ + --dhx-border-color: rgba(0, 0, 0, .4); + /* 边框结束 */ + + /* 配色方案 */ + --dhx-l-contrast-offset: 14%; + /* 配色方案结束 */ + + /* DHTMLX Toolbar 服务变量*/ + --dhx-s-toolbar-background: var(--dhx-background-primary); + --dhx-s-toolbar-button-background-hover: rgba(0, 0, 0, .07); + --dhx-s-toolbar-button-background-active: rgba(0, 0, 0, .15); + /* DHTMLX Toolbar 服务变量结束 */ + + /* DHTMLX Grid 服务变量*/ + --dhx-s-grid-header-background: var(--dhx-background-secondary); + --dhx-s-grid-selection-background: var(--dhx-color-gray-700); + /* DHTMLX Grid 服务变量结束*/ + + /* DHTMLX Calendar 服务变量*/ + --dhx-s-calendar-muffled: .8; + /* DHTMLX Calendar 服务变量结束*/ + + /* DHTMLX Slider 服务变量*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* DHTMLX Slider 服务变量结束*/ +} +~~~ + +## 深色主题 {#dark-theme} + +![DHTMLX Spreadsheet 深色主题，深色背景配浅色文字，适合低光环境使用](/img/themes/dark_theme.png) + +`"dark"` 主题使用[根 CSS 变量](#light-theme-default)以及以下变量进行配置： + +~~~css +[data-dhx-theme='dark'] { + /* 字体 */ + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, .7); + --dhx-font-color-additional: rgba(255, 255, 255, .5); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-white); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* 字体结束 */ + + /* 边框 */ + --dhx-border-color: rgba(255, 255, 255, 0.3); + --dhx-border-color-focused: rgba(255, 255, 255, 0.5); + /* 边框结束 */ + + /* 配色方案 */ + --dhx-l-secondary: 60%; /* 高对比度主题亮度偏移量 */ + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* 配色方案结束 */ + + /* 主题颜色 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* 主题颜色结束 */ + + /* DHTMLX Toolbar 服务变量*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* DHTMLX Toolbar 服务变量结束 */ + + /* DHTMLX Grid 服务变量*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* DHTMLX Grid 服务变量结束*/ + + /* DHTMLX Calendar 服务变量*/ + --dhx-s-calendar-muffled: .6; + /* DHTMLX Calendar 服务变量结束*/ + + /* DHTMLX Slider 服务变量*/ + --dhx-s-tick-font-size: calc(var(--dhx-font-size-small) / 1.2); + /* DHTMLX Slider 服务变量结束*/ +} +~~~ + +## 深色高对比度主题 {#dark-high-contrast-theme} + +![DHTMLX Spreadsheet 深色高对比度主题，增强文字对比度，适合无障碍访问](/img/themes/dark_contrast.png) + +`"contrast-dark"` 主题使用[根 CSS 变量](#light-theme-default)以及以下变量进行配置： + +~~~css +[data-dhx-theme='contrast-dark'] { + /* 字体 */ + --dhx-font-size-normal: 16px; + --dhx-font-size-small: var(--dhx-font-size-normal); + + --dhx-font-color-primary: var(--dhx-color-white); + --dhx-font-color-secondary: rgba(255, 255, 255, 0.86); + --dhx-font-color-additional: var(--dhx-font-color-secondary); + --dhx-font-color-disabled: rgba(255, 255, 255, .5); + --dhx-font-color-contrast: var(--dhx-color-black); + --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled); + /* 字体结束 */ + + /* 边框 */ + --dhx-border-color: rgba(255, 255, 255, 0.5); + --dhx-border-color-focused: rgba(255, 255, 255, 0.7); + /* 边框结束 */ + + /* 配色方案 */ + --dhx-l-contrast-offset: -12%; /* 高对比度主题亮度偏移量 */ + + --dhx-l-secondary: 60%; + + --dhx-h-background: 226; + --dhx-s-background: 12%; + --dhx-l-background: 20%; + /* 配色方案结束 */ + + /* 主题颜色 */ + --dhx-background-primary: hsl(var(--dhx-h-background), var(--dhx-s-background), var(--dhx-l-background)); + --dhx-background-secondary: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 8%)); + --dhx-background-additional: hsl(var(--dhx-h-background), var(--dhx-s-background), calc(var(--dhx-l-background) + 12%)); + /* 主题颜色结束 */ + + /* DHTMLX Toolbar 服务变量*/ + --dhx-s-toolbar-background: var(--dhx-color-black); + --dhx-s-toolbar-button-background-hover: rgba(255, 255, 255, .07); + --dhx-s-toolbar-button-background-active: rgba(255, 255, 255, .15); + /* DHTMLX Toolbar 服务变量结束 */ + + /* DHTMLX Grid 服务变量*/ + --dhx-s-grid-header-background: #212329; + --dhx-s-grid-selection-background: var(--dhx-color-gray-100); + /* DHTMLX Grid 服务变量结束*/ + + /* DHTMLX Calendar 服务变量*/ + --dhx-s-calendar-muffled: .8; + /* DHTMLX Calendar 服务变量结束*/ + + /* DHTMLX Slider 服务变量*/ + --dhx-s-tick-font-size: var(--dhx-font-size-small); + /* DHTMLX Slider 服务变量结束*/ +} +~~~ + +## Spreadsheet 专属样式 {#spreadsheet-specific-styles} + +Spreadsheet 组件专用变量列表如下： + +- 适用于**默认浅色**主题和**浅色高对比度**皮肤： + +~~~css +:root, [data-dhx-theme],[data-dhx-theme='contrast-light'] { + + --dhx-spreadsheet-range-background-1: #8be3c9; + --dhx-spreadsheet-range-background-2: #f6f740; + --dhx-spreadsheet-range-background-3: #f7b69e; + --dhx-spreadsheet-range-background-4: #e0fcff; + --dhx-spreadsheet-range-background-5: #8fe9ff; + --dhx-spreadsheet-range-background-6: #d8ffa6; + --dhx-spreadsheet-range-background-7: #e4e4e4; + --dhx-spreadsheet-range-background-8: #ecb6ff; + + --dhx-spreadsheet-range-color-1: #00815a; + --dhx-spreadsheet-range-color-2: #bfc000; + --dhx-spreadsheet-range-color-3: #c55933; + --dhx-spreadsheet-range-color-4: #0cc1d6; + --dhx-spreadsheet-range-color-5: #0080a3; + --dhx-spreadsheet-range-color-6: #529a0a; + --dhx-spreadsheet-range-color-7: #6d767b; + --dhx-spreadsheet-range-color-8: #ba38e7; + +} +~~~ + +- 适用于**深色**和**深色高对比度**主题： + +~~~css +[data-dhx-theme='contrast-dark'], +[data-dhx-theme='dark'] { + --dhx-spreadsheet-range-background-1: #00815a; + --dhx-spreadsheet-range-background-2: #bfc000; + --dhx-spreadsheet-range-background-3: #c55933; + --dhx-spreadsheet-range-background-4: #0cc1d6; + --dhx-spreadsheet-range-background-5: #0080a3; + --dhx-spreadsheet-range-background-6: #529a0a; + --dhx-spreadsheet-range-background-7: #6d767b; + --dhx-spreadsheet-range-background-8: #ba38e7; + + --dhx-spreadsheet-range-color-1: #8be3c9; + --dhx-spreadsheet-range-color-2: #f6f740; + --dhx-spreadsheet-range-color-3: #f7b69e; + --dhx-spreadsheet-range-color-4: #e0fcff; + --dhx-spreadsheet-range-color-5: #8fe9ff; + --dhx-spreadsheet-range-color-6: #d8ffa6; + --dhx-spreadsheet-range-color-7: #e4e4e4; + --dhx-spreadsheet-range-color-8: #ecb6ff; + +} +~~~ + +## 设置主题 {#setting-themes} + +若要设置所需主题（无论是内置 Spreadsheet 主题还是[自定义](themes/custom_theme.md)主题），请使用以下任一方式： + +### 使用 `data-dhx-theme` 属性 {#using-the-data-dhx-theme-attribute} + +您可以从以下方式中选择： + +- 为目标容器设置 `data-dhx-theme` 属性： + +~~~html title="index.html" + +
+~~~ + +- 为某个 HTML 元素设置 `data-dhx-theme` 属性，例如为 `documentElement` 设置： + +~~~jsx title="index.js" +document.documentElement.setAttribute("data-dhx-theme", "dark"); +~~~ + +### 使用 `dhx.setTheme()` 方法 {#using-the-dhxsettheme-method} + +`dhx.setTheme()` 方法接受以下参数： + +- `theme: string` -（必填）主题名称。可以是： + - Spreadsheet 主题名称：`"light" | "contrast-light" | "dark" | "contrast-dark"` + - [自定义主题](themes/custom_theme.md)的名称 + - `"light"` - 默认值 +- `container: string | HTMLElement` -（可选）要应用主题的容器。可以是： + - 一个 HTMLElement + - 包含容器 ID 或 Layout 单元格 ID 的字符串值 + - `document.documentElement` - 默认值 + +以下示例展示了如何使用 `dhx.setTheme()` 方法： + +- 为 body 或容器设置主题 + +~~~html +
+
Other content
+ + +~~~ + +- 通过 HTMLElement 为指定容器设置主题 + +~~~html +
+
Other content
+ + +~~~ + +**相关示例：** + +- [Spreadsheet. 浅色、深色、浅色高对比度和深色高对比度主题（皮肤）](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet) +- [Spreadsheet. 自定义主题（皮肤）](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/using_typescript.md b/i18n/zh/docusaurus-plugin-content-docs/current/using_typescript.md new file mode 100644 index 00000000..d5d0460a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/using_typescript.md @@ -0,0 +1,27 @@ +--- +sidebar_label: TypeScript 支持 +title: TypeScript 支持 +description: 您可以在文档中了解如何在 DHTMLX JavaScript Spreadsheet 库中使用 TypeScript。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX Spreadsheet 的免费 30 天评估版本。 +--- + +# TypeScript 支持 {#typescript-support} + +从 v4.0 开始，DHTMLX Spreadsheet 支持 TypeScript 定义。内置的 TypeScript 支持开箱即用。 + +{{note 您可以直接在我们的 代码片段工具 中试用该功能。}} + +![DHTMLX Spreadsheet TypeScript support with type checking and autocomplete in an IDE](/img/typescript.png) + +## 使用 TypeScript 的优势 {#advantages-of-using-typescript} + +为什么需要将 DHTMLX Spreadsheet 与 TypeScript 配合使用？ + +TypeScript 的主要优势在于它能显著提升开发效率。 + +由于类型检查和自动补全功能可以帮助您避免潜在错误，构建应用变得更加可靠。此外，TypeScript 还能告诉您在使用 DHTMLX Spreadsheet API 时应使用哪些数据类型。 + +## JSDoc 提示 {#jsdoc-hints} + +DHTMLX Spreadsheet 的类型定义包含针对整个 API 的 JSDoc 注解。这意味着当您在 IDE 中使用该库时，无需离开编辑器即可阅读方法描述、检查参数类型并查看代码示例。将鼠标悬停在任意方法或属性上即可查看内联文档。 + +![DHTMLX Spreadsheet JSDoc hints showing inline method documentation in an IDE](/img/jsdoc_hints.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/vuejs_integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/vuejs_integration.md new file mode 100644 index 00000000..9d91a388 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/vuejs_integration.md @@ -0,0 +1,267 @@ +--- +sidebar_label: 与 Vue 集成 +title: Vue 集成 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的 Vue 集成。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 与 Vue 集成 {#integration-with-vue} + +:::tip +阅读本文档前，您应当熟悉 [**Vue**](https://vuejs.org/) 的基本概念和模式。如需复习相关知识，请参阅 [**Vue 3 文档**](https://vuejs.org/guide/introduction.html#getting-started)。 +::: + +DHTMLX Spreadsheet 与 **Vue** 兼容。我们已准备了关于如何在 **Vue 3** 中使用 DHTMLX Spreadsheet 的代码示例。更多信息请参阅对应的 [**GitHub 示例**](https://github.com/DHTMLX/vue-spreadsheet-demo)。 + +## 创建项目 {#creating-a-project} + +:::info +在开始创建新项目之前，请先安装 [**Node.js**](https://nodejs.org/en/)。 +::: + +要创建一个 **Vue** 项目，请运行以下命令： + +~~~json +npm create vue@latest +~~~ + +该命令会安装并执行 `create-vue`，即官方 **Vue** 项目脚手架工具。详情请参阅 [Vue.js 快速上手](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。 + +我们将该项目命名为 **my-vue-spreadsheet-app**。 + +### 安装依赖 {#installation-of-dependencies} + +进入应用目录： + +~~~json +cd my-vue-spreadsheet-app +~~~ + +安装依赖并启动开发服务器。请使用包管理器执行以下操作： + +- 如果您使用 [**yarn**](https://yarnpkg.com/)，请运行以下命令： + +~~~jsx +yarn +yarn start // or yarn dev +~~~ + +- 如果您使用 [**npm**](https://www.npmjs.com/)，请运行以下命令： + +~~~json +npm install +npm run dev +~~~ + +应用应在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 Spreadsheet {#creating-spreadsheet} + +现在您需要获取 DHTMLX Spreadsheet 的源代码。首先，停止应用并安装 Spreadsheet 包。 + +### 第一步：安装包 {#step-1-package-installation} + +下载 [**试用版 Spreadsheet 包**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) 并按照 README 文件中的步骤操作。请注意，试用版 Spreadsheet 仅可使用 30 天。 + +### 第二步：创建组件 {#step-2-component-creation} + +现在您需要创建一个 Vue 组件，以便将 Spreadsheet 添加到应用中。在 *src/components/* 目录中创建一个新文件，命名为 *Spreadsheet.vue*。 + +#### 导入源文件 {#import-source-files} + +打开 *Spreadsheet.vue* 文件并导入 Spreadsheet 源文件。请注意： + +- 如果您使用 PRO 版本并从本地文件夹安装 Spreadsheet 包，导入路径如下： + +~~~html title="Spreadsheet.vue" + +~~~ + +请注意，根据所使用的包，源文件可能已被压缩。在这种情况下，请确保导入的 CSS 文件为 *spreadsheet.min.css*。 + +- 如果您使用试用版 Spreadsheet，请指定以下路径： + +~~~html title="Spreadsheet.vue" + +~~~ + +本教程将演示如何配置 Spreadsheet 的**试用**版本。 + +#### 设置容器并添加 Spreadsheet {#setting-the-container-and-adding-spreadsheet} + +要在页面上显示 Spreadsheet，您需要为 Spreadsheet 创建容器，并使用相应的构造函数初始化该组件： + +~~~html {2,7-8,18} title="Spreadsheet.vue" + + + +~~~ + +#### 添加样式 {#adding-styles} + +要正确显示 Spreadsheet，您需要在项目主 CSS 文件中为 Spreadsheet 及其容器指定重要样式： + +~~~css title="main.css" +/* specify styles for initial page */ +html, +body, +#app { /* make sure that you use the #app root container */ + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for the Spreadsheet container */ +.widget { + height: 100%; +} +~~~ + +#### 加载数据 {#loading-data} + +要向 Spreadsheet 中添加数据，您需要提供一个数据集。您可以在 *src/* 目录中创建 *data.js* 文件并向其中添加一些数据： + +~~~jsx title="data.js" +export function getData() { + return { + styles: { + bold: { + "font-weight": "bold" + }, + right: { + "justify-content": "flex-end", + "text-align": "right" + } + }, + data: [ + { cell: "a1", value: "Country", css:"bold" }, + { cell: "b1", value: "Product", css:"bold" }, + { cell: "c1", value: "Price", css:"right bold" }, + { cell: "d1", value: "Amount", css:"right bold" }, + { cell: "e1", value: "Total Price", css:"right bold" }, + + { cell: "a2", value: "Ecuador" }, + { cell: "b2", value: "Banana" }, + { cell: "c2", value: 6.68, format: "currency" }, + { cell: "d2", value: 430 }, + { cell: "e2", value: 2872.4, format: "currency" }, + + { cell: "a3", value: "Belarus" }, + { cell: "b3", value: "Apple" }, + { cell: "c3", value: 3.75, format: "currency" }, + { cell: "d3", value: 600 }, + { cell: "e3", value: 2250, format: "currency" }, + + { cell: "a4", value: "Peru" }, + { cell: "b4", value: "Grapes" }, + { cell: "c4", value: 7.69, format: "currency" }, + { cell: "d4", value: 740 }, + { cell: "e4", value: 5690.6, format: "currency" }, + + // more cells with data + ] + } +} +~~~ + +然后打开 *App.vue* 文件，导入数据，并使用内部 `data()` 方法进行初始化。之后，您可以将数据作为 **props** 传递给新创建的 `` 组件： + +~~~html {3,7-9,14} title="App.vue" + + + + +~~~ + +进入 *Spreadsheet.vue* 文件，使用 [`parse()`](api/spreadsheet_parse_method.md) 方法将传入的 **props** 应用到 Spreadsheet： + +~~~html {6,10} title="Spreadsheet.vue" + + + +~~~ + +现在 Spreadsheet 组件已准备好使用。当元素被添加到页面时，它会使用数据初始化 Spreadsheet。您也可以提供必要的配置项。请访问我们的 [Spreadsheet API 文档](api/overview/properties_overview.md)查看完整的可用属性列表。 + +#### 处理事件 {#handling-events} + +当用户在 Spreadsheet 中执行操作时，组件会触发相应事件。您可以使用这些事件来检测操作并为其执行所需代码。请参阅[完整的事件列表](api/overview/events_overview.md)。 + +打开 *Spreadsheet.vue* 并完善 `mounted()` 方法： + +~~~html {8-11} title="Spreadsheet.vue" + + +//... +~~~ + +完成后，您可以启动应用，查看加载了数据的 Spreadsheet 页面。 + +![DHTMLX Spreadsheet initialized with sample data in a Vue 3 application](/img/integrations/trial_spreadsheet.png) + +现在您已了解如何将 DHTMLX Spreadsheet 与 Vue 集成。您可以根据具体需求对代码进行自定义。完整示例可在 [**GitHub**](https://github.com/DHTMLX/vue-spreadsheet-demo) 上找到。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md new file mode 100644 index 00000000..050e660a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md @@ -0,0 +1,803 @@ +--- +sidebar_label: 更新日志 +title: DHTMLX Spreadsheet 更新日志 +description: 您可以在文档中了解 DHTMLX JavaScript Spreadsheet 库的最新动态。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 更新日志 {#whats-new} + +如果您正在从旧版本升级 Spreadsheet，请查阅[迁移到新版本](migration.md)了解详细信息。 + +## 版本 6.0.2 {#version-602} + +发布于 2026 年 7 月 1 日 + +### 修复 {#fixes} + +- 经历"从 Excel 复制 → 粘贴到 Spreadsheet → 导出/导入"流程后，单元格边框丢失的问题 +- 粘贴到最后一行下方的数据无法显示，原因是网格未添加新行来容纳这些数据 + +## 版本 6.0 {#version-60} + +发布于 2026 年 5 月 20 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/meet-dhtmlx-spreadsheet-6-0/) + +### 重大变更 {#breaking-changes} + +新版本对 Spreadsheet API 引入了重大变更：部分方法、属性和事件已被标记为废弃。请查阅[迁移指南](migration.md#52---60)以跟进最新版本。 + +### 新功能 {#new-functionality} + +- 引入了 [React Spreadsheet 封装](react.md)。相关示例请查看 [GitHub 示例仓库](https://github.com/DHTMLX/react-spreadsheet-examples) +- 引入了 [`SheetManager`](api/overview/sheetmanager_overview.md) 模块。这是一个用于管理 Spreadsheet 中工作表的集中式 API，可通过 `spreadsheet.sheets` 属性访问，并替代了根 Spreadsheet 实例上所有[已废弃的工作表相关方法](migration.md#deprecated-methods)。 + - 新方法：[`sheets.add()`](api/sheetmanager_add_method.md)、[`sheets.remove()`](api/sheetmanager_remove_method.md)、[`sheets.getAll()`](api/sheetmanager_getall_method.md)、[`sheets.getActive()`](api/sheetmanager_getactive_method.md)、[`sheets.setActive()`](api/sheetmanager_setactive_method.md)、[`sheets.clear()`](api/sheetmanager_clear_method.md)、[`sheets.get()`](api/sheetmanager_get_method.md) +- 通过新的 [`addFormula()`](api/spreadsheet_addformula_method.md) 方法支持指定[自定义（用户定义）公式](functions.md#custom-formulas) +- 支持以[科学计数法（指数表示法）](number_formatting.md#scientific-number-format)显示数字 + +### 更新 {#updates} + +- 支持调整单元格内容的字体大小： + - 通过[内置工具栏控件](customization.md#default-controls)设置默认字体大小选项 + - 为工具栏控件设置[自定义字体大小](customization.md#custom-font-size) +- [公式引擎](functions.md#math-functions)中新增了条件聚合函数：`COUNTIF`、`COUNTIFS`、`SUMIF`、`SUMIFS`、`AVERAGEIF`、`AVERAGEIFS`、`MAXIFS`、`MINIFS` +- [公式引擎](functions.md#array-functions)中新增了动态数组函数：`CHOOSECOLS`、`CHOOSEROWS`、`DROP`、`EXPAND`、`RANDARRAY`、`SEQUENCE`、`SORT`、`SORTBY`、`TAKE`、`TEXTSPLIT`、`TOCOL`、`TOROW`、`UNIQUE`、`WRAPCOLS`、`WRAPROWS` +- 为 Spreadsheet 添加了 [`awaitRedraw()`](awaitredraw.md) 辅助工具，用于检测渲染过程并在组件完成渲染后执行所需代码 +- 在类型定义中添加了 [JSDoc 注解](using_typescript.md#jsdoc-hints)，可在 IDE 中直接提供内联 API 描述、参数类型和代码示例 + +### 修复 {#fixes-60} + +- 通过 API 切换活动工作表后焦点丢失的问题 +- 转置模式下返回已更改单元格数组的问题 +- 粘贴后重新计算依赖公式的问题 +- 粘贴操作期间用公式覆盖锁定单元格的问题 +- 在锁定单元格中运行数学公式的问题 +- 对类似单元格引用、以数字开头或包含特殊字符的工作表名称进行转义的问题 +- 当单元格 id 为零（第一个工作表的第一个单元格）时动态数组出现的问题 + +## 版本 5.2.9 {#version-529} + +发布于 2026 年 1 月 8 日 + +### 修复 {#fixes-529} + +- 在已打开的编辑器中输入时，编辑器下拉筛选现在使用 `startsWith` 而非 `includes` +- Excel 单元格边框在导出和导入后现在可以保留 +- 防止从外部表格粘贴时字体大小被覆盖 + +## 版本 5.2.8 {#version-528} + +发布于 2025 年 12 月 15 日 + +### 修复 {#fixes-528} + +- 在公式编辑期间选择其他单元格时焦点丢失的问题 +- 键盘导航相关问题 + +## 版本 5.2.7 {#version-527} + +发布于 2025 年 12 月 9 日 + +### 修复 {#fixes-527} + +- 工作表包含带数据验证列表的单元格时导出到 Excel 失败的问题 +- 当单元格初始值为 `%` 时，带数据验证列表的下拉框停止工作的问题 +- 在公式栏中设置焦点后 `INDEX/MATCH` 公式失效的问题 + +## 版本 5.2.6 {#version-526} + +发布于 2025 年 11 月 19 日 + +### 修复 {#fixes-526} + +- 导入包含自动换行单元格的 .xlsx 文件时出现多余 DOM 元素的问题 +- 管理列时列上下文菜单中列/行标签显示不正确的问题 +- 冻结包含合并单元格的区域时工作表结构损坏的问题 +- 改进了含有跨行/跨列单元格的工作表中的键盘导航 + +## 版本 5.2.5 {#version-525} + +发布于 2025 年 10 月 23 日 + +### 修复 {#fixes-525} + +- 对适合列宽的内容应用"自动换行"选项时行高减小的问题 + +## 版本 5.2.4 {#version-524} + +发布于 2025 年 9 月 24 日 + +### 修复 {#fixes-524} + +- 添加了对多行单元格的导出/导入支持 + +## 版本 5.2.3 {#version-523} + +发布于 2025 年 9 月 10 日 + +### 修复 {#fixes-523} + +- 插入数组时单元格中数字对齐不正确的问题 +- 改进了亚洲语言的输入体验 + +## 版本 5.2.2 {#version-522} + +发布于 2025 年 8 月 18 日 + +### 更新 {#updates-522} + +- 增强了 `setValidation()` 以支持内置下拉编辑器中的预测筛选 +- 添加了对隐藏/冻结列/行、数据验证选择框以及 .xlsx 文件中 Excel 链接的导出/导入支持 + +### 修复 {#fixes-522} + +- 在冻结列/行中取消合并跨行/跨列单元格的问题 +- 应用内置主题的问题 +- 中文输入的问题 +- MacOS 上日语输入的问题：自动补全确认导致编辑器关闭 +- 编译 `spreadsheet.d.ts` 文件的问题 + +## 版本 5.2.1 {#version-521} + +发布于 2025 年 6 月 30 日 + +### 更新 {#updates-521} + +- 支持通过上下文菜单在一次操作中删除多个列/行 + +### 修复 {#fixes-521} + +- 复制/粘贴脚本错误 +- 在工作表中选择两行或多行末尾行时删除行出现的错误 +- 工具栏自定义时显示警告的问题 +- 日期选择器缺少本地化的问题 +- 工具栏中垂直滚动条不必要显示的问题 +- 修复公式计算的数学错误 + +## 版本 5.2 {#version-52} + +发布于 2025 年 5 月 20 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-2/) + +### 重大变更 {#breaking-changes-52} + +新版本对列和行的冻结/解冻功能引入了一些变更。请查阅[迁移指南](migration.md#51---52)以跟进最新版本。 + +### 废弃 {#deprecated} + +- `leftSplit` 和 `topSplit` 配置属性已被移除 + +### 新功能 {#new-functionality-52} + +- 编辑单元格： + - 支持[通过界面为一组单元格创建带样式的边框](data_formatting.md#styled-borders-for-cells) +- 冻结/解冻列/行： + - 支持通过[界面](work_with_rows_cols.md#freezingunfreezing-rows-and-columns)冻结/解冻列和行 + - 支持通过 [API](working_with_ssheet.md#freezingunfreezing-rows-and-columns) 冻结/解冻列和行 + - 新方法：[`freezeCols()`](api/spreadsheet_freezecols_method.md)、[`unfreezeCols()`](api/spreadsheet_unfreezecols_method.md)、[`freezeRows()`](api/spreadsheet_freezerows_method.md)、[`unfreezeRows()`](api/spreadsheet_unfreezerows_method.md) + - 新 action：[`toggleFreeze`](api/overview/actions_overview.md#list-of-actions) + - [`parse()`](api/spreadsheet_parse_method.md) 方法的 *sheets* 对象新增 `freeze` 属性 +- 隐藏/显示列/行： + - 支持通过[界面](work_with_rows_cols.md#hidingshowing-rows-and-columns)隐藏/显示列和行 + - 支持通过 [API](working_with_ssheet.md#hidingshowing-rows-and-columns) 隐藏/显示列和行 + - 新方法：[`hideCols()`](api/spreadsheet_hidecols_method.md)、[`showCols()`](api/spreadsheet_showcols_method.md)、[`hideRows()`](api/spreadsheet_hiderows_method.md)、[`showRows()`](api/spreadsheet_showrows_method.md) + - 新 action：[`toggleVisibility`](api/overview/actions_overview.md#list-of-actions) + - [`parse()`](api/spreadsheet_parse_method.md) 方法 *sheets* 对象的 *cols* 和 *rows* 配置新增 `hidden` 属性 +- 使用公式： + - 添加了[公式说明弹出框](functions.md#popup-with-formula-description) + - 新增本地化字段：[`formulas`](localization.md#default-locale-for-formulas) +- 文件导入： + - 新增 [`afterDataLoaded`](api/spreadsheet_afterdataloaded_event.md) 事件，用于指示数据加载到 Spreadsheet 已完成 + +### 修复 {#fixes-52} + +- 排序问题 +- 筛选器移动到新列的问题 +- 使用 "addSheet" action 阻止添加工作表时出现的错误 +- 筛选空白单元格的问题 +- 编辑大型跨行/跨列表格的问题 +- 在单元格中撤销操作时出现的错误 +- 进入/编辑含有 IF 公式的单元格时出现的错误 +- 剪切并粘贴链接后出现的脚本错误 +- 导出/导入 .xlsx 文件时文本对齐方式更改的问题 +- 某些操作后 Spreadsheet 失去焦点的问题 +- 性能改进 + +## 版本 5.1.8 {#version-518} + +发布于 2024 年 12 月 10 日 + +### 修复 {#fixes-518} + +- 导入到框架时本地试用包的问题 + +## 版本 5.1.7 {#version-517} + +发布于 2024 年 11 月 27 日 + +### 修复 {#fixes-517} + +- 移除了 "item not found" 警告 +- 解析优化 +- 使用 (Shift)+Tab 快捷键移动到相邻单元格时，已打开的单元格编辑器不再关闭 + +## 版本 5.1.6 {#version-516} + +发布于 2024 年 7 月 25 日 + +### 修复 {#fixes-516} + +- 插入的行/列在加载时从序列化数据中丢失 +- 空日期单元格在日期选择器和时间选择器中显示最后选择的日期 +- 数字本地化和单元格中空字符串值的问题 +- 编辑单元格时搜索功能无法获得焦点 +- 为 Spreadsheet 容器使用 `ngIf/ngFor` 导致组件损坏 + +## 版本 5.1.5 {#version-515} + +发布于 2024 年 2 月 13 日 + +### 修复 {#fixes-515} + +- 粘贴包含零的单元格会创建空单元格 +- 复制后粘贴空单元格抛出错误 +- 修复通用格式的 `setValue()` 功能 +- 在序列化期间保存工作表 id 并通过 `afterAction` 事件返回 +- 修复通过界面使用跨工作表公式 +- 修复 Ctrl+F 搜索 + +## 版本 5.1.4 {#version-514} + +发布于 2024 年 1 月 31 日 + +### 修复 {#fixes-514} + +- 跨行/跨列单元格粘贴不正确的问题 + +## 版本 5.1.3 {#version-513} + +发布于 2024 年 1 月 29 日 + +### 修复 {#fixes-513} + +- "common" 格式下数字值解析不正确的问题 +- Spreadsheet 与 Suite 一起使用时的本地化 i18n 问题 +- 加载包含大量跨行/跨列单元格的表格时的性能问题 +- 跨行/跨列单元格粘贴不正确的问题 + +## 版本 5.1.2 {#version-512} + +发布于 2024 年 1 月 16 日 + +### 修复 {#fixes-512} + +- 修复复制和粘贴单元格的问题。从 Excel 复制并粘贴到 Spreadsheet 的含日期单元格显示为字符串 +- 修复 "common" 格式中被格式化为数字的数字值问题 +- 修复解析数据时修改初始数据集的问题 +- 修复跨行/跨列单元格粘贴的问题 + +## 版本 5.1.1 {#version-511} + +发布于 2023 年 12 月 14 日 + +### 修复 {#fixes-511} + +- 修复 `fixColumn()` 方法忽略选择编辑器箭头图标的问题 +- 修复单元格样式优先于区域样式的问题 +- 修复复制/粘贴含有已应用样式的单元格内容及撤销功能的问题 +- 修复粘贴到不同单元格时链接发生变化的问题 +- 修复合并单元格的复制/粘贴问题 +- 修复样式序列化的问题 +- 修复调用 `setSelectedCell()` 或 `setFocusedCell()` 方法时滚动到单元格的问题 + +## 版本 5.1 {#version-51} + +发布于 2023 年 12 月 7 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-1/) + +### 新功能 {#new-functionality-51} + +- [支持新主题](/themes/)：深色、浅色高对比度和深色高对比度 +- 扩展了[数字、日期、时间和货币格式本地化的支持](number_formatting.md#number-date-time-currency-localization) +- [与 Svelte 框架集成](svelte_integration.md) +- 支持[为导出的 .xlsx 文件提供自定义名称](loading_data.md#how-to-set-a-custom-name-for-an-exported-file) +- 支持在数据集中[保存单元格的"锁定"状态](loading_data.md#setting-the-locked-state-for-a-cell)和[为单元格指定链接](loading_data.md#adding-a-link-into-a-cell) + +### 更新 {#updates-51} + +- 更新了[与 React、Angular 和 Vue.js 的集成](/integrations/) +- 自动[将公式中的小写字母转换为大写](functions.md) +- 公式自动闭合 + +### 修复 {#fixes-51} + +- 修复对单元格中设置的值应用撤销的问题 +- 修复粘贴行数的限制 +- 修复编辑行中公式中的空格被替换为 ` ` 符号的问题 +- 修复 Excel 导入中日期类值处理不正确的问题 +- 修复单元格块编辑不正确的问题 +- 修复筛选期间调用 `getExcelDate()` 时出现的脚本错误 +- 修复粘贴单元格内容时将文本值转换为数字的问题 +- 修复从列宽已修改的 Excel 文件粘贴数据时不正确的问题 + +## 版本 5.0.10 {#version-5010} + +发布于 2023 年 11 月 27 日 + +### 修复 {#fixes-5010} + +- 修复类型问题 + +## 版本 5.0.9 {#version-509} + +发布于 2023 年 10 月 24 日 + +### 修复 {#fixes-509} + +- 修复 setStyle() 方法调用不正确的问题，该方法在 before/afterSelectionSet 事件之前触发 +- 修复内容自动换行不正确的问题 +- 修复类型问题 + +## 版本 5.0.7 {#version-507} + +发布于 2023 年 9 月 21 日 + +### 修复 {#fixes-507} + +- 修复将公式导出到 Excel 的问题 +- 修复单击撤销按钮时恢复单元格剪切内容的问题 + +## 版本 5.0.6 {#version-506} + +发布于 2023 年 9 月 18 日 + +### 修复 {#fixes-506} + +- 修复零值渲染的问题 +- 修复应用以字符串值设置的颜色样式的问题 +- 修复 XSS 漏洞问题 +- 修复在非活动工作表中更改值时修改了活动工作表中值的问题 + +## 版本 5.0.5 {#version-505} + +发布于 2023 年 8 月 10 日 + +### 修复 {#fixes-505} + +- 修复 XSS 漏洞问题 +- 修复包含单元格跨行/跨列的数据粘贴不正确的问题 + +## 版本 5.0.4 {#version-504} + +发布于 2023 年 6 月 5 日 + +### 修复 {#fixes-504} + +- 修复只读模式下块选择或上下文菜单调用时的错误 +- 修复只读模式下显示编辑菜单的问题 +- 修复数字四舍五入不正确的问题 +- 修复合并单元格后编辑行中公式被其结果替换的问题 + +## 版本 5.0.3 {#version-503} + +发布于 2023 年 4 月 26 日 + +### 修复 {#fixes-503} + +- 修复计算最后一个要合并的单元格时的不正确行为 +- 修复 Excel 导入/导出的问题 +- 修复应用数据验证后数据被交换的问题 +- 修复将含有"："符号的文本解释为链接的问题 +- 修复多行数据加载问题。现在可以在 [`styles`](api/spreadsheet_parse_method.md#parsing-styled-data) 对象中设置 `multiline: "wrap"` 属性 +- 修复当 [`multiSheets`](api/spreadsheet_multisheets_config.md) 设置为 `false` 时 Spreadsheet 初始化时合并单元格的问题 +- 修复双击表头列边框后重置列滚动位置的问题 + +## 版本 5.0.2 {#version-502} + +发布于 2023 年 2 月 14 日 + +### 修复 {#fixes-502} + +- 修复复制并粘贴单元格值后单元格对齐方式未保存的问题 +- 修复排序数据后筛选结果发生变化的问题 +- 修复时间选择器中 12 小时格式显示的问题 +- 修复单元格自动填充后链接样式被移除的问题 +- 现在可以为日期添加多个[自定义格式](number_formatting.md#formats-customization) +- 现在即使行/列属于[受限的列和行](configuration.md#number-of-rows-and-columns)，也可以删除 + +## 版本 5.0.1 {#version-501} + +发布于 2023 年 1 月 19 日 + +### 修复 {#fixes-501} + +- 修复在带货币格式的单元格中输入的值被保存为字符串而非数字的问题 +- 修复清除先前搜索单元格选中状态的问题 +- 修复将数据解析到电子表格后数据显示的问题 +- 修复删除列后网格重绘的问题 +- 修复空值排序的问题 +- 修复使用下拉列表时数字值验证的问题 +- 修复含字母数字值的单元格自动填充 +- 改进了数字格式掩码的处理 +- 现在所有单元格中的数字值默认右对齐 + +## 版本 5.0 {#version-50} + +发布于 2022 年 11 月 21 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-5-0/) + +### 重大变更 {#breaking-changes-50} + +新版本对 [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) 属性引入了一些变更。请查阅[迁移文章](migration.md#43---50)以跟进最新版本。 + +### 新功能 {#new-functionality-50} + +- 数据搜索： + - 支持通过[界面](data_search.md)搜索数据 + - 支持通过 [API](working_with_ssheet.md#searching-for-data) 搜索数据： + - 新方法：[`search()`](api/spreadsheet_search_method.md) 和 [`hideSearch()`](api/spreadsheet_hidesearch_method.md) +- 筛选数据： + - 支持通过[界面](filtering_data.md)筛选数据 + - 支持通过 [API](working_with_ssheet.md#filtering-data) 筛选数据： + - 新方法：[`setFilter()`](api/spreadsheet_setfilter_method.md) 和 [`getFilter()`](api/spreadsheet_getfilter_method.md) + - 新 action：[`filter`](api/overview/actions_overview.md#list-of-actions) +- 合并/拆分单元格： + - 支持通过[界面](merge_cells.md)合并/拆分单元格 + - 支持通过 [API](working_with_cells.md#merging-cells) 合并/拆分单元格： + - 工作表对象的新属性：[`merged`](api/spreadsheet_parse_method.md) + - 新方法：[`mergeCells()`](api/spreadsheet_mergecells_method.md) + - 新 actions：[`merge`](api/overview/actions_overview.md#list-of-actions) 和 [`unmerge`](api/overview/actions_overview.md#list-of-actions) +- 列宽自动适应： + - 支持通过[界面](work_with_rows_cols.md#autofit-column-width)自动适应列宽 + - 支持通过 [API](working_with_ssheet.md#autofit-column-width) 自动适应列宽： + - 新方法：[`fitColumn()`](api/spreadsheet_fitcolumn_method.md) + - 新 action：[`fitColumn`](api/overview/actions_overview.md#list-of-actions) +- 插入超链接： + - 支持通过[界面](work_with_cells.md#inserting-a-hyperlink-into-a-cell)向单元格插入超链接 + - 支持通过 [API](working_with_cells.md#inserting-a-hyperlink-into-a-cell) 向单元格插入超链接： + - 新方法：[`insertLink()`](api/spreadsheet_insertlink_method.md) + - 新 action：[`insertLink`](api/overview/actions_overview.md#list-of-actions) +- [数据删除线格式](data_formatting.md#color-and-style) + +### 更新 {#updates-50} + +- [扩展的本地化选项列表](localization.md#default-locale) +- [扩展的快捷键组合列表](hotkeys.md)： + - 用于数据搜索 + - `Ctrl (Cmd) + F` + - `Ctrl (Cmd) + G` + - `Ctrl (Cmd) + Shift + G` + - 用于选择整列/整行 + - `Ctrl (Cmd) + Space` + - `Shift + Space` + - 用于将单元格内容左对齐/右对齐/居中对齐 + - `Ctrl (Cmd) + Shift + L` + - `Ctrl (Cmd) + Shift + R` + - `Ctrl (Cmd) + Shift + E` + - 用于为单元格内容添加删除线 + - `Alt + Shift + 5 (Cmd + Shift + X)` + - 用于添加新工作表和在工作表之间切换 + - `Shift + F11` + - `Alt + Arrow Up/ Arrow Down` + - 用于在单元格中插入超链接 + - `Ctrl (Cmd) + K` + +## 版本 4.3 {#version-43} + +发布于 2022 年 5 月 23 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-3/) + +### 重大变更 {#breaking-changes-43} + +版本 4.3 没有引入重大变更，但引入了一种处理电子表格中执行的 actions 的新方式。详情请查阅[迁移文章](migration.md#42---43)。 + +### 新功能 {#new-functionality-43} + +- 支持通过 [`setValidation()`](api/spreadsheet_setvalidation_method.md) 方法或[界面](work_with_cells.md#using-drop-down-lists-in-cells)向单元格添加下拉选项列表 +- 支持通过 `topSplit` 属性在电子表格顶部固定行 +- 支持通过 [`sortCells()`](api/spreadsheet_sortcells_method.md) 方法或[界面](sorting_data.md)对数据进行排序 +- [支持将长文本拆分为多行](data_formatting.md#wrap-text-in-a-cell)（工具栏中添加了*文本自动换行*按钮） +- 大幅扩展了支持的[日期、财务、数学、字符串函数](functions.md#information-functions)列表（标注了 *v4.3 中新增* 标签） +- 支持[查找函数](functions.md#lookup-functions) +- 添加了[时间格式](number_formatting.md#default-number-formats) +- 支持通过 [`timeFormat`](api/spreadsheet_localization_config.md) 属性定义电子表格单元格中时间的格式 +- 支持通过时间选择器在单元格中输入时间 +- [导出为 JSON](api/export_json_method.md) +- [从 JSON 导入](api/spreadsheet_load_method.md#loading-json-files) +- 新增事件：[beforeAction](api/spreadsheet_beforeaction_event.md) 和 [afterAction](api/spreadsheet_afteraction_event.md) +- 新的 [Actions 系统](api/overview/actions_overview.md) + +### 更新 {#updates-43} + +- [`parse()`](api/spreadsheet_parse_method.md) 方法已更新。单元格对象新增 **editor** 属性 + +## 版本 4.2 {#version-42} + +发布于 2021 年 11 月 29 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-2-with130-new-functions-boolean-operators-date-format-row-resizing-much/) + +### 新功能 {#new-functionality-42} + +- 支持[日期](functions.md#date-functions)、[财务](functions.md#financial-functions)、[信息](functions.md#information-functions)、[正则](functions.md#regex-functions)和[其他](functions.md#other-functions)函数 +- 支持[布尔运算符](functions.md#boolean-operators) +- 支持通过界面调整行高 +- 工具栏中新增[垂直对齐](data_formatting.md#alignment)按钮 +- 支持通过 `setActiveSheet()` 方法设置活动工作表 +- 支持通过 Selection 对象的 [`removeSelectedCell()`](api/selection_removeselectedcell_method.md) 方法从指定单元格移除选中状态 +- 支持通过 [`clear()`](api/spreadsheet_clear_method.md) 或 `clearSheet()` 方法分别清除电子表格或其工作表 +- 新增事件：[`beforeClear`](api/spreadsheet_beforeclear_event.md)、[`afterClear`](api/spreadsheet_afterclear_event.md)、`beforeSheetClear`、`afterSheetClear` +- 支持通过 [`dateFormat`](api/spreadsheet_localization_config.md) 属性定义电子表格中日期的格式 +- [日期格式已添加到默认数字格式中](number_formatting.md#default-number-formats) + +### 更新 {#updates-42} + +- 扩展了[本地化选项](localization.md)列表 +- 扩展了[数学](functions.md#math-functions)和[字符串](functions.md#string-functions)函数列表 +- Spreadsheet 工具栏的对齐块已更新。详情请查阅[迁移文章](migration.md#41---42) +- [`parse()`](api/spreadsheet_parse_method.md) 和 [`serialize()`](api/spreadsheet_serialize_method.md) 方法已更新。工作表对象的新 **rows** 和 **cols** 属性允许保存每个工作表的行高和列宽状态。 + +### 修复 {#fixes-42} + +- CTRL-X 快捷键问题 +- 在隐藏[编辑栏](api/spreadsheet_editline_config.md)的电子表格中编辑单元格时出现脚本错误的问题 + +## 版本 4.1.3 {#version-413} + +发布于 2021 年 8 月 31 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-6-scheduler-5-3-12-suite-7-2-1/) + +### 修复 {#fixes-413} + +- 修复删除行/列后撤销操作恢复时的不正确行为 +- 修复数字格式对象中"mask"属性的不正确工作 +- 修复从 Excel 粘贴数据到电子表格时选区顶部空单元格/行被截断的问题 +- 修复绝对公式引用的单元格未被标记的问题 +- 修复"afterSelectionSet"事件在选择一个单元格区域后触发两次的问题 +- 修复 TypeScript 定义问题 +- 修复"text"数字格式的问题 + +## 版本 4.1.2 {#version-412} + +发布于 2021 年 6 月 3 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/maintenance-release-suite-7-1-9-spreadsheet-4-1-2/) + +### 修复 {#fixes-412} + +- 修复同时对多列应用自动填充时包含数学函数的单元格自动填充不正确的问题 +- 修复使用"Ctrl + 单击"后再次单击同一单元格时，选中单元格未取消选中的问题 +- 修复使用键盘导航选择公式后将数学公式应用于单元格的问题 +- 修复使用"Ctrl + 单击"选择单元格时锁定/解锁单元格的问题 +- 修复"serialize()"方法导致"0"值未被序列化的问题 +- 修复单击表头列边框后列宽自动调整的问题 +- 修复编辑行中零值显示的问题 +- 修复编辑长内容单元格的问题 +- 修复将电子表格导出到 Excel 文件的问题 +- 修复包含大量列的电子表格中水平滚动条不正确行为和列显示的问题 +- 修复在空电子表格中使用键盘导航后出现的脚本错误 + +## 版本 4.1.1 {#version-411} + +发布于 2021 年 4 月 14 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/maintenance-release-gantt-7-1-2-suite-7-1-5-spreadsheet-4-1-1/) + +### 修复 {#fixes-411} + +- 修复 TypeScript 定义问题 +- 修复绝对引用问题 +- 修复使用".xlsx"扩展名文件加载数据时出现的问题 +- 修复从 Excel 文件复制的数据粘贴不正确的问题 +- 修复对浮点数求和时返回错误结果的问题 + +## 版本 4.1 {#version-41} + +发布于 2021 年 3 月 24 日 + +[博客中的版本回顾](https://dhtmlx.com/blog/dhtmlx-spreadsheet-4-1-multiple-sheets/) + +### 新功能 {#new-functionality-41} + +- 新增 [multiSheets](api/spreadsheet_multisheets_config.md) 配置选项 +- 支持在电子表格中[使用多个工作表](work_with_sheets.md) +- 支持在多个工作表中[使用跨工作表引用](work_with_sheets.md#cross-references-between-sheets) +- 支持一次性[加载多个工作表](working_with_sheets.md#loading-multiple-sheets)到电子表格 +- 新增用于[操作多个工作表](working_with_sheets.md)的方法：`addSheet()`、`removeSheet()`、`getActiveSheet()`、`getSheets()` +- 新增事件：`BeforeSheetAdd`、`AfterSheetAdd`、[`BeforeSheetChange`](api/spreadsheet_beforesheetchange_event.md)、[`AfterSheetChange`](api/spreadsheet_aftersheetchange_event.md)、`BeforeSheetRemove`、`AfterSheetRemove`、`BeforeSheetRename`、`AfterSheetRename` +- 支持通过 [getFormula()](api/spreadsheet_getformula_method.md) 方法获取单元格的公式 + +### 更新 {#updates-41} + +- [getValue()](api/spreadsheet_getvalue_method.md)、[setValue()](api/spreadsheet_setvalue_method.md)、[getStyle()](api/spreadsheet_getstyle_method.md)、[setStyle()](api/spreadsheet_setstyle_method.md)、[getFormat()](api/spreadsheet_getformat_method.md)、[setFormat()](api/spreadsheet_setformat_method.md)、[isLocked()](api/spreadsheet_islocked_method.md)、[lock()](api/spreadsheet_lock_method.md)、[unlock()](api/spreadsheet_unlock_method.md) 方法的 "cell" 参数格式已更新。现在单元格或单元格区域的引用可以包含标签页名称。 + +## 版本 4.0.5 {#version-405} + +发布于 2021 年 2 月 3 日 + +### 修复 {#fixes-405} + +- 修复性能问题 +- 修复用户在单元格中撤销最后一个操作时出现的脚本错误 +- 修复调用析构函数后抛出的脚本错误 +- 修复将单元格区域的值插入单个单元格时被截断的问题 +- 修复单元格剪切后再次粘贴时单元格格式识别的问题 + +## 版本 4.0.4 {#version-404} + +发布于 2021 年 1 月 12 日 + +### 修复 {#fixes-404} + +- 修复处理超过 2 个数字时"SUM"函数的不正确工作 +- 修复调用"destructor()"后初始化电子表格的问题 +- 修复类型问题 + +## 版本 4.0.3 {#version-403} + +发布于 2020 年 12 月 28 日 + +### 修复 {#fixes-403} + +- 修复在数据集中为单元格值设置格式的问题 +- 修复将电子表格附加到布局时出现的错误 +- 修复计算结果后无法编辑单元格公式的问题 +- 修复 [setFocusedCell()](api/selection_setfocusedcell_method.md) 方法的不正确工作 +- 修复使用公式时焦点的不正确行为 +- 修复使用"ctrl"键选择单元格区域的问题 +- 修复通过"ctrl+点击"向含有公式的单元格添加单元格区域的问题 +- 修复数学函数的不正确工作 +- 修复通过弹出框和鼠标点击选择 SUM() 公式的问题 + +## 版本 4.0.2 {#version-402} + +发布于 2020 年 12 月 21 日 + +### 修复 {#fixes-402} + +- 修复在页面上创建 2 个或更多电子表格对象时键盘导航的不正确行为 +- 修复 types.d.ts 文件抛出错误的问题 +- 修复复制和粘贴单元格区域的问题 + +## 版本 4.0.1 {#version-401} + +发布于 2020 年 12 月 2 日 + +### 修复 {#fixes-401} + +- 将鼠标悬停在工具栏的撤销/重做按钮上时工具提示显示不正确 +- 在导入大于电子表格大小的数据后删除最后一列时出现的问题 +- [setSelectedCell()](api/selection_setselectedcell_method.md) 方法的问题，导致选中单元格的公式未在公式栏中显示 +- TypeScript 定义生成不正确 +- 单元格内容对齐的视觉问题 +- 空单元格或零值单元格序列化的问题 + +## 版本 4.0 {#version-40} + +发布于 2020 年 10 月 19 日 + +### 新功能 {#new-functionality-40} + +- [数学函数](functions.md) +- [TypeScript 支持](using_typescript.md) +- 支持通过 `leftSplit` 配置属性冻结电子表格左侧的列 +- [文本格式已添加到默认数字格式中，用于将单元格内容显示为文本](number_formatting.md#default-number-formats) +- 支持使用["Ctrl+Shift+左键单击"](hotkeys.md#selection)组合键选择多个不连续的单元格区域 + +### 修复 {#fixes-40} + +- 修复对单元格区域应用背景色时颜色选择器的不正确工作 +- 修复导入 Excel 文件时数字解析不正确的问题 +- 修复从 Google 或 Excel 表格复制的所有数据被插入电子表格单个单元格的问题 +- 修复 [editLine:false](api/spreadsheet_editline_config.md) 属性的不正确工作，该属性导致编辑操作在控制台中以错误结束 +- 修复 `AfterValueChange` 事件被调用两次的问题 + +## 版本 3.1.4 {#version-314} + +发布于 2019 年 9 月 19 日 + +### 修复 {#fixes-314} + +- 样式修复 + +## 版本 3.1.3 {#version-313} + +发布于 2019 年 9 月 19 日 + +### 修复 {#fixes-313} + +- Spreadsheet 附加到 Layout 时单元格获取焦点的问题 + +## 版本 3.1.2 {#version-312} + +发布于 2019 年 3 月 25 日 + +### 修复 {#fixes-312} + +- Excel 导出中文本样式的问题 +- 右对齐文本下划线的问题 + +## 版本 3.1.1 {#version-311} + +发布于 2019 年 3 月 25 日 + +### 修复 {#fixes-311} + +- 导出到 Excel 的问题 + +## 版本 3.1 {#version-31} + +发布于 2019 年 3 月 21 日 + +### 新功能 {#new-functionality-31} + +- [从 Excel 导入](loading_data.md#loading-excel-file-xlsx) +- [导出到 Excel](loading_data.md#exporting-data) +- [数字格式化](number_formatting.md) +- [单元格内容自动填充](work_with_cells.md#auto-filling-cells-with-content) + +### 更新 {#updates-31} + +- [单元格区域中的快捷键行为](hotkeys.md) + +### 修复 {#fixes-31} + +- 活动单元格上快捷键的问题 + +## 版本 3.0.3 {#version-303} + +发布于 2018 年 12 月 13 日 + +### 修复 {#fixes-303} + +- 自定义只读模式下的不正确行为 +- 删除列/行方法的问题 +- 编辑行焦点丢失的问题 +- 活动单元格上快捷键的问题 + +## 版本 3.0.2 {#version-302} + +发布于 2018 年 12 月 6 日 + +### 修复 {#fixes-302} + +- 快捷键行为的问题 +- 选择手柄位置的问题 +- 活动单元格焦点丢失的问题 +- 活动单元格上选中行为不正确 +- 活动单元格上快捷键行为不正确 +- 方向键滚动行为不正确 + +## 版本 3.0.1 {#version-301} + +发布于 2018 年 11 月 8 日 + +### 修复 {#fixes-301} + +- 撤销操作的不正确行为 +- 对一组单元格执行剪切-粘贴操作的不正确行为 + +## 版本 3.0 {#version-30} + +发布于 2018 年 10 月 25 日 + +### 重大变更 {#breaking-change} + +{{note 版本 3.0 的 API 与 v2.1 的 API 不兼容。}} + +与之前基于 PHP 的版本相比，版本 3.0 的 DHTMLX Spreadsheet 是一个完全客户端的 JavaScript 组件。 + +请查阅[迁移](migration.md#21---30)文章了解新 API 的使用方法。 + +### 新功能 {#new-functionality-30} + +Spreadsheet 的 API 已经过更改，使用起来更加便捷。另一个重要更新是对组件进行了全面重新设计，使 Spreadsheet 界面焕然一新。在全新外观的同时，DHTMLX Spreadsheet 的可用性也得到了大幅提升。 + +- [Spreadsheet 概述](/) +- [完全可自定义的结构和可调整的外观](customization.md) +- [全新重构的 API](api/api_overview.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/work_with_cells.md b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_cells.md new file mode 100644 index 00000000..5afec447 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_cells.md @@ -0,0 +1,173 @@ +--- +sidebar_label: 编辑单元格 +title: 编辑单元格 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解单元格操作相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 编辑单元格 {#editing-cells} + +## 在单元格中输入内容 {#entering-content-in-a-cell} + +### 手动输入数据 {#entering-data-manually} + +- 单击工作表上所需的单元格。 +- 输入文本、数字、日期或时间，然后按 **Enter**。 + +### 输入公式 {#entering-a-formula} + +- 单击您希望显示公式结果的单元格。 +- 输入 `=` 符号。 +- 创建公式。为此，您可以使用： + - 常量数字和计算运算符，例如 `=3-2*5+12` + - 单元格引用和计算运算符，例如 `=A1/A2` + - [内置函数](functions.md)，例如 `=MAX(C46;D46)` +- 按 **Enter**。 + +:::note +公式中的小写字母会自动转换为大写。 +::: + +## 在单元格中插入超链接 {#inserting-a-hyperlink-into-a-cell} + +### 添加链接 {#adding-a-link} + +要向单元格插入超链接，可以使用以下任一方式。 + +#### 使用上下文菜单 {#using-context-menu} + +- 右键单击单元格，选择 *插入链接* + +![DHTMLX Spreadsheet context menu with the Insert link option highlighted](/img/link/via_context_menu.png) + +- 在弹出的窗口中，输入文本和链接地址，然后单击 *保存* + +![DHTMLX Spreadsheet Insert link dialog with Text and Link input fields](/img/link/popup_window.png) + +#### 使用工具栏按钮 {#using-toolbar-button} + +- 选中单元格，单击工具栏中的 **插入链接** 按钮 + +![DHTMLX Spreadsheet toolbar with the Insert link button highlighted](/img/link/via_toolbar.png) + +- 在弹出的窗口中，输入文本和链接地址，然后单击 *保存* + +#### 使用菜单 {#using-menu} + +- 选中单元格，在菜单中选择：*插入 -> 插入链接* + +![DHTMLX Spreadsheet Insert menu with the Insert link option](/img/link/via_menu.png) + +- 在弹出的窗口中，输入文本和链接地址，然后单击 *保存*。 + +### 复制链接 {#copying-a-link} + +- 选中包含要复制的链接的单元格 +- 在弹出的提示框中，单击 **复制** 图标 + +![DHTMLX Spreadsheet link popup with the Copy icon highlighted](/img/link/copy_link.png) + +### 编辑链接 {#editing-a-link} + +- 选中包含要编辑的链接的单元格 +- 在弹出的提示框中，单击 **编辑** 图标 + +![DHTMLX Spreadsheet link popup with the Edit icon highlighted](/img/link/edit.png) + +### 删除链接 {#removing-a-link} + +- 选中包含要删除的链接的单元格 +- 在弹出的提示框中，单击 **删除链接** 图标 + +![DHTMLX Spreadsheet link popup with the Remove link icon highlighted](/img/link/remove_link.png) + +## 在单元格中使用下拉列表 {#using-drop-down-lists-in-cells} + +您可以在单元格中创建下拉列表，让用户从列表中选择所需的选项。 + +### 手动输入方式创建下拉列表 {#creating-a-drop-down-list-by-typing-it-manually} + +- 选择您要创建列表的单元格或单元格区域 + +- 在菜单中选择：*数据 -> 数据验证* + +- 选择 *条目列表* 条件 + +- 输入您希望在下拉列表中显示的条目 + +- 单击 **保存** 按钮 + +![DHTMLX Spreadsheet Data validation dialog creating a drop-down list from a list of items](/img/data_validation.gif) + +### 通过区域创建下拉列表 {#creating-a-drop-down-list-by-using-a-range} + +- 输入您希望在下拉列表中显示的条目 + +- 选择您要创建列表的单元格或单元格区域 + +- 在菜单中选择：*数据 -> 数据验证* + +- 选择 *来自区域的列表* 条件 + +- 选择您的列表区域 + +- 单击 **保存** 按钮 + +![DHTMLX Spreadsheet Data validation dialog creating a drop-down list from a cell range](/img/data_validation_range.gif) + +### 从单元格中移除验证 {#removing-validation-from-a-cell} + +您可以停止在单元格中使用下拉列表。操作方法如下： + +- 选择要移除下拉列表的单元格或单元格区域 +- 在菜单中选择：*数据 -> 数据验证* +- 选择 *移除验证* 选项 + +![DHTMLX Spreadsheet Data menu with the Data validation Remove validation option](/img/remove_validation.png) + +## 在多个单元格中输入相同数据 {#entering-the-same-data-in-several-cells} + +您可以使用**填充手柄**将相同的数据自动填充到多个单元格中。详情请参阅下文。 + +### 自动填充单元格内容 {#auto-filling-cells-with-content} + +您可以自动填充单元格数据。工作方式如下： + +1\. 选择一个或多个单元格，其数据将作为填充更多单元格的基础。 + +2\. 在选中的单元格中输入数据。自动填充支持以下几种方式： + +- 复制值 + +​例如，要生成序列 4,4,4,4...，只需在第一个单元格中输入 4。 + +- 按规律填充 + - 要生成序列 1, 2, 3, 4, 5, ...，在前两个单元格中分别输入 1 和 2。 + - 要生成序列 1, 3, 5, 7, 9, ...，在前两个单元格中分别输入 1 和 3。 + - 要生成序列 2, 4, 6, 8, 10, ...，在前两个单元格中分别输入 2 和 4。 + - 除数字外，您还可以在规律中使用字母，例如，要生成序列 1, a, 2, b, 3, a, 4, b, ...，在前四个单元格中分别输入 1, a, 2, b。 + +3\. 拖动**填充手柄** + +![DHTMLX Spreadsheet autofill dragging the fill handle to replicate cell data](/img/autofill.gif) + +## 锁定单元格 {#locking-cells} + +您可以锁定单元格以防止其值被更改。锁定单元格后，右上角会显示灰色"钥匙"图标。锁定的单元格不响应任何编辑尝试。 + +![DHTMLX Spreadsheet locked cells marked with a gray key icon in the top right corner](/img/lockedcells.png) + +要锁定或解锁单元格，请使用以下任一方式： + +### 通过工具栏按钮锁定单元格 {#lock-cells-via-the-toolbar-button} + +- 选择要锁定/解锁的单元格（无需相邻）。 +- 单击工具栏中的 **锁定单元格** 按钮。 + +![DHTMLX Spreadsheet toolbar with the Lock cell button highlighted](/img/lock.png) + +### 通过上下文菜单锁定单元格 {#lock-cells-via-the-context-menu} + +- 右键单击要锁定/解锁的单元格或单元格区域。 +- 在弹出的上下文菜单中选择"锁定/解锁单元格"选项。 + +![DHTMLX Spreadsheet context menu with the Lock/Unlock cell option highlighted](/img/unlock.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/work_with_rows_cols.md b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_rows_cols.md new file mode 100644 index 00000000..014b310a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_rows_cols.md @@ -0,0 +1,261 @@ +--- +sidebar_label: 行与列操作 +title: 行与列操作 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解行与列的操作方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 行与列操作 {#work-with-rows-and-columns} + +DHTMLX Spreadsheet 支持通过工具栏按钮、菜单选项和单元格上下文菜单选项来添加和删除列与行、自动调整列宽以适应内容、冻结和解冻列与行，以及隐藏和显示列与行。 + +## 添加/删除行和列 {#addingremoving-rows-and-columns} + +### 添加行 {#adding-rows} + +要添加新行，请按以下步骤操作： + +1\. 选择一行（单击其表头）或该行中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **行** 按钮，选择 *在上方添加行* 选项 + +![DHTMLX Spreadsheet Rows toolbar button with the Add row above option highlighted](/img/add_row_button.png) + +- 或在菜单中选择 **插入** 选项，然后选择 *行 -> 在上方添加行* + +![DHTMLX Spreadsheet Insert menu showing Rows and the Add row above option](/img/add_row_menu.png) + +- 或右键单击该行或行中的某个单元格，选择 *行 -> 在上方添加行* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Add row above](/img/add_row_context_menu.png) + +### 删除行 {#removing-rows} + +要删除行，请按以下步骤操作： + +1\. 选择一行（单击其表头）或该行中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **行** 按钮，选择 *删除行* 选项 + +![DHTMLX Spreadsheet Rows toolbar button with the Remove row option highlighted](/img/remove_row_button.png) + +- 或在菜单中选择 **插入** 选项，然后选择 *行 -> 删除行* + +![DHTMLX Spreadsheet Insert menu showing Rows and the Remove row option](/img/remove_row_menu.png) + +- 或右键单击该行或行中的某个单元格，选择 *行 -> 删除行* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Remove row](/img/remove_row_context_menu.png) + +:::note +要一次删除多行：选择这些行，右键单击调出上下文菜单，然后选择 *行 -> 删除行 [ids]*。 +::: + +### 添加列 {#adding-columns} + +要添加新列，请按以下步骤操作： + +1\. 选择一列（单击其表头）或该列中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **列** 按钮，选择 *在左侧添加列* 选项 + +![DHTMLX Spreadsheet Columns toolbar button with the Add column left option highlighted](/img/add_column_button.png) + +- 或在菜单中选择 **插入** 选项，然后选择 *列 -> 在左侧添加列* + +![DHTMLX Spreadsheet Insert menu showing Columns and the Add column left option](/img/add_column_menu.png) + +- 或右键单击该列或列中的某个单元格，选择 *列 -> 在左侧添加列* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Add column](/img/add_column_context_menu.png) + +### 删除列 {#removing-columns} + +要删除列，请按以下步骤操作： + +1\. 选择一列（单击其表头）或该列中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **列** 按钮，选择 *删除列* 选项 + +![DHTMLX Spreadsheet Columns toolbar button with the Remove column option highlighted](/img/remove_column_button.png) + +- 或在菜单中选择 **插入** 选项，然后选择 *列 -> 删除列* + +![DHTMLX Spreadsheet Insert menu showing Columns and the Remove column option](/img/remove_column_menu.png) + +- 或右键单击该列或列中的某个单元格，选择 *列 -> 删除列* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Remove column](/img/remove_column_context_menu.png) + +:::note +要一次删除多列：选择这些列，右键单击调出上下文菜单，然后选择 *列 -> 删除列 [ids]*。 +::: + +## 列宽自动适应 {#autofit-column-width} + +要更改列宽，使其自动适应列中最长的内容，您可以： + +- 双击表头中列的调整光标 + +![DHTMLX Spreadsheet column header with the resize cursor for autofitting column width](/img/resize_cursor.png) + +- 或按以下步骤操作： + +1\. 左键单击列的三点图标 + +![DHTMLX Spreadsheet column context menu opened from the three dots icon](/img/column_context_menu.png) + +2\. 选择 *列 -> 适应数据* + +![DHTMLX Spreadsheet Columns submenu with the Fit to data option for autofit column width](/img/column_autofit.png) + +## 冻结/解冻行和列 {#freezingunfreezing-rows-and-columns} + +### 冻结行 {#freezing-rows} + +要将行冻结到某一行，请按以下步骤操作： + +1\. 选择一行（单击其表头）或该行中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **行** 按钮，选择 *冻结到第 [id] 行* 选项 + +![DHTMLX Spreadsheet Rows toolbar button with the Freeze up to row option highlighted](/img/freeze_rows_toolbar.png) + +- 或在菜单中选择 **编辑** 选项，然后选择 *冻结 -> 冻结到第 [id] 行* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Freeze up to row](/img/freeze_rows_menu.png) + +- 或右键单击某行或行中的某个单元格，选择 *行 -> 冻结到第 [id] 行* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Freeze up to row](/img/freeze_rows_context_menu.png) + +### 解冻行 {#unfreezing-rows} + +（*下图中行已冻结到第 5 行*） + +要解冻行，请选择以下任一操作： + +- 单击工具栏中的 **行** 按钮，选择 *解冻行* 选项 + +![DHTMLX Spreadsheet Rows toolbar button with the Unfreeze rows option highlighted](/img/unfreeze_rows_toolbar.png) + +- 或在菜单中选择 **编辑** 选项，然后选择 *冻结 -> 解冻行* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Unfreeze rows](/img/unfreeze_rows_menu.png) + +- 或右键单击任意单元格，选择 *行 -> 解冻行* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Unfreeze rows](/img/unfreeze_rows_context_menu.png) + +### 冻结列 {#freezing-columns} + +要将列冻结到某一列，请按以下步骤操作： + +1\. 选择一列（单击其表头）或该列中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **列** 按钮，选择 *冻结到第 [id] 列* 选项 + +![DHTMLX Spreadsheet Columns toolbar button with the Freeze up to column option highlighted](/img/freeze_columns_toolbar.png) + +- 或在菜单中选择 **编辑** 选项，然后选择 *冻结 -> 冻结到第 [id] 列* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Freeze up to column](/img/freeze_columns_menu.png) + +- 或右键单击某列或列中的某个单元格，选择 *列 -> 冻结到第 [id] 列* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Freeze up to column](/img/freeze_columns_context_menu.png) + +### 解冻列 {#unfreezing-columns} + +（*下图中列已冻结到 D 列*） + +要解冻列，请选择以下任一操作： + +- 单击工具栏中的 **列** 按钮，选择 *解冻列* 选项 + +![DHTMLX Spreadsheet Columns toolbar button with the Unfreeze columns option highlighted](/img/unfreeze_columns_toolbar.png) + +- 或在菜单中选择 **编辑** 选项，然后选择 *冻结 -> 解冻列* + +![DHTMLX Spreadsheet Edit menu with the Freeze submenu showing Unfreeze columns](/img/unfreeze_columns_menu.png) + +- 或右键单击任意单元格，选择 *列 -> 解冻列* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Unfreeze columns](/img/unfreeze_columns_context_menu.png) + +## 隐藏/显示行和列 {#hidingshowing-rows-and-columns} + +### 隐藏行 {#hiding-rows} + +要隐藏行，请按以下步骤操作： + +1\. 选择一行（单击其表头）或该行中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **行** 按钮，选择 *隐藏行 [id]* 选项 + +![DHTMLX Spreadsheet Rows toolbar button with the Hide rows option highlighted](/img/hide_rows_toolbar.png) + +- 或右键单击某行或行中的某个单元格，选择 *行 -> 隐藏行 [id]* + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Hide rows](/img/hide_row_context_menu.png) + +### 显示行 {#showing-rows} + +要显示已隐藏的行，请选择以下任一操作： + +- 单击行表头中代替隐藏行出现的"箭头"图标 + +（*下图中第 8 行和第 11 行已隐藏*） + +![DHTMLX Spreadsheet rows header with the arrows icon indicating hidden rows](/img/show_rows.png) + +- 或选择包含隐藏行的行或多个单元格，右键单击调出上下文菜单，然后选择 *行 -> 显示行* + +（*下图中第 8 行已隐藏*） + +![DHTMLX Spreadsheet context menu with the Rows submenu showing Show rows](/img/show_rows_context_menu.png) + +### 隐藏列 {#hiding-columns} + +要隐藏列，请按以下步骤操作： + +1\. 选择一列（单击其表头）或该列中的某个单元格。 + +2\. 选择以下任一操作： + +- 单击工具栏中的 **列** 按钮，选择 *隐藏列 [id]* 选项 + +![DHTMLX Spreadsheet Columns toolbar button with the Hide columns option highlighted](/img/hide_columns_toolbar.png) + +- 或右键单击某列或列中的某个单元格，选择 *列 -> 隐藏列 [id]* + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Hide columns](/img/hide_columns_context_menu.png) + +### 显示列 {#showing-columns} + +要显示已隐藏的列，请选择以下任一操作： + +- 单击列表头中代替隐藏列出现的"箭头"图标 + +（*下图中 C 列和 E 列已隐藏*） + +![DHTMLX Spreadsheet columns header with the arrows icon indicating hidden columns](/img/show_columns.png) + +- 或选择包含隐藏列的列或多个单元格，右键单击调出上下文菜单，然后选择 *列 -> 显示列* + +（*下图中 C 列已隐藏*） + +![DHTMLX Spreadsheet context menu with the Columns submenu showing Show columns](/img/show_columns_context_menu.png) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/work_with_sheets.md b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_sheets.md new file mode 100644 index 00000000..6ce426de --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/work_with_sheets.md @@ -0,0 +1,53 @@ +--- +sidebar_label: 工作表操作 +title: 工作表操作 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解工作表操作相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 工作表操作 {#work-with-sheets} + +## 添加新工作表 {#adding-a-new-sheet} + +要添加新工作表，请按以下步骤操作： + +1. 单击工作表标签以选择它 + +2. 单击底部工具栏中的 **添加工作表** 按钮 + +:::note +请注意，新工作表将添加在当前活动工作表之后。 +::: + +![DHTMLX Spreadsheet bottom toolbar with the Add sheet button and sheet tabs](/img/add_sheet.png) + +## 删除工作表 {#removing-a-sheet} + +要从电子表格中删除工作表，请右键单击工作表标签，然后选择 *删除*。 + +{{note 请注意，如果电子表格中只有一个工作表，则无法将其删除。}} + +![DHTMLX Spreadsheet sheet tab context menu with the Delete option highlighted](/img/remove_sheet.png) + +## 切换活动工作表 {#changing-the-active-sheet} + +要切换当前活动工作表，请单击其他工作表标签。 + +![DHTMLX Spreadsheet sheet tabs at the bottom with the active sheet highlighted](/img/change_active_sheet.png) + +## 重命名工作表 {#renaming-a-sheet} + +要重命名工作表，请右键单击工作表标签，单击 *重命名*，然后输入新名称。 + +![DHTMLX Spreadsheet sheet tab context menu with the Rename option and a name input](/img/rename_sheet.png) + +## 工作表之间的跨表引用 {#cross-references-between-sheets} + +您可以通过跨表引用将多个工作表中的数据汇总到一个工作表中。
具体步骤如下： + +1\. 在单元格中输入等号（=） + +2\. 单击您要跨表引用的工作表标签，然后选择单元格或单元格区域 + +3\. 完成公式输入并按 Enter + +![DHTMLX Spreadsheet cross-reference formula built across multiple sheet tabs](/img/cross_reference.gif) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/working_with_cells.md b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_cells.md new file mode 100644 index 00000000..32aee958 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_cells.md @@ -0,0 +1,289 @@ +--- +sidebar_label: 单元格操作 +title: 单元格操作 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解单元格操作相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 单元格操作 {#work-with-cells} + +## 设置单元格值 {#setting-cell-value} + +### 设置值 {#set-values} + +要通过 API 为单元格设置值，请使用 [](api/spreadsheet_setvalue_method.md) 方法。向该方法传入以下参数： + +- `cells` - (*string*) 单元格或单元格区域的 id +- `value` - (*string/number/array*) 要为单元格设置的值 + +~~~jsx +// setting value for one cell +spreadsheet.setValue("A1",5); +// setting the same value for a range of cells +spreadsheet.setValue("A1:D1",5); +// setting the same value for different cells +spreadsheet.setValue("B6,A1:D1",5); +// setting values from an array for cells in a range alternately +spreadsheet.setValue("A1:D1",[1,2,3]); +~~~ + +:::note +请注意，该方法为指定的单元格设置相同（重复）的值。如果要向电子表格单元格中添加不同的值，请使用 [`parse()`](api/spreadsheet_parse_method.md) 方法。 +::: + + +### 获取值 {#get-values} + +您也可以通过将*所需单元格或单元格区域的 id* 传入 [](api/spreadsheet_getvalue_method.md) 方法来返回单元格中的值。 + +该方法以字符串、数字或数组的形式返回值： + +~~~jsx +// returning the value of one cell +var cellValue = spreadsheet.getValue("A2"); // "Ecuador" + +// returning the values of the range of cells +var rangeValues = spreadsheet.getValue("A1:A3"); // -> ["Country","Ecuador","Belarus"] + +// returning the values of different cells +var values = spreadsheet.getValue("A1,B1,C1:C3"); +//-> ["Country", "Product", "Price", 6.68, 3.75] +~~~ + +## 验证单元格 {#validating-cells} + +从 v4.3 开始，您可以通过添加下拉选项列表对单元格应用数据验证。为此，请使用 [](api/spreadsheet_setvalidation_method.md) 方法： + +~~~jsx +spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]); +~~~ + +下拉列表限制了用户的选择范围。当用户在单元格中输入意外值时，将显示 *无效值* 消息。 + +:::info +[`setValidation()`](api/spreadsheet_setvalidation_method.md) 方法也可以从指定单元格中移除验证。[查看详情](api/spreadsheet_setvalidation_method.md#details)。 +::: + +## 在单元格中插入超链接 {#inserting-a-hyperlink-into-a-cell} + +要在单元格中插入超链接，请使用 [`insertLink()`](api/spreadsheet_insertlink_method.md) 方法。该方法还可以添加与超链接一起显示的文本： + +~~~jsx +// insert a link in "A2" cell +spreadsheet.insertLink("A2", { + text:"DHX Spreadsheet", href: "https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/" +}); +~~~ + +如果需要从单元格中删除链接，只需向该方法传入单元格 ID： + +~~~jsx +// remove a link from "A2" cell +spreadsheet.insertLink("A2"); +~~~ + +## 设置单元格样式 {#styling-cells} + +### 设置样式 {#set-styles} + +您可以使用 [](api/spreadsheet_setstyle_method.md) 方法为单元格或单元格区域应用样式。该方法接受两个参数： + +- `cells` - (*string*) 单元格或单元格区域的 id +- `styles` - (*object/array*) 要应用于单元格的样式 + +~~~jsx +// setting style for one cell +spreadsheet.setStyle("A1", {background: "red"}); +// setting the same style for a range of cells +spreadsheet.setStyle("A1:D1", {color: "blue"}); +// setting the same style for different cells +spreadsheet.setStyle("B6,A1:D1", {color: "blue"}); +// setting styles from an array for cells in a range alternately +spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]); +~~~ + +:::note +该方法为指定的单元格设置相同的样式。如果要对电子表格单元格应用不同的样式，请使用 [`parse()`](api/spreadsheet_parse_method.md) 方法。 +::: + +### 获取样式 {#get-styles} + +要获取应用于单元格的样式，请使用 [](api/spreadsheet_getstyle_method.md) 方法。向其传入*单元格或单元格区域的 id*： + +~~~jsx +// getting style of one cell +var style = spreadsheet.getStyle("A1"); +// -> {background: "#8DE9E1", color: "#03A9F4"} + +// getting styles of a range of cells +var rangeStyles = spreadsheet.getStyle("A1:D1"); // -> see details + +// getting styles of different cells +var values = spreadsheet.getStyle("A1,B1,C1:C3"); +~~~ + +对于多个单元格，该方法返回一个包含各单元格样式的对象数组： + +~~~jsx +[ + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "red", border: "solid 1px yellow", color: "blue"}, + {background: "#C8FAF6", border: "solid 1px yellow", color: "#81C784"}, + {background: "#9575CD", border: "solid 1px yellow", color: "#079D8F"} +] +~~~ + +## 编辑单元格 {#editing-a-cell} + +### 启用单元格编辑器 {#enable-cell-editor} + +您可以通过调用 [](api/spreadsheet_startedit_method.md) 方法在单元格中添加输入框： + +~~~jsx +spreadsheet.startEdit(); +~~~ + +该方法可接受两个可选参数： + +- `cell` - (*string*) 可选，单元格的 id +- `value` - (*string*) 可选，单元格值 + +如果未传入单元格 id，输入框将添加到当前选中的单元格。 + +### 禁用单元格编辑器 {#disable-cell-editor} + +要完成单元格编辑，请使用 [](api/spreadsheet_endedit_method.md) 方法，该方法将关闭编辑器并保存输入的值。 + +~~~jsx +spreadsheet.endEdit(); +~~~ + +## 锁定单元格 {#locking-cells} + +### 锁定单元格 {#lock-cells} + +您可以通过程序锁定一个或多个单元格，使其对用户只读。为此请使用 [](api/spreadsheet_lock_method.md) 方法。该方法以*单元格 id 或单元格区域*作为参数。 + +~~~jsx +// locks a cell +spreadsheet.lock("A1"); + +// locks a range of cells +spreadsheet.lock("A1:C1"); + +// locks specified cells +spreadsheet.lock("A1,B5,B7,D4:D6"); +~~~ + +**相关示例**：[Spreadsheet. 锁定单元格](https://snippet.dhtmlx.com/czeyiuf8) + +### 解锁单元格 {#unlock-cells} + +要解锁已锁定的单元格，请使用 [](api/spreadsheet_unlock_method.md) 方法。将*单元格 id 或包含锁定单元格的区域*作为参数传入： + +~~~jsx +// unlocks a cell +spreadsheet.unlock("A1"); + +// unlocks a range of cells +spreadsheet.unlock("A1:C1"); + +// unlocks specified cells +spreadsheet.unlock("A1,B5,B7,D4:D6"); +~~~ + +### 检查单元格是否已锁定 {#check-whether-a-cell-is-locked} + +要检查一个或多个单元格是否已锁定，请使用 [](api/spreadsheet_islocked_method.md) 方法，并将*单元格 id 或单元格区域*传入： + +~~~jsx +// checks whether a cell is locked +var cellLocked = spreadsheet.isLocked("A1"); + +// checks whether several cells are locked +var rangeLocked = spreadsheet.isLocked("A1:C1"); + +// checks whether scattered cells are locked +var cellsLocked = spreadsheet.isLocked("A1,B5,B7,D4:D6"); +~~~ + +该方法根据单元格的状态返回 `true` 或 `false`。如果同时检查多个单元格，只要其中至少有一个锁定单元格，方法即返回 `true`。 + +## 合并单元格 {#merging-cells} + +### 合并单元格 {#merge-cells} + +您可以通过将要合并的单元格区域传入 [`mergeCells()`](api/spreadsheet_mergecells_method.md) 方法来将两个或多个单元格合并为一个： + +~~~jsx +//merge cells A6, A7, and A8 +spreadsheet.mergeCells("A6:A8"); + +//merge cells B2, C2, and D2 +spreadsheet.mergeCells("B2:D2"); +~~~ + +### 拆分单元格 {#split-cells} + +您也可以使用 [`mergeCells()`](api/spreadsheet_mergecells_method.md) 方法拆分已合并的单元格。除单元格区域外，还需传入 `true` 作为第二个参数以取消合并指定单元格： + +~~~jsx +//unmerge cells B2, C2, and D2 +spreadsheet.mergeCells("B2:D2", true); +~~~ + +## 选择单元格 {#selecting-cells} + +### 选中单元格 {#select-cells} + +Spreadsheet 支持通过 `Selection` 对象的 API 设置单元格选中状态。 + +您可以通过将单元格 id 传入 [](api/selection_setselectedcell_method.md) 方法来选中单元格： + +~~~jsx +// selecting a cell +spreadsheet.selection.setSelectedCell("B5"); +// selecting a range of cells +spreadsheet.selection.setSelectedCell("B1:B5"); +// selecting scattered cells +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +~~~ + +也可以通过 [](api/selection_getselectedcell_method.md) 方法获取选中单元格的 id： + +~~~jsx +const selected = spreadsheet.selection.getSelectedCell(); // -> "B7,B3,D4,D6,E4:E8" +~~~ + +### 取消选中单元格 {#unselect-cells} + +要从单元格中移除选中状态，请将单元格 id 传入 [](api/selection_removeselectedcell_method.md) 方法： + +~~~jsx +// sets selection +spreadsheet.selection.setSelectedCell("B7,B3,D4,D6,E4:E8"); +// removes selection +spreadsheet.selection.removeSelectedCell("B7,D4,E5:E7"); + +const selected = spreadsheet.selection.getSelectedCell(); +console.log(selected); // -> "B3,D6,E4,E8" +~~~ + +**相关示例：**[Spreadsheet. 移除选中状态](https://snippet.dhtmlx.com/u4j76cuh) + +## 在单元格上设置焦点 {#setting-focus-on-a-cell} + +`Selection` 对象支持在电子表格单元格上设置焦点，以及获取已聚焦单元格的 id。为此请使用对应的方法： + +- [](api/selection_setfocusedcell_method.md) + +~~~jsx +// pass the id of the cell to set focus on +spreadsheet.selection.setFocusedCell("D4"); +~~~ + +- [](api/selection_getfocusedcell_method.md) + +~~~jsx +// getting the focused cell +var focused = spreadsheet.selection.getFocusedCell(); // -> "D4" +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/working_with_sheets.md b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_sheets.md new file mode 100644 index 00000000..d6d14cd3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_sheets.md @@ -0,0 +1,149 @@ +--- +sidebar_label: 工作表操作 +title: 工作表操作 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解工作表操作相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 工作表操作 {#work-with-sheets} + +从 v4.1 开始，您可以在电子表格中使用[多个工作表](api/spreadsheet_multisheets_config.md)。 + +本文介绍如何通过 API 方法添加新工作表、删除不需要的工作表、获取所有工作表以及获取当前活动工作表。此外还说明了如何一次性将多个工作表加载到电子表格中。 + +{{note 要了解如何通过用户界面与多个工作表交互，请查阅我们的[用户指南](work_with_sheets.md)。}} + +从 v6.0 开始，**Sheet Manager** 模块通过 `spreadsheet.sheets` 属性处理工作表管理。专用的 [Sheet Manager API](api/overview/sheetmanager_overview.md) 替代了之前直接在 Spreadsheet 实例上可用的工作表相关方法。 + +## 加载多个工作表 {#loading-multiple-sheets} + +要将多个工作表加载到电子表格中，请准备好包含所需工作表数量及其配置的数据，并将其作为参数传入 [`parse()`](api/spreadsheet_parse_method.md) 方法。数据应为 `object` 类型。[查看该对象可包含的属性列表](api/spreadsheet_parse_method.md)。 + + + +{{note 如果 [`multiSheets`](api/spreadsheet_multisheets_config.md) 配置选项设置为 `false`，则只会创建一个工作表。}} + +## 添加新工作表 {#adding-a-new-sheet} + +要向电子表格添加新工作表，请使用 [`sheets.add()`](api/sheetmanager_add_method.md) 方法，并将新工作表的名称作为参数传入： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Add a sheet with a custom name +const newSheetId = spreadsheet.sheets.add("Q4 Report"); +console.log(newSheetId); // e.g. "sheet_2" + +// Add a sheet with an auto-generated name +const anotherId = spreadsheet.sheets.add(); +~~~ + +该方法返回所创建工作表的 id。 + +## 删除工作表 {#removing-a-sheet} + +您可以通过 [`sheets.remove()`](api/sheetmanager_remove_method.md) 方法按 id 从电子表格中删除工作表： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Remove a sheet by its id +spreadsheet.sheets.remove("sheet_2"); +~~~ + +请注意，如果电子表格中的工作表少于 2 个，则不会删除工作表。 + +## 设置活动工作表 {#setting-active-sheet} + +要在电子表格初始化后动态切换活动工作表，请使用 [`sheets.setActive()`](api/sheetmanager_setactive_method.md) 方法。该方法以工作表的 id 作为参数： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Switch to the second sheet +spreadsheet.sheets.setActive("sheet_2"); + +// Verify the switch +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 2" +~~~ + +**相关示例：**[Spreadsheet. 设置活动工作表](https://snippet.dhtmlx.com/iowl449t) + +## 获取活动工作表 {#getting-active-sheet} + +您可以通过 [`sheets.getActive()`](api/sheetmanager_getactive_method.md) 方法获取当前活动工作表： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const active = spreadsheet.sheets.getActive(); +console.log(active.name); // "Sheet 1" +console.log(active.id); // "sheet_1" +~~~ + +该方法返回一个包含当前活动工作表 name 和 id 属性的对象。 + +## 获取所有工作表 {#getting-all-sheets} + +[`sheets.getAll()`](api/sheetmanager_getall_method.md) 方法以工作表对象数组的形式返回电子表格的所有工作表： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const allSheets = spreadsheet.sheets.getAll(); +console.log(allSheets); +// [ +// { id: "sheet_1", name: "Sheet 1" }, +// { id: "sheet_2", name: "Sheet 2" } +// ] +~~~ + +## 通过 id 获取工作表 {#getting-a-sheet-by-id} + +要通过 id 获取单个工作表对象，请使用 [`sheets.get()`](api/sheetmanager_get_method.md) 方法： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +const sheet = spreadsheet.sheets.get("sheet_1"); +console.log(sheet.name); // "Sheet 1" +~~~ + +## 清除工作表 {#clearing-sheets} + +您可以使用 [`sheets.clear()`](api/sheetmanager_clear_method.md) 方法按 id 清除指定工作表的数据： + +~~~jsx +const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", { + multiSheets: true +}); +spreadsheet.parse(data); + +// Clear a specific sheet by id +spreadsheet.sheets.clear("sheet_1"); + +// Clear the currently active sheet +spreadsheet.sheets.clear(); +~~~ + +**相关示例：**[Spreadsheet. 清除](https://snippet.dhtmlx.com/szmtjn72) + +如果需要一次性清除整个电子表格，请使用 [`clear()`](api/spreadsheet_clear_method.md) 方法。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/working_with_ssheet.md b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_ssheet.md new file mode 100644 index 00000000..10e7084c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/working_with_ssheet.md @@ -0,0 +1,302 @@ +--- +sidebar_label: 电子表格操作 +title: 电子表格操作 +description: 您可以在 DHTMLX JavaScript Spreadsheet 库的文档中了解电子表格操作相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX Spreadsheet。 +--- + +# 电子表格操作 {#work-with-spreadsheet} + +用户通过界面与 Spreadsheet 交互的同时，您也可以使用其[简洁的 API](api/api_overview.md) 来操作组件。 + +## 撤销/重做操作 {#undoredo-actions} + +[](api/spreadsheet_undo_method.md) API 方法可撤销最近的操作： + +~~~jsx +spreadsheet.undo(); +~~~ + +要重新应用已撤销的操作，请使用 [](api/spreadsheet_redo_method.md) 方法： + +~~~jsx +spreadsheet.redo(); +~~~ + +## 添加/删除行和列 {#addingremoving-rows-and-columns} + +### 列 {#columns} + +要添加/删除列，请使用相应的 API 方法： + +- [](api/spreadsheet_addcolumn_method.md) +- [](api/spreadsheet_deletecolumn_method.md) + +向这些方法传入包含要添加/删除的列 id 的单元格 id。 + +~~~jsx +// adds an empty "C" column +spreadsheet.addColumn("C1"); +// removes the "C" column +spreadsheet.deleteColumn("C1"); +~~~ + +添加新列时，相邻列将向右移动。 + +:::note +您可以通过提供单元格 id 区域作为 `deleteColumn()` 方法的参数来删除多个列，例如："A1:C3"。 +::: + +### 行 {#rows} + +要添加/删除行，请使用以下 API 方法： + +- [](api/spreadsheet_addrow_method.md) +- [](api/spreadsheet_deleterow_method.md) + +向这些方法传入包含要添加/删除的行 id 的单元格 id。 + +~~~jsx +// adds an empty second row +spreadsheet.addRow("A2"); +// removes the second row +spreadsheet.deleteRow("A2"); +~~~ + +添加新行时，相邻行将向下移动一个单元格。 + +:::note +您可以通过提供单元格 id 区域作为 `deleteRow()` 方法的参数来删除多个行，例如："A1:C3"。 +::: + +## 列宽自动适应 {#autofit-column-width} + +要更改列宽，使其自动调整以适应列中最长的内容，请使用 [`fitColumn()`](api/spreadsheet_fitcolumn_method.md) 方法。该方法接受一个参数——包含所需列名称的单元格 id。 + +~~~jsx +// adjusts the width of the "G" column +spreadsheet.fitColumn("G2"); +~~~ + +## 冻结/解冻行和列 {#freezingunfreezing-rows-and-columns} + +您可能需要固定（"冻结"）某些列或行，使其在滚动页面时保持静止，而其余列和行则可以移动。 + +### 列 {#columns-freeze} + +要冻结/解冻列，请使用相应的 API 方法： + +- [](api/spreadsheet_freezecols_method.md) +- [](api/spreadsheet_unfreezecols_method.md) + +向这些方法传入单元格 id 以定义列的 id。如果未传入单元格 id，将使用当前选中的单元格。 + +~~~jsx +// freezing columns +spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed +spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed + +// unfreezing columns +spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen +spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen +~~~ + +### 行 {#rows-freeze} + +要冻结/解冻行，请使用相应的 API 方法： + +- [](api/spreadsheet_freezerows_method.md) +- [](api/spreadsheet_unfreezerows_method.md) + +向这些方法传入单元格 id 以定义行的 id。如果未传入单元格 id，将使用当前选中的单元格。 + +~~~jsx +// freezing rows +spreadsheet.freezeRows("B2"); // the rows up to the "2" row will be fixed +spreadsheet.freezeRows("sheet2!B2"); // the rows up to the "2" row in "sheet2" will be fixed + +// unfreezing rows +spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen +spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen +~~~ + +### 在数据集中冻结行/列 {#freezing-rowscolumns-in-the-dataset} + +您也可以在将数据解析到 Spreadsheet 时，为特定工作表固定行和列。 +为此，请在 [`parse()`](api/spreadsheet_parse_method.md) 方法的 `sheets` 对象中使用 `freeze` 属性： + +~~~jsx {10-13} +const data = { + sheets: [ + { + name: "sheet 1", + id: "sheet_1", + data: [ + { cell: "A1", value: "Country" }, + { cell: "B1", value: "Product" } + ], + freeze: { + col: 2, + row: 2 + }, + // more "sheet_1" settings + }, + // more sheets configuration objects + ] +}; + +spreadsheet.parse(data); +~~~ + +## 隐藏/显示行和列 {#hidingshowing-rows-and-columns} + +您可以通过相应的 API 方法隐藏和显示特定的行和列。 + +### 列 {#columns-hide} + +要隐藏/显示列，请使用以下方法： + +- [](api/spreadsheet_hidecols_method.md) +- [](api/spreadsheet_showcols_method.md) + +向这些方法传入单元格 id 以定义列的 id。如果未传入单元格 id，将使用当前选中的单元格。 + +~~~jsx +// hiding columns +spreadsheet.hideCols("B2"); // the "B" column will be hidden +spreadsheet.hideCols("sheet2!B2"); // the "B" column in "sheet2" will be hidden +spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden + +// showing columns +spreadsheet.showCols("B2"); // the "B" column will become visible again +spreadsheet.showCols("sheet2!B2"); // the "B" column in "sheet2" will become visible again +spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again +~~~ + +### 行 {#rows-hide} + +要隐藏/显示行，请使用以下 API 方法： + +- [](api/spreadsheet_hiderows_method.md) +- [](api/spreadsheet_showrows_method.md) + +向这些方法传入单元格 id 以定义行的 id。如果未传入单元格 id，将使用当前选中的单元格。 + +~~~jsx +// hiding rows +spreadsheet.hideRows("B2"); // the "2" row will be hidden +spreadsheet.hideRows("sheet2!B2"); // the "2" row in "sheet2" will be hidden +spreadsheet.hideRows("B2:C4"); // the rows from "2" to "4" will be hidden + +// showing rows +spreadsheet.showRows("B2"); // the "2" row will become visible again +spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visible again +spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again +~~~ + +## 筛选数据 {#filtering-data} + +### 设置筛选器 {#set-filter} + +您可以筛选电子表格中的数据，仅渲染满足指定条件的记录。为此，请使用 [`setFilter()`](api/spreadsheet_setfilter_method.md) 方法，并为所需列指定筛选规则。 + +例如，您可以为单独的列指定筛选条件： + +~~~jsx +// filter data by criteria specified for column A +spreadsheet.setFilter("A2", [{condition: { factor: "tc", value: "e" }, exclude: ["Peru"]}]); + +// filter data by criteria specified for column C +spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); +~~~ + +在这种情况下，数据范围内每一列的标题处都会出现筛选图标。 + +您也可以为单元格区域指定筛选条件，例如： + +~~~jsx +// filter data by criteria specified for column C +spreadsheet.setFilter("C1:C9", [{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]); + +// filter data by criteria specified for column A and C +spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]); +~~~ + +此时筛选图标仅出现在指定区域内的列上。 + +**相关示例：**[Spreadsheet. 通过 API 筛选](https://snippet.dhtmlx.com/effrcsg6) + +### 重置筛选器 {#reset-filter} + +如果要重置筛选，请不带参数调用 [`setFilter()`](api/spreadsheet_setfilter_method.md) 方法，或只向其传入第一个参数： + +~~~jsx +spreadsheet.setFilter("A2"); +~~~ + +### 获取筛选器 {#get-filter} + +要获取当前工作表中数据的筛选条件，请使用 [`getFilter()`](api/spreadsheet_getfilter_method.md) 方法。将所需工作表的 ID 作为参数传入该方法。 + +~~~jsx +const filter = spreadsheet.getFilter("Income"); +~~~ + +如果要获取当前活动工作表的筛选条件，无需传入工作表 ID： + +~~~jsx +const filter = spreadsheet.getFilter(); +~~~ + +## 搜索数据 {#searching-for-data} + +您可以通过将要搜索的值传入 [`search()`](api/spreadsheet_search_method.md) 方法来获取包含该值的单元格。 + +~~~jsx +spreadsheet.search("min"); // -> ['D1'] +~~~ + +您也可以传入 `true` 作为第二个参数，以打开搜索栏并高亮显示电子表格中找到的单元格： + +~~~jsx +spreadsheet.search("min", true); +~~~ + +默认情况下，电子表格会在当前活动工作表中搜索单元格。要在其他工作表中搜索记录，请将工作表 ID 作为该方法的第三个参数传入： + +~~~jsx +spreadsheet.search("min", false, "Income"); +~~~ + +### 关闭搜索栏 {#close-search-bar} + +要隐藏搜索栏，请使用 [`hideSearch()`](api/spreadsheet_hidesearch_method.md) 方法： + +~~~jsx +spreadsheet.hideSearch(); +~~~ + +## 排序数据 {#sorting-data} + +从 v4.3 开始，您可以使用 [`sortCells()`](api/spreadsheet_sortcells_method.md) 方法对电子表格中的数据进行排序。向该方法传入两个参数： +- `cell` - 要用于排序电子表格数据的单元格或单元格区域的 id +- `dir` - 排序方向：1 - 升序，-1 - 降序 + +~~~jsx {5} +const spreadsheet = new dhx.Spreadsheet("spreadsheet", { + // config parameters +}); + +spreadsheet.sortCells("B2:B11", -1); +~~~ + +## 清除电子表格 {#clearing-spreadsheet} + +您可以使用 [`clear()`](api/spreadsheet_clear_method.md) 方法一次性清除整个电子表格： + +~~~jsx +spreadsheet.clear(); +~~~ + +**相关示例：**[Spreadsheet. 清除](https://snippet.dhtmlx.com/szmtjn72) + +如果需要清除特定工作表，请使用 [`sheets.clear()`](api/sheetmanager_clear_method.md) 方法。 diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..3f153c8f --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "开发中心", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "社区", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "公司", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download Spreadsheet": { + "message": "下载 Spreadsheet", + "description": "The label of footer link with label=Download Spreadsheet linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/download.shtml" + }, + "link.item.label.Examples": { + "message": "示例", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/ihtkdcoc?tag=spreadsheet" + }, + "link.item.label.Blog": { + "message": "博客", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/?s=spreadsheet" + }, + "link.item.label.Forum": { + "message": "论坛", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/spreadsheet/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "关于我们", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "联系我们", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "许可", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/#editions-licenses" + } +} diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json new file mode 100644 index 00000000..dea347a9 --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript Spreadsheet 文档", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX Spreadsheet 文档", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "示例", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "论坛", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "支持", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "下载", + "description": "Navbar item with label Download" + } +} diff --git a/plugins/dhx-md-data-transformer-plugin.js b/plugins/dhx-md-data-transformer-plugin.js index 789ab3b2..31188d58 100644 --- a/plugins/dhx-md-data-transformer-plugin.js +++ b/plugins/dhx-md-data-transformer-plugin.js @@ -17,7 +17,7 @@ module.exports = (context, options) => { module: { rules: [ { - include: [path.resolve(siteDir, 'docs')], + include: [path.resolve(siteDir, 'docs'), path.resolve(siteDir, 'i18n')], test: /(\.mdx?)$/, use: [ { diff --git a/src/css/custom.css b/src/css/custom.css index 498cc205..30b2bb87 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -163,9 +163,9 @@ table th:first-child { /* small code block */ code { - border-radius: 2px; - padding: 6px 8px; - font-weight: 600; + border-radius: 5px; + padding: 2px 8px; + font-weight: 600; } /* end small code block */