Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Layui表格单元个编辑事件

Layui表格单元个编辑事件

作者头像
PHY_68
发布于 2020-09-16 06:35:53
发布于 2020-09-16 06:35:53
2.2K00
代码可运行
举报
文章被收录于专栏:laopan技术分享laopan技术分享
运行总次数:0
代码可运行

Layui表格单元个编辑事件

开发工具与关键技术:MVC

作者:盘洪源

撰写时间:2019年6月26日星期三

在做到一个页面的时候我需要做到一个需求就是改变表格里面的字段为数量的单元格的数量然后后面的金额就会自动刷新。

我做的这个效果可能不是很好,就是因为这个我改变过后的数量一样要保存的这条数据上,数量也是一样,所以我这个效果就是改变数量后然后把数量传到后台再通过一个计算把金额计算出来再刷新表格,从而达到一个刷新金额的效果,就是这个效果可能会有点不怎么好看,就是刷新表格的时候会闪一下,这个效果有点不好。

首先就是要了解laui表格的单元格编辑事件

这是layui官网对单元格编辑的解说。

以下这个是我做的这个例子,就是通过获取到改变后单元格的值,然后通过post提交把数据传到后天,然后进行剩下的操作。

//主页面表表格单元格编辑改变事件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
layuiTable.on('edit(Adjustment)', function (obj) {

                    //console.log(obj.value);
//得到修改后的值

                    //console.log(obj.field);
//当前编辑的字段名

                   // console.log(obj.data); //所在行的所有相关数据  

                    var data = obj.data;

                    var CommodityDetailID =
data.CommodityDetailID;

                    var value = obj.value;

                   
$.post("/OtherAffiairs/Adjustment/Savesession", {
CommodityDetailID: CommodityDetailID, value: value }, function (msg) {

                        if (msg.State == true)
{

                            Adjustment =
layuiTable.reload("Adjustment", {

                                url:
"/OtherAffiairs/Adjustment/SessionShop"

                                

                            })

                        }

                    })

                })

把数量改变后的值传到后台,这就简单多了,然后就通过原价剩余数量就可以得到金额了,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
item.TotalMoney
= values * item.DropPrice;

然后就是将你的这条数据的数量和金额都需要改变以下,然后再进行一个表格的刷新就行。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/06/27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Layui treeTable相关
layui官网是没有treeTable这个功能的,需要下载额外的插件实现,幸运的是有符合layui风格的treeTable插件,此篇围绕树状表格讲述。 treeTable官网指路:https://gitee.com/whvse/treetable-lay/wikis/pages
全栈程序员站长
2022/08/23
1.9K0
Layui treeTable相关
Django与LayUI 框架实现表格分页
layui 框架与BootCSS框架相似都属于前端美化框架,区别在于BootCSS更加专业,而LayUI则更多的是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。
王瑞MVP
2022/12/28
2.6K0
Django与LayUI 框架实现表格分页
【前端系列-4】layui表格集成select选择框和switch开关
在前文中,我们已经初步感受了layui表格使用自定义模板的基础操作。现在,在自定义模块应用的基础上,我们进一步丰富layui表格对其他组件的集成。
云深i不知处
2020/09/16
4.3K0
使用LayUI操作数据表格「建议收藏」
此时点击查询按钮,会将keyword这个关键字传到后端,接下来就是自己处理查询关键字业务了。
全栈程序员站长
2022/09/20
2.6K0
使用LayUI操作数据表格「建议收藏」
LayUI之旅-数据表格
layui的数据表格是使用频率非常高的组件,在入门篇,我们已经大致了了解了数据表格的方法级渲染,接下来我们深入研究和学习layui-table组件的使用方法。
Yiiven
2022/12/15
4.6K0
layui与VFP搭配完成单表增删查改,勇于尝试才好玩
由职业前端倾情打造,面向全层次的前后端开发者,易上手开源免费的 Web UI 组件库
加菲猫的VFP
2024/02/27
1850
layui与VFP搭配完成单表增删查改,勇于尝试才好玩
LayUI之旅-入门
最近要做一个项目,被要求前端要使用layui,甲方爸爸很牛逼的好吗,既然要求这样了,二话不说,撸起袖子就开干,由于从来没用过layui这个框架,对框架的不熟悉导致在使用的过程中是步步都是障碍啊,还是那句话“好记性不如烂笔头”,那就记录一下都遇到了些什么问题以及一些用法吧。
Yiiven
2022/12/15
2.9K0
layui表格套模块(表格)
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
生南星
2019/07/25
16.3K16
layui表格套模块(表格)
layui table表格 监听头删除不请求后台
表格js function getTable() { var table = layui.table //表格 var username=$("#username")
用户5899361
2020/12/07
1.6K0
改变layui表格样式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PHY_68
2020/09/16
2.9K0
改变layui表格样式
LayUI前框框架普及版
获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
张哥编程
2024/12/13
2810
【前端系列-2】layui+springboot实现表格增删改查
本文将演示如何使用Springboot(后端框架)和layui(前端框架)将数据库中的数据渲染到前端页面,以及对前端页面的数据实现增删改。
云深i不知处
2020/09/16
6.9K0
前端|layui后台管理—table 数据表格
layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架,不需要各种前端工具的复杂配置,只需面对浏览器本身。
算法与编程之美
2020/05/29
2.3K0
前端|layui后台管理—table 数据表格
layui小问题
解决办法:把<button></button>标签改为<input type="button">或者在<button>中添加属性 type="button"
生南星
2020/02/13
1.7K0
layui小问题
【学习笔记】解决layui的table分页没有checkbox记忆功能!!!
layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,非常适合界面的快速开发。
用户5224393
2019/08/13
5.9K2
layui 异步数据排序重加载
<table class="layui-table" id="userList-table" lay-filter="userList-table"></table>
Laikee
2022/04/25
5510
layui 表格绑定删除、批量删除、增加的操作jscontroller
js layui.config({ version: '1560414887155' //为了更新 js 缓存,可忽略 }); layui.use(['layda
用户5899361
2020/12/07
3.6K1
Layui 的那些事
前端框架之前接触过不少,目前在用Layui比较顺手;不过也遇到不少雷和坑。这里就分享一下那些雷和坑。。首先说一下表格中有时候ID或NAME是无法取值,只能通过lay-filter指定一个name,然后获得。例如:
谭广健
2023/12/20
3010
python测试开发django-163.bootstrap-table 表格单元格行内编辑
bootstrap-table 表格行内编辑网上很多资料都是用第三方bootstrap-table-editable.js和x-editable.js实现,不喜欢折腾的用插件实现最快。 我想要的需求其实很简单,直接点击表格编辑就行,不需要太多复杂的功能,官方文档上给的资料少的可怜,这方面的资料网上查阅了很多,总结来说很乱,没注释,代码不全,并且还有一些BUG。 于是花了3个晚上,头发掉了一大串,现在终于弄清楚了,整个的实现方式。
上海-悠悠
2021/11/05
2.1K0
使用antd表格组件实现日程表
20多天前,遇到一个日程表的业务需求,可以动态增加列、对单元格进行合并,结合公司的jsp项目的已有功能完成单元格的增、删、改操作。进行需求分析整理后,经过了一番查找,发现React版本的antd的表格组件功能很强大,可定制程度很高,可以助我完成这个业务需求的开发。
神奇的程序员
2022/04/10
3.7K0
使用antd表格组件实现日程表
相关推荐
Layui treeTable相关
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验