CMS image management (4)

There are many examples in this book to solve the Sorting Problem today. However, it is also good to explain it here. To achieve remote sorting, you must first know how the sorting information is submitted to the server. However, using Firebug is quite simple. In VS, switch to the PicManager. js file, find the filestore definition, and change renmoteSort to true. Then add the sorters configuration item. The Code is as follows: sorters: [{property: "modify", direction: "DESC"}]. This Code indicates that the default sorting field is modify, the sorting direction is ordered. Now, open image management in the browser and observe the requests in Firebug. 35. In the submitted request, the sorting information is submitted in the form of a JArray array. to extract the sorting information, you must first convert the string to JArray and then extract it. Now. Because sorting information is used in many places, you can write a common method in MyFunction to process this. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1234501F3-0.PNG "alt =" "/> figure 34 sorting information shown in Firebug
So how should we write this method? First, let the method know the fields to be extracted, and only the fields that meet the requirements will be extracted. Second, it is to pass the string to be processed to this method. Finally, if the sorting information that meets the requirements cannot be found during the processing, a default sorting will be returned. Therefore, you need to pass a default value to this method. Finally, consider how the method returns the sorting information. The new version of LINQ supports dynamic query. Its sorting information can be in the following format: it. field 1: Sorting direction 1, it. field 2 sorting direction 2 ,... therefore, the method only needs to return the strings in the preceding format. The target is determined. Switch to MyFunction. cs to complete this method. In MyFunction. create a static method named ProcessSorterString in cs. The Code is as follows: public static string ProcessSorterString (string [] fields, string sortinfo, string defaultSort) {if (string. isNullOrEmpty (sortinfo) return defaultSort; JArray ja = JArray. parse (sortinfo); stringresult = ""; foreach (JObject c in ja) {string field = (string) c ["property"]; if (fields. contains (field) {result + = string. format ("it. {0} {1}, ", field, (string) C ["direction"] = "ASC "? "": "DESC") ;}} if (result. length> 0) {result = result. substring (0, result. length-1);} else {result = defaultSort;} returnresult;} in the code, check whether the sorting information to be processed is null or a Null String. If yes, the default value is returned. Then, convert the string to the JArray object, and extract the sorting objects one by one. If this field is included in the specified field array, the string is combined according to the format. Finally, check whether the combined string has sorting information that meets the requirements. If not, the default value is returned. Before implementation, open the manage NuGet package window, search for DynamicQuery, and install the Dynamic Expression API package to achieve Dynamic sorting. If the object framework is used, it already contains dynamic queries. You do not need to install this package. Here, because the returned FileInfo set is not used in the object framework, therefore, you must install the package. Switch to the File controller and modify the code as follows to implement the sorting function: [AjaxAuthorize (Roles = "common user, system administrator")] public JObject List () {boolsuccess = false; stringmsg = ""; JArray ja = new JArray (); int total = 0; try {intstart = 0; int. tryParse (Request ["start"], out start); string path = Request ["path"]? "/"; String sort = Request ["sort"]? ""; Sort = Helper. myFunction. processSorterString (new string [] {"filename", "modify", "size"}, sort, "it. lastWriteTime ASC "); DirectoryInfo dir = new DirectoryInfo (Server. mapPath (root + path); total = dir. getFiles (). count (); var q = dir. getFiles (). select (m => new {filename = m. name, modify = m. lastWriteTime, size = m. length }). asQueryable (). orderBy (sort ). skip (start ). take (50); foreach (var c in q) {ja. add (new JObject {new JProperty ("path", path), new JProperty ("filename", c. filename), new JProperty ("modify", c. modify. toString ("yyyy-MM-ddhh: mm"), new JProperty ("size", c. size)}) ;}success = true;} catch (Exception e) {msg = e. message;} returnHelper. myFunction. writeJObjectResult (success, total, msg, ja);} added the code for processing the submitted parameter sort. Because the client field name does not correspond to the server field name, you can use the Select method to convert the field name during query. Another note is that AsQueryable needs to convert the set type to the IQueryable type, because dynamic query only supports this type of data. Because the field name is modified, you must modify the field name in the foreach loop. Now, you need to add a sorting menu on the client to implement the sorting function. Switch to PicManager. js file, find me. items definition: Add a tbar configuration item to the configuration item of the image file to place a paging toolbar, and put a SplitButton on the toolbar for sorting. Define a menu composed of six sub-Menus under SplitButton. The six sub-menus must be single-choice, that is, only one sub-menu can be selected at a time. The Code is as follows: tbar: {xtype: "pagingtoolbar", pageSize: 20, displayInfo: true, store: me. filestore, items: ['-', {xtype: "splitbutton", iconCls: "sort", tooltip: "sort", text: "sort", scope: me, menu: {items: [{text: 'file name sequence ', group: 'sort', checked: false, checkHandler: me. onSort, scope: me, fieldname: "filename", sortdir: "ASC"}, {text: 'object name in descending order ', group: 'sort', checked: false, checkHandler: me. onSort, scope: me, fieldname: "filen Ame ", sortdir:" DESC "}, {text: 'modify date sequence ', group: 'sort', checked: false, checkHandler: me. onSort, scope: me, fieldname: "modify", sortdir: "ASC"}, {text: 'modify date descending order ', checked: true, group: 'sort ', checkHandler: me. onSort, scope: me, fieldname: "modify", sortdir: "DESC"}, {text: 'file size sequence ', group: 'sort', checked: false, checkHandler: me. onSort, scope: me, fieldname: "size", sortdir: "ASC" },{ text: 'file size in descending order ', group: 'sort', che Cked: false, checkHandler: me. onSort, scope: me, fieldname: "size", sortdir: "DESC"}] Pay attention to the definition of the Code submenu. Each sub-menu has a group configuration item with the same values. In this way, you can combine the six sub-menus into a group. The configuration item checked is essential. This configuration item determines that the menu is a sub-menu of the single-choice function. Because in the definition of Store, it is sorted by changing the descending order of dates by default, so the checked value of this Sub-menu is set to true. Another special feature is that the fields and sorting directions related to sub-menus are defined in the form of configuration items. This makes it easy to process the onSort method, the following is the onSort code: onSort: function (item, checked) {varme = this; if (checked) {me. filestore. sort ({property: item. fieldname, direction: item. sortdir}); me. filestore. load () ;}} because each sub-menu contains fields and sorting direction information, you do not need to make a judgment here. Simply call the Store sort method to sort the information. After resetting the sorting, you can call the load method again. The only note here is that this method is triggered when the sub-menu is deselected and selected. Therefore, you need to check the checked value and process it only when it is true. When ordering a sequence, use the iconcls configuration item to define an image. You must add the image style to app.css for the reason. The Code is as follows:. sort {background: url ("../images/sort.png ")! Important;} Now, generate a solution, and refresh the page. The effect shown in 36 is displayed in the browser. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1234502914-1.PNG "alt =" "/>
Figure 36 results in descending order of modified dates
Now, the sorting function is implemented. Now let's take a look at the selection of views. In the operating system, you can usually select files by dragging. This function is quite practical. In Ext JS, it is also very easy to implement this function, only use the Ext. JS package's user plug-in Ext. ux. dataView. dragSelector can be simply implemented. Create a DataView directory under the ExtJS \ ux directory of the solution, and then copy the DragSelector. JS file to the directory under the examples \ ux \ DataView directory in the Ext js package. Why? The dynamic loading is based on the class name to find the file. Note that the class name of Ext. ux. DataView. DragSelector has an additional DataView In the ux directory, so you need to add the DataView directory. Just do it. Switch to PicManager. add a requires configuration item under the layout configuration item to declare that the class needs to use the DragSelector class. The Code is as follows: requires: ["Ext. ux. dataView. dragSelector "], and then in me. add the following code to the definition of dataview to create the plug-in: plugins: [Ext. create ('ext. ux. dataView. dragSelector ', {})]. Because the DragSelector class does not define aliases, you cannot use xtype to define them. Instead, you can create them directly. Refresh the browser, click the left mouse button at any point in the view, and drag the mouse to see the effect similar to figure 37. Select the image by dragging. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/12345060a-2.PNG "alt =" "/> figure 37 drag to select an image

Now you can delete the image. Add a delete button on the toolbar as follows: {iconCls: "picture-delete", handler: me. onDelete, scope: me, disabled: true, tooltip: "delete image"} note that the current button status is disabled. Therefore, you need to enable the image when the view selects an image. Same as the Folder deletion button, the id cannot be used here. You can only obtain the button using the query method. In the definition of dataview, add the following code to listen to the selectionchange event of the View: listeners: {scope: me, selectionchange: me. onPictureSelect} completes the onPictureSelect method. The Code is as follows: onPictureSelect: function (model, sels) {this. down ("button [tooltip = Delete image]"). setDisabled (sels. length = 0);} because there is no suitable previous component, you can only start from the component itself. Now the onDelete Method of Image deletion is completed. The Code is as follows: onDelete: function () {var me = this, rs = me. dataview. getSelectionModel (). getSelection (); if (rs. length> 0) {content = ["are you sure you want to delete the slice? "]; For (var I = 0; ln = rs. length, I <ln; I ++) {content. push (rs [I]. data. filename);} Ext. msg. confirm ("delete image", content. join ("<br/>"), function (btn) {if (btn = "yes") {var me = this, store = me. dataview. store, rs = me. dataview. getSelectionModel (). getSelection (); store. remove (rs); store. sync ({success: function (e, opt) {this. store. commitChanges () ;}, failure: function (e, opt) {this. store. rejec TChanges () Ext. msg. alert ("error occurred", e. exceptions [0]. error) ;}, scope: me. dataview}) ;}}, me)} else {Ext. msg. alert ('delete record ', 'select the record to be deleted. ') ;}} The code is no different from the code for the previous delete operation. If you are interested, you can study how to unify the code so that you do not need to copy and paste it. Here, the focus is to use the Store remove Method to delete data, and then call sync synchronization. If the server side is successfully deleted, call the commitChanges method to confirm the modification. Otherwise, call the rejectChanges method to cancel the deletion. If you want to reload the page after deletion, you can change the commitChanges Method to the load method and reload the data. Switch to the File controller to Delete the folder. The Code is as follows: [AjaxAuthorize (Roles = "normal user, system administrator")] public JObject Delete () {boolsuccess = false; stringmsg = ""; JArray ja = null; try {string data = Request ["data"]? ""; If (string. IsNullOrEmpty (data) {msg = "incorrect data submission. ";} Else {ja = JArray. parse (data); if (ja. count> 0) {foreach (JObject jo in ja) {string path = Server. mapPath (root + (string) jo ["path"] + (string) jo ["filename"]); FileInfo file = new FileInfo (path); if (file. exists) {file. delete () ;}} success = true;} else {msg = "incorrect data submission. ";}} Catch (Exception e) {msg = e. message;} returnHelper. myFunction. writeJObjectResult (success, 0, msg, ja);} Now, the delete operation is complete. Image management requires the most troublesome upload operations, which will be discussed in the next article.
Source code: http://vdisk.weibo.com/s/gKlcP

This article from the "yellow light bridge blog", please be sure to keep this source http://dqhuang.blog.51cto.com/2522725/1039975