`
lovesunshine
  • 浏览: 16099 次
  • 性别: Icon_minigender_1
  • 来自: 世外桃源
文章分类
社区版块
存档分类
最新评论

简单页面内容排序

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

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

function showInput(seq){
var input = "<input id='positioninput' type='text' style='width: 50px;' onblur='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();
}
分享到:
评论

相关推荐

    JqueryHTMLDOM排序插件(网页元素排序插件).pdf

    7. **应用场景**:适用于表格、列表等需要动态排序的Web页面,比如用户可以根据需求对商品列表、文章列表等进行升序或降序排列。 8. **扩展性**:插件设计了可配置的选项,方便开发者根据实际需求定制排序规则,...

    java排序可视化页面

    **冒泡排序** 是最简单的排序算法之一,它的基本思想是通过重复遍历待排序序列,每次比较相邻两个元素并根据需要交换它们的位置,以确保较大的元素逐渐"浮"到序列的末尾。在Java中,冒泡排序可以使用嵌套循环实现,...

    JQuery页面数据排序

    在网页开发中,我们经常需要对页面上的数据显示进行排序,以便用户更方便地查找和理解信息。jQuery,一个流行的JavaScript库,提供了丰富的API来简化这一过程。本文将深入探讨如何利用jQuery实现页面数据的排序,...

    JqueryHTMLDOM排序插件网页元素排序插件.pdf

    jQuery HTML DOM排序插件是一种用于网页元素排序的工具,它允许开发者根据特定规则对页面上的元素进行动态排序。这个插件名为"sort",文件名为"jquery.sort-1.0.js",由作者wjy编写,其邮箱为001100567@163.com,...

    Javascript实现网页元素拖拽排序

    在网页开发中,JavaScript是一种非常重要的脚本语言,它提供了丰富的功能,其中之一就是实现网页元素的拖拽排序。拖拽排序允许用户通过直观地拖动元素来改变它们在页面上的顺序,增强了用户体验。本文将深入探讨如何...

    dwz .net 简单分页 表头排序、查询

    【标题】:“DWZ.NET 简单分页、表头排序及查询”是指在.NET开发环境中使用DWZ(Dynamic Web Zone)框架实现的一种高效、便捷的网页数据展示功能。DWZ.NET是一款基于Ajax的前端交互框架,尤其适用于构建富交互性的...

    几种简单算法的C语言源代码和演示页面(插入排序,冒泡排序等).zip

    这些排序算法是数据结构和算法分析的基础内容,对于计算机科学的学习至关重要。理解它们可以帮助我们设计更高效的问题解决方案,并优化程序性能。 总结,这个压缩包不仅提供了C语言实现的基本排序算法,还结合了...

    Jquery表格排序插件,支持快速排序

    此插件通过Jquery框架进行封装,使得在网页上对表格数据进行动态排序变得简单易行。 #### 使用方法与参数选项 使用该插件的方法是在目标表格元素上调用`.tableSort()`方法,并传入一个配置对象。配置对象的主要...

    解决Sqlite中文排序问题(网页)

    在SQLiteDatabase,特别是SQLite3中,处理中文排序问题是一个常见的挑战。SQLite3是一个轻量级、自包含的数据库引擎,广泛应用于嵌入式系统和移动应用。然而,它默认的排序规则可能不适用于中文字符,因为中文字符的...

    jquery实现列表左右上下排序

    例如,你可以根据文本内容、数据属性或者用户自定义的排序条件进行排序。对于上下排序,可能需要比较元素的索引位置;左右排序则可能涉及到改变元素的父容器或调整其相对位置。 3. **应用排序**:使用`sort()`函数...

    jquery 简单表格排序

    总的来说,使用jQuery和`tablesorter`插件,我们可以轻松地为网页上的表格添加排序功能,从而提升用户交互体验。在实际开发中,根据具体需求调整配置和扩展功能,将使表格排序更加智能化和个性化。对于源码和工具的...

    table 排序!js特效!很强大!简单易学

    当数据量较大或者需要用户交互时,对表格内容进行排序就显得尤为重要。本篇将深入探讨如何利用JavaScript(js)实现表格数据的动态排序,让您的网页效果更加强大且易于学习。 首先,我们需要了解HTML中的`&lt;table&gt;`...

    js 对页面table数据排序

    在网页开发中,JavaScript(简称JS)是一种必不可少的脚本语言,它被广泛用于实现页面交互和动态功能。本文将详细讲解如何使用JS对页面上的HTML表格数据进行排序,以便用户点击表头时能直接触发排序操作。 首先,...

    js,jQuery 排序的实现代码,网页标签排序的实现,标签排序.docx

    在处理标签排序时,jQuery的便利性尤为突出,因为它提供了一套丰富的选择器和方法,使得操作DOM元素变得更加简单。 对于标签排序,我们通常会遇到两种情况:一种是对HTML元素的直接排序,另一种是基于数据的排序。...

    表格排序

    在IT领域,尤其是在网页开发中,表格数据的排序是一个常见的需求。"表格排序"这个话题主要涉及如何通过JavaScript实现对HTML表格中的数据进行动态排序。在这个场景中,我们看到两个关键文件:`tablesort.js` 和 `...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    总之,拖拽排序功能在网页开发中非常实用,通过jQuery或纯JavaScript都可以实现。了解基本原理后,可以根据项目需求进行定制和优化,提升用户体验。同时,利用成熟的插件可以节省开发时间,更快地实现功能。

    jquery纵向排序 网格排序 拖动排序 插件

    这个jQuery插件允许用户通过简单的拖放操作,调整页面上元素的垂直顺序,提升了用户的交互性和操作性。 其次,"网格排序"则是将元素以网格的形式进行排列,用户可以通过拖动来改变元素在网格中的位置。这种功能在...

    jQuery分页排序插件.zip

    4. 更新界面:当数据发生变化时,如用户切换页面、排序或过滤,插件应实时更新显示的内容。 总结来说,jQuery分页排序插件以其灵活性和易用性,成为前端开发中的得力助手。它通过DOM操作、事件监听和数据处理等手段...

    JS控制分类排序

    在网页开发中,JavaScript(JS)是一种至关重要的脚本语言,它允许我们实现动态交互效果,包括对数据的处理和...无论是在简单的网页还是复杂的应用中,JS控制的分类排序都能提高用户体验,使数据展示更加直观和有序。

Global site tag (gtag.js) - Google Analytics