让表格数据自动保存

最新推荐文章于 2022-11-27 11:49:34 发布

weixin_44540705

最新推荐文章于 2022-11-27 11:49:34 发布

阅读量674

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44540705/article/details/97622523

本文介绍了如何在模态框内的表格中输入数据并自动保存。通过在表格中设置监听事件，结合layuiTable的失焦事件，利用JavaScript封装数据并使用POST发送到后台。在控制器端，接收并处理数据，进行条件判断和数据保存操作。每个编辑单元格需对应相应的方法，注意name属性的修改。完成设置后，数据会自动保存，如输入200会自动计算为半价100。

开发工具与关键技术：VS     让表格数据自动保存
作者：赖文扬
撰写时间：2019年7月25日

在做项目的过程中，其中有一个模块是在模态框
里面放置table表格的，然后在table表格里面输
入数据，然后自动保存成功。那么要怎样实行这一个
功能呢？首先是在模态框里面放置一个table表格，
然后再用一个function来封装绑定里面的数据，在
模态框里面就放一个table的id就行了，那些查询
出的数据就写在function的封装里面，里面的写法和
查询的写法是一模一样的。
（下面截图）
在这里插入图片描述
然后再到查询的方法里面再写一个监听行单元格的方法，
然后再layuiTable里面写上一个失去焦点事件的方法，
和加上渲染之后的表格，然后就可以在里面写代码了，
一开始用var 来传输要编辑的单元行数据，然后再用
var传输要编辑的单元行数据id，然后再用.post来封装
里面要传过去的id，最后就写要自动保存成功的提示了。
（下面截图）
在这里插入图片描述
页面这边的代码就是这样的。然后再来看看
控制器的代码是怎么写的，首先用pulic ActionResult
写，要把页面的两个id传输过来，然后用try来写
查询出数据然后再用if判断数据全等于0。
（下面截图）

然后再到if里面写实例化表格的代码，然后再赋值
再将数据转化为int类型，然后保存就行了，主要的
是要转化为int类型。
（下面截图）
在这里插入图片描述
要写多少个编辑行的单元格就要写多少个上
面的方法，但是编辑单元格的name值要改
，最后用catch点出一个错误提示就可以了。
（下面截图）

最后启动运行就可以了。

在表格里面输入200然后半票就会自动算为一半100了的。
（下面截图）
在这里插入图片描述