Methodot低代码开发教程——玩转表格增删改查分页

原创

已于 2023-06-28 16:58:13 修改 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#低代码 #数据库 #前端 #javascript #mysql

于 2023-06-28 16:08:40 首次发布

4.2 表格配置新增一行，保存事件绑定js函数

5.4 删除同理，以下直接提供代码，可自行操作

6、表格数据的份分页

6.1 分享下Methodot低代码这里的分页逻辑

6.2 查看分页查询

6.3 实战演示

1、产品介绍

Methodot是一款面向研发使用的一站式云原生开发及应用托管平台，产品内有大量开箱即用的服务和开发工具，例如：

支持开发团队进行微服务架构设计（例如一个袜子商店管理系统），服务参数以模块的形式传递

支持绑定git、镜像、代码进行云原生模式开发及部署

无需额外配置编译环境，大量开箱即用的环境模板，开箱即可云端编码，编码结束后推送git保存

支持低代码应用开发，快速开发企业及团队内部工具

大量已安装的中间件等工具，开箱即用

好了，通过上面对表格的一些功能介绍，接下来分享下Methodot低代码里面的Table组件使用技巧，结合看完这个案例，你可以学会：

数据源的使用（本次案例使用的是mysql为例）
表格数据的增加（行更新模式）
表格数据的修改（行更新模式）
表格数据的删除（行更新模式）
表格数据的查询（当然啦）
表格数据的分页（亮点🌟）

话不多说，进入实战环节。

2、连接数据源

2.1 新增数据源

在Methodot中创建一个新的应用后，选择创建PC端应用

在应用的左侧工具栏的数据源中选择新增，选择mysql

2.2 填写数据源信息

分别填写Mysql数据源的主机、端口、数据库名、用户名和密码（本次案使用的是methodot的云数据库）

之后点击右下角的测试，测试无误后，点击保存

案例的sql文件可以点击下载学习

/*
 Navicat Premium Data Transfer

 Source Server         : cloudDB
 Source Server Type    : MySQL
 Source Server Version : 50736
 Source Host           : 933b6ed736ba.c.methodot.com:30962
 Source Schema         : pageplug

 Target Server Type    : MySQL
 Target Server Version : 50736
 File Encoding         : 65001

 Date: 09/06/2023 19:00:32
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户名',
  `power` int(255) NULL DEFAULT NULL COMMENT '力量',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 25 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '萧炎', 100);
INSERT INTO `user` VALUES (6, '美杜莎', 99);
INSERT INTO `user` VALUES (7, '薰儿', 99);
INSERT INTO `user` VALUES (8, '海波东', 80);
INSERT INTO `user` VALUES (9, '小医仙', 98);
INSERT INTO `user` VALUES (10,