基于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.事件 ...
随机推荐
- coding++ ：HttpClientUtils 封装
1.关键 JAR <!-- <<===================>> httpClient <<===================>> ...
- iOS 引用计数
一.简介 OC 在创建对象时,不会直接返回该对象,而是返回一个指向对象的指针. OC 在内存管理上采用了引用计数,它是一个简单而有效管理对象生命周期的方式.在对象内部保存一个用来表示被引用次数的数字, ...
- TensorFlow报错module 'tensorflow' has no attribute 'xxx'解决办法
原因:TensorFlow2.0版本修改了许多函数名字 tf.sub()更改为tf.subtract() tf.mul()更改为tf.multiply() tf.types.float32更改为tf. ...
- SimpleITK 和 Nibabel 读取医学图像 nii 数据（2D显示）
SimpleITK 和 Nibabel 区别在于:(nii图像可以看成2维,也可以看成三维) SimpleITK读取数据是(X,Y,Z)显示,Nibabel读取图像是(Z,Y,X)显示,也就是Niba ...
- unix中数据缓冲区高速缓冲的设计
目录 1. 概述 2. 缓冲区的设计 2.1 缓冲区头部 2.2 缓冲区的结构 2.3 缓冲区的检索算法 2.3. 申请一个缓冲区算法 getblk 2.3.2 释放一个缓冲区算法 brelse 2. ...
- Mac OS修改VSCode Go的默认缩进格式
一.在VSCode中编写Go代码时,缩进是使用tab缩进,主要是由于以下两个方面. 1. Go官方提供的代码格式化工具gofmt默认是使用tab缩进,并且为8个字符宽度. 2. 并且在VSCode中, ...
- localStorage应用（写的时间缓存在本地浏览器）
最近用了下localStorage,于是想记录加深下映象: 有关更详细的介绍,可以去看https://www.cnblogs.com/st-leslie/p/5617130.html: 我这引用了这个 ...
- IOS部分APP使用burpsuite抓不到包原因
曾经在ios12的时候,iphone通过安装burpsuite的ca证书并开启授权,还可以抓到包,升级到ios13后部分app又回到以前连上代理就断网的情况. 分析:ios(13)+burpsuite ...
- python--Django（后台管理模块）
一.准备工作 1.创建应用 python manage.py startapp test 2.定义模型类 (1)打开刚创建的app目录test,打开models.py文件 (2)代码如下 from d ...
- sparkSessiontest
记事本内容: 打印结构: 方法1: object SparkSessionTest { case class Person(name:String,age:Int) def main(args: Ar ...