ASP. NET Aries getting started development tutorial 6: List data table formatting and In-row editing, asp. netaries

ASP. NET Aries getting started development tutorial 6: List data table formatting and In-row editing, asp. netaries
Preface:

I wrote a text on the weekend to catch up with the progress!

The first few articles describe the query box and toolbar. This section describes operations related to table data.

First look at the list:

There are many things to do next.

1: format-key value Translation

ForEnable Column, You have configured the format # whether or not, and you can see the effect.

ForCATEGORY IDColumn, which usually displays the category name rather than the ID value.

However, the category name is not in the document table. In the document category table, how can we associate and format it?

We have an article classification table:

So let's write a drop-down Configuration:

Then configure it in the configuration table header:

Effect:

Note:

1: The number of translation items is less than 100, at least the foreseeable order of magnitude. 2: If the order of magnitude cannot be predicted,Use custom view statementsIs the name directly when the data is presented.

1.1 custom view statements:

Creating a V_xxx. SQL file is in the SQLCode directory. The file can be stored at will, but the file name cannot be repeated.

Associate the table in SQL to get the name of the document category.

Next: the code in html:

 var dg = new AR.DataGrid("V_ArticleList", "Article", "grid");

Enter the objName parameter as the file name.

2: format-custom JS Functions

In addition to configuring # XXX to format key-value pairs, you can also customize JS.

By default, the system writes three functions for formatting:

StringFormatter: The length is too long and displayed...

DateFormatter: display as date

BoolFormatter: displayed as Checkbox

Example:

Defines the showAries function and configures it in the table title column:

Effect:

3: format-secondary formatting of key-value pairs

If # XXX configuration is used in the formatting (no way to customize JS writing), what if I want the second formatting?

Effect:

4: style formatting

Define a style function:

Configure the style function to the configuration header:

Effect:

The style format is actually processing <td>When there are many columns.

Control fitColumns of EasyUI.

6: In-line editing-enable:

For simple table operations, enabling in-row editing is the most convenient practice:

Effect:

Because formatting is configured, the format will become a drop-down effect.

7: In-row editing-specify columns that can be edited:

In the edit field of the configuration header, select:

8: In-row editing-Add a specified Default Value

When the button is added by default:

For example, specify the default value for the category and title:

PS: to be compatible with Oracle (the column headers and field names of data in the default list are converted to lowercase letters)

Effect:

9: In-row editing-use the value of a column to determine the values of other columns:

For example, when the category is selected differently, the title content is: category name + title.

Effect:

10: In-row editing-added jump to the custom page for processing:

This is returned to the previous article: ASP. NET Aries getting started development tutorial 5:"Other 1:"Item.

11: Master/Slave table:

EasyUI supports Master/Slave tables and provides the following ideas:

Effect:

Summary:

This section focuses on two core topics: formatting and In-row editing.

The next section describes the primary key operation area of the list.