jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽，按列排序，并可以保存排序后的结果

JSP表格排序

最新推荐文章于 2021-10-11 00:10:26 发布

strive

最新推荐文章于 2021-10-11 00:10:26 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

文章标签： table jquery function stylesheet button

本文链接：https://blog.youkuaiyun.com/liuzhigang1237/article/details/6556906

本文介绍了一个使用JSP实现的表格排序及拖拽排序功能。通过整合jQuery插件Tablesorter 2.0，实现了表格数据的自动排序和拖拽排序功能，并通过AJAX从服务器获取数据，最终将排序结果保存到服务器。

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">

<head>

</style>

<script type="text/javascript" src="../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.tablednd_0_5.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>
<script type="text/javascript">
var isFirst=true;
function sorttableanddrag(tableid){
//绑定顺序不能改变，因为排序需要先清空之前绑定属性，此时需要重新绑定
  //$("#options").tablesorter({sortList: [[0,0]]});
  $("#"+tableid).tablesorter({ widgets: ['zebra']});
   //支持拖拽
  $("#"+tableid).tableDnD({
             onDragClass: 'myDragClass'
            });
}
//获取数据
function getData(){
   $.ajax({
       type: "POST",
       url: "http://localhost:8080/drag/HospitalController",
       data: "method=find",
       success: function(data){
         var arrObj = eval(data);
         var tbody=$("#tbodysorter-demo");
         tbody.empty();
         for(var i=0;i<arrObj.length;i++){
              //在tr中创建td，然后赋值
              var tr=$("<tr id="+arrObj[i].id+"></tr>")
              var td0=$("<td>"+arrObj[i].id+"</td>");
              var td1=$("<td>"+arrObj[i].name+"</td>");
              var td2=$("<td>"+arrObj[i].sortid+"</td>");
              tr.append(td0);
              tr.append(td1);
              tr.append(td2);
              tbody.append(tr);
          }
       //获取完成时候才能调用排序和拖拽绑定
            sorttableanddrag("tablesorter-demo");
         }

  });
}
//保存数据
function saveData(){
//获取数组
var mytable=document.getElementById('tablesorter-demo');
    var result=eval(mytable.getElementsByTagName('tr'));
    var sortresult="";
for(var i=0;i<result.length;i++){
   //根据排序后的id和序列进行存入map中到后台进行更新
    //result[i]表示的是当前的元素的id（该id存放的是各个元素之间的主键）
    if(result[i].id!="-1"){
    sortresult=sortresult+","+result[i].id;
    }
     }
    sortresult=sortresult.substring(1,sortresult.length);
    alert(sortresult);
  $.ajax({
        type: "POST",
        url: "http://localhost:8080/drag/HospitalController",
        data: "method=save&result="+sortresult,
        success: function(data){
          var arrObj = eval(data);
          alert(arrObj);
         if(true==arrObj){
          alert("顺序保存成功");
          }else{
           alert("顺序调整失败");
          }
          }
   });
}
//取消排序
function cancelData(){
   $('#sortable').sortable('cancel');
}

//定义样式
$(document).ready(function() {
color();
        $("#tablesorter-demo").tableDnD({
           onDrop:function(table,row){
           var b = $(row).children().eq(0).text();
           color();
            }
        });

    });

    function color()
    {
       var tbody = $("table[id='tablesorter-demo'] tr");
       tbody.each(function(index){
          var cc = index%2;
          if(0==cc)
            {
            $(this).removeClass();
            $(this).addClass("aa");
            }
           else
           {
           $(this).removeClass();
            $(this).addClass("bb");
           }
       });
    }
   </script>
</head>
<body >