简单页面内容排序

页面的东西一直没心得,也没刻意下功夫,偶尔做页面总要查资料,一个简单的排序,因为js不熟,也算折腾了一番排错,总算出来了。
每页默认有20条数据,按照更新日期倒序排列,开始做的排序是鼠标拖动的,商务人员嫌麻烦,希望改成填序号的,jsp代码如下:
<c:forEach items="${vItem}" var="item" begin="0" varStatus="status">
<tr>
。。。
<td id="td${status.count}"><div id="div${status.count}" οnclick="showInput(${status.count})">${status.count}</div></td>
</tr>
</c:forEach>

js:
//单击时显示文本框,输入排序序号

function showInput(seq){
var input = "<input id='positioninput' type='text' style='width: 50px;' οnblur='showLabel("+seq+")'/>";
$("#div"+seq).html(input);
$("#positioninput").val(seq);
$("#positioninput").focus();
}
//失去焦点时显示标签
function showLabel(seq){
var inputvalue = $("#positioninput").val();
document.getElementById("div"+seq).setAttribute("id","divtep");
if(isNaN(inputvalue))
alert("序号必须为数字");
else{
if(inputvalue < seq){ //向上移动
for(var i=inputvalue;i<seq;i++){//改输入框序号
$("#div"+i).html((i-1+2));
}
for(var i=seq-1;i>inputvalue-1;i--){//改元素id
var htmval = $("#div"+i).html();
document.getElementById("div"+i).setAttribute("id","div"+htmval);
document.getElementById("div"+htmval).setAttribute("onclick","showInput("+htmval+")");
}
}
else{ //向下移动
for(var i=seq;i<inputvalue;i++){//改变显示序号
$("#div"+(i+1)).html(i);
}
for(var i=seq;i<inputvalue;i++){//设置id
var htmval = $("#div"+(i+1)).html();
document.getElementById("div"+(i+1)).setAttribute("id","div"+htmval);
document.getElementById("div"+htmval).setAttribute("onclick","showInput("+htmval+")");
}
}

$("#divtep").html(inputvalue);
document.getElementById("divtep").setAttribute("id","div"+inputvalue);
document.getElementById("div"+inputvalue).setAttribute("onclick","showInput("+inputvalue+")");
}
}
//保存顺序
function saveSort(name){
var sons = document.getElementsByName(name);
for (var i = 0; i < sons.length; i++) {
var j = i+1;
var poshtm = $("#td"+j).html();
var pos=poshtm.split(">")[1].split("<")[0];
var vid = $("#cb"+j).val();
$("#cb"+j).val(vid+"_"+pos);
alert($("#cb"+j).val());
sons[i].checked = true;
}
document.form0.action="savePosition.action?channelId=${channelId}";
document.form0.submit();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值