zoukankan      html  css  js  c++  java
  • web系统中上下移动功能的实现

     其实上移下移的思想分几步:

    核心思想:交换两个记录的位置字段的值。

    问题:如何根据当前记录,找到前一个或者后一个的记录的位置。

    第一:在java类属性定义一个position位置字段,不同的位置position的值不同。

    第二:前台页面显示移动的效果是查询的时候,根据position的升序查询显示出来的。所以要重写查询方法。

    第三:当点击按钮的时候,可以获取该记录的id,根据id获取该记录的对象的position。然后通过查询语句获取前一个或者后一个记录

    第四:如何保证在添加新的信息的时候,position的值不会重复。这里很巧妙:根据id的值来设置position的值。




    package cn.itcast.oa.service.impl;
    import java.util.List; import javax.annotation.Resource; import org.hibernate.SessionFactory; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import cn.itcast.oa.base.DaoSupportImpl; import cn.itcast.oa.domain.ForumManage; import cn.itcast.oa.service.ForumManageService; @Service @Transactional public class ForumManageServiceImpl extends DaoSupportImpl<ForumManage> implements ForumManageService { /*实现上下移动的操作,页面如何更新已经改过的信息呢,因为之前的findAll查询没有条件的,没有排序的,而我们这个列表是根据postion来进行排序展示的 子类继承父类的方法,可以重写父类的方法以实现自己的功能.子类重写了父类,就执行自己的方法了。 */ @Override public List<ForumManage> findAll() { return getSession().createQuery("FROM ForumManage ORDER BY position ").list(); } //当添加一个新的记录时,position的值是不能重复的,这里的方法很巧妙,根据id来保存position的值,id为什么,position就是什么,这样子就不会重复了 @Override public void save(ForumManage forum) { super.save(forum); //先保存了对象后,根据id来保存position的值,这样就不会重复了 forum.setPosition(forum.getId().intValue()); } @Override public void moveUp(Long id) { /*jsp页面上的上移下移功能实现: * 分析:上下移动每条记录是针对记录的位置进行的移动,所以这里我们在java类中的字段中设置一个position位置来记录每条记录的位置信息。 * 而想要交换两条记录,只要将这两条记录的位置信息交换,然后利用查询的时候order by来进行查询,就可以将两条记录来交换。 * 第一步:之前我们写的查询方法是无条件查询,这里的查询是有条件的查询,所以需要重写父的findAll方法,否则数据库改了,页面是不会改变的。 * (关于子类继承父类,这个可以联想生活中的父子关系,子类继承了父类的某个特点,将这个特点修改了下成了自己特有的,所以重写是先使用自己的特点) * 第二步:当我们点击上下移动按钮时,这时候页面传递是改记录的id信息,根据id信息来获取当前的对象。 * 第三步:如何获取当前记录之前的或者之后的记录呢。这是问题的关键:即如何获取前一个或者后一个对象。 * 第四步:将第一步和第二步的对象position信息进行交换,然后更新到数据库。 * 子类继承父类,调用父类的方法:直接拿过来用即可,即在子类中直接写父类的方法就可以。比如我们要使用爸爸的东西,我们不用汇报,而使用别人的东西需要汇报说一声。这个汇报就是先声明一个对象 * */ //当前对象和前面一个或者后面一个对象的获取,当前对象通过id获取,后面一个对象通过查询语句获取 ForumManage forum= getById(id); ForumManage other=null; //这是查询上下对象的方法:select * from itcast_forumManage where position<当前的对象的位置 order by position DESC limit 0,1 other=(ForumManage) getSession().createQuery(// "FROM ForumManage WHERE position < ? ORDER BY position DESC ") .setParameter(0,forum.getPosition()) .setFirstResult(0) .setMaxResults(1) .uniqueResult(); //最上面的一个不能上移 if (other==null) { return; } //获取到了前面一个对象后,得到该对象的位置,将两者的位置进行交换,注意这里需要用到第三方来转接 Integer temp=null; temp=forum.getPosition(); forum.setPosition(other.getPosition()); other.setPosition(temp); //交换之后,更新到数据库, getSession().update(forum); getSession().update(other); } //下移跟上移的原理是一样的 @Override public void moveDown(Long id) { //当前对象和前面一个或者后面一个对象的获取,当前对象通过id获取,后面一个对象通过查询语句获取 ForumManage forum= getById(id); ForumManage other=null; //这是查询上下对象的方法:select * from itcast_forumManage where position<当前的对象的位置 order by position DESC limit 0,1 other=(ForumManage) getSession().createQuery(// "FROM ForumManage WHERE position > ? ORDER BY position ") .setParameter(0,forum.getPosition()) .setFirstResult(0) .setMaxResults(1) .uniqueResult(); //最下面的一个不能下移 if (other==null) { return; } //获取到了前面一个对象后,得到该对象的位置,将两者的位置进行交换,注意这里需要用到第三方来转接 Integer temp=null; temp=forum.getPosition(); forum.setPosition(other.getPosition()); other.setPosition(temp); //交换之后,更新到数据库, getSession().update(forum); getSession().update(other); } }

      上下移动功能,记录在最上面的时候将上移的图片为灰色,最下面的时候下移的图标为灰色的实现:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <html>
    <head>
        <title>版块列表</title>
        <%@ include file="/WEB-INF/jsp/public/commons.jspf" %>
        <style type="text/css">
        	.disabled{
        		color: gray;
        		cursor: pointer;
        	}
        </style>
    </head>
    <body>
    
    <div id="Title_bar">
        <div id="Title_bar_Head">
            <div id="Title_Head"></div>
            <div id="Title"><!--页面标题-->
                <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 版块管理
            </div>
            <div id="Title_End"></div>
        </div>
    </div>
    
    <div id="MainArea">
        <table cellspacing="0" cellpadding="0" class="TableStyle">
           
            <!-- 表头-->
            <thead>
                <tr align="CENTER" valign="MIDDLE" id="TableTitle">
                	<td width="250px">版块名称</td>
                    <td width="300px">版块说明</td>
                    <td>相关操作</td>
                </tr>
            </thead>
    
    		<!--显示数据列表-->
            <tbody id="TableData" class="dataContainer" datakey="forumList">
            <!-- status是循环里面的标签,里面包含了first和last标签 -->
            <s:iterator value="#forumList" status="status">
                
    			<tr class="TableDetail1 template">
    				<td>${name} </td>
    				<td>${description} </td>
    				<td>
    					<s:a action="forumManage_delete?id=%{id}" onclick="return delConfirm()">删除</s:a>
    					<s:a action="forumManage_editUI?id=%{id}">修改</s:a>
    					
    					<!-- 最上面的不能上移 -->
    					<s:if test="#status.first">
    						<span class="disabled">上移</span>
    					</s:if>
    					<s:else>
    						<s:a action="forumManage_moveUp?id=%{id}">上移</s:a>
    					</s:else>
    					
    					<!-- 最下面的不能下移 -->
    					<s:if test="#status.last">
    						<span class="disabled">下移</span>
    					</s:if>
    					<s:else>
    						<s:a action="forumManage_moveDown?id=%{id}">下移</s:a>
    					</s:else>
    					
    				</td>
    			</tr>
            </s:iterator>
    
            </tbody>
        </table>
        
        <!-- 其他功能超链接 -->
        <div id="TableTail">
            <div id="TableTail_inside">
                <s:a action="forumManage_addUI"><img src="${pageContext.request.contextPath}/style/images/createNew.png" /></s:a>
            </div>
        </div>
    </div>
    
    <div class="Description">
    	说明:<br />
    	1,显示的列表按其位置排列。<br />
    	2,可以通过上移与下移功能调整顺序。最上面的不能上移,最下面的不能下移。<br />
    </div>
    
    </body>
    </html>
    

     

  • 相关阅读:
    qemu+chroot构建arm aarch64虚拟机
    <转>Linux环境下段错误的产生原因及调试方法小结
    <转>PCA的数学原理
    博客分类整理
    detectron2 配置记录
    如何读取部分的预训练模型
    重新配置语义分割实验环境遇到的坑
    pytorch 调整tensor的维度位置
    seg代码配置的踩坑记录
    Alienware R8外星人台式机安装双系统(WIN10+Ubuntu)的总结
  • 原文地址:https://www.cnblogs.com/fengli9998/p/6575129.html
Copyright © 2011-2022 走看看