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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其中上面的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框架实现页面链接收藏夹功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-27

基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我

Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.本文基于Bootstrap的框架基础上,再对这个模块进行更新处理,以及Office文档或者图片等附件的查看处理. 1.数据的导入操作 一般系统模块里面,都有数据导入和导出操作,因此在界面自动生成的时候,我都倾向于给用户自动生成这些标准的查询.导入.导出等操作功能,界面效果如下所示. 导入操作,在Bootstrap框架里面,我把它作为一个层的

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也有很多Bootstrap的插件能够提供给大家使用,但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上,介绍Bootstrap的各种基础知识和简单的使用:本文希望以基于C#的MVC实际项目的基础上,对Bootstrap开发框架进行全面的案例介绍,以实际项目的代码和效果截图进行讲解,力

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://

基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

在上篇文章:基于Bootstrap的Metronic框架实现页面链接收藏夹功能,介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏夹处理,主要就是为了方便用户快速进

基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

iOS 条码及二维码扫描(从相册中读取条形码/二维码)及扫码过程中遇到的坑

文章重点介绍如何解决,从手机相册中读取条形码和二维码的问题 1.扫码. 网上有特别的关于iOS扫码的代码和示例,其中扫码主要使用的是自带的AVFoundation类.这里就不细说了,要注意的是如何设置扫描区域,识别区域(这个值是按比例0~1设置,而且X.Y要调换位置,width.height调换位置) <span style="font-size:14px;">//创建输出流 AVCaptureMetadataOutput * output = [[AVCaptureMet

基于canvas的二维码邀请函生成插件

这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenny,你看现在市面上流行各种装逼H5,随便输入点名字啥的就给我生成房产证了,这种还可以分享出去,传播率可高了,或者你再看这里,一键生成邀请函,牛逼吧,要不你也帮我做一个这个功能,我去玩点传播手段. 我看见效果后第一反映就是,肯定canvas进行的图片拼接,现在市面上流行的效果具体是如何实现的我没有去看源码,思路很清晰,于是晚饭后没有下班,开始我的插件制作之旅了. 首先,我们需要思考,既然是图片处理,那么就必然存在图片下载,我们

Android基于google Zxing实现二维码的生成

最近项目用到了二维码的生成与识别,之前没有接触这块,然后就上网搜了搜,发现有好多这方面的资源,特别是google Zxing对二维码的封装,实现的已经不错了,可以直接拿过来引用,下载了他们的源码后,只做了少少的改动,就是在Demo中增加了长按识别的功能,网上虽然也有长按识别的Demo,但好多下载下来却无法运行,然后总结了一下,加在了下面的Demo中.   下面来介绍这个Demo的主类 public class BarCodeTestActivity extends Activity { priv

Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(推荐)

了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心. 随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码

Python基于QRCode实现生成二维码的方法【下载,安装,调用等】

本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt

Python及Django框架生成二维码的方法分析

本文实例讲述了Python及Django框架生成二维码的方法.分享给大家供大家参考,具体如下: 一.包的安装和简单使用 1.1 用Python来生成二维码很简单,可以看 qrcode 这个包: pip install qrcode qrcode 依赖 Image 这个包: pip install Image 如果这个包安装有困难,可选纯Python的包来实现此功能,见下文. 1.2 安装后就可以使用了,这个程序带了一个 qr 命令: qr 'http://www.ziqiangxuetang.c

thinkphp3.2框架集成QRcode生成二维码的方法分析

本文实例讲述了thinkphp3.2框架集成QRcode生成二维码的方法.分享给大家供大家参考,具体如下: 一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrcode提供了一个png()方法,通过该方法,我们可以生成自已需要的二维码.该函数定义如下: public static function png( $text, $outfile = fals