基于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.事件 ...
随机推荐
- Oracle12C的卸载过程
1.找到自己的Oracle12C安装目录,一般的安装目录为D:\app\u01\product\12.1.0\dbhome_1\deinstall ,双击deintall.dat文件进行卸载. 2.耐 ...
- API开放平台接口设计-------令牌方式
1.需求:现在A公司与B公司进行合作,B公司需要调用A公司开放的外网接口获取数据,如何保证外网开放接口的安全性? 2,使用令牌方式 比如支付宝对外提供支付的接口,爱乐生公司需要调用支付宝的接口.在爱乐 ...
- 快，学会 shell
本文分成入门篇和基础篇.基础篇包括变量.字符串处理.数学运算三部分.基础篇包括流控制.函数和函数库三部分.主要是基于例子进行讲解,其中有 4 个复杂一点的脚本,看懂了也就入门了. 我们先来聊一聊 sh ...
- 编写SpringBoot 中的AOP
编写SpringBoot 中的AOP 在程序开发的过程中会使用到AOP的思想,面向切面进行开发,比如登录的验证,记录日志等等-频繁需要操作的步骤,在遇到这种情况时就要使用Spring 的AOP了 Sp ...
- 用python写项目之图书管理系统
1.功能介绍: (1).添加新书:输入要添加的书名.存放的书架号.价格. (2).修改书架:输入要书名,然后对其修改书架号.价格 (3).删除书架:输入书名,然后对应删除书名.书架号.价格 (4).查 ...
- python的字符串、列表、字典和函数
一.字符串 在python中字符串无需通过像php中的explode或者javascript中的split进行分解即可完成切片,可以直接通过下标获取字符串中的每一个字符,下标从0开始,如果从厚望签署, ...
- Vulnhub homeless靶机渗透
信息搜集 nmap -sP 192.168.146.6 nmap -A -Pn 192.168.146.151 直接访问web服务. 大概浏览一下没发现什么,直接扫描下目录把dirb+bp. BP具体 ...
- python redis 实现简单的消息订阅
python + redis 实现简单的消息订阅 订阅端 import redis from functools import wraps class Subscribe: def __init__( ...
- canvas压缩、裁切图片和格式转换的方法
按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js ...
- JAVA集合框架之List和Set、泛型
一 List是有序可重复的集合 可以进行增删改查,直接看代码 package com.collection; import java.util.ArrayList; import java.util. ...