基于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++：拦截器拦截requestbody数据如何防止流被读取后数据丢失
1):现在开发的项目是基于SpringBoot的maven项目,拦截器的使用很多时候是必不可少的,当有需要需要你对body中的值进行校验,例如加密验签.防重复提交.内容校验等等. 2):当你开开心心的 ...
- nginx负载均衡例子
upstream demo { ip_hash;//客户连接后, 一直用这个IP,直到会话结束,否则,动态程序可能会在换IP后出错 server 192.168.1.1:80 weight=5 | d ...
- [codevs1049]棋盘染色<迭代深搜>
题目链接:http://codevs.cn/problem/1049/ 昨天的测试题里没有打出那可爱的迭代深搜,所以今天就来练一练. 这道题其实我看着有点懵,拿着题我就这状态↓ 然后我偷偷瞄了一眼hz ...
- B. Food Buying Round #617(递归 + 模拟)
B. Food Buying time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 从汇编代码理解 Block 的内存结构
❓ 在断点调试 iOS 程序碰到 block 作为函数的形参时,如果想知道该 block 本身的函数签名信息和函数体地址时,有哪些办法?
- MySQL 在Docker下快速安装（Ubuntu 16.4）
采用dockerhub安装 docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/my ...
- Zabbix报警机制，Zabbix进阶操作，监控案例
...
- How to setup a Alpine Linux mirror
How to setup a Alpine Linux mirror Contents 1 Introduction 2 Setting up the cron job 3 Setting up ...
- javascript入门 之 bind()
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- JAVA debug 调试demo
1.设置断点,在代码的行号后面鼠标左键即可2.想要看调用方法的执行流程,那么调用方法也要加断点. package day6_debug; /* * 1.设置断点,在代码的行号后面鼠标左键即可 * 2. ...