可保存的拖拽排序、拖拽排序、拖拽排序,重要的说三遍！
本帖最后由 gczxxu 于 2022-11-24 17:46 编辑补个提醒，以下代码只支持手机版的图文列表，PC端的，对应修改 CSS名称即可，代码中已用 重点 注释出来了
话说格子经过多次快速升级后，越来越好用（说老实话。。我是直接从7跳到了8.103了，中间忙，没空试其它版本），怎么才能更好的仿原生APP也提上了学习日程。今天给大家带来仿原生APP的其中一个内容：拖拽排序，这里只演示图文列表的实现，其它的表格等可根据需要自行实现。
所需要的工具：
Sortable.js调用链接
还需要一点JS基础和CSS基础
图文列表所在页面的加载代码：图文列表组件CSS中加入 DragSort 样式名称
Forguncy.Page.bind("pageDefaultDataLoaded", function (arg1, arg2) {
RestTable("sfdsf");
setTimeout(
function (props) {
FillNum();
let el = document.querySelector('.DragSort .repeater-container')//重点：选择包裹器。如果是表格，则是对应 table元素
var sortable = new Sortable(el, {
handle: ".handle",// 拽手柄，可以设置在图片或按钮等组件上
animation: 150,//设置动画时长
// Element dragging started
onStart: function (/**Event*/evt) {
evt.oldIndex;
},
// Element dragging ended
onEnd: function (/**Event*/evt) {
var lis = $(".repeater-container .repeater-item");//重点：选择可拖拽的队列。如果是表格，则是对应 tr 元素
sortarr = new Array;
// 拖拽完毕后重新设置序号，使其连续
for (var i = 0; i < lis.length; i++) {
var no = $(lis).find("input:eq(0)");//重点：临时序号元素，也可以用其它DOM元素替代，看自己需要
no.val(i);
// 利用KV对象临时保存排序情况，待退出时写入表格并提交
var sortobj = {
key: $(lis).find(".sortnum label").textContent,
value: i
}
sortarr.push(sortobj);
}
console.log(sortarr);
// ReplaceTable("ddd",sortarr);
}
});
},
500,
)
});
function FillNum(){
var lis = $(".repeater-container .repeater-item");
for (var i = 0; i < lis.length; i++) {
var no = $(lis).find("input:eq(0)");
no.val(i);
}
}
全局代码：这里默认都数据表组件名均为"表格1"，数据表排序字段名均为"序号"
var sortarr=new Array();
function ReplaceTable(tablename, arrobj) {
tablename = "表格1";
var page = Forguncy.Page;
var listview = page.getListView(tablename);
var count = listview.getRowCount();
arrobj.forEach(ele => {
listview.setValue(ele.key,"序号",ele.value);
});
}
function RestTable(tablename){
tablename = "表格1";
var page = Forguncy.Page;
var listview = page.getListView(tablename);
var count = listview.getRowCount();
for (let i = 0; i < count; i++) {
// const ele = array;
listview.setValue(i,"序号",i);
}
}
操作步骤：
新建一页面，放图数据表和图文列表组件，并在表组增加一个"排序"列(如图)
编辑图文列表模板，拖拽图标设置CSS名称为handle，排序组件设置为输入框，并根据自己喜好更改样式
在退出当前页面时，执行以下命令，这里偷懒了。表格名称在前面代码中被写死。这里的 ddd 无含义。
然后呢。没有然后了。。就这么简单愉快的结束了。。运行一下，试试吧。
"快捷菜单"中执行上图命令，"退出排序"为直接退出或返回，放弃排序操作
下面放上demo，欢迎大家研究
占个座儿.许总牛逼. 牛人啊，可以的话也出个表格的上下移动的教程呗 牛呀 那请问一下如何能让他保存这个排序后的业务逻辑呢 本帖最后由 gczxxu 于 2022-11-24 11:08 编辑
mfkpie8 发表于 2022-11-24 10:59
牛呀 那请问一下如何能让他保存这个排序后的业务逻辑呢
可以看一下 DEMO里排序菜单 按钮中已实现。。这样可以避免在交互时保存造成的效率低下。。。。 tominson 发表于 2022-11-24 10:53
牛人啊，可以的话也出个表格的上下移动的教程呗
同理啊。。操作图文列表。实质还是操作表格。。同理的情况下，组合复选框也可以。。 gczxxu 发表于 2022-11-24 11:07
可以看一下 DEMO里排序菜单 按钮中已实现。。这样可以避免在交互时保存造成的效率低下。。。。
那更新业务要怎么写呢当前行？ 厉害的！Sortable.js是好东西，之前接触过，一直不知道怎么把它用到活字格，学习了 mfkpie8 发表于 2022-11-24 11:13
那更新业务要怎么写呢当前行？
这个代码排序后会，当点击快捷菜单 按钮，会自动保存写入表格，具体操作看按钮下的代码 lovert 发表于 2022-11-24 11:24
厉害的！Sortable.js是好东西，之前接触过，一直不知道怎么把它用到活字格，学习了
我也是抄来改改用的。。。。。。:P