Installation and deployment:

Development environment:

  1. The backend server uses Java and SpringMVC.

  2. Data is stored in the \demo_web\ web-INF \ filedatabase. TXT file without DB dependency.

  3. Eclipse Java EE IDE for Web Developers Eclipse Version: Photon Release (4.8.0)

  4. Server: tomcat-7.0.90.

Project import Eclipse:

Demo_web. zip is a direct eclipse project into a zip package.

You can directly unzip to the Eclipse workspace and import Existing Projects into workspace.

Deployment method:

Associate Tomcat with Eclipse, add the project to the Tomcat application list, and start Tomcat.

Operation steps:

Access:

When the machine deployment, can through http://127.0.0.1:8080/demo_web/view? Path =index Access the home page.

Create a template:

  1. Templates are created in three types: form binding, cell binding, and table binding.

  2. The DEMO_Web package also contains three template SSJSON files: a form binding example, a cell binding example, and a table binding example for creating templates.

  3. Form binding preview area Description: If you select the template type drop-down menu, the preview area will change according to the template type. Cell binding and table binding only have one area for SSJSON template preview. As shown in figure:

Figure 1: Create form binding template page

4. After the form template is uploaded successfully, the preview page will look like the following picture:

Figure 2: A preview of the form binding template after uploading

5. To upload a cell binding template or table binding template, click the Type drop-down list and select the corresponding type.

6. After uploading the template and filling in the basic template information, click the Save button.

Management template:

  1. The management template list displays information about templates created in the system.

  2. Click the download button of the template to download the SSJSON file of the template, which can be directly imported to the SpreadJS Designer for modification.

  3. Click the fill in button of the corresponding template to enter the page of filling in the form.

Fill in:

  1. Take the form binding template as an example, as shown below:

Figure 3: Example of a form binding template filling page

2. New: Reloads the current template without retaining all data that has been filled in.

3. New row: adds a new row to the dataSource. The bound dataSource has an additional data element (there is no such button for the cell binding template).

4. Save: Save the filled data to the background file.

5. History: Historical data submitted in the current template.

Historical data list:

Figure: Click View to query the historical data filled in this time.

Figure 4: Fill in the historical data list page

Historical data:

As shown in figure:

Figure 5: Filling in historical data page

QA:

Q: LAN cannot be accessed?

A: The SpreadJS controls used in this Demo are not authorized and can only be operated locally.

Q: Form binding templates. How do I customize the binding fields?

A: You can import an example form binding template ssJSON to the designer. The first line of the form binding template contains the dataSource field name, the second line contains the display field name, and the third line contains the table style.

Q: Cell binding templates. How do I customize the binding fields?

A: You can import the cell binding template ssJSON to the designer. The binding dataSource field name is defined in the corresponding cell in the form of [field].

Q: Table binding template, how to customize the binding field?

A: In the template header in the table below, in the first line of the can define the column names [field] way, in the code you can create new GC. Spread. Sheets. Name the TableColumn () as an example, used to map the column name and bound field, Specific methods can refer to form binding demo in the study guide, the club’s official website demo address: https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/demos/tableBinding

This approach is also used in this demo.

Q: When filling in the form, the style of the new line does not match the previous line?

A: Because the template design style of the table is very flexible and diverse, so this demo only adopts the way of copying the style of the previous line to set the new line. In specific application, you can set the table style according to your needs.

Click here to download a free Demo of SpreadJS with Java

About Grape Town

Empower developers! Founded in 1980, Winestown is a leading global software and service provider of development tools, business intelligence solutions, and management system design tools. Xi ‘an Grape City is its branch in China, providing software development services for the global market, and providing international advanced development tools, software and r&d consulting services for The informatization of Chinese enterprises. Winestown controls and software products have won awards at home and abroad and are used by hundreds of thousands of businesses, schools and government agencies around the world.