miniUI的增删查改操作心得及踩坑总结（1）

最新推荐文章于 2022-10-24 12:20:14 发布

CodeZdx

最新推荐文章于 2022-10-24 12:20:14 发布

阅读量5k

点赞数

分类专栏： miniUI Javascript

本文链接：https://blog.csdn.net/CodeZdx/article/details/81560857

版权

本文分享了一次使用miniUI企业级前端框架实现表格增删查改功能的实习项目经验，包括本地数据操作，年龄条件样式显示，以及部分操作中遇到的问题和解决方法。特别提醒，所有操作均基于本地数据，未涉及Ajax交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我在实习公司做的一个小Demo，说明了miniUI企业型前端框架表格表单中的一些小问题。仅供一些像我一样的初学者借鉴，一起学习。

（注：此项目里的操作均为本地数据，没有涉及Ajax，所以请看清前提再借鉴学习。）

项目说明：制作一个表格，包括增删查改功能，年龄小于23岁的数据行用红色标记。删除和查找操作在本页面执行，添加和编辑功能弹出子页面执行。

界面展示（在chrome浏览器下）：

具体操作：

（1）不选中数据行的情况下，点击删除

（3）选中id=4的记录，点击删除

（4）点击确定，会删除记录，页面不会刷新

（5）点击添加，弹出子页面（注：此处的手机号码是miniUI校验的一个正则表达式测试用例，数据不会传到父页面）

（6）添加信息

（7）点击取消数据则不会保存，点击确定出现如下页面，出现新添加的数据

（8）选中一条数据后，点击编辑按钮，若是不选择数据，则出现第（1）步的情况。这里我们选择id=3的数据行

这里的id我设置的是不可编辑状态，为了方便观察，我们改变数据行的年龄值，使其大于23看看颜色是否发生变化。

（9）

（10）点击取消则不会保存修改，点击确定，我们看到数据行从红色变为黑色，编辑成功

（11）名字的模糊查询

（12）根据年龄过滤数据行

上传代码给大家看一下，写的不好多多指教。我是直接把js代码写在了<script>标签里，后来懒得改了，大家不要学习我这种坏习惯。一共两个文件：

主页面 mini_table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org

最低0.47元/天解锁文章