基于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 "color: #ff0000">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整合好的界面效果。



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


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




<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>&nbsp;&nbsp;
<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">系统用户信息</a>
<i class="js-remove">"htmlcode">

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组件，能够提高我们用户的体检效果。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！