layui
layui copied to clipboard
layui
table能否增加一个拖拽行，进行排序。
议题条件
- [X] 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
- [X] 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
- [X] 我已仔细阅读： 🍀 Layui Issue 贡献指南
议题类型
功能请求
使用版本
v2.9.8
问题描述
目前总是要使用：edit进行排序，能否，我直接拖动行排序。。
业务代码
没有
截图补充
No response
浏览器
最新edge
演示地址
No response
友好承诺
- [X] 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。
参考这个示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href1="../src/css/layui.css" href="//cdn.staticfile.org/layui/2.9.6/css/layui.css" />
<style>
.ghost {
opacity: .4;
}
</style>
</head>
<body>
<table class="layui-hide" id="ID-table-demo-data"></table>
<!-- <script src="./sort.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src1="../src/layui.js" src="//cdn.staticfile.org/layui/2.9.6/layui.js"></script>
<script>
layui.use(() => {
const { table, jquery: $ } = layui;
var inst = table.render({
elem: "#ID-table-demo-data",
cols: [
[
{ field: "id", title: "ID", sort: true },
{ field: "username", title: "用户" },
{ field: "sign", title: "签名" },
{ field: "sex", title: "性别" },
{ field: "city", title: "城市" },
{ field: "experience", title: "积分", sort: true }
]
],
data: createData(),
done: function () {
var tbv = this.elem.next();
var tbody = tbv.find('tbody');
new Sortable(tbody[0], {
ghostClass: "ghost",
onEnd: function (evt) {
var newIndex = evt.newIndex;
var tc = table.cache['ID-table-demo-data'];
var currentNode = tc.splice(evt.oldIndex, 1)[0];
tc.splice(newIndex, 0, currentNode)
table.reloadData('ID-table-demo-data', {
data: tc
});
}
});
}
});
})
function createData() {
var data = []
for (var i = 0; i <= 10; i++) {
data.push({
"id": 10000 + i,
"username": "user-" + i,
"sex": "女",
"city": "城市-" + i,
"sign": "签名-0111111111",
"experience": 255,
"logins": 24,
"words": 82830700,
"classify": "作家",
"score": 57 + i
})
}
return data;
}
</script>
</body>
</html>
