Layui表格单元个编辑事件
时间:2022-07-25
本文章向大家介绍Layui表格单元个编辑事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Layui表格单元个编辑事件
开发工具与关键技术:MVC
作者:盘洪源
撰写时间:2019年6月26日星期三
在做到一个页面的时候我需要做到一个需求就是改变表格里面的字段为数量的单元格的数量然后后面的金额就会自动刷新。
我做的这个效果可能不是很好,就是因为这个我改变过后的数量一样要保存的这条数据上,数量也是一样,所以我这个效果就是改变数量后然后把数量传到后台再通过一个计算把金额计算出来再刷新表格,从而达到一个刷新金额的效果,就是这个效果可能会有点不怎么好看,就是刷新表格的时候会闪一下,这个效果有点不好。
首先就是要了解laui表格的单元格编辑事件
这是layui官网对单元格编辑的解说。
以下这个是我做的这个例子,就是通过获取到改变后单元格的值,然后通过post提交把数据传到后天,然后进行剩下的操作。
//主页面表表格单元格编辑改变事件
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"
})
}
})
})
把数量改变后的值传到后台,这就简单多了,然后就通过原价剩余数量就可以得到金额了,
item.TotalMoney
= values * item.DropPrice;
然后就是将你的这条数据的数量和金额都需要改变以下,然后再进行一个表格的刷新就行。
- Codeforces 714A Meeting of Old Friends
- Code forces 719A Vitya in the Countryside
- Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍
- HUST 1555 A Math Homework
- HUST 1541 Student’s question
- HDU 3785 寻找大富翁
- Hadoop数据分析平台实战——250JSSDK数据收集引擎编写离线数据分析平台实战——250JSSDK数据收集引擎编写
- HDU 2564 词组缩写
- 约瑟夫问题方法总结
- 欧里几德及扩展欧里几德算法
- Hadoop数据分析平台实战——260用户数据ETL离线数据分析平台实战——260用户数据ETL
- # Hadoop离线数据分析平台实战——230项目数据存储结构设计Hadoop离线数据分析平台实战——230项目数据存储结构设计
- ECJTUACM16 Winter vacation training #5 题解&源码
- Codeforces 716A Crazy Computer
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【Vue进阶】手把手教你在 Vue 中使用 JSX
- (译)SDL编程入门(1)Hello SDL
- Django使用Channels实现websocket
- (译)SDL编程入门(6)扩展库SDL_image
- 牛客网剑指offer-2
- 牛客网剑指offer-1
- (译)SDL编程入门(5)Surface 优化和软拉伸
- (译)SDL编程入门(4)按键操作
- webpack实战——生产环境配置【中】
- MongoDB权威指南学习笔记(1)--基础知识与对文档的增删改查
- 利用 Shell 脚本实现邮件监控 Linux 系统的内存
- MongoDB权威指南学习笔记(4)--应用管理和服务器管理
- MongoDB权威指南学习笔记(3)--复制和分片
- 工作10年后,再看String s = new String("xyz") 创建了几个对象?
- MongoDB权威指南学习笔记(2)--设计应用