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