基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时，阅读过我写的这篇 Layui表格编辑【不依赖Layui的动态table加载】
阅读过上面那篇笔记之后呢，才能更好的理解我现在所要说的这个东西
接下来废话不多说，上代码。
怕各位懒得动手，直接整理了个案例，如有访问不了代码错误，请在评论区留言，有时间处理问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值 案例</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css" media="all">
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://blog.aigouzhushou.com/layui-v2.4.3/layui/layui.js"></script>
<script>
// Author : userzf 、yirenipeng ; Upload Time: 2020/04/27 15:15
//-----[Layui表格编辑(<td class="My_edit"></td>)] 2018-11-13
function Layui_edit() {
//数据可编辑
$(".My_edit").toggle(function() {
var text = $(this).html();
$(this).html('<input type="text" class="layui-input layui-table-edit" value="' + text + '">');
$(this).children("input").val("").focus().val(text);
}, function() {
$(this).html($(this).children("input").val());
})
//数据编辑失去焦点失效
$(".layui-table-edit").live("blur", function() {
var text = $(this).val();
$(this).parent().html(text);
})
}
//-----[Layui表格编辑END]
/**
* 获取一个double值
* @param P_number 传入值【任意字符】
* @param Defaults_val 【默认值】选参
* @returns
*/
function set_double(val, Defaults_val) {
Defaults_val = Is_null(Defaults_val) == true ? Defaults_val : 1; //默认值为空时给 1
var reg_Tow = /^(?!0{2,})(?:\d{1,9}(\.\d+)?|10{9})$/;
var map = {};
if(val != undefined && val != null && val.trim() != "") {
val = parseFloat(val);
val = toFixed(val, 2); //保留两位小数数据格式化
val = reg_Tow.test(val) ? val : Defaults_val; //单价
val = val == "0.00" ? Defaults_val : val;
} else { //默认单价
val = Defaults_val;
}
return val;
}
/**
* 获取一个整数值
* @param P_number 传入值【任意字符】
* @param Defaults_val 【默认值】选参
* @returns
*/
function set_number(P_number, Defaults_val) {
Defaults_val = Is_null(Defaults_val) == true ? Defaults_val : 1; //默认值为空时给 1
var reg_Tow = /^(?!0{2,})(?:\d{1,9}(\.\d+)?|10{9})$/;
if(P_number != undefined && P_number != null && P_number.trim() != "") {
P_number = parseInt(P_number);
P_number = reg_Tow.test(P_number) ? P_number : Defaults_val; //数量
P_number = P_number == "0" ? Defaults_val : P_number;
} else { //默认 值 赋值
P_number = Defaults_val;
}
return P_number;
}
/**
* 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型
* @param e_name 【选取元素的方式】如：.a 或 #a
* @param type 获取数类型 int or double
* @param Defaults_val 默认值 选填
* @returns
* PS：最大长度 为 9 位字符
*/
function val_number(e_name, type, Defaults_val) {
//焦时获取元素 当前行,当前td
$("" + e_name + " input").live("focus", function(data) {
window["_parent"] = $(this).parent().parent();
window["_e"] = $(this).parent();
})
// 键盘按下过滤
$("" + e_name + " input").live("keyup", function(data) {
$(this).attr("maxlength", "9");
var value = num_value($(this).val()); //只能输入两位数小数和整数
$(this).val(value);
})
// 编辑文本框 失焦过滤
$("" + e_name + " input").live("blur", function(data) {
var _parent = window["_parent"];
var _this = window["_e"];
var val = _this.html();
if("int" == type.toLowerCase()) {
val = set_number(val, Defaults_val)
} else if("double" == type.toLowerCase()) {
val = set_double(val, Defaults_val)
}
//延迟赋值 【解决动态编辑赋值的bug】
setTimeout(function() {
_this.html(val);
}, 10);
})
}
/**
* toFixed(四舍五入重写)
* @param number
* @param decimal
* @returns
*/
function toFixed(number, decimal) {
decimal = decimal || 0;
var s = String(number);
var decimalIndex = s.indexOf('.');
if(decimalIndex < 0) {
var fraction = '';
for(var i = 0; i < decimal; i++) {
fraction += '0';
}
return s + '.' + fraction;
}
var numDigits = s.length - 1 - decimalIndex;
if(numDigits <= decimal) {
var fraction = '';
for(var i = 0; i < decimal - numDigits; i++) {
fraction += '0';
}
return s + fraction;
}
var digits = s.split('');
var pos = decimalIndex + decimal;
var roundDigit = digits[pos + 1];
if(roundDigit > 4) {
//跳过小数点
if(pos == decimalIndex) {
--pos;
}
digits[pos] = Number(digits[pos] || 0) + 1;
//循环进位
while(digits[pos] == 10) {
digits[pos] = 0;
--pos;
if(pos == decimalIndex) {
--pos;
}
digits[pos] = Number(digits[pos] || 0) + 1;
}
}
//避免包含末尾的.符号
if(decimal == 0) {
decimal--;
}
return digits.slice(0, decimalIndex + decimal + 1).join('');
}
/**
* 判断是否为空值
* @param val
* @returns
*/
function Is_null(val) {
val = isNumber(val) == true ? val + "" : val; //如果是一个数字类型过滤成字符串
return val != undefined && val != null && val.trim() != "" && val != "undefined" && val != "null" ? true : false;
}
/**
* obj 判断是否是一个数（number）
* @param obj
* @returns
*/
function isNumber(obj) {
return typeof obj === 'number' && !isNaN(obj);
}
/**
* [只能输入数字和两位小数]
* @param value
* @returns
* @data 2019-01-14
*/
function num_value(value) {
value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
value = value.replace(/^\./g, ""); //验证第一个字符是数字
value = value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
return value;
}
</script>
</head>
<body>
<form class="layui-form PcScoring" action="" lay-filter="example" style="margin-top: 10px;">
<table class="layui-table" style="widtd: 100%; text-align: center; margin: auto;">
<tr>
<td style="text-align: center;">Int</td>
<td style="text-align: center;" class="int My_edit"></td>
</tr>
<tr>
<td style="text-align: center;">Double</td>
<td style="text-align: center;" class="Double My_edit"></td>
</tr>
</table>
</form>
<script>
$(function() {
$.ajaxSetup({
async: false
});
layui.use(['laydate', 'layer', 'form', 'util', 'table', 'element', 'flow'], function() {
var laydate = layui.laydate;
var flow = layui.flow;
var util = layui.util;
var laypage = layui.laypage;
var form = layui.form;
//PS:注意这里的 先后循序 !
Layui_edit(); //开启表格layui编辑
val_number(".int", "int", "1");
val_number(".Double", "double", "0.5");
})
})
</script>
</body>
</html>
基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值的更多相关文章
- Mysql数据表字段设置了默认值，插入数据后默认字段的值却为null，不是默认值
我将mysql的数据表的某个字段设置了默认值为1,当向该表插入数据的时候该字段的值不是默认值,而是null. 我的错误原因: 对数据库的操作我使用了持久化工具mybatis,插入数据的时候插入的是整个 ...
- element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值
template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...
- MySQL 建表时 date 类型的默认值设置
在执行下面 SQL 语句时发现报错 CREATE TABLE `jc_site_access_pages` ( `access_date` date NOT NULL DEFAULT '0000-00 ...
- mysql设置text字段为not null，并且没有默认值，插入报错：doesn't have a default value
一.问题描述 在往数据库写入数据的时候,报错: '字段名' doesn't have a default value 本来这个错误是经常见到的,无非就是字段没有设置默认值造成的.奇怪的是,我这边报错的 ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
- 基于layui的表格异步删除,ajax的简单运用
h话不多说,看图,点击删除,出现确认框,然后点击确认删除,直接删除数据, 因为是基于面向过程的,没有用php框架写,所以有3个文件: 第一个文件:data.php:用于从数据库中获取数据 <?p ...
- Layui数据表格动态加载操作按钮
效果: 方法一:绑定模版选择器 <div class="layui-card"> <div class="layui-card-body layui-r ...
- 在Sql Server中使用Guid类型的列及设置Guid类型的默认值
1.列的类型为uniqueidentifier 2.列的默认值可以设为newid()
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- iPhone连接到Mac上叮叮叮断断续续响个不停的解决办法
一.推荐方式 1.让iPhone和Mac通过数据线连接(对,就是连着) 2.打开终端,执行如下命令: sudo killall -STOP -c usbd 3.一分钟内,iPhone即可连上Mac 二 ...
- 关于k12领域Lucene.net+pangu搜索引擎设计开发的一些回顾
在中国最大的教育资源门户网站两年期间, 黄药师负责学科网搜吧的设计与开发…正好赶上了公司飞速发展的阶段.. 作为专注于k12领域内容与服务的互联网公司的一员,同时整个公司又在积极提升用户体验的氛围中, ...
- python数据库MySQL之视图，触发器，事务，存储过程，函数
一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...
- 微信小程序生成带参数的二维码（小程序码）独家asp.net的服务端c#完整代码
一)我先用的小程序端的wx.request去调用API,发现竟然是一个坑! wx.request({ url: 'https://api.weixin.qq.com/wxa/getwxacodeunl ...
- NKOJ3777 卡牌操作
问题描述 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的卡片了!第i个熊孩子会交换c[i]和d[i]两个位置上的卡片. ...
- 一夜搞懂 | Java 内存模型与线程
前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 一.为什么要学习内存模型与线程? 并发处理的广泛应用是 Amdah1 定律代替摩尔定律成为计 ...
- python开发基于SMTP协议的邮件代发服务
写在这篇文章前照例给大家灌输点名词解释,理论知识,当然已经很熟悉的同学可以往下翻直接看干货 1. 什么是SMTP SMTP即简单传输协议(Simple Mail Transfer Protocol), ...
- Prthon多线程和模块
Prthon多线程和模块 案例1:简化除法判断 案例2:分析apache访问日志 案例3:扫描存活主机 案例4:利用多线程实现ssh并发访问 1 案例1:简化除法判断 1.1 问题 编写mydiv.p ...
- 配置NTP和crontab计划任务
配置NTP网络时间客户端和设置计划任务 3.1问题 本例要求配置虚拟机server0,能够自动校对系统时间.相关信息如下: NTP服务器 ...
- php--MongoDB的使用
添加 $collection = (new MongoDB\Client)->test->users; // 增加一条 $insertOneResult = $collection-> ...