Implementation of Metronic framework based on bootstrap page Link Favorites Function button move favorites (use sortable to drag sort) _javascript tips

In the previous article: based on the bootstrap Metronic framework to implement the page link Favorites function, introduced the link Favorites function realization, as well as to the collection record sorting processing. This essay mainly uses the function button's way to move the collection record, although the function realizes is quite good, but after the article comes out, has the reader colleague to point out that may use the direct dragging way realizes the sorting to be more convenient, therefore has carried on the research to the list record's sorting, This paper introduces how to use sortable open source JS component to implement drag sorting, this essay introduces the application of this component in the connection favorites sorting.

1, the collection record sorting processing review

The introduction of the collection folder processing, mainly in order to facilitate the user quickly into a common function of a module, with the increase in the collection record, we need to make a reasonable ranking of them in order to facilitate our use.

The original Favorites record sort interface is shown below.

This interface contains the movement of records, both up and down.
The implementation of the logical code is mainly the current record before and after the sort of adjustment processing, so as to achieve the adjustment of the position, the code is shown below.

<summary>///update up or down order///</summary>///<param name= "id" > Record id</param>///-<param Nam E= "MoveUp" > Move up or down, up to true</param>///<returns></returns> public bool UpDown (string ID, bool
MOVEUP) {//Set ordered rule bool isdescending = true; bool result = false;
Webfavoriteinfo info = FindByID (ID);
if (info!= null) {//Build query condition String condition = ""; if (isdescending) {condition = string. Format ("Seq {0} {1}", moveUp?) ">": "<", info.
SEQ); else {condition = string. Format ("Seq {0} {1}", moveUp?) "<": ">", Info.
SEQ);
var list = Basedal.find (condition);
Decimal newseq = 0M; Switch (list. Count) {Case 0:newseq = info.
seq;//is already at the top or bottom, and the order defaults to the break; Case 1://above or below there is a record if (isdescending) {newseq = moveUp? (List[0]. Seq + 1M): (List[0].
SEQ-1M); else {newseq =!moveup? (List[0]. Seq + 1M): (List[0].
SEQ-1M);
} break; Case 2://Intermediate area, average newseq = (list[0]. Seq + list[1].
SEQ)/2M;
Break Default://More than two cases if (moveUp) {NewSEQ = (list[list. Count-2]. Seq + list[list. COUNT-1].
SEQ)/2M; else {newseq = (list[0]. Seq + list[1].
SEQ)/2M;
} break; ///Unified Modification Order info.
Seq = Newseq;
result = Update (info, info.id);
return result;  }

The code above, by judging the position of the currently moving record, and then getting the records sorted above or below, if the number of records is 0, then the top or bottom, or 1 records, adds or subtracted a value from the record as the new sort position. If it is greater than or equal to 2 records, take the most recent two records and take their average.

2, the favorite folder drag sorting processing

The above processing can meet the basic requirements, and adjust the position is correct. But if we were able to sort by dragging the list items, it would be more convenient and friendlier.

Based on the sort of drag, I found a better JS processing component (sortable) in the GitHub ranked higher, the estimated use of a lot of people.
The use of this control is relatively simple, as shown in the code below.

<ul id= "Items" >
<li>item 1</li>
<li>item 2</li> <li>item 3</li
>
</ul>
var el = document.getElementById (' items ');

Let's take a look at my final use of sortable to integrate good interface effects.

This allows us to adjust the position by moving the record.

The display of the list, we still use the way of paging, in order to improve the efficiency of retrieval.

<div class= "Portlet-body flip-scroll" >
<div class= "Portlet-body" >
<div>
<span > Each page shows </span>
<select id= "Rows" onchange= "Changerows ()" >
<option>10</option>
<option selected>50</option>
<option>100</option>
<option>1000</ option>
</select>
<span> Records </span>
<span> Total records: </span><span ID = ' TotalCount ' class= "label label-success" >0</span>, total Pages: <span id= ' totalpagecount ' class= ' label Label-success ">0</span> page.
</div>
 
 

Here we build a series of list records in Grid_body.

<div class= "List-group-item" >
<span class= "Glyphicon glyphicon-move" aria-hidden= "true" ></span >
<a class= "btn btn-sm Blue" id= "E1f462c6-c749-4258-836f-e13ee8c8acd7" href= "http://localhost:2251/" 
user/index?tid=2744dbf5-a648-47c1-9e9a-d8b405884389 "> System User Information </a>
<i class=" Js-remove ">✖</i >

After the record is updated, the sortable component has a OnUpdate event that can be processed, as shown below.

var grid_body = document.getElementById (' grid_body ');
New sortable (grid_body, {
handle: '. Glyphicon-move ',
filter: ". Js-remove",
animation:150,
onUpdate : function (/**event*/evt) {
var list = [];//constructed Collection Object
$ ('. List-group div a '). each (function (i, item) {
List.pus H ({' Text ': item.text, ' Value ': Item.href});
};
var url = "/webfavorite/editfavorite";
var postdata = {List:list};
$.post (URL, postdata, function (JSON) {
var data = $.parsejson (JSON);
if (data. Success) {
//showtips ("successful operation");
Refresh ()//Flush page Data
}
else {
showtips. errormessage);}}
;

So we put the business processing to the Editfavorite method, which mainly to the list records for unified update, the processing logic is to delete the previous records, and then add the list of the collection records, and set their sorting records in the appropriate order.

<summary>///Edit record list///</summary>///<param name= "list" > record list </param>///<returns>& lt;/returns> [HttpPost] public actionresult editfavorite (list<clistitem> List) {commonresult result = new Commo
Nresult ();
var userid = currentuser.id; Dbtransaction trans = Bllfactory<webfavorite>.
Instance.createtransaction (); if (trans!= null) {try {//delete first to record var condition = string.
Format ("Creator= ' {0} '", UserID); Bllfactory<webfavorite>.
Instance.deletebycondition (condition, trans); Add a record int i = list.
Count; foreach (Clistitem item in list) {Webfavoriteinfo info = new Webfavoriteinfo (); info. Title = Item.
Text; Info. URL = Item.
Value; Info.
Seq = i--; Info.
Creator = CurrentUser.ID.ToString (); Bllfactory<webfavorite>.
Instance.insert (info, trans);
} trans.commit (); Result.
Success = true; catch (Exception ex) {result. ErrorMessage = ex.
message; Trans.
Rollback ();
Loghelper.error (ex);
} return Tojsoncontent (result);  }

The above is the list of favorites to drag the sort of improvement processing, I hope in the actual project can reasonably use this sortable JS components, can improve the effect of our user's physical examination. If you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!