web中拖拽排序和java后台交互实现方法示例

一、业务需求

1,在后台的管理界面通过排序功能直接进入排序界面

2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交

3,在app或者是前端就有对应的排序实现了

本文将详细介绍web拖拽排序和java后台交互的相关内容,下面话不多说了,来一起看看详细的介绍吧

二、页面展示

将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与java后台进行交互的):

三、设计思路:

后台:如果需要将排序的结果保存到数据库,那么必须要修改数据库中对应的起码一个字段(排序的序号sort),那么后台需要至少接收的参数有sort和id两个字段。我这边采用的是将这两个字段封装到对象,并且采用集合的方式传递给后台,因为对应的修改必须是针对数据库中需要排序的所有数据的操作。当然可以根据不同的业务实施不同的排序方式

前端:a,实现拖拽功能;b,需要能够提供实时的序列号sort和该序列号指定的id

四、前端设计:

1,下载插件:只需点击超链接,下载drag.zip并解压,就会自动转为drag.js文件,引用即可

2,代码实现:

 A>页面中代码:

<!--起始的页面-->
 <div class="listMain">
  <div class="addData">
  <ul class="dataList" id="dataList${var.ID }">
  <c:forEach items="${varList }" var="movieParam" varStatus="varSatus">
  <li class="dataList_Child">
   <input type="hidden" class="idSort" value="${movieParam.id }" /> <!--id值-->
   <p class="datali_name">${movieParam.NAME }</p> <!--页面中的9999,888,555,333的值-->
   <input type="hidden" class="seqSort" /> <!--存放sort序号值的地方-->
                   </li>
  </c:forEach>
  </ul>
  <input type="button" name="" value="新  增" class="Add_listButton" onclick="addList()">
  <input type="button" name="" value="排  序" class="M_sort" onclick="getSortList()" >
  </div>
        </div>
<!--排序页面-->
        <div class="M_sortMain">
          <form action="movieparam/editSort.do" method="post">
    <div class="M_sortMain_wrap">
    <span class="close_M_sortMain"></span>
   <div class="sortOul">
   <ul class="sortOulMain"></ul>
   </div>
    </div>
    <input type="submit" value="提交" class="sort_submit">
          </form>
        </div>

 B>点击排序的时候触发事件(需要能获取到当前的序号和id值):

//点击排序:1,将当前页面装到指定的div;2,给对应的两个隐藏的input框添加name属性,便于后台接收;3,为sort的隐藏的input赋予sort序号值
      function getSortList(){
        $(".M_sortMain").css("display","block"); //遮罩页面显示
  $(".sortOulMain").html($(".listMain").html()); //将当前页面装到指定的div
  $("li").each(function(){
   var seq_attr = 'movieParams['+$(this).index()+'].sort';
   var id_attr = 'movieParams['+$(this).index()+'].id';
   $(this).children(".seqSort").attr('name',seq_attr); //为序号框添加name属性
   $(this).children(".seqSort").val($(this).index()) //为sort的隐藏的input赋予sort序号值
   $(this).children(".idSort").attr('name',id_attr); //为id框添加name属性
  })
       }

 C>拖拽效果的实现,引用了提供的drag.js

// 排序事件中的拖拽事件
  $('.sortOulMain').DDSort({
  target: 'li',
  floatStyle: {
   'border': '1px solid #ccc',
   'background-color': '#fff',
   'cursor': 'move'
  },
  //每次拖拽完成之后都会执行的函数
  up: function () {
  $("li").each(function(){
   $(this).children(".seqSort").val($(this).index()); //改变全新的sort隐藏的input的序号值
   })
  }
      });

五、后台设计: 

后台采用的就是比较传统的SSM框架了,主要就是对接收的参数的处理:

  A>SpringMVC中只需要注意对于参数的接收必须按照指定的name对应即可(这里list集合中参数的封装就不再强调了): 

  @RequestMapping("editSeq")
  public ModelAndView editSeq(MovieParamListForm movieParamList)throws Exception{
    //判空操作这里省略了
    movieParamService.editSeq(movieParamList.getMovieParams());
  }

  B>Service层的处理省略了,主要是对movieParam中的id和sort两个字段的操作,直接跳到Mybatis:

<update id="editSeq" parameterType="java.util.List">
 <foreach collection="list" item="var" index="index" open="" close="" separator=";">
  update t_params
  <set>
    sort= #{var.sort}
  </set>
  where id= #{var.id}
 </foreach>
  </update>

  C>如果这时候发现自己的SQL写的没有问题但是在执行的时候控制台还是报错了的话,那么必须要在连接数据库的时候加上这样一段代码就行了:allowMultiQueries=true 这个是在操作数据库批量修改时数据库的一个问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Java中的2种集合排序方法介绍

    直接上代码: import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.List; /** * * <p> * ClassName CollectionsSort * </p> * <p> * Description 主要介绍两种集合的排序算法<br/> * 第一:java.util.Collections.s

  • Java排序算法之堆排思想及代码实现

    在介绍堆排序前,我们需要了解一下一种数据结构 -- 顶堆. 什么是顶堆? 它是一颗完全二叉树,顶堆有大顶堆和小顶堆两种.所谓大顶堆就是在这颗完全二叉树中,任何一颗子树都满足:父结点的值 > 孩子结点的值:小顶堆则相反. 如图: 什么是堆排序(Heapsort)? 利用堆积树(堆)这种数据结构所设计的一种排序算法,它是选择排序的一种.可以利用数组的特点快速定位指定索引的元素. 现在给我们一个无序数组,我们将其从小到大排序,使用堆排序的实现步骤和思想如下: 1.让这个数组变成一个大根堆 2.将最后一

  • 总结Java常用排序算法

    排序算法常用的有冒泡排序,选择排序和插入排序,下面将用Java语言实现这三种排序方式,并且介绍一种由插入排序拓展出来的希尔排序. 1.冒泡排序(BubbleSort)是一种最简单的排序算法.它的基本思想是迭代地对输入序列的第一个元素到最后一个元素进行俩俩比较,当满足条件时交换这俩个元素的位置,该过程持续到不需要执行上述过程的条件时. 2.我们自定义一个排序的函数为sorter(int[]array); private static void sorter(int[] array) for(int

  • Java常用工具类—集合排序

    一.集合排序概述 1.主要内容 集合中的基本数据类型排序 集合中的字符串排序 Comparator接口 Comparable接口 回顾: //数组的排序 int[] arr= {2,3,4,5,2,1}; Arrays.sort(arr); 2.集合排序方法 使用Collections类的sort(List list)方法 sort(List list)是根据元素的自然顺序对指定列表按升序进行排序. 二.对基本数据类型和字符串类型进行排序 1.对基本数据类型排序 List中只能存放对象,要想存放

  • Java实现对两个List快速去重并排序操作示例

    本文实例讲述了Java实现对两个List快速去重并排序操作.分享给大家供大家参考,具体如下: 1:去重并排序 package twolist; import java.util.Collections; import java.util.Comparator; import java.util.HashMap; import java.util.HashSet; import java.util.LinkedList; import java.util.List; import java.uti

  • web中拖拽排序和java后台交互实现方法示例

    一.业务需求 1,在后台的管理界面通过排序功能直接进入排序界面 2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交 3,在app或者是前端就有对应的排序实现了 本文将详细介绍web拖拽排序和java后台交互的相关内容,下面话不多说了,来一起看看详细的介绍吧 二.页面展示 将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与java后台进行交互的): 三.设计思路: 后台:如果需要将排序的结果保存到数据库,那么必须要修改数据库中对应的起码一个字段(排序的序号sort)

  • 微信小程序向Java后台传输参数的方法实现

    首先,微信小程序我使用的是微信web开发者工具 想要向后台传输数据,需要在js中写 在微信小程序的官方文档中可以看到一个api叫wx.request它的作用是用来发送https请求的 在js代码中,我们先使用wx.request这个api,它需要我们去写url,这个url其实就是Java代码部署在服务器上运行后的地址,这里我们没有真实服务器,我们使用tomcat去运行后端代码,将这个url复制给微信小程序的url中 我的Java代码在运行时出现一个问题,就是找不到我这个类,一直报404错误,一个

  • Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法

    1.背景 最近有个项目,需要搭建一个socket服务器,一个web服务器,然后实现两个服务器之间的通讯交互.刚开始的方案是用Python中socket模块实现一个多线程的socket服务器,然后用Flask实现一个web服务器,他们之前通过线程交互实现通讯. 但是在我看来这个方案有例外一个更好的解决方法,就是用Torndao框架.鉴于网上用Tornado实现一个程序同时实现web服务和socket服务器并且实现交互的文章几乎没有,所以记录一下.觉得写得好麻烦点个赞,写得不好请指出,有疑问可以留言

  • Java单例模式实现静态内部类方法示例

    Singleton是众多设计模式中最容易理解的一种,也是众多设计模式中较为重要的一种设计模式.接下来我们看看具体介绍. Singleton模式实现的重点在于将构造函数私有化(private),并通过提供静态公有函数(public synchronized static xxx getInstance)来获取定义在类中的静态私有成员(private static xxx instance),通过一个简单的判断静态实例是否为空来控制这个类只能够new一次,即控制了一个类只能有单个实例,一般的实现如下

  • Go Java算法之解码方法示例详解

    目录 解码方法 方法一:动态规划(Java) 方法二:动态规划——优化(go) 解码方法 一条包含字母 A-Z 的消息通过以下映射进行了 编码 : 'A' -> "1" 'B' -> "2" ... 'Z' -> "26" 要 解码 已编码的消息,所有数字必须基于上述映射的方法,反向映射回字母(可能有多种方法).例如,"11106" 可以映射为: "AAJF" ,将消息分组为 (1 1 1

  • Java Web项目部署在Tomcat运行出错与解决方法示例

    本文实例讲述了Java Web项目部署在Tomcat运行出错与解决方法.分享给大家供大家参考,具体如下: 1.在部署Java Web项目的过程中,启动Tomcat出现报错提示 具体报错如下: Could not load the Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config. The configuration may be corrupt or incomplete. 元素类型 "H

  • thinkPHP框架实现类似java过滤器的简单方法示例

    本文实例讲述了thinkPHP框架实现类似java过滤器的简单方法.分享给大家供大家参考,具体如下: 写java web代码的时候,可以定义过滤器,对控制器进行过滤,可以实现权限验证等等 在thinkphp中也可以通过继承父类的方法,实现类似的需求 父类代码 <?php /** * Created by PhpStorm. * User: xieyicheng * Date: 2014/12/11 * Time: 14:43 */ namespace Admin\Controller; use

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • java引用jpython的方法示例

    本文实例讲述了java引用jpython的方法.分享给大家供大家参考,具体如下: import java.util.ArrayList; import java.util.List; import org.python.core.PyException; import org.python.core.PyInteger; import org.python.core.PyObject; import org.python.util.PythonInterpreter; public class

  • java生成缩略图的方法示例

    本文实例讲述了java生成缩略图的方法.分享给大家供大家参考,具体如下: package com.util; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * 生成压缩图 * */ public class ImageScale { private int width; private int heigh

随机推荐