基于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框架实现页面链接收藏夹功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法,本文一部分针对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错,需要的朋友可以参考下...2016-09-01基于Bootstrap的Metronic框架实现页面链接收藏夹功能
本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-09-01- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧...2017-05-22
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识,主要对比说明在Bootstrap开发中用到的这些技术要点,对此文感兴趣的朋友一起学习吧...2016-05-14- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01