Pure front-end table control SpreadJS-easy data binding

 

SpreadJS v14.0 official version download

1. Introduction to SpreadJS data binding

Preface

SpreadJS,  as a pure front-end Excel table control, has highly similar functions to Excel, but it also has many unique functions that Excel does not have. Among them, data binding is one of the most commonly used functions of SpreadJS.

Below, we will introduce to you the principle, implementation, operation and extended application of SpreadJS data binding in detail.

The principle of SpreadJS data binding

SpreadJS is a pure front-end control, which does not contain any back-end structure, so the database binding cannot be completed directly. The data source bound to SpreadJS itself is a json format DataSource passed by the user to the front-end, and the back-end business logic users can handle it by themselves.

The advantage of this is low coupling and separation of front and back ends. The server side specializes in processing business logic, and the front end is only responsible for page display functions. Both safety and standardization are more in line with common development habits.

In the data binding process of SpreadJS, whether through the designer or code, a one-to-one mapping relationship with the data source DataSource needs to be established in SpreadJS.

SpreadJS data binding is a binding based on a worksheet (Sheet). A sheet can only be bound to one data source, but multiple sheets can be bound to the same data source.

After setting the mapping relationship, we fill in the data source received by the front end through the corresponding interface, and then SpreadJS will automatically display the associated data to the corresponding location according to the mapping relationship.

SpreadJS data binding itself is a two-way binding. As the name implies, when the user updates the content of the view (the content of the bound item is in the relevant cell on the page), the data source will also change synchronously. Using this mechanism, we can more easily obtain the data updated by the user on the page.

Online reporting, as one of the typical usage scenarios of SpreadJS, makes good use of the data binding mode of SpreadJS. We obtain the data reported by users in real time through two-way binding and store them.

SpreadJS data binding method

SpreadJS provides three data binding methods: form binding, cell binding, and table binding.

Cell binding

Literally, cell binding means binding a field in a data source through a cell. This method is more common in some filing documents.

Form binding and form binding

It is easy to confuse form binding and form binding literally. The difference between them is divided into the following aspects:

1.  Binding area: The form binding area refers to the Sheet in Excel, that is, the worksheet:

Form binding is to bind the data source to the entire form. The number of rows in the form-bound data source determines the initial number of rows after the sheet is bound. Each new or reduced row of the sheet will cause the data source to change.

The table binding area refers to the table created in Sheet:

Table binding binds the data source to the table created by Sheet. The number of rows in the data source determines the initial number of rows in the table after the binding is completed. Only the change in the number of rows in the table will cause the data source to change. sheet.

2.  Data source format:

As mentioned earlier in the article, a Sheet can only be bound to one data source in data binding, so each field of the form-bound data source corresponds to a certain column of the form. So the data source is a JSON array, similar to the following:

 

var dataSource = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];

 

Table binding, because there can be multiple tables in a sheet, each table can be bound to a field in the data source, so its corresponding data source is a JSON object, and each field of the object will be a JSON array , Each field is bound to a table, similar to the following:

 

var dataSource = {
table1: [
{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
],
table2: [
{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
]
};

 

The above is the principle of SpreadJS data binding and the three binding methods.

Two, SpreadJS form binding operation

Preface

In the first section, we gave a general introduction to data binding, and in the second section we will focus on how to complete SpreadJS data binding. Here we first introduce how to perform form-level binding operations:

Know Before Use

1. Form binding cannot be mixed with the other two bindings:

   Form binding, which is bound to the entire sheet, cannot bind a cell or table on its basis.

2. The form binding cannot be set in the designer, and can only be set through code:

   Only the table binding and cell binding can be set through the Spread designer.

Detailed operation

SpreadJS's form binding is to bind the data source DataSource obtained by the front end to the entire form. Since the data source is a two-dimensional table structure, each field in the data source will be bound by column. Here By setting autoGenerateColumns, you can control whether to automatically generate bound columns. The following will introduce in detail in two ways: automatic generation and manual generation:

Automatically generate bound columns

When autoGenerateColumns is set to true, it is the mode for automatically generating bound columns.

First, we assume that the data source received by the front end has the following structure (the data source can be obtained in any way, such as commonly used: ajax, getjson, etc.):

 

var dataSource = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];

 

Obtain the worksheet object that needs to be bound and declare it as a sheet. Then use this code to set the binding mode to automatically generate bound column mode:

 

sheet.autoGenerateColumns = true;

 

Next, we set the data source through the setDataSource method and pass it to the sheet object.

 

sheet.setDataSource(dataSource);

 

After executing the above code, the page will display the following content:

As you can see from the above figure, the column header is automatically defined as the name of the corresponding field in the data source. The column header will change according to the bound field, which is also one of the important features of form binding.

After we fill in and edit the form, we can get the data source object at this time through the getDataSource method. For example, after we fill in and edit on the page shown above:

SpreadJS | Download trial

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-like 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.

When we get the data source object through sheet.getDataSource() as shown below:

This article is reproduced from Grape City

 

1. Introduction to SpreadJS data binding

Preface

SpreadJS,  as a pure front-end Excel table control, has highly similar functions to Excel, but it also has many unique functions that Excel does not have. Among them, data binding is one of the most commonly used functions of SpreadJS.

Below, we will introduce to you the principle, implementation, operation and extended application of SpreadJS data binding in detail.

The principle of SpreadJS data binding

SpreadJS is a pure front-end control, which does not contain any back-end structure, so the database binding cannot be completed directly. The data source bound to SpreadJS itself is a json format DataSource passed by the user to the front-end, and the back-end business logic users can handle it by themselves.

The advantage of this is low coupling and separation of front and back ends. The server side specializes in processing business logic, and the front end is only responsible for page display functions. Both safety and standardization are more in line with common development habits.

In the data binding process of SpreadJS, whether through the designer or code, a one-to-one mapping relationship with the data source DataSource needs to be established in SpreadJS.

SpreadJS data binding is a binding based on a worksheet (Sheet). A sheet can only be bound to one data source, but multiple sheets can be bound to the same data source.

After setting the mapping relationship, we fill in the data source received by the front end through the corresponding interface, and then SpreadJS will automatically display the associated data to the corresponding location according to the mapping relationship.

SpreadJS data binding itself is a two-way binding. As the name implies, when the user updates the content of the view (the content of the bound item is in the relevant cell on the page), the data source will also change synchronously. Using this mechanism, we can more easily obtain the data updated by the user on the page.

Online reporting, as one of the typical usage scenarios of SpreadJS, makes good use of the data binding mode of SpreadJS. We obtain the data reported by users in real time through two-way binding and store them.

SpreadJS data binding method

SpreadJS provides three data binding methods: form binding, cell binding, and table binding.

Cell binding

Literally, cell binding means binding a field in a data source through a cell. This method is more common in some filing documents.

Form binding and form binding

It is easy to confuse form binding and form binding literally. The difference between them is divided into the following aspects:

1.  Binding area: The form binding area refers to the Sheet in Excel, that is, the worksheet:

Form binding is to bind the data source to the entire form. The number of rows in the form-bound data source determines the initial number of rows after the sheet is bound. Each new or reduced row of the sheet will cause the data source to change.

The table binding area refers to the table created in Sheet:

Table binding binds the data source to the table created by Sheet. The number of rows in the data source determines the initial number of rows in the table after the binding is completed. Only the change in the number of rows in the table will cause the data source to change. sheet.

2.  Data source format:

As mentioned earlier in the article, a Sheet can only be bound to one data source in data binding, so each field of the form-bound data source corresponds to a certain column of the form. So the data source is a JSON array, similar to the following:

 

var dataSource = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];

 

Table binding, because there can be multiple tables in a sheet, each table can be bound to a field in the data source, so its corresponding data source is a JSON object, and each field of the object will be a JSON array , Each field is bound to a table, similar to the following:

 

var dataSource = {
table1: [
{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
],
table2: [
{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
]
};

 

The above is the principle of SpreadJS data binding and the three binding methods.

Two, SpreadJS form binding operation

Preface

In the first section, we gave a general introduction to data binding, and in the second section we will focus on how to complete SpreadJS data binding. Here we first introduce how to perform form-level binding operations:

Know Before Use

1. Form binding cannot be mixed with the other two bindings:

   Form binding, which is bound to the entire sheet, cannot bind a cell or table on its basis.

2. The form binding cannot be set in the designer, and can only be set through code:

   Only the table binding and cell binding can be set through the Spread designer.

Detailed operation

SpreadJS's form binding is to bind the data source DataSource obtained by the front end to the entire form. Since the data source is a two-dimensional table structure, each field in the data source will be bound by column. Here By setting autoGenerateColumns, you can control whether to automatically generate bound columns. The following will introduce in detail in two ways: automatic generation and manual generation:

Automatically generate bound columns

When autoGenerateColumns is set to true, it is the mode for automatically generating bound columns.

First, we assume that the data source received by the front end has the following structure (the data source can be obtained in any way, such as commonly used: ajax, getjson, etc.):

 

var dataSource = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];

 

Obtain the worksheet object that needs to be bound and declare it as a sheet. Then use this code to set the binding mode to automatically generate bound column mode:

 

sheet.autoGenerateColumns = true;

 

Next, we set the data source through the setDataSource method and pass it to the sheet object.

 

sheet.setDataSource(dataSource);

 

After executing the above code, the page will display the following content:

As you can see from the above figure, the column header is automatically defined as the name of the corresponding field in the data source. The column header will change according to the bound field, which is also one of the important features of form binding.

After we fill in and edit the form, we can get the data source object at this time through the getDataSource method. For example, after we fill in and edit on the page shown above:

SpreadJS | Download trial

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-like 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.

When we get the data source object through sheet.getDataSource() as shown below:

This article is reproduced from Grape City