java 企业信息门户 拖拽排版_web中拖拽排序与java后台交互实现
一、业务需求
1,在后台的管理界面通过排序功能直接进入排序界面
2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交
3,在app或者是前端就有对应的排序实现了
二、页面展示
将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与java后台进行交互的):
三、设计思路:
后台:如果需要将排序的结果保存到数据库,那么必须要修改数据库中对应的起码一个字段(排序的序号sort),那么后台需要至少接收的参数有sort和id两个字段。我这边采用的是将这两个字段封装到对象,并且采用集合的方式传递给后台,因为对应的修改必须是针对数据库中需要排序的所有数据的操作。当然可以根据不同的业务实施不同的排序方式
前端:a,实现拖拽功能;b,需要能够提供实时的序列号sort和该序列号指定的id
四、前端设计:
1,下载插件:只需点击超链接,下载drag.zip并解压,就会自动转为drag.js文件,引用即可
2,代码实现:
A>页面中代码:
${movieParam.NAME }
B>点击排序的时候触发事件(需要能获取到当前的序号和id值):
//点击排序:1,将当前页面装到指定的div;2,给对应的两个隐藏的input框添加name属性,便于后台接收;3,为sort的隐藏的input赋予sort序号值
functiongetSortList(){
$(".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)throwsException{//判空操作这里省略了
movieParamService.editSeq(movieParamList.getMovieParams());
}
B>Service层的处理省略了,主要是对movieParam中的id和sort两个字段的操作,直接跳到Mybatis:
update t_paramssort=#{var.sort}where id=#{var.id}
C>如果这时候发现自己的SQL写的没有问题但是在执行的时候控制台还是报错了的话,那么必须要在连接数据库的时候加上这样一段代码就行了:allowMultiQueries=true这个是在操作数据库批量修改时数据库的一个问题
java 企业信息门户 拖拽排版_web中拖拽排序与java后台交互实现相关推荐
- Java对字符串中数字进行按自然顺序排序
Java对字符串中数字进行按自然顺序排序 import java.util.Arrays;public class Test01 {public static void main(String[] a ...
- Vue 结合 echarts 原生 html5 实现拖拽排版报表系统
前言 不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...
- 【PPT】2010/2013/2016实现在演示过程中拖拽图片/形状
如果有需要在PPT演示过程中简单拖拽一些元素的功能,那么这篇文章绝对能帮助你 在上一篇文章分泌蛋白过程操作动画中提及到实现PPT演示过程中拖拽元素的方法,这篇写出详细过程. 先说明几点: ...
- 企业信息门户与办公自动化的集成应用
前言:办公自动化是办公信息处理的自动化,它利用先进的技术,使各种办公业务活动逐步由信息系统协助完成,充分利用信息,以提高工作效率和质量.现×××公自动化系统更着重于提供办公信息的共享.交换.组织.传递 ...
- Java源码 JavaWeb开发框架 代码 SSH SSM OA ERP CRM Java项目[Java通用框架源码及开发视频教程]
Java源码 JavaWeb开发框架 代码 SSH SSM OA ERP CRM Java项目 功能简介: A.代码生成器(开发利器) 生成Java各层次的类和JSP等文件,提高开发效率 B.阿里巴巴 ...
- java输入输出流_金九银十准备季:Java异常+Java IO与NIO面试题(含答案)
写在前面:2020年面试必备的Java后端进阶面试题总结了一份复习指南在Github上,内容详细,图文并茂,有需要学习的朋友可以Star一下! GitHub地址:abel-max/Java-Study ...
- java职业发展路线图_从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 为什么你学过Java却忘光了——记第一次助教同学见面会,java开发面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起在群里探讨技术. 大约 ...
- Java开发面试题含答案(计算机网络、操作系统、Java、Mysql、Redis、Spring)
Java开发一轮复习 一.网络篇 1.OSI七层模型与TCP/IP 五层模型 OSI七层:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层 TCP/IP五层:物理层.数据链路层.网络 ...
最新文章
- qt获取console输出_怎么在Centos 7 安装 Qt-4.8.6-MySQL 驱动?
- 区块链来了|未来注定将颠覆我们的生活,你值得先看看
- MySQL的并发控制与加锁分析
- ie6 ie7 绝对定位 相对定位 层被遮住
- 【经典】5种IO模型 | IO多路复用
- shell脚本详解(四)——循环语句之while循环和until循环(附加例题及解析)
- js 正则表达式 取反
- Feature Preprocessing on Kaggle
- easyui tree动态加载_动态路由:Gin vs SpringMVC
- 回溯算法——复原IP地址(Leetcode 93)
- Pandas时间索引的骚操作
- 计算机主机系统总线,全国2009年10月高等教育自学考试计算机应用基础试题及答案...
- vue-router 报错:Navigation cancelled from“/…“ to “/…“ with a new navigation.
- 拓端tecdat|R语言如何解决线性混合模型中畸形拟合(Singular fit)的问题
- 暴风影音2007全功能完美版和Symantec Norton的冲突
- 勒让德多项式学习笔记
- 人脑意识转入量子计算机,意识的产生 说明人类大脑可能是台高度发达的量子计算机!...
- leetcode59 spiral matrix2
- 计算机网络和共享中心打不开,Win7系统网络和共享中心打不开如何解决
- 浅论程序员的工作经历与工作经验