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


Posted in Javascript onAugust 29, 2016

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

1、收藏记录的排序处理回顾

上篇随笔介绍的收藏夹处理,主要就是为了方便用户快速进入常用功能的一个模块,随着收藏夹记录的增多,我们有必要对它们进行合理的排序,以方便我们的使用。

原来的收藏夹记录排序界面如下所示。

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

这个界面里面包含了对记录的移动处理,包括向上或者向下。
实现的逻辑代码主要就是对当前记录的前后记录的排序进行调整的处理,从而实现位置的调整,代码如下所示。

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

以上的代码,通过判断当前移动记录的位置,然后获取排序在其上面或者下面的记录,如果记录数量为0 ,那么就是顶端或者底端的了,如果是1条记录,那么就是在该记录上增加或者减除某个数值就作为新排序位置的值即可。如果是大于或等于2条记录记录,则取其最近的两个记录,取他们的平均值即可。

2、收藏夹的拖动排序处理

上面的处理能够满足基本的要求,而且调整位置也是正确的。但是我们如果能够拖动列表项进行排序的话,那样就更加方便、更加友好的了。

基于拖动的排序,我寻找到了一个比较好的JS处理组件(Sortable)这个在github上排名比较高,估计用的人也很多。
这个控件的使用相对比较简单,代码如下所示。

<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = new Sortable(el);

我们先来看看我最终使用Sortable整合好的界面效果。

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

这样我们就可以通过移动记录的方式进行调整位置。

列表的展示,我们还是使用分页的方式,为了提高检索效率。

<div class="portlet-body flip-scroll">
<div class="portlet-body">
<div>
<span>每页显示</span>
<select id="rows" onchange="ChangeRows()">
<option>10</option>
<option selected>50</option>
<option>100</option>
<option>1000</option>
</select>
<span>条记录</span>  
<span>共有记录:</span><span id='totalCount' class="label label-success">0</span>条,总页数:<span id='totalPageCount' class="label label-success">0</span>页。
</div>
<hr />
<div id="grid_body" class='list-group'></div>
<div class="paging-toolbar">
<ul id='grid_paging'></ul>
</div>
</div>
</div>

在这里面我们通过在grid_body里面构建一系列的列表记录即可。

<div class="list-group-item">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<a class="btn btn-sm blue" id="e1f462c6-c749-4258-836f-e13ee8c8acd7" 
href="http://localhost:2251/User/Index?tid=2744DBF5-A648-47C1-9E9A-D8B405884389">系统用户信息</a>
<i class="js-remove">✖</i>
</div>

在记录的更新后,该Sortable组件有一个OnUpdate的事件可以处理,如下所示。

var grid_body = document.getElementById('grid_body');
new Sortable(grid_body, {
handle: '.glyphicon-move',
filter: ".js-remove",
animation: 150,
onUpdate: function (/**Event*/evt) {
var list = [];//构造集合对象
$('.list-group div a').each(function (i, item) {
list.push({ 'Text': item.text, 'Value': item.href });
});
var url = "/WebFavorite/EditFavorite";
var postData = { list: list };
$.post(url, postData, function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//showTips("操作成功");
Refresh();//刷新页面数据
}
else {
showTips(data.ErrorMessage);
}
});
},
});

这样我们把业务处理交给EditFavorite方法了,这里面主要对列表记录进行统一更新即可,处理逻辑就是先删除以前的记录,然后添加列表的集合记录,并且设置它们的排序记录为合适的顺序即可。

/// <summary>
/// 编辑记录列表
/// </summary>
/// <param name="list">记录列表</param>
/// <returns></returns>
[HttpPost]
public ActionResult EditFavorite(List<CListItem> list)
{
CommonResult result = new CommonResult();
var userid = CurrentUser.ID;
DbTransaction trans = BLLFactory<WebFavorite>.Instance.CreateTransaction();
if (trans != null)
{
try
{
//先删除就记录
var condition = string.Format("Creator='{0}'", userid);
BLLFactory<WebFavorite>.Instance.DeleteByCondition(condition, trans);
//逐条添加记录
int i = list.Count;
foreach (CListItem item in list)
{
WebFavoriteInfo info = new WebFavoriteInfo();
info.Title = item.Text;
info.Url = item.Value;
info.Seq = i--;
info.Creator = CurrentUser.ID.ToString();
BLLFactory<WebFavorite>.Instance.Insert(info, trans);
}
trans.Commit();
result.Success = true;
}
catch(Exception ex)
{
result.ErrorMessage = ex.Message;
trans.Rollback();
LogHelper.Error(ex);
}
}
return ToJsonContent(result);
}

以上就是对收藏夹列表进行拖动排序的改进处理,希望在实际的项目中能够合理利用这个Sortable的JS组件,能够提高我们用户的体检效果。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 #Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 #Javascript
ionic隐藏tabs的方法
Aug 29 #Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
You might like
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
Python切片用法实例教程
2014/09/08 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python读取LMDB中图像的方法
2018/07/02 Python
浅谈python之新式类
2018/08/12 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python输入中文的实例方法
2020/09/14 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
八年级美术教学反思
2014/02/02 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
公司借条范本
2015/05/25 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL