当前位置：编程学习 > JAVA >>

急急急，各位大神们，jsp实现这样的效果怎么做啊？


这个效果在jsp 显示的，要实现分类的上移下移。。。
怎么做啊？大神们求救了啊？ --------------------编程问答-------------------- 这种效果只要布局好html,缩放,隐藏,上移下移等效果用js实现起来还是很方便的 --------------------编程问答--------------------
我之前做过这样的，你可以参考下，不过有些麻烦，你知道各位还有什么更好的方法可借鉴
<script language="javascript">   

	var currentStep=[];   

	var max_line_num=0;   

	var oldline;

	var top=[];

	

function up_exchange_line(){    

  if(currentStep<=0){   

    alert('非法操作!');   

    return false;   

  }   

  if(currentStep[0]<1)

     alert('非法操作!');

     else

     {

    $.each(currentStep,function(n,value) {

 var upStep=value-1; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

  

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

  currentStep[n]=parseInt(upStep);  

  

   }); 

   }  

}   

function top_line(){

	if(currentStep<=0){   

    alert('非法操作!');   

    return false;   

  }   

  if(currentStep[0]<1)

     alert('非法操作!');

     else

     {

    $.each(currentStep,function(n,value) {

 var upStep=value-currentStep[0]; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

  

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

  top[n]=parseInt(upStep);  

  

   }); 

   }  

}



function down_line(){

	var t01 = $("#listTable").find("tr").length;

	currentStep.sort(dowsortInt);

       if(currentStep[0]>=t01-2)   

    alert('非法操作!');

    else{

  	$.each(currentStep,function(n,value) {

	var upStep=value+(t01-2-currentStep[0]);

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

   top[n]=parseInt(upStep); 

    });  

    }

}



function down_exchange_line(){ 

 var t01 = $("#listTable").find("tr").length;

  if(currentStep<0){   

    alert('请选择一项!');   

    return false;   

  }   

 // if(currentStep<1){   

  //   alert('非法操作!');   

  //   return false;   

  //}   

  	currentStep.sort(dowsortInt);

       if(currentStep[0]>=t01-2)   

    alert('非法操作!');

    else{

  	$.each(currentStep,function(n,value) {

	var upStep=parseInt(value)+1; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

   currentStep[n]=parseInt(upStep);   

    });  

    }

}   

function canle(){

$.each(top,function(n,value) {

$('#line'+value).css("background-color","white");



  }); 

$.each(currentStep,function(n,value) {

$('#line'+value).css("background-color","white");



  });  

currentStep=[];



}
--------------------编程问答-------------------- 大哥 这个有没有完整的代码啊，可以给我下不？
很急。。。。 --------------------编程问答-------------------- 额，你要完整的也没用啊，主要是js处理；
<%@ page language="java" pageEncoding="utf-8"%>

<%@ include file="../../common/global.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<script language="javascript" src="js/common/jquery.table.tr.js"></script>

		<title>图纸维护</title>

	</head>

	<script language="javascript">   

	var currentStep=[];   

	var max_line_num=0;   

	var oldline;

	var top=[];

	

	function compareInt(int1, int2){

    var iNum1 = parseInt(int1);//强制转换成int 型;

    var iNum2 = parseInt(int2);

    if(iNum1 < iNum2){

        return -1;

    }else if(iNum1 > iNum2){

        return 1;

    }else{

        return 0;

    }

}



function dowsortInt(int1, int2){

    var iNum1 = parseInt(int1);//强制转换成int 型;

    var iNum2 = parseInt(int2);

    if(iNum1 > iNum2){

        return -1;

    }else if(iNum1 < iNum2){

        return 1;

    }else{

        return 0;

    }

}

	function up_exchange_line(){    

  if(currentStep<=0){   

    alert('非法操作!');   

    return false;   

  }   

  if(currentStep[0]<1)

     alert('非法操作!');

     else

     {

    $.each(currentStep,function(n,value) {

 var upStep=value-1; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

  

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

  currentStep[n]=parseInt(upStep);  

  

   }); 

   }  

}   

function top_line(){

	if(currentStep<=0){   

    alert('非法操作!');   

    return false;   

  }   

  if(currentStep[0]<1)

     alert('非法操作!');

     else

     {

    $.each(currentStep,function(n,value) {

 var upStep=value-currentStep[0]; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

  

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

  top[n]=parseInt(upStep);  

  

   }); 

   }  

}



function down_line(){

	var t01 = $("#listTable").find("tr").length;

	currentStep.sort(dowsortInt);

       if(currentStep[0]>=t01-2)   

    alert('非法操作!');

    else{

  	$.each(currentStep,function(n,value) {

	var upStep=value+(t01-2-currentStep[0]);

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

   top[n]=parseInt(upStep); 

    });  

    }

}



function down_exchange_line(){ 

 var t01 = $("#listTable").find("tr").length;

  if(currentStep<0){   

    alert('请选择一项!');   

    return false;   

  }   

 // if(currentStep<1){   

  //   alert('非法操作!');   

  //   return false;   

  //}   

  	currentStep.sort(dowsortInt);

       if(currentStep[0]>=t01-2)   

    alert('非法操作!');

    else{

  	$.each(currentStep,function(n,value) {

	var upStep=parseInt(value)+1; 

  //修改序号   

  //$('#line'+upStep+" td:first-child").html(currentStep);   

  //$('#line'+currentStep+" td:first-child").html(upStep);   

  //取得两行的内容   

  

  var wdnostr1=$('#line'+upStep).find("td:nth-child(1)").html();

  var memo1=$('#line'+upStep).find("td:nth-child(3)").html();

   var wdnostr2=$('#line'+value).find("td:nth-child(1)").html();

  var memo2=$('#line'+value).find("td:nth-child(3)").html();

  //var upContent=$('#line'+upStep).html(); 

  //var currentContent=$('#line'+currentStep).html();

 

  $('#line'+upStep).find("td:nth-child(1)").html(wdnostr2);

  $('#line'+upStep).find("td:nth-child(3)").html(memo2);

  $('#line'+value).find("td:nth-child(1)").html(wdnostr1);

  $('#line'+value).find("td:nth-child(3)").html(memo1);

 // $('#line'+upStep).html(currentContent);   

  //交换当前行与上一行内容   

  //$('#line'+currentStep).html(upContent);     

  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});   

  $('#line'+upStep).css("background-color","yellow");

  $('#line'+value).css("background-color","white");

   currentStep[n]=parseInt(upStep);   

    });  

    }

}   

function canle(){

$.each(top,function(n,value) {

$('#line'+value).css("background-color","white");



  }); 

$.each(currentStep,function(n,value) {

$('#line'+value).css("background-color","white");



  });  

currentStep=[];



}



function lineclick(line){ 

	//$(oldline).css("background-color","white"); 

   var seq=$(line).find("td:nth-child(5)").html();

   $(line).css("background-color","yellow"); 

   currentStep.push(parseInt(seq)); 

   currentStep.sort(compareInt);

   oldline=line;  

}   

    



	</script>

	<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

		<html:form action="draw" method="post">

			<div style=" width: 100%">

				<html:hidden property="o" value="toList" />

				图纸号

				<html:text property="seachfdraw.dwgNO"></html:text>

				专业名称

				<html:select property="seachfdraw.specialityID">

					<html:optionsCollection name="specialityList"

						label="specialityName" value="specialityID" />

				</html:select>

				图纸类型

				<html:select property="seachfdraw.dwgKind">

					<html:optionsCollection name="dwgKindList" label="CDKeyNM"

						value="CDKey" />

				</html:select>

				<button class="common_button"

					onclick="javascript:toSubmit('toList');">

					查询

				</button>

				<br>



			</div>

			<br>

			<div align="center" style="hight:5px">

				<button class="common_button" onclick="top_line();">

					置顶

				</button>

				<button class="common_button" onclick="up_exchange_line();">

					上移

				</button>

				   

				<button class="common_button" onclick="down_exchange_line();">

					下移

				</button>

				<button class="common_button" onclick="down_line();">

					置底

				</button>

				   

				<button class="common_button" onclick="canle();">

					取消选中

				</button>

			</div>

			<logic:notEmpty name="drawForm" property="pageResult.list">

				<table class="listTable" style="width:100%;" border="0"

					id="listTable" cellPadding="3" cellSpacing="0">

					<tr class="head">

						<th style="width:10%" onclick="">

							图纸号

						</th>

						<th style="width:7%" onclick="">

							排序号

						</th>

						<th style="width:10%" onclick="">

							备注

						</th>



						<th style="width:1%;display:none;" onclick="">



						</th>

					</tr>

					<%

					int i = 0;

					%>

					<%

					int j = 0;

					%>

					<logic:iterate id="item" name="drawForm" property="pageResult.list"

						type="com.qaqc2.entity.FDDrawing" indexId="k">

						<tr id="line<%=i++%>" class="detail" onclick='lineclick(this);'>

							<td id="td">



								<html:hidden property="dwgId" value="${item.dwgID}"></html:hidden>

								${item.dwgNO}

							</td>

							<td id="td">

								<html:text property="orderNo" styleClass="text" size="50"

									maxlength="50"

									value="${drawForm.pageResult.pageSize*

								(drawForm.pageResult.pageNo-1) + k + 1 }">

								</html:text>

							</td>

							<td id="td">

								${item.memo }

							</td>

							<td style="display:none" id="td">

								${item.dwgKind }

							</td>



							<td style="display:none" id="td">

								<%=j++%>

							</td>

						</tr>

					</logic:iterate>

				</table>

			</logic:notEmpty>

			<iem:pager form="drawForm" />

			<iem:button pageEnNM="draw" btnEnNM="doEdit" method="post"

				url="doEditBy" />

		</html:form>

		<html:javascript formName="drawForm" dynamicJavascript="true"

			staticJavascript="true" />

	</body>

</html>
--------------------编程问答-------------------- 这只是页面dom的操作。是用javascript实现的。 --------------------编程问答-------------------- 怎么实现啊，大哥们有没有实例代码给小弟啊？ --------------------编程问答-------------------- 额，上移、下移的脚本不都在那放着呢吗，你看不懂还是怎么的 --------------------编程问答-------------------- yyw6637。。。

   在研究你的代码中。。。 --------------------编程问答-------------------- 自己顶顶。。。还有没好的 --------------------编程问答-------------------- 用jquery的树插件来实现。 --------------------编程问答-------------------- 可以给个demo 不
--------------------编程问答-------------------- 去官网下载jquery --------------------编程问答-------------------- 具体是有没有 一些demo 可以参考
   --------------------编程问答-------------------- http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#examples --------------------编程问答-------------------- http://ludo.cubicphuse.nl/jquery-treetable/ --------------------编程问答-------------------- 这个效果是咋不一样呢？ 
补充：Java ,  Java EE

上一个：Struts2 在访问带有标签的jsp时候出错！
下一个：find(Class,id) and JPQL get different object (JPA)

更多图片编程知识:
更多JAVA疑问解答：
java怎么在线读取ftp服务器上的文件内容
关于程序员的职业规划
HTML和JSP矛盾吗？
java小程序如何打包？
java怎么split路径文件名？
关于Hibernate实体自身多对一的抓取问题
关于apache2+tomcat群集出现的问题
SSH 导入导出excel 谁有这块的资料吗?
springmvc 加载一个jsp页面执行多个方法 报404
关于用jquery 导入 excel
java对时间进行循环放到List中
一个图片的输入输出程序，第一次调用某方法会中断，第二次调用则正常
请上过传智播客的人说一下传智播客怎么样呀！是不是像它说的那样好呀！
spring的schema怎么配置
【菜鸟求助】SSH中怎么从JSP页面往后台传值呢
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
如果你遇到编程学习难题：
请访问www.zzzyk.com 试试
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络，