通过AJAX发送按JQuery UI排序的表的顺序,可以按照以下步骤进行操作:
<table id="sortableTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1-列1</td>
<td>行1-列2</td>
<td>行1-列3</td>
</tr>
<tr>
<td>行2-列1</td>
<td>行2-列2</td>
<td>行2-列3</td>
</tr>
<!-- 其他行... -->
</tbody>
</table>
$(function() {
$("#sortableTable tbody").sortable({
axis: "y", // 只允许在垂直方向排序
containment: "parent", // 限制排序范围在父元素内
update: function(event, ui) {
// 排序完成后触发的回调函数
// 在这里可以获取到排序后的表格顺序
var sortedData = $(this).sortable("toArray");
// 发送AJAX请求将排序后的数据传给后端进行处理
$.ajax({
url: "your_backend_url",
type: "POST",
data: { sortedData: sortedData },
success: function(response) {
// 处理成功后的回调函数
console.log("排序数据已成功发送至后端");
},
error: function(xhr, status, error) {
// 处理失败后的回调函数
console.error("发送排序数据时发生错误:" + error);
}
});
}
});
});
总结:通过以上步骤,你可以通过AJAX发送按JQuery UI排序的表的顺序。在前端使用jQuery UI的sortable方法初始化表格,并在排序完成后通过AJAX将排序数据发送给后端进行处理。后端根据需求进行相应的处理逻辑。这样可以实现前后端的数据交互和排序操作。
//点击追加触发
$(function(){
$("#button").click(function(){
var div_ = $("#sel").val();
var context = $("#context").val();
append(div_,context);
//$("#tab tr:not(:first)").remove();
//$("#tab tbody").empty();
$("#tab tbody").remove();
query();
});
});
//点击查询全部触发
$(function(){
$("#but").click(function(){
$("#tab tbody").remove();
//$("#tab tr:not(:first)").remove();
//$("#tab tbody").empty();
query();
});
});
//点击模糊查询触发
$(function(){
$("#query").click(function(){
var context = $("#context").val();
alert("您输入的内容为:"+context);
$("#tab tr:not(:first)").empty();
//$("table tbody").remove();
queryByContext();
});
});
//删除事件
function del(id){
var url = "testController/delModel";
$.ajax({
type: 'POST',
url: url,
data:{id: id},
dataType: 'json',
success: function(data){
alert("数据库删除成功");
$("#tab tr:not(:first)").empty();
query();
}});
};
//编辑事件
function upd(id){
var url = "";
$.ajax({
type: 'POST',
url: url,
data:{id: id},
dataType: 'json',
success: function(data){
alert("数据库编辑成功");
$("#tab tr:not(:first)").empty();
query();
}});
}
//添加方法
function append(div_,context){
$("#"+div_).append(" ");
$.get("testController/addModel",{div_id: div_, context: context }).done(function( data ) {
alert("添加到数据库成功");
});
};
//模糊查询方法
function queryByContext(){
var url = "testController/queryAllDataByContext";
$.ajax({
type: 'POST',
url: url,
data:{context:$("#context").val()},
dataType: 'json',
success: function(data){
alert("数据库查询成功");
console.log(data);
for(var i=0;i<data.length;i++){
var id = data[i].id;
var divId = data[i].divId;
var context = data[i].context;
var dtt = data[i].dtt;
//alert(id);
$("#tab thead").append(""+ div_ +" "+""+context+" ");
}
},
error:function(){
alert("数据库查询失败");
}
});
};
//查询全部方法
function query(){
var url = "testController/queryAllData";
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
success: function(data){
alert("查询成功");
con"+id+" "+""+divId+" "+""+context+" "+""+dtt+" "+"删除
领取专属 10元无门槛券
手把手带您无忧上云