码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 产品-Axure9(英文版),中继器(Repeater)实现表格内容的增删查改(CRUD)


    文章目录

    • 1.演示
      • 1.1添加
      • 1.2删除
        • 1.2.1删除所选中的行
        • 1.2.2表格内单独删除
      • 1.3修改
        • 1.3.1 表格外修改
        • 1.3.2 表格内修改
      • 1.4查询
        • 1.4.1单个条件查询
        • 1.4.2所有关键字查询
    • 2.操作
      • 2.1添加
      • 2.2删除
        • 2.2.1表格内单独删除
        • 2.2.2 删除所选中的行
      • 2.3修改
        • 2.3.1 表格内修改
        • 2.3.2 表格外修改
      • 2.4查询
        • 2.4.1 单个条件查询
        • 2.4.2 所有关键字查询
      • 待解决问题: 选中删除时,选择用Toggle时,并不能同时取消其mark的属性,点击删除,依旧会被删掉。

    1.演示

    1.1添加

    在这里插入图片描述

    1.2删除

    1.2.1删除所选中的行

    在这里插入图片描述

    1.2.2表格内单独删除

    在这里插入图片描述

    1.3修改

    1.3.1 表格外修改

    在这里插入图片描述

    1.3.2 表格内修改

    在这里插入图片描述

    1.4查询

    1.4.1单个条件查询

    这里是user这一条件查询,查询其他关键字时并不管用
    在这里插入图片描述

    1.4.2所有关键字查询

    只要是repeater中的内容,在输入框内输入,包含关键字的行数就会列出
    在这里插入图片描述

    2.操作

    制作简单的表格内容,

    2.1添加

    制作中继器,中继器中表格和内容对应,命名要规范
    拖入repeater后,进行双击即可编辑图形。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    给add按钮添加交互事件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    点击此处的ADD ROWS,进行函数的设置
    在这里插入图片描述
    依次点击下列,第一个user的传参就完成了。
    在这里插入图片描述
    需要依次设置后面两个参数
    在这里插入图片描述
    点击OK后,会显示增加1行的样式
    在这里插入图片描述
    到此为止,进行预览,添加的功能已做完。

    2.2删除

    2.2.1表格内单独删除

    中继器(后面用repeater称呼)中添加新的列option在这里插入图片描述
    在repeater中增加一个del Button
    在这里插入图片描述
    效果如图
    在这里插入图片描述
    给行内按钮添加交互事件
    在这里插入图片描述
    在这里插入图片描述
    确认后,进行预览,到此为止,行内的删除功能已完成

    2.2.2 删除所选中的行

    新增一个Button ,意思为删除选中的行
    在这里插入图片描述
    双击进入Repeater, 选中四个表格,添加选中后的样式
    在这里插入图片描述

    四个表格变成一个Group(右键能找到),命名AllRows
    在这里插入图片描述
    对这个AllRows添加交互事件
    在这里插入图片描述
    对删除Button添加交互事件
    在这里插入图片描述
    在这里插入图片描述
    到此为止,删除选中的行功能已经实现。

    2.3修改

    2.3.1 表格内修改

    在Repeater内进行添加Button
    在这里插入图片描述
    并在其中拖入文本框
    在这里插入图片描述
    三个都进行命名
    在这里插入图片描述
    默认三个输入框为隐藏。讲saveB 的按钮与editB进行重合,saveB默认为隐藏,
    在这里插入图片描述
    对saveB添加交互事件
    按顺序进行传参
    在这里插入图片描述
    注意上述的第8步骤,在下面的两个参数中,对照的不同的,下面两个就分别是PwdE与SexE了。
    原理就是将输入框内的数字传给Repeater.
    在这里插入图片描述
    同时要对editB进行隐藏与显示的设置
    在这里插入图片描述
    editB也添加交互事件(要将本身就隐藏的文本框显示出来才能进行编辑传参,文本框相当于是媒介)
    在这里插入图片描述
    到此为止,预览后此功能已实现。

    2.3.2 表格外修改

    制作文本输入框,进行命名规范
    在这里插入图片描述
    对Edit这个Button 进行交互
    在这里插入图片描述
    在这里插入图片描述
    到此为止,预览此功能已经完成。

    2.4查询

    制作输入框,记得命名规范
    在这里插入图片描述
    这里介绍一个函数:indexof
    indexof函数indexof() 方法用于查找元素在数组中第一次出现时的索引,如果没有,则返回-1。
    语法:arr.indexof(element, fromindex=0)element 为需要查找的元素。 fromindex 为开始查找的位置,缺省默认为0。

    2.4.1 单个条件查询

    由于Col0的数据就是User的值,所以我们把User当作单个查询条件时,就设置Col0
    [[(Item.Col0.indexof(LVAR1))>-1]]
    在这里插入图片描述
    到此为止,预览后功能已实现。

    2.4.2 所有关键字查询

    给此Button添加交互
    在这里插入图片描述
    图中的逻辑最后一个Item拼写有误,以下文字这个为准
    [[(Item.Col0.indexof(LVAR1))+(Item.Col1.indexof(LVAR1)+(Item.Col2.indexof(LVAR1)))>-3]]

    在这里插入图片描述
    至此,预览功能已实现。


    待解决问题:
    选中删除时,选择用Toggle时,并不能同时取消其mark的属性,点击删除,依旧会被删掉。


    后续:
    终于写完了,写了好久,原创是真不易呜呜呜…
    其实还是有一些不足的,希望再改进,欢迎批评指正

  • 相关阅读:
    【数据结构初阶】常见的排序算法
    解决electron + react单页应用调用localhost服务失败
    对垃圾回收的简单了解
    定制 ElementPlus 主题
    1Panel:一个现代化、开源的 Linux 服务器运维管理面板
    汽车4S店如何在数字化管理下,提高市场竞争力
    Rust 所有权、引用与借用
    OkHttp相关知识(二)
    Redis核心数据结构之SDS(二)
    Hooks与事件绑定
  • 原文地址:https://blog.csdn.net/fonrye/article/details/125517901
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号