ASP. NET Aries Tutorial 6: Formatting and inline editing of list data tables

Objective:

In order to catch the progress, the weekend also wrote the text!

The previous few talk about the query box and toolbar, this section of the table data related operations.

Look at the list first:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118210730388-453414656.png "/>

We have a lot of things to do next.

1: Formatting-translation of key values

For “ With the ” column enabled , the formatted #是否 has been configured to see the effect.

For the category ID column, the category name is usually displayed instead of the ID value.

But the classification name is not in the article table, in the article classification tables, how to associate formatting it?

We have the article classification table:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211205967-1432706202.png "/>

So let's write a drop-down configuration:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211429232-815529123.png "/>

Then configure it in the Configuration table header:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211532904-1262194636.png "/>

Effect:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118211602373-1329308014.png "/>

PS: Use custom statements to translate the notes for the drop-down:

1: The number of translated items is below 100, at least at a predictable order of magnitude. 2: If the order of magnitude cannot be predicted, then the custom view statement should be used, when the data is rendered directly the name.

1.1 Custom View Statements:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118225145138-1152910989.png "/>

New V_xxx.sql file in the Sqlcode directory, the file can be placed at will, but the filename cannot appear duplicated.

SQL is associated with a good table in advance, the name of the article category is evaluated.

Next: The code in the HTML:

var dg = new AR. DataGrid ("V_articlelist", "article", "grid");

Write the objname parameter as the name of the file.

2: Format-Custom JS function

For formatting, you can also customize JS in addition to configuring #xxx to format key-value pairs.

The system defaults to writing 3 functions for formatting:

Stringformatter: When the length is too long, it is displayed as ...

Dateformatter: Displayed as Date

Boolformatter: Show as checkbox

Example:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212209935-784728165.png "/>

Defines the Showaries function, which configures the table header joins:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212317545-2064859886.png "/>

Effect:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118212343638-1091497353.png "/>

3: Formatting-Two formatting of key-value pairs

If the format is used in the #xxx configuration (there is no way to customize the Write JS), and then want to two times format it?

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213327513-2103766474.png "/>

Effect:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213352201-1607903779.png "/>

4: Style formatting

Define a style function:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223503529-1773668578.png "/>

Configure the style function to the configuration header:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223557201-1013184707.png "/>

Effect:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118223619732-1476037730.png "/>

The format of a style is actually a style that handles <TD style= style > Content </td>.

This function may be considered canceled later, because the same effect, the formatted function can also be completed such as:

Formatted return: "<div style=" Width:100%;background-color: #ffee00; color:red; " >value</div> "

5: Remove Width Adaptive

By default, the width of the list is adaptive, which can be adapted to different display requirements for different resolutions.

But there is one case where we want to remove the width adaptive (adaptive no scroll bar): When the column is a lot .

Control the fitcolumns of the Easyui.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118213839373-457570339.png "/>

6: In-line editing-open:

If it's just a simple table operation, opening inline editing is the easiest thing to do:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214309076-1707910871.png "/>

Effect:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214356248-993880122.png "/>

Because the formatting is configured, it becomes a drop-down effect.

7: Inline edit-Specifies editable columns:

In the configuration header of the edit item, check the box:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214706857-2079650427.png "/>

8: Inline edit-New specified default value

When you add a button to the default point:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118214955810-1772774011.png "/>

For example, specify default values for categories and headings:

PS: To be compatible with Oracle (the column header of the default list and the field name of the data are unified to lowercase )

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118215155748-148076195.png "/>

Effect:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118215235013-1000468569.png "/>

9: Inline editing-determines the values of other columns by the value of a column:

For example, when the classification of the choice of different, the title of the content is: Category name + title.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118222826935-973953708.png "/>

Effect:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118222837888-701557355.png "/>

10: Inline edit-added jump to custom page processing:

This goes back to the previous article: ASP. Aries Tutorial 5: Customizing the List page Toolbar area &ldquo; Other 1:the contents of the item.

11: Master-Slave table:

Easyui Support master-slave table, give the idea:

650) this.width=650; "src=" Http://images2015.cnblogs.com/blog/17408/201611/17408-20161118230800201-2041164127.png "/>

Effect:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/17408/201611/17408-20161118230840951-721703601.png "/>

Summarize:

This section focuses on two core: formatting, inline editing.

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

ASP. NET Aries Tutorial 6: Formatting and inline editing of list data tables