CMS: Document Management View (5)

Before completing the article management function, you must first complete the article list. The document list is executed after the document category is selected. Therefore, you must start with the article category selection and the article management controller content. in JS, the article category selection method is available, which is the ontreeselect method. Now you need to complete the article list function. There are two ways to choose from. One is to use the store filter method for filtering, and the other is to use the extraparams configuration item of the proxy. The advantage of the first method is that you can use mixedcollection objects to manage the filtering objects in a unified manner, which is very useful when multiple search criteria exist, the biggest problem with it is that it will submit data in the form of a JSON array like the sorting method previously done, thus increasing the complexity of background processing. This should be selected based on project requirements. The advantage of the second method is that the background processing is simple, and you can simply process it in the usual way. This example only Demonstrates simple search, so the first method is not used.

Now, complete the list Code. In the judgment statement in the ontreeselect method (the list is only available if any), add the following code under the ID assignment statement:

VaR store = me. getcontentsstore ();

Store. Proxy. extraparams. categoryid = ID;

Store. loadpage (1 );

Here, after each categoryid update, call loadpage to load the first page. Why not use the load method here? The reason is that the load method is used directly. If you perform some paging operations, the results of these paging operations will be retained, and the loading result may be that the data may not be found, for example, when you view all the articles, you can view the 10th page and switch to unclassified, but it does not have 10 pages of data, and the load method does not know, the submitted data is still extracted from 10th pages, which leads to a problem. Of course, when setting parameters, you can also set the paging parameters and call the load method. However, since there is a simpler method of loadpage, store will automatically help you deal with these things, why bother fish?

Now, on the server side, you can use categoryid to obtain the category number. The following describes how to complete this operation. Add a controller named contentcontroller In the controllers directory and set the private variable simplecmsentities to complete the list method. The Code is as follows:

[Ajaxauthorize (roles = "normal user, system administrator")]

Public jobject list ()

{

Boolsuccess = false;

Stringmsg = "";

Jarray ja = new jarray ();

Int Total = 0;

Try

{

Intcategroyid =-99;

Int. tryparse (request ["categroyid"], out categroyid );

Intstart = 0;

Int. tryparse (request ["start"], out start );

Iqueryable <t_content> q = NULL;

String sort = request ["sort"]? "";

Sort = helper. myfunction. processsorterstring (New String [] {"contentid", "title", "created", "sortorder", "hits"}, sort, "it. contentid ASC ");

If (categroyid =-99)

{

Q = Dc. t_content.where (M => M. State = 0). orderby (SORT );

}

Else

{

Q = Dc. t_content.where (M => M. categoryid = categroyid & M. State = 0). orderby (SORT );

}

Total = Q. Count ();

If (Start> total) Start = 0;

Foreach (var c in Q. Skip (start). Take (50 ))

{

Ja. Add (New jobject {

New jproperty ("contentid", C. contentid ),

New jproperty ("title", C. Title ),

New jproperty ("created", C. Created. tostring ("yyyy-mm-DDHH: mm ")),

New jproperty ("sortorder", C. sortorder ),

New jproperty ("hits", C. Hits ),

Newjproperty ("tag", String. Join (",", C. t_tag.select (n => N. tagname). toarray ()))

});

}

Success = true;

 

}

Catch (exception E)

{

MSG = E. message;

}

Returnhelper. myfunction. writejobjectresult (success, total, MSG, ja );

}

 

In the code, sorting removes tags because tags must be processed before they can be sorted. The processing method is to combine strings when a JSON object is generated later, then sort the generated field.

Note that when the start value is greater than the total number of records, that is, when the jump value is greater than the total number of records, if you do not modify the value, an error will occur and must be processed, the processing method can be adjusted according to your preferences. Here we just set it back to the first page.

No search has been added to the Code. Please wait.

Because there is no data, it cannot be tested for the moment. If you are in a hurry, you can test your data in the database.

Now, add the paging toolbar to the grid panel and add three buttons to add, edit, delete, and view pages. This is not very difficult and should be very familiar with it. Just add the following code to the JSON object for grid creation in the View:

Tbar :{

Xtype: "pagingtoolbar ",

Pagesize: 50, displayinfo: True, store: "contents ",

Items :[

'-',

{Iconcls: "add", scope: me, tooltip: 'add files', ID: "contentbuttonadd "},

{Iconcls: "edit", scope: me, tooltip: 'edit', ID: "contentbuttonedit", Disabled: true },

{Iconcls: "delete", scope: me, tooltip: 'delete files', ID: "contentbuttondelete", Disabled: true },

{Iconcls: "View", scope: me, tooltip: 'view view', ID: "contentbuttonview", Disabled: true },

'-'

]

},

 

The key here is the ID, which allows the Controller to easily find the button.

Do not forget to add the style definition of the button icon in app.css. The Code is as follows:

. Add {

Background: URL ("../images/page_white.png ")! Important;

}

. Edit {

Background: URL ("../images/page_white_edit.png ")! Important;

}

. Delete {

Background: URL ("../images/page_white_delete.png ")! Important;

}

. View {

Background: URL ("../images/page_white_magnify.png ")! Important;

}

 

Open Article management in the browser and you will see the effect shown in section 57.

Figure 57 grid added to the paging Toolbar

Now, adding a button reference to the Controller is no different from adding a button reference to the article category. The Code is as follows:

{Ref: "contentadd", selector: "# contentbuttonadd "},

{Ref: "contentedit", selector: "# contentbuttonedit "},

{Ref: "contentdelete", selector: "# contentbuttondelete "},

{Ref: "contentview", selector: "# contentbuttonview "}

 

Then, bind the event with the following code:

Me. getcontentadd (). On ("click", me. oncontentadd, me );

Me. getcontentedit (). On ("click", me. oncontentedit, me );

Me. getcontentdelete (). On ("click", me. oncontentdelete, me );

Me. getcontentview (). On ("click", me. oncontentview, me );

 

The following describes how to enable the edit, delete, and view buttons after selecting a row of the grid. The Code is as follows:

Me. View. Down ("gridpanel"). On ("selectionchange", me. oncontentselect, me );

 

Complete the oncontentselect method. The Code is as follows:

Oncontentselect: function (model, sels ){

VaR me = This

Me. getcontentedit (). setdisabled (sels. Length = 0 );

Me. getcontentdelete (). setdisabled (sels. Length = 0 );

Me. getcontentview (). setdisabled (sels. Length = 0 );

}

By the way, when you refresh the grid list, select the first line. The Code is as follows:

Me. View. Down ("gridpanel"). getview (). On ("refresh", function (){

VaR me = this;

If (Me. getcontentsstore (). getcount ()> 0 ){

Me. View. Down ("gridpanel"). View. Select (0, true );

}

}, Me );

 

All right, some basic operations have been completed. Now we need to complete the pop-up window for adding and editing operations.