SpreadJS v13.2 official version download
SpreadJS , as a pure front-end spreadsheet control based on HTML5, is compatible with more than 450 Excel formulas. It can provide users with a friendly Excel experience, and can meet the needs of enterprise IT department Web Excel component development, data reporting, and Excel reports Business scenarios such as design and collaborative editing of forms and documents.
In the daily development process using SpreadJS, we often use its data binding function. SpreadJS data binding provides a two-way binding mode. With the help of SpreadJS data binding, the source data can be easily displayed in the designated area to achieve data acquisition and change.
This article will explain the difficulty and implementation of "multi-layer header data binding", I hope to provide you with reference:
Use SpreadJS to bind data to multi-layer header
As we all know, due to the differences between Chinese and American cultures, Excel's table function is difficult to achieve multi-layer headers. Everyone draws multi-layer tables in the sheet to achieve similar effects.
So, how to do data binding to such a form template in SpreadJS?
Because the header information exists in the viewport of the sheet, the form binding cannot be used. Therefore, we can only do it through table binding, but the table table cannot be set with multi-layer headers in Excel, so we need to use the skills provided by SpreadJS to modify the template.
1. Open this Excel template with SpreadJS designer.
2. Keep the header and delete the related tables that need to bind data. Here we need to re-establish it through table binding.
3. According to the contents of each column of the above table, insert a blank table correspondingly.
4. Since the last row is the overall total, we need to set the summary row as well.
5. Use summary rows to set summary formulas.
6. Use the template function to set the table binding, because the last two columns are the formula calculation results, so no binding items are set.
7. Drag the tree on the right to the table to establish a binding relationship (if you need to change and adjust the binding relationship of each column, you can click the down arrow shown in the red box in the figure below to adjust it).
8. In order to ensure the unity of the style, we clear the table style.
9. Tick off the title row: to hide the title row.
10. Delete the blank line above
In this way, a modified form template is completed. Next, we begin to implement multi-header data binding. First, bind the data source to the table through the code, data is the data source of the attachment:
var source = GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(source);
The results are as follows:
Set formulas for the last two columns through the code to complete the final result:
to sum up
The above is all the steps for SpreadJS to achieve multi-header data binding. In fact, the way to achieve data binding through SpreadJS is very simple, and the focus is on the transformation process of the Excel template.
With the help of SpreadJS's built-in shapes, cell-level data binding, and more than 450 formula support, you can easily transform the Excel template into the desired style, and import it into Excel "the same thing".
The pure front-end table control SpreadJS can meet business scenarios such as Web Excel component development, data filling, online documents, chart formula linkage, and Excel UI design in applications such as .NET, Java, and App, and import and export in data visualization and Excel , Formula reference, data binding, and framework integration do not require a lot of code development and testing, which greatly reduces enterprise R&D costs and project delivery risks.
This article is reproduced from Grape City