拖拽排序
拖拽排序
文件
目录
效果
html
copy<!DOCTYPE html>
<html lang="en">
<head>
<link href="./jquery-ui.min.css" rel="stylesheet">
<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery-ui.min.js"></script>
</head>
<body>
<div class="card-body">
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Short name</th>
<th>Age</th>
<th>Hometown</th>
<th>School</th>
<th>Operation</th>
</tr>
</thead>
<tbody id="myBody">
<tr data-id="1">
<td>1</td>
<td>11</td>
<td>111</td>
<td>1111</td>
<td>11111</td>
<td>111111</td>
<td>1111111</td>
</tr>
<tr data-id="2">
<td>2</td>
<td>22</td>
<td>222</td>
<td>2222</td>
<td>22222</td>
<td>222222</td>
<td>2222222</td>
</tr>
<tr data-id="3">
<td>3</td>
<td>33</td>
<td>333</td>
<td>3333</td>
<td>33333</td>
<td>333333</td>
<td>3333333</td>
</tr>
<tr data-id="4">
<td>4</td>
<td>44</td>
<td>444</td>
<td>4444</td>
<td>44444</td>
<td>444444</td>
<td>4444444</td>
</tr>
<tr data-id="5">
<td>5</td>
<td>55</td>
<td>555</td>
<td>5555</td>
<td>55555</td>
<td>555555</td>
<td>5555555</td>
</tr>
</tbody>
</table>
</div>
<script>
$("#myBody").sortable();
$("#myBody").disableSelection();
$("#myBody").on("sortupdate", function (e, ui) {
var data = [];
$("#myBody tr").each(function (index, item) {
data.push({
id: $(item).data("id"),
"sort": index
});
$(this).children().first().html(index+1);
});
console.dir(data);
//发送请求
/*$.post('{{ADMIN_PATH}}/sort',{"data":data},function (r) {
if(r.error == 0){
alert('successfully');
parent.layer.closeAll();
parent.location.reload();
}else{
alert('error: '+r.msg);
}
});*/
});
</script>
</body>
打印的data
copyArray(5)
0: {id: 2, sort: 0}
1: {id: 1, sort: 1}
2: {id: 3, sort: 2}
3: {id: 4, sort: 3}
4: {id: 5, sort: 4}
length: 5
php
copy<?php
public function sort($param)
{
$validator = Validator::make($param, [
'data' => 'bail|required|array',
'data.*.id' => 'bail|integer',
'data.*.sort' => 'bail|integer',
]);
if ($validator->fails()) {
return $this->responseInvalidParams('参数错误');
}
DB::beginTransaction();
try {
foreach ($param['data'] as $k=>$v) {
$model = $this->baseModel::find($v['id']);
if (!$model) {
throw new \Exception($v['id'] . ' ID不存在');
}
$model->sort = $v['sort'];
$model->save();
}
DB::commit();
}catch(\Exception $e){
DB::rollBack();
\Log::error('排序失败：'.$e->getMessage());
return $this->responseInvalidParams('operation failed');
}
return $this->responseSuccess();
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构