web中拖拽排序与java后台交互实现
一、业务需求
1,在后台的管理界面通过排序功能直接进入排序界面
2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交
3,在app或者是前端就有对应的排序实现了
二、页面展示
将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与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 这个是在操作数据库批量修改时数据库的一个问题
web中拖拽排序与java后台交互实现的更多相关文章
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- 微信小程序与java后台交互
java后台使用的ssm框架,小程序连接的本地接口.跟正常的web访问没什么区别,也是后台获取url,返回json数据:只是小程序前台请求的url要带上http://localhost:80801. ...
- jquery拖拽排序,针对后台列表table进行拖拽排序(超实用!)
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
- easyui页面上字段排序并与后台交互
在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...
- 入门:HTML表单与Java 后台交互(复选框提交)
仅仅给出部分关键代码: HTML form code: <form action="JavaFormTest" method="post" name=&q ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- Java后台+数据库+Java web前端(新手)
实现简单页面上对数据的增删改查:Java后台+数据库表+Jsp前端网页设计 这里做一个简单的学生课程信息管理系统,做之前一定要先有自己的思路,要不然对新手来说,很容易乱的. 另有一完整的代码可供参考, ...
- GridView实现拖拽排序以及数据交互
在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效 ...
- 简单web网页与SSM后台交互
简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...
随机推荐
- kerberos系列之zookeeper的认证配置
本篇博客介绍配置zookeeper的kerberos配置 一.zookeeper安装 1.解压安装包和重命名和创建数据目录 tar -zxvf /data/apache-zookeeper-3.5.5 ...
- [Visual Basic]二分查找
模板 i=1:j=n 'i初值为1,j初值为n Do while i<=j '当i<=j时,通过循环进行查找 m=fix((i+j)/2) '计算出中间元素的下标m If d(m)=key ...
- 3000字编程入门--附带Java学习路线及视频
Title: 编程入门 GitHub: BenCoper Reference: 尚硅谷-2019 Study: 文字版+视频+实战(第一个自学的网站) Explain: 文末附带Java学习视频以及项 ...
- Journal of Proteome Research | Clinically Applicable Deep Learning Algorithm Using Quantitative Proteomic Data (分享人:翁海玉)
题目:Clinically Applicable Deep Learning Algorithm Using Quantitative Proteomic Data 期刊:Journal of Pro ...
- vscode回车补全代码
VsCode设置回车补全代码而不换行 有一部分人不习惯用tab键补全代码,我就是其中之一,习惯了回车补全的我决定设置一波,网上找了很多, 没找到比较详细的,所以自己写一个 有一个叫keybinding ...
- Recover刷机简介
Recovery Recovery是一种可以对安卓手机内部的数据文件进行修改的模式,类似电脑的PE.不同的recovery有不同的功能.使用recovery可以说是刷机(卡刷)的基础,想要比较顺畅的刷 ...
- 深入理解JAVA字符串常量池
初学JAVA时,在学习如何比较两个字符串是否相等,大量资料告诉我,不能用等于号( = )去比较,需要使用equals方法,理由是String是一个对象,等号此时比较的是两个字符串在java内存堆中的地 ...
- mysql-8.0.19-winx64下载
mysql-8.0.19-winx64 下载链接 提取码:m7qp
- npm git 常用命令行 记录
1. 推出node命令行: 两次ctrl+C或者一次ctrl+D 退出终端:exit; 2.npm 常用 npm install <name> 安装包 npm install &l ...
- Map m = Collections.synchronizedMap(new HashMap())
Collections.synchronizedMap(new HashMap())让你创建的new HashMap()支持多线程数据的同步.保证多线程访问数据的一致性 来源:http://www.b ...