急急急，各位大神们，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 在研究你的代码中

具体是有没有一些demo 可以参考

http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#examples

http://ludo.cubicphuse.nl/jquery-treetable/

调试易

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

解决方案 »