后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了。

于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端。

var new_ids_order = [];
var new_sort_order = [];
for (i in old_ids_order)
{
if(old_ids_order[i] != ids_order[i]){
new_ids_order.push(ids_order[i])
new_sort_order.push(list_sort_ord[i])
}
}

其中old_ids_order是排序前的,ids_order是排序后的,new_ids_order 和new_sort_order 是实际发生排序的。

Sortable拖拽排序插件数据筛选的更多相关文章

  1. GridView实现拖拽排序以及数据交互

    在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效 ...

  2. 拖拽排序插件 ---- Dragula

    相关链接:  https://github.com/bevacqua/react-dragula https://github.com/bevacqua/react-dragula demo:  ht ...

  3. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  4. vue el-transfer新增拖拽排序功能---sortablejs插件

    <template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 -  --> ...

  5. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  6. Vue 表单拖拽排序

    Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...

  7. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  8. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

  9. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

随机推荐

  1. 记录EntityValidationErrors的详细信息

    0.一个问题 使用过EF的人相信都会遇到Validation failed for one or more entities. See ‘EntityValidationErrors’这种异常,这是由 ...

  2. 微信支付服务器CA证书更换服务器安装der证书的方法 DigiCert的根证书

    [重要]微信支付服务器证书更换通知,请开发人员验证以免影响交易 尊敬的微信支付商户&服务商: 因微信支付HTTPS服务器证书的根CA证书将于2018年8月23日到期失效,微信支付计划于2018 ...

  3. 【Spring】SpringMVC之拦截器

    Spring的HandlerMapping处理器支持拦截器应用.当需要为某些请求提供特殊功能时,例如实现对用户进行身份认证.登录检查等功能. 拦截器必须实现HandlerInterceptor接口,实 ...

  4. 【Linux】字符转换命令expand

    这命令就是在将 [tab] 按键转成空格键: [root@www ~]# expand [-t] file 选项与参数: -t :后面可以接数字.一般来说,一个 tab 按键可以用 个空格键取代. 我 ...

  5. 【转】完全用Linux工作

    我已经半年没有使用 Windows 的方式工作了.Linux 高效的完成了我所有的工作. NU/Linux 不是每个人都想用的.如果你只需要处理一般的事务,打游戏,那么你不需要了解下面这些了. 我不是 ...

  6. VC学习笔记:状态栏

    原文链接: http://www.cnblogs.com/skyseraph/archive/2010/11/27/1889952.html 实例学习 1  新建对话框程序 2  为Dlg类添加成员变 ...

  7. struts系列:校验(一)XML校验和函数方法校验

    一.jsp示例 <form action="login" method="post"> <div class="form-group ...

  8. python 安装配置(windows)

    在 Windows 上, 安装 Python 有两种选择. ActiveState 制作了一个 Windows 上的 Python 安装程序称为 ActivePython, 它包含了一个完整的 Pyt ...

  9. 收集一些有意思的ASCII程序注释(持续收集中,希望大家踊跃贡献)

      /** * * created by Mr.Simple, Aug 21, 20141:51:40 PM. * Copyright (c) 2014, hehonghui@umeng.com Al ...

  10. pm2 设置开机启动

    一.官方文档: 官方相关文档:http://pm2.keymetrics.io/docs/usage/startup/#generating-a-startup-script 二.具体操作过程如下: ...