jquery 拖动排序插件tableDnD

table拖拽排序并保存数据库

①：引入jquery.js以及<script type="text/javascript" src="${basePath}/js/jquery/jquery.tablednd_0_5.js"></script>

②：在页面每一行后面加入原始数据的id和显示顺序

<script langugage="javascript">
initSeqArray.push("${id}_${showSeq}");
</script>

③：在页面上添加保存拖拽后保存顺序的按钮

<input	type="button" value="保存顺序" class="ImgButtonLong" onClick="dosaveSeq();">

为每一条记录的tr添加id

<tr id="${id}_${showSeq}">

③：初始化插件

var initSeqArray = new Array();
var fieIdSeqArray;
$(document).ready(function(){
//为table绑定排序事件
$("#table").tableDnD({
onDragClass:"myDragClass",
onDrop:function(table,row) {
var rows = table.tBodies[0].rows;
fieIdSeqArray = new Array();
flag = 1;
for (var i=0; i<rows.length; i++) {
fieIdSeqArray.push(rows[i].id);
}
}
});
});

④：ajax保存顺序方法

function dosaveSeq() {
if(fieIdSeqArray != undefined){
var t1 = fieIdSeqArray.join(",");
var t2 = initSeqArray.join(",");
if(flag == 1 && t1 != t2) {
$.ajax({
type: "POST",
url: "${basePath}/***/sortIndxSeq.action",
data: 'sort='+fieIdSeqArray,
dataType: "html",
success: function(msg) {
if(msg == initSeqArray.length) {
alert("字段序列修改成功！");
location.href = "${basePath}/888/queryIndex.action?;
}else {
alert("字段序列修改失败");
}
}
});
}else {
alert("未发现变更记录");
}
}else {
alert("未发现变更记录");
}
}

⑤：action中先通过request获取参数sort进行分割，最后返回修改顺序的记录数

String[] array = sort.split(",");
int count = 0;
for(int i=0;i<array.length;i++){
String[] tmp = array[i].split("_");
count = count + this.jdbcTemplate.update("update **** set SHOW_SEQ="+i+" where ID="+tmp[0]);
}