基于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.事件 ...
随机推荐
- Arcgis中制作热力图
摘要 使用核函数根据点或折线 (polyline) 要素计算每单位面积的量值以将各个点或折线 (polyline) 拟合为光滑锥状表面. 插图
- 配置centOS下的Python
Linux下Python版本升级: 1. 首先确认Linux操作系统中自带的python 版本时候与自己所需要的版本一致 所有的python版本都在https://www.python.org/ftp ...
- linux 中的页缓存和文件 IO
本文所述是针对 linux 引入了虚拟内存管理机制以后所涉及的知识点.linux 中页缓存的本质就是对于磁盘中的部分数据在内存中保留一定的副本,使得应用程序能够快速的读取到磁盘中相应的数据,并实现不同 ...
- centos7 编译安装mysql5.7
mysql源码可以到官网下载 安装依赖包 yum -y install gcc gcc-c++ ncurses ncurses-devel bison libgcrypt perl make cmak ...
- 还不懂 ConcurrentHashMap ？这份源码分析了解一下
上一篇文章介绍了 HashMap 源码,反响不错,也有很多同学发表了自己的观点,这次又来了,这次是 ConcurrentHashMap 了,作为线程安全的HashMap ,它的使用频率也是很高.那么它 ...
- 徒手生撸一个验证框架，API 参数校验不再怕！
你们之中大概率早已练就了代码的拷贝.粘贴,无敌的码农神功,其实做久了业务功能开发,练就这两个无敌神功,那是迟早的事儿.今天先抛一个小问题,来打通你的任督二脉,就是很好奇的问一下:业务功能开发中,输入参 ...
- [转载]Docker容器无法被stop or kill问题
来源: 问题过程 某环境一个mysql容器无法被stop or kill or rm sudo docker ps | grep mysql 查看该容器 7844250860f8 mysql:5.7. ...
- Linux学习第10天-命令执行顺序控制与管道
学习重点: cut,grep,wc,sort命令的使用 管道的理解 一.顺序执行多条命令 当我们需要使用apt-get安装一个软件,然后安装完成后立即运行安装的软件(或命令工具),又恰巧你的主机才更换 ...
- Python操作Oracle数据库：cx_Oracle
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- sqlchemy的外键及其约束条件
外键创建 使用sqlalchemy创建外键非常简单.在表中增加一个字段,制定这个字段外键的是哪个表的哪个字段就可以了. 从表中外键定义的字段必须和主键字段类型保持一致. 实例代码: import mo ...