据悉Metronic的Bootstrap开发框架经验总结(13)–页面链接收藏夹效率的实现2(利用Sortable进行拖动排序)

Bootstrap,在上篇小说《按照Metronic的Bootstrap开发框架经验总括(12)–页面链接收藏夹功用的贯彻》上,我介绍了链接收藏夹功用的实现,以及对储藏记录的排序处理。该篇随笔重要运用效果按钮的法门移动收藏记录,效能尽管实现的还算不错,不过著作出来后,有读者同行提出可以使用直接拖动的艺术贯彻排序更便利,由此对中间列表记录的排序举行了研究,从而介绍了怎么样使用Sortable开源JS组件实现拖动排序的处理,本篇小说介绍了该器件在接连收藏夹排序中的应用。

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 1

如此我们就可以透过移动记录的法子举办调整地方。
列表的显得,我们依然选用分页的主意,为了进步检索效用。

    <div class="portlet-body flip-scroll">
        <div class="portlet-body">
            <div>
                每页显示
                <select id="rows" onchange="ChangeRows()">
                    <option>10</option>
                    <option selected>50</option>
                    <option>100</option>
                    <option>1000</option>
                </select>
                条记录&nbsp;&nbsp;
                共有记录:0条,总页数:0页。
            </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">

    <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组件,可以增强我们用户的体检效果。

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

上篇随笔介绍的馆藏夹处理,紧要就是为了有利于用户快捷进入常用功用的一个模块,随着收藏夹记录的扩展,我们有必要对它们举行合理的排序,以有益我们的选择。
原来的窖藏夹记录排序界面如下所示。

Bootstrap 2

本条界面里面富含了对记录的移动处理,包括发展或者向下。
落实的逻辑代码重要就是对最近记下的内外记录的排序举办调整的拍卖,从而实现地点的调动,代码如下所示。

/// <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条记下记录,则取其多年来的五个记录,取他们的平均值即可。

相关文章