首先先推荐大家在看这篇笔记时，阅读过我写的这篇 Layui表格编辑【不依赖Layui的动态table加载】

阅读过上面那篇笔记之后呢，才能更好的理解我现在所要说的这个东西

接下来废话不多说，上代码。

怕各位懒得动手，直接整理了个案例，如有访问不了代码错误，请在评论区留言，有时间处理问题。

  1. <!DOCTYPE html>
  2. <html>
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. 		<title>基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值 案例</title>
  8. 		<meta name="description" content="">
  9. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  10. 		<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css" media="all">
  11. 		<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  12. 		<script src="http://blog.aigouzhushou.com/layui-v2.4.3/layui/layui.js"></script>
  14. 		<script>
  15. 			// Author : userzf 、yirenipeng ; Upload Time: 2020/04/27 15:15
  16. 			//-----[Layui表格编辑(<td class="My_edit"></td>)] 2018-11-13
  17. 			function Layui_edit() {
  18. 				//数据可编辑
  19. 				$(".My_edit").toggle(function() {
  20. 					var text = $(this).html();
  21. 					$(this).html('<input type="text" class="layui-input layui-table-edit" value="' + text + '">');
  22. 					$(this).children("input").val("").focus().val(text);
  23. 				}, function() {
  24. 					$(this).html($(this).children("input").val());
  25. 				})
  26. 				//数据编辑失去焦点失效
  27. 				$(".layui-table-edit").live("blur", function() {
  28. 					var text = $(this).val();
  29. 					$(this).parent().html(text);
  30. 				})
  31. 			}
  32. 			//-----[Layui表格编辑END]
  34. 			/**
  35. 			 * 获取一个double值
  36. 			 * @param P_number 传入值【任意字符】
  37. 			 * @param Defaults_val 【默认值】选参
  38. 			 * @returns
  39. 			 */
  40. 			function set_double(val, Defaults_val) {
  41. 				Defaults_val = Is_null(Defaults_val) == true ? Defaults_val : 1; //默认值为空时给 1
  42. 				var reg_Tow = /^(?!0{2,})(?:\d{1,9}(\.\d+)?|10{9})$/;
  43. 				var map = {};
  44. 				if(val != undefined && val != null && val.trim() != "") {
  45. 					val = parseFloat(val);
  46. 					val = toFixed(val, 2); //保留两位小数数据格式化
  47. 					val = reg_Tow.test(val) ? val : Defaults_val; //单价
  48. 					val = val == "0.00" ? Defaults_val : val;
  49. 				} else { //默认单价
  50. 					val = Defaults_val;
  51. 				}
  52. 				return val;
  53. 			}
  55. 			/**
  56. 			 * 获取一个整数值
  57. 			 * @param P_number 传入值【任意字符】
  58. 			 * @param Defaults_val 【默认值】选参
  59. 			 * @returns
  60. 			 */
  61. 			function set_number(P_number, Defaults_val) {
  62. 				Defaults_val = Is_null(Defaults_val) == true ? Defaults_val : 1; //默认值为空时给 1
  63. 				var reg_Tow = /^(?!0{2,})(?:\d{1,9}(\.\d+)?|10{9})$/;
  64. 				if(P_number != undefined && P_number != null && P_number.trim() != "") {
  65. 					P_number = parseInt(P_number);
  66. 					P_number = reg_Tow.test(P_number) ? P_number : Defaults_val; //数量
  67. 					P_number = P_number == "0" ? Defaults_val : P_number;
  68. 				} else { //默认 值 赋值
  69. 					P_number = Defaults_val;
  70. 				}
  71. 				return P_number;
  72. 			}
  74. 			/**
  75. 			 * 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型
  76. 			 * @param e_name 【选取元素的方式】如：.a 或 #a
  77. 			 * @param type 获取数类型 int or double
  78. 			 * @param Defaults_val 默认值 选填
  79. 			 * @returns
  80. 			 * PS：最大长度 为 9 位字符
  81. 			 */
  82. 			function val_number(e_name, type, Defaults_val) {
  83. 				//焦时获取元素 当前行,当前td
  84. 				$("" + e_name + " input").live("focus", function(data) {
  85. 					window["_parent"] = $(this).parent().parent();
  86. 					window["_e"] = $(this).parent();
  87. 				})
  89. 				// 键盘按下过滤
  90. 				$("" + e_name + " input").live("keyup", function(data) {
  91. 					$(this).attr("maxlength", "9");
  92. 					var value = num_value($(this).val()); //只能输入两位数小数和整数
  93. 					$(this).val(value);
  94. 				})
  95. 				// 编辑文本框 失焦过滤
  96. 				$("" + e_name + " input").live("blur", function(data) {
  97. 					var _parent = window["_parent"];
  98. 					var _this = window["_e"];
  99. 					var val = _this.html();
  100. 					if("int" == type.toLowerCase()) {
  101. 						val = set_number(val, Defaults_val)
  102. 					} else if("double" == type.toLowerCase()) {
  103. 						val = set_double(val, Defaults_val)
  104. 					}
  105. 					//延迟赋值 【解决动态编辑赋值的bug】
  106. 					setTimeout(function() {
  107. 						_this.html(val);
  108. 					}, 10);
  109. 				})
  111. 			}
  113. 			/**
  114. 			 * toFixed(四舍五入重写)
  115. 			 * @param number
  116. 			 * @param decimal
  117. 			 * @returns
  118. 			 */
  119. 			function toFixed(number, decimal) {
  120. 				decimal = decimal || 0;
  121. 				var s = String(number);
  122. 				var decimalIndex = s.indexOf('.');
  123. 				if(decimalIndex < 0) {
  124. 					var fraction = '';
  125. 					for(var i = 0; i < decimal; i++) {
  126. 						fraction += '0';
  127. 					}
  128. 					return s + '.' + fraction;
  129. 				}
  130. 				var numDigits = s.length - 1 - decimalIndex;
  131. 				if(numDigits <= decimal) {
  132. 					var fraction = '';
  133. 					for(var i = 0; i < decimal - numDigits; i++) {
  134. 						fraction += '0';
  135. 					}
  136. 					return s + fraction;
  137. 				}
  138. 				var digits = s.split('');
  139. 				var pos = decimalIndex + decimal;
  140. 				var roundDigit = digits[pos + 1];
  141. 				if(roundDigit > 4) {
  142. 					//跳过小数点
  143. 					if(pos == decimalIndex) {
  144. 						--pos;
  145. 					}
  146. 					digits[pos] = Number(digits[pos] || 0) + 1;
  147. 					//循环进位
  148. 					while(digits[pos] == 10) {
  149. 						digits[pos] = 0;
  150. 						--pos;
  151. 						if(pos == decimalIndex) {
  152. 							--pos;
  153. 						}
  154. 						digits[pos] = Number(digits[pos] || 0) + 1;
  155. 					}
  156. 				}
  157. 				//避免包含末尾的.符号
  158. 				if(decimal == 0) {
  159. 					decimal--;
  160. 				}
  161. 				return digits.slice(0, decimalIndex + decimal + 1).join('');
  162. 			}
  164. 			/**
  165. 			 * 判断是否为空值
  166. 			 * @param val
  167. 			 * @returns
  168. 			 */
  169. 			function Is_null(val) {
  170. 				val = isNumber(val) == true ? val + "" : val; //如果是一个数字类型过滤成字符串
  171. 				return val != undefined && val != null && val.trim() != "" && val != "undefined" && val != "null" ? true : false;
  172. 			}
  174. 			/**
  175. 			 * obj 判断是否是一个数（number）
  176. 			 * @param obj
  177. 			 * @returns
  178. 			 */
  179. 			function isNumber(obj) {
  180. 				return typeof obj === 'number' && !isNaN(obj);
  181. 			}
  182. 			/**
  183. 			 * [只能输入数字和两位小数]
  184. 			 * @param value
  185. 			 * @returns
  186. 			 * @data 2019-01-14
  187. 			 */
  188. 			function num_value(value) {
  189. 				value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  190. 				value = value.replace(/^\./g, ""); //验证第一个字符是数字
  191. 				value = value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
  192. 				value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  193. 				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  194. 				return value;
  195. 			}
  196. 		</script>
  197. 	</head>
  199. 	<body>
  200. 		<form class="layui-form PcScoring" action="" lay-filter="example" style="margin-top: 10px;">
  201. 			<table class="layui-table" style="widtd: 100%; text-align: center; margin: auto;">
  202. 				<tr>
  203. 					<td style="text-align: center;">Int</td>
  204. 					<td style="text-align: center;" class="int My_edit"></td>
  205. 				</tr>
  206. 				<tr>
  207. 					<td style="text-align: center;">Double</td>
  208. 					<td style="text-align: center;" class="Double My_edit"></td>
  209. 				</tr>
  210. 			</table>
  211. 		</form>
  212. 		<script>
  213. 			$(function() {
  214. 				$.ajaxSetup({
  215. 					async: false
  216. 				});
  217. 				layui.use(['laydate', 'layer', 'form', 'util', 'table', 'element', 'flow'], function() {
  218. 					var laydate = layui.laydate;
  219. 					var flow = layui.flow;
  220. 					var util = layui.util;
  221. 					var laypage = layui.laypage;
  222. 					var form = layui.form;
  224. 					//PS:注意这里的 先后循序 !
  225. 					Layui_edit(); //开启表格layui编辑
  226. 					val_number(".int", "int", "1");
  227. 					val_number(".Double", "double", "0.5");
  228. 				})
  229. 			})
  230. 		</script>
  232. 	</body>
  234. </html>

基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值的更多相关文章

  1. Mysql数据表字段设置了默认值，插入数据后默认字段的值却为null，不是默认值

    我将mysql的数据表的某个字段设置了默认值为1,当向该表插入数据的时候该字段的值不是默认值,而是null. 我的错误原因: 对数据库的操作我使用了持久化工具mybatis,插入数据的时候插入的是整个 ...

  2. element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值

    template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...

  3. MySQL 建表时 date 类型的默认值设置

    在执行下面 SQL 语句时发现报错 CREATE TABLE `jc_site_access_pages` ( `access_date` date NOT NULL DEFAULT '0000-00 ...

  4. mysql设置text字段为not null，并且没有默认值，插入报错：doesn't have a default value

    一.问题描述 在往数据库写入数据的时候,报错: '字段名' doesn't have a default value 本来这个错误是经常见到的,无非就是字段没有设置默认值造成的.奇怪的是,我这边报错的 ...

  5. jquery表格动态增删改及取数据绑定数据完整方案

    一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...

  6. 基于layui的表格异步删除,ajax的简单运用

    h话不多说,看图,点击删除,出现确认框,然后点击确认删除,直接删除数据, 因为是基于面向过程的,没有用php框架写,所以有3个文件: 第一个文件:data.php:用于从数据库中获取数据 <?p ...

  7. Layui数据表格动态加载操作按钮

    效果: 方法一:绑定模版选择器 <div class="layui-card"> <div class="layui-card-body layui-r ...

  8. 在Sql Server中使用Guid类型的列及设置Guid类型的默认值

    1.列的类型为uniqueidentifier 2.列的默认值可以设为newid()

  9. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. JRebel 破解使用

    步骤1:生成一个GUID:在线生成GUID地址 步骤2: 根据反向代理服务器地址拼接激活地址 服务器地址: https://jrebel.qekang.com/{GUID} 如果失效刷新GUID替换就 ...

  2. jmeter响应乱码（十四）

    方法一: jmeter响应乱码解决方法:在jmeter的bin目录下找到jmeter.propertis这个文件,修改里面的#sampleresult.default.encoding=ISO-885 ...

  3. 模块 collections 高级数据类型

    collections模块 原文来自cnblog 的 Eva-J Eva-J 介绍了collections模块的常用方法,和演示实例 在 Python cookbook 的第一章中还有一些 更加好玩的 ...

  4. javascript实现炫酷魔方

    实现效果: 魔方动态转换,同时每个面里的每个块都能进行动态变换. 实现代码: <!DOCTYPE html> <html> <head> <meta char ...

  5. extend()和append()的区别

    append()方法用于在列表末尾添加新的对象(对象可以是值或列表),一般用于添加列表项. extend()方法用于在列表末尾追加另一个序列中的多个值.

  6. html前端之css基础

    CSS 属性导航: CSS 属性组 动画 背景 边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面 ...

  7. 人生苦短，学用python

    1. 我为什么开始学着用 python 啦?   扯扯网上疯传的一组图片.网上流传<人工智能实验教材>的图片,为幼儿园的小朋友们量身打造的实验教材,可谓是火了.甚至有网友调侃道:pytho ...

  8. SpringAOP入门

    Spring的AOP aop概述 Aspect Oriented Programing 面向切面(方面)编程, aop:扩展功能不修改源代码实现 aop采取横向抽取机制,取代了传统纵向继承体系重复性代 ...

  9. git本地新建分支推送到远程

    $ git checkout -b  “分支名称”:   新建本地分支 $ git branch:                             查看是否创建成功以及目前在哪个分支 $ gi ...

  10. MyBatis（一）：第一个MyBatis程序

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出1便就懂!b站搜索狂神说即可 https://space.bilibili.com/95256449?spm_id_from=333.788 ...