基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能
在一個(gè)系統(tǒng)里面,往往有很多菜單項(xiàng)目,每個(gè)菜單項(xiàng)對(duì)應(yīng)一個(gè)頁(yè)面,一般用戶(hù)只需要用到一些常用的功能,如果每次都需要去各個(gè)層次的菜單里面去找對(duì)應(yīng)的功能,那確實(shí)有點(diǎn)繁瑣。特別是在菜單繁多,而客戶(hù)又對(duì)系統(tǒng)整體不熟悉的情況下,如果有一個(gè)類(lèi)似瀏覽器的收藏夾模塊,把一些常用的菜單連接保存起來(lái),每次從這個(gè)收藏夾主頁(yè)去找對(duì)應(yīng)的頁(yè)面,那樣確實(shí)是省事省力,非常方便。本篇隨筆就是介紹在基于Metronic的Bootstrap開(kāi)發(fā)框架里面實(shí)現(xiàn)這個(gè)收藏夾的思路。
1、系統(tǒng)的收藏夾界面處理效果
為了實(shí)現(xiàn)這個(gè)收藏夾功能,我們也需要在系統(tǒng)頁(yè)面的明顯位置處放置一個(gè)收藏夾模塊的入口,以及可以為每個(gè)頁(yè)面添加到對(duì)應(yīng)收藏夾的功能。
經(jīng)過(guò)對(duì)比,我們把這些入口功能放在頁(yè)面標(biāo)題的附近,這樣方便進(jìn)行快速進(jìn)行收藏夾,如下效果所示。
當(dāng)我們?cè)陧?yè)面上單擊【添加到收藏夾】按鈕,我們就把對(duì)應(yīng)的頁(yè)面標(biāo)題和連接加入到收藏夾記錄里面了。
在【查看收藏夾】功能里面,我們可以展示我們加入的頁(yè)面鏈接,單擊其中某個(gè)記錄,可以快速進(jìn)入對(duì)應(yīng)的頁(yè)面,這樣就實(shí)現(xiàn)了我們快速進(jìn)入功能模塊的需求了。
這里面最為關(guān)鍵的就是對(duì)收藏夾記錄的排序處理,向上或者向下移動(dòng)記錄,使之能夠符合界面的處理。
2、系統(tǒng)收藏夾的實(shí)現(xiàn)過(guò)程
了解了上面關(guān)于系統(tǒng)頁(yè)面的收藏夾功能界面效果后,我們需要了解它的具體實(shí)現(xiàn)過(guò)程,首先我們需要設(shè)計(jì)一個(gè)表用來(lái)存儲(chǔ)收藏夾對(duì)應(yīng)的信息,頁(yè)面標(biāo)題、頁(yè)面地址、排序等信息。
數(shù)據(jù)庫(kù)設(shè)計(jì)界面如下所示。
我們注意到排序記錄用Decimal格式進(jìn)行存儲(chǔ),我們通過(guò)一個(gè)有經(jīng)度的數(shù)值進(jìn)行排序,這樣我們可以調(diào)整的時(shí)候,修改它們之間的大小就可以了。
使用代碼生成工具Database2Sharp快速生成底層的相關(guān)代碼和Web的控制器和視圖代碼,然后整合到框架里面,這樣我們就可以具有整個(gè)模塊的界面和處理代碼了。
由于一般情況下,我們對(duì)數(shù)據(jù)的顯示編輯界面是相對(duì)標(biāo)準(zhǔn)的,對(duì)于收藏夾的入口展示的需求不太一樣,我們需要參考列表界面增加一個(gè)視圖,用來(lái)展示簡(jiǎn)單的入口界面,如圖介紹所示。
這個(gè)界面里面包含了對(duì)記錄的移動(dòng)處理,包括向上或者向下。
前面介紹了,我們對(duì)記錄的排序主要通過(guò)decimal類(lèi)型的Seq字段實(shí)現(xiàn)的。
我們?cè)趯?shí)體類(lèi)初始化的時(shí)候,給排序的賦值為當(dāng)前時(shí)間的Unix時(shí)間戳。
其中上面的DateTimeToInt函數(shù)代碼如下所示,也是我們常用的處理方式。
/// <summary> /// 擴(kuò)展時(shí)間接口,可以返回整形數(shù)值 /// </summary> /// <param name="time"></param> /// <returns></returns> public static int DateTimeToInt(this DateTime time) { System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)); return (int)(time - startTime).TotalSeconds; }
為了實(shí)現(xiàn)記錄的移動(dòng),我們需要在業(yè)務(wù)BLL層實(shí)現(xiàn)一個(gè)移動(dòng)的邏輯處理,方便在控制器里面調(diào)用。
/// <summary> /// 更新向上或者向下的順序 /// </summary> /// <param name="id">記錄的ID</param> /// <param name="moveUp">往上,還是往下移動(dòng),往上則為true</param> /// <returns></returns> public bool UpDown(string id, bool moveUp)
實(shí)現(xiàn)的函數(shù)代碼如下所示
/// <summary> /// 更新向上或者向下的順序 /// </summary> /// <param name="id">記錄的ID</param> /// <param name="moveUp">往上,還是往下移動(dòng),往上則為true</param> /// <returns></returns> public bool UpDown(string id, bool moveUp) { //設(shè)置排序的規(guī)則 bool IsDescending = true; bool result = false; WebFavoriteInfo info = FindByID(id); if (info != null) { //構(gòu)建查詢(xún)的條件 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;//已在頂部或者底部,順序默認(rèn)不變 break; case 1: //上面或者下面有一個(gè)記錄 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: //中間區(qū)域,取平均值 newSeq = (list[0].Seq + list[1].Seq) / 2M; break; default: //多于兩個(gè)的情況 if (moveUp) { newSeq = (list[list.Count - 2].Seq + list[list.Count - 1].Seq) / 2M; } else { newSeq = (list[0].Seq + list[1].Seq) / 2M; } break; } //統(tǒng)一修改順序 info.Seq = newSeq; result = Update(info, info.ID); } return result; }
這樣我們?cè)贛VC的控制器里面,對(duì)這個(gè)BLL層接口進(jìn)行進(jìn)一步封裝,方便頁(yè)面前端進(jìn)行Ajax調(diào)用處理即可,封裝代碼如下所示。
/// <summary> /// 移動(dòng)記錄 /// </summary> /// <param name="id">記錄ID</param> /// <param name="up">向上為true,否則為false</param> /// <returns></returns> [HttpPost] public ActionResult UpDown(string id, bool up) { CommonResult result = new CommonResult(); if(!string.IsNullOrEmpty(id)) { try { result.Success = BLLFactory<WebFavorite>.Instance.UpDown(id, up); } catch(Exception ex) { result.ErrorMessage = ex.Message; } } return ToJsonContent(result); }
這樣我們?cè)陧?yè)面前端的界面視圖里面,就可以對(duì)這個(gè)方法進(jìn)行調(diào)用了。
首先在通過(guò)JS綁定生成前端HTML代碼,如下所示。
$("#grid_body").html(""); $.each(data.rows, function (i, item) { var tr = "<tr>"; tr += "<td><a class='btn btn-sm blue' href='" + item.Url + "'>" + item.Title + "</a></td>"; tr += "<td>"; tr += "<a href='javascript:;' class='btn btn-sm green' onclick=\"Up('" + item.ID + "')\" title='向上移動(dòng)'><span class='glyphicon glyphicon-arrow-up icon-state-danger'></span></a>"; tr += "<a href='javascript:;' class='btn btn-sm blue' onclick=\"Down('" + item.ID + "')\" title='向下移動(dòng)'><span class='glyphicon glyphicon-arrow-down'></span></a>"; tr += "</td>"; tr += "</tr>"; $("#grid_body").append(tr); });
然后通過(guò)Up或者Down函數(shù)進(jìn)行處理,向上或者向下移動(dòng)位置。
var UpDownUrl = "/WebFavorite/UpDown" function Up(id) { var postData = { id: id, up: true }; $.post(UpDownUrl, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("向上移動(dòng)成功"); Refresh();//刷新頁(yè)面數(shù)據(jù) } else { showTips(data.ErrorMessage); } }); } function Down(id) { var postData = { id: id, up: false }; $.post(UpDownUrl, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("向下移動(dòng)成功"); Refresh();//刷新頁(yè)面數(shù)據(jù) } else { showTips(data.ErrorMessage); } }); }
這樣就實(shí)現(xiàn)了我們所需要的移動(dòng)順序的操作了,另外添加的時(shí)候,我們判斷對(duì)應(yīng)用戶(hù)是否有添加URL了,如果存在則不需要重復(fù)添加即可,前端只需要通過(guò)Ajax調(diào)用,然后響應(yīng)處理即可。
通過(guò)這些代碼的實(shí)現(xiàn),我們可以實(shí)現(xiàn)收藏夾的快速管理和快速入口,為用戶(hù)的使用提供了更加友好的體驗(yàn)。
以上所述是小編給大家介紹的基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于BootStrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能按鈕移動(dòng)收藏記錄(使用Sortable進(jìn)行拖動(dòng)排序)
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【三】下拉列表Select2插件的使用
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
- 基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作
相關(guān)文章
僅30行代碼實(shí)現(xiàn)Javascript中的MVC
這篇文章主要介紹了僅30行代碼實(shí)現(xiàn)Javascript中的MVC的方法,MVC的基礎(chǔ)是觀察者模式,這是實(shí)現(xiàn)model和view同步的關(guān)鍵,想要深入了解的朋友可以參考本文2016-02-02js構(gòu)造函數(shù)、索引數(shù)組和屬性的實(shí)現(xiàn)方式和使用
本文主要介紹和小結(jié)js的構(gòu)造函數(shù),關(guān)聯(lián)數(shù)組的實(shí)現(xiàn)方式和使用,及不可變對(duì)象和它的實(shí)現(xiàn)方式及他們使用過(guò)程中要注意的點(diǎn),需要的朋友可以參考下2014-11-11微信小程序返回上一頁(yè)刷新組件數(shù)據(jù)的示例代碼
這篇文章主要介紹了微信小程序返回上一頁(yè)刷新組件數(shù)據(jù)的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-03-03在JavaScript中獲取請(qǐng)求的URL參數(shù)
在ASP.NET后臺(tái)代碼中,對(duì)于這樣的URL請(qǐng)求地址:http://www.abc.com?id=001,我們可以通過(guò)Request.QueryString["id"]的方法很容易的獲取到URL中請(qǐng)求的參數(shù)的值,但是要在前臺(tái)js代碼中獲取請(qǐng)求的參數(shù)的值,應(yīng)該怎么做呢?2010-12-12js實(shí)現(xiàn)簡(jiǎn)單省市區(qū)三級(jí)選擇聯(lián)級(jí)
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單省市區(qū)三級(jí)選擇聯(lián)級(jí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能
這篇文章主要介紹了用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06