In the previous article: The Metronic framework based on Bootstrap implements the page link favorite function, which introduces the implementation of the link favorite function and the sorting of favorite records. This essay mainly uses function buttons to move collection records. Although the function is implemented well, after the article came out, some readers pointed out that it is more convenient to sort by using direct drag. Therefore, the sorting of list records was studied, and thus introducing how to use the Sortable open source JS component to implement drag sorting. This essay introduces the application of this component in connecting favorites sorting.
1. Review of the sorting and processing of favorite records
The favorites processing introduced in the previous essay is mainly to facilitate users to quickly enter a module of commonly used functions. As the number of favorites records increases, it is necessary for us to sort them reasonably to facilitate our use.
The original favorites record sorting interface is as follows.
This interface contains the movement processing of records, including upward or downward.
The implemented logical code mainly adjusts the sorting of the previous and subsequent records of the current record, thereby realizing the position adjustment. The code is shown below.
/// <summary>/// Update up or down order /// </summary>/// <param name="id">Recorded ID</param>/// <param name="moveUp">Up or move up, true</param>/// <returns></returns>public bool UpDown(string id, bool moveUp){//Set the order rules for sorting bool IsDescending = true;bool result = false;WebFavoriteInfo info = FindByID(id);if (info != null){//Construct the query 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;//It is already on the top or bottom, the order remains unchanged by default;case 1://There is a record above or below 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://middle area, take the average value 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;}In the above code, by determining the position of the current moving record, and then obtaining the records sorted above or below. If the number of records is 0, it is at the top or bottom. If it is 1 record, then adding or subtracting a certain value from the record is as the value of the new sorted position. If it is a record greater than or equal to 2 records, then take the two records of their most recent and their average values.
2. Drag and sorting process of favorites
The above processing can meet basic requirements and the adjustment position is also correct. But if we can drag the list items to sort, it will be more convenient and friendly.
Based on dragging sorting, I found a better JS processing component (Sortable), which ranks relatively high on github, and I guess there are many people using it.
The use of this control is relatively simple, the code is as follows.
<ul id="items"><li>item 1</li><li>item 2</li><li>item 3</li></ul>var el = document.getElementById('items');var sortable = new Sortable(el);Let’s first look at the interface I finally integrated with Sortable.
This way we can adjust the position by moving the record.
We still use pagination to display lists to improve retrieval efficiency.
<div><div><div><span>Display</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'>0</span>, total page count: <span id='totalPageCount'>0</span> pages. </div><hr /><div id="grid_body" class='list-group'></div><div><ul id='grid_paging'></ul></div></div></div>
Here we can build a series of list records in grid_body.
<div><span aria-hidden="true"></span><a id="e1f462c6-c749-4258-836f-e13ee8c8acd7" href="http://localhost:2251/User/Index?tid=2744DBF5-A648-47C1-9E9A-D8B405884389">System user information</a><i>✖</i></div>
After the record is updated, the Sortable component has an OnUpdate event to handle, 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 = [];//Construct the collection object $('.list-group div a').each(function (i, item) {list.push({ '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("Operation succeeds");Refresh();//Refresh page data}else {showTips(data.ErrorMessage);}});},});In this way, we hand over the business processing to the EditFavorite method, which mainly updates the list records in a unified manner. The processing logic is to first delete the previous records, then add the list collection records, and set their sorting records to the appropriate order.
/// <summary>//// Edit record list/// </summary>/// <param name="list">Record list</param>/// <returns></returns>[HttpPost]public ActionResult EditFavorite(List<CListItem> list){CommonResult result = new CommonResult();var userid = CurrentUser.ID;DbTransaction trans = BLLFactory<WebFavorite>.Instance.CreateTransaction();if (trans != null){try{//Delete first and record var condition = string.Format("Creator='{0}'", userid);BLLFactory<WebFavorite>.Instance.DeleteByCondition(condition, trans);//Add records one by one 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 an improvement to drag and sort the favorites list. I hope that the Sortable JS component can be used reasonably in actual projects to improve the physical examination results of our users. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!