基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能

更新時(shí)間：2016年08月29日 09:55:07 投稿：mrr

本文給大家介紹基于Metronic的Bootstrap開(kāi)發(fā)框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

在一個(gè)系統(tǒng)里面，往往有很多菜單項(xiàng)目，每個(gè)菜單項(xiàng)對(duì)應(yīng)一個(gè)頁(yè)面，一般用戶只需要用到一些常用的功能，如果每次都需要去各個(gè)層次的菜單里面去找對(duì)應(yīng)的功能，那確實(shí)有點(diǎn)繁瑣。特別是在菜單繁多，而客戶又對(duì)系統(tǒng)整體不熟悉的情況下，如果有一個(gè)類似瀏覽器的收藏夾模塊，把一些常用的菜單連接保存起來(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類型的Seq字段實(shí)現(xiàn)的。

我們?cè)趯?shí)體類初始化的時(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)建查詢的條件
    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)用戶是否有添加URL了，如果存在則不需要重復(fù)添加即可，前端只需要通過(guò)Ajax調(diào)用，然后響應(yīng)處理即可。

通過(guò)這些代碼的實(shí)現(xiàn)，我們可以實(shí)現(xiàn)收藏夾的快速管理和快速入口，為用戶的使用提供了更加友好的體驗(yàn)。

以上所述是小編給大家介紹的基于Bootstrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: