ASP. NET Aries getting started development tutorial 3: Develop a list page and control query area, aries query Area

ASP. NET Aries getting started development tutorial 3: Develop a list page and control query area, aries query Area
Preface:

After all, the Aries framework is a development framework, so the focus is to write code so that developers will not be unemployed.

Step 1: Create an html

Create an Html file in three steps:

1: Introduce Aries. Loader. js2: Get a table tag 3: new AR. DataGrid

Of course, I copied the code from userlist.html.

Step 2: Configure menu permissions and run F5.

The configuration menu permission is available in the previous article and is not repeated. (PS: Reuse the previous menu here and directly change the menu path .)

After F5 is run, the effect is as follows:

All objnames are article, so the configurations are the same.

But the edit and delete operation columns are missing? (Because no intra-row editing is specified and no code is added, this is what we have)

After the basic configuration header is configured, the user will start to dream B here, because they have various requirements to implement through code:

Step 3: Set the js smart prompt in html:

To start writing js Code, you need to set it like this to provide a perfect smart prompt in js:

With smart prompts, you can only press JS to Copy the code from the Demo.

I can talk about this function. Actually, I just learned it !!!

Step 4: Control query function area 1: Add default data sorting conditions. What should I do? (Options is the EasyUI parameter)

var dg = new AR.DataGrid("Article", "Article", "grid");    dg.options = { sortName: "CreateTime desc" };dg.bind();

How to sort multiple conditions? (Simplified the sortOrder attribute of Easyui)

var dg = new AR.DataGrid("Article", "Article", "grid");    dg.options = { sortName: "CreateTime asc,Title desc" };dg.bind();

2: Add default query conditions. What should I do?

 

Note the following by default:

1: The condition is permanent, and every query on the interface is included. 2: If the query box field is the same as this field, it will be overwritten by the query box (if the query box has a value ).

3: What should I do if I want to query the condition only once and then disappear?

Use thinking instead of asking questions: Clear the conditions after the page is loaded, so the correct code is: (understand the events in the EasyUI parameters)

4: What should I do if I want to enter a value in the Operation query box?

For example, when a page is loaded:

There are two solutions:

1: only fill in the value, but do not trigger the query condition (another way of thinking is to assign a value after the list is displayed)

Someone wrote this line of code to dg. bind () and didn't see the result. Why?

A: events are asynchronous.

2: Fill in the value, and filter the condition based on the value (change the mind, that is, assign values after the query box is constructed)

Result:

5: What if I don't want to reset the button?

var dg = new AR.DataGrid("Article", "Article", "grid");    dg.Search.BtnReset.isHidden = true;...dg.bind()

6: What should I do without the entire query box?

var dg = new AR.DataGrid("Article", "Article", "grid");    dg.Search.isHidden = true;...dg.bind()

7: What should I do if I want to add custom query conditions?

Configure adding fields to the header, and adjust the serial number, hide, and search.

8: What should I do if I want to add a Custom button to the query button and reset button?

You can only tell you: dg. Search. BtnQuery. $ target obtains the JQ object, and then inserts a node to the end using the JQ operation.

9: What should I do if I want to change the entire query box to custom html?

Dg. Search. $ target = $ ('node id ');

10: What should I do if I want to customize the text title of the query box?

Configuration header: format rule (title attribute ).

11: What should I do if I want to change the query box to a range query?

Configuration header: format rule (clone attribute ).

Effect:

12: What should I do if I want to query interception conditions or append conditions?

 var dg = new AR.DataGrid("Article", "Article", "grid");  ...    dg.Search.BtnQuery.onBeforeExecute = function (para)    {        alert(JSON.stringify(para));    }    dg.bind();

Click the result:

Para is an array. You can push new ones, remove old ones, and modify existing ones.

Do not ask me how js operates arrays.

If you want to stop the event, return false;

Others: What if a single interface displays multiple lists?

Put N tables in html and new n ar. DataGrid.

End:

At present, I have written all the most common gameplay methods, so there should be no other disturbing gameplay.

I have been writing tutorials for a whole day. It's really tiring to eat ~~~~

The next article describes how to play in the toolbar area and list area.