基于Bootstrap的Metronic框架实现页面链接收藏夹功能


Posted in Javascript onAugust 29, 2016

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐。特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便。本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路。

1、系统的收藏夹界面处理效果

为了实现这个收藏夹功能,我们也需要在系统页面的明显位置处放置一个收藏夹模块的入口,以及可以为每个页面添加到对应收藏夹的功能。

经过对比,我们把这些入口功能放在页面标题的附近,这样方便进行快速进行收藏夹,如下效果所示。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

当我们在页面上单击【添加到收藏夹】按钮,我们就把对应的页面标题和连接加入到收藏夹记录里面了。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

在【查看收藏夹】功能里面,我们可以展示我们加入的页面链接,单击其中某个记录,可以快速进入对应的页面,这样就实现了我们快速进入功能模块的需求了。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

这里面最为关键的就是对收藏夹记录的排序处理,向上或者向下移动记录,使之能够符合界面的处理。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

2、系统收藏夹的实现过程

了解了上面关于系统页面的收藏夹功能界面效果后,我们需要了解它的具体实现过程,首先我们需要设计一个表用来存储收藏夹对应的信息,页面标题、页面地址、排序等信息。

数据库设计界面如下所示。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

我们注意到排序记录用Decimal格式进行存储,我们通过一个有经度的数值进行排序,这样我们可以调整的时候,修改它们之间的大小就可以了。

使用代码生成工具Database2Sharp快速生成底层的相关代码和Web的控制器和视图代码,然后整合到框架里面,这样我们就可以具有整个模块的界面和处理代码了。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

由于一般情况下,我们对数据的显示编辑界面是相对标准的,对于收藏夹的入口展示的需求不太一样,我们需要参考列表界面增加一个视图,用来展示简单的入口界面,如图介绍所示。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

这个界面里面包含了对记录的移动处理,包括向上或者向下。

前面介绍了,我们对记录的排序主要通过decimal类型的Seq字段实现的。

我们在实体类初始化的时候,给排序的赋值为当前时间的Unix时间戳。

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

其中上面的DateTimeToInt函数代码如下所示,也是我们常用的处理方式。

/// <summary>
    /// 扩展时间接口,可以返回整形数值
    /// </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;
    }

为了实现记录的移动,我们需要在业务BLL层实现一个移动的逻辑处理,方便在控制器里面调用。

/// <summary>
    /// 更新向上或者向下的顺序
    /// </summary>
    /// <param name="id">记录的ID</param>
    /// <param name="moveUp">往上,还是往下移动,往上则为true</param>
    /// <returns></returns>
    public bool UpDown(string id, bool moveUp)

实现的函数代码如下所示

/// <summary>
/// 更新向上或者向下的顺序
/// </summary>
/// <param name="id">记录的ID</param>
/// <param name="moveUp">往上,还是往下移动,往上则为true</param>
/// <returns></returns>
public bool UpDown(string id, bool moveUp)
{
  //设置排序的规则
  bool IsDescending = true;
  bool result = false;
  WebFavoriteInfo info = FindByID(id);
  if (info != null)
  {
    //构建查询的条件
    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;//已在顶部或者底部,顺序默认不变
        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:
        //中间区域,取平均值
        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;
    }
    //统一修改顺序
    info.Seq = newSeq;
    result = Update(info, info.ID);
  }
  return result;
}

这样我们在MVC的控制器里面,对这个BLL层接口进行进一步封装,方便页面前端进行Ajax调用处理即可,封装代码如下所示。

/// <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);
}

这样我们在页面前端的界面视图里面,就可以对这个方法进行调用了。

首先在通过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函数进行处理,向上或者向下移动位置。

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();//刷新页面数据
    }
    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();//刷新页面数据
    }
    else {
      showTips(data.ErrorMessage);
    }
  });
}

这样就实现了我们所需要的移动顺序的操作了,另外添加的时候,我们判断对应用户是否有添加URL了,如果存在则不需要重复添加即可,前端只需要通过Ajax调用,然后响应处理即可。

通过这些代码的实现,我们可以实现收藏夹的快速管理和快速入口,为用户的使用提供了更加友好的体验。

以上所述是小编给大家介绍的基于Bootstrap的Metronic框架实现页面链接收藏夹功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
基于jquery实现五星好评
Nov 18 jQuery
vue实现百度搜索功能
Dec 28 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
ionic隐藏tabs的方法
Aug 29 #Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
关于Javascript回调函数的一个妙用
Aug 29 #Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
微信小程序签到功能
2018/10/31 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python实现爬取并分析电商评论
2020/06/19 Python
德国网上花店:Valentins
2018/08/15 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
2016年幼儿园教研活动总结
2016/04/05 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL