急急急,各位大神们,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"%>--------------------编程问答-------------------- 这只是页面dom的操作。是用javascript实现的。 --------------------编程问答-------------------- 怎么实现啊,大哥们有没有实例代码给小弟啊? --------------------编程问答-------------------- 额,上移、下移的脚本不都在那放着呢吗,你看不懂还是怎么的 --------------------编程问答-------------------- yyw6637。。。
<%@ 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>
在研究你的代码中。。。 --------------------编程问答-------------------- 自己顶顶。。。还有没好的 --------------------编程问答-------------------- 用jquery的树插件来实现。 --------------------编程问答-------------------- 可以给个demo 不
--------------------编程问答-------------------- 去官网下载jquery --------------------编程问答-------------------- 具体是有没有 一些demo 可以参考
--------------------编程问答-------------------- http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#examples --------------------编程问答-------------------- http://ludo.cubicphuse.nl/jquery-treetable/ --------------------编程问答-------------------- 这个效果是咋不一样呢?
补充:Java , Java EE