请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

gczxxu

高级会员

40

主题

299

帖子

1357

积分

高级会员

积分
1357
gczxxu
高级会员   /  发表于:2022-11-24 09:49  /   查看:437  /  回复:23
本帖最后由 gczxxu 于 2022-11-24 17:46 编辑

补个提醒,以下代码只支持手机版的图文列表,PC端的,对应修改 CSS名称即可,代码中已用 重点 注释出来了

话说格子经过多次快速升级后,越来越好用(说老实话。。我是直接从7跳到了8.103了,中间忙,没空试其它版本),怎么才能更好的仿原生APP也提上了学习日程。今天给大家带来仿原生APP的其中一个内容:拖拽排序,这里只演示图文列表的实现,其它的表格等可根据需要自行实现。

1669255048_clip.gif975467529.png


所需要的工具:
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")[0].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[index];
        listview.setValue(i,"序号",i);
    }
}

操作步骤:
新建一页面,放图数据表和图文列表组件,并在表组增加一个"排序"列(如图)
15P603)@{S0X{3%]D$S{{~U.png324571532.png
编辑图文列表模板,拖拽图标设置CSS名称为handle,排序组件设置为输入框,并根据自己喜好更改样式
0L0~HDDL@WZGX8~XG9}AMQ4.png804767455.png
在退出当前页面时,执行以下命令,这里偷懒了。表格名称在前面代码中被写死。这里的 ddd 无含义。
)]B171{`ZR7{]9ZK[1S189Q.png103537596.png
然后呢。没有然后了。。就这么简单愉快的结束了。。运行一下,试试吧。
"快捷菜单"中执行上图命令,"退出排序"为直接退出或返回,放弃排序操作
V0SB5H{[6%]3LF$O[{NYC9X.png526299743.png

下面放上demo,欢迎大家研究



7V]73N6X@6XJR}9[}W$I@JT.png39638365.png

拖拽demo.fgcc

3.12 MB, 下载次数: 37

评分

参与人数 3金币 +3000 满意度 +5 收起 理由
Nancy.Yin + 1000 赞一个!
lovert + 5
Simon.hu + 2000 赞一个!

查看全部评分

23 个回复

倒序浏览
桂花酒酿丸子悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2022-11-24 10:27:11
沙发
占个座儿.许总牛逼.
回复 使用道具 举报
tominson
高级会员   /  发表于:2022-11-24 10:53:04
板凳
牛人啊,可以的话也出个表格的上下移动的教程呗
回复 使用道具 举报
mfkpie8
银牌会员   /  发表于:2022-11-24 10:59:54
地板
牛呀 那请问一下如何能让他保存这个排序后的业务逻辑呢
回复 使用道具 举报
gczxxu
高级会员   /  发表于:2022-11-24 11:07:56
5#
本帖最后由 gczxxu 于 2022-11-24 11:08 编辑
mfkpie8 发表于 2022-11-24 10:59
牛呀 那请问一下如何能让他保存这个排序后的业务逻辑呢

可以看一下 DEMO里  排序菜单 按钮中已实现。。这样可以避免在交互时保存造成的效率低下。。。。
回复 使用道具 举报
gczxxu
高级会员   /  发表于:2022-11-24 11:10:29
6#
tominson 发表于 2022-11-24 10:53
牛人啊,可以的话也出个表格的上下移动的教程呗

同理啊。。操作图文列表。实质还是操作表格。。同理的情况下,组合复选框也可以。。
回复 使用道具 举报
mfkpie8
银牌会员   /  发表于:2022-11-24 11:13:30
7#
gczxxu 发表于 2022-11-24 11:07
可以看一下 DEMO里  排序菜单 按钮中已实现。。这样可以避免在交互时保存造成的效率低下。。。。

那更新业务要怎么写呢当前行?
回复 使用道具 举报
lovert
高级会员   /  发表于:2022-11-24 11:24:32
8#
厉害的!Sortable.js是好东西,之前接触过,一直不知道怎么把它用到活字格,学习了
回复 使用道具 举报
gczxxu
高级会员   /  发表于:2022-11-24 11:39:53
9#
mfkpie8 发表于 2022-11-24 11:13
那更新业务要怎么写呢当前行?

这个代码排序后会,当点击快捷菜单 按钮,会自动保存写入表格,具体操作看按钮下的代码
回复 使用道具 举报
gczxxu
高级会员   /  发表于:2022-11-24 11:42:11
10#
lovert 发表于 2022-11-24 11:24
厉害的!Sortable.js是好东西,之前接触过,一直不知道怎么把它用到活字格,学习了

我也是抄来改改用的。。。。。。
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册