EasyUI Forum
October 15, 2025, 07:08:45 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > [SOLVED] Numberbox precision without behind zeros
Pages: [1]
« previous next »
  Print  
Author Topic: [SOLVED] Numberbox precision without behind zeros  (Read 16563 times)
Wojak
Jr. Member
**
Posts: 63


View Profile WWW Email
« on: June 11, 2024, 12:49:01 PM »
Hello,
I would like to make the numberbox after entering the number "10" to show "10" and after entering the number "10,1" to show "10,1" and not "10,100". Is this possible?

I currently found this code, from 2014, however it leaves zeros after the number

Code:
$('#nb').numberbox({
	min: 0,
	max: parseFloat(row.ilosc) - parseFloat(row.iloscDostarczona || 0),
	decimalSeparator: ',',
	precision: 3,
	formatter: function (value) {
		var opts = $(this).numberbox('options');
		var s = $.fn.numberbox.defaults.formatter.call(this, value);
		var idx = s.indexOf(opts.decimalSeparator + '000');
		if (idx >= 0) {
			s = s.substr(0, idx);
		}
		return s;
	}
});
« Last Edit: June 18, 2024, 10:06:56 AM by Wojak » Logged
Wojak
Jr. Member
**
Posts: 63


View Profile WWW Email
« Reply #1 on: June 11, 2024, 01:42:29 PM »
And also is it possible to add this feature to numberbox as editor in datagrid?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2300


View Profile Email
« Reply #2 on: June 12, 2024, 07:45:53 PM »
Please try this code.
Code:
<th data-options="field:'unitcost',width:80,align:'right',editor:{
	type:'numberbox',
	options:{
		decimalSeparator: ',',
		precision: 3,
		formatter: function (value) {
			if (value){
				value = parseFloat(value);
			}
			value += '';
			const dpos = value.indexOf('.');
			if (dpos >= 0){
				const s1 = value.substring(0, dpos);
				const s2 = value.substring(dpos+1, value.length);
				return s1+','+s2;
			} else {
				return value;
			}
			
		}
	}
},
formatter: function(value){
	if (value){
		value = parseFloat(value);
	}
	value += '';
	const dpos = value.indexOf('.');
	if (dpos >= 0){
		const s1 = value.substring(0, dpos);
		const s2 = value.substring(dpos+1, value.length);
		return s1+','+s2;
	} else {
		return value;
	}
}
">Unit Cost</th>
Logged
Wojak
Jr. Member
**
Posts: 63


View Profile WWW Email
« Reply #3 on: June 13, 2024, 01:14:36 PM »
Works great, for numberbox as input. But for editor it still shows as it was, but after entering edits it already shows correctly

This works as intended
Code:
$('#nb').numberbox({
	decimalSeparator: ',',
	precision: 3,
	formatter: function (value) {
		if (value) {
			value = parseFloat(value);
		}
		value += '';
		const dpos = value.indexOf('.');
		if (dpos >= 0) {
			const s1 = value.substring(0, dpos);
			const s2 = value.substring(dpos + 1, value.length);
			return s1 + ',' + s2;
		} else {
			return value;
		}
	}
});

It doesn't work properly
Code:
$('#dg').datagrid({
	url: '...',
	columns: [[
		{ 
			field: 'ilosc', 
			title: 'Ilość', 
			width: '50px', 
			halign: 'center', 
			align: 'right', 
			editor: { 
				type: 'numberbox', 
				options: { 
					precision: 3, 
					decimalSeparator: ',', 
					formatter: function (value) {
						if (value){
							value = parseFloat(value);
						} 
						value += '';
						const dpos = value.indexOf('.');
						if (dpos >= 0){
							const s1 = value.substring(0,dpos);
							const s2 = value.substring(dpos+1,value.length);
							return s1+','+s2;
						} else {
							return value;
						}
					} 
				} 
			} 
		},
	]],
	idField: 'id',
	rownumbers: true,
	singleSelect: true,
	onSelect: function (index, row) {
		$(this).datagrid('unselectRow', index);
	},
	onBeforeEdit: function (index, row) {
		$(this).datagrid('refreshRow', index);
	},
	onEndEdit: function (index, row) {
		if (parseFloat(row.ilosc) <= 0) {
			row.ilosc = 1;
		}
	},
	onAfterEdit: function (index, row) {
		$(this).datagrid('refreshRow', index);
	},
	onCancelEdit: function (index, row) {
		$(this).datagrid('refreshRow', index);
	}
}).datagrid('enableCellEditing');
Attached are photos that show incorrect operation
Logged
jarry
Administrator
Hero Member
*****
Posts: 2300


View Profile Email
« Reply #4 on: June 17, 2024, 08:33:09 PM »
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-cellediting.js"></script>
	<script>
		var data = {
			"total": 28, "rows": [
				{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "ilosc": "36.50", "attr1": "Large", "itemid": "EST-1" },
				{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "ilosc": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "ilosc": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
				{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "ilosc": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
				{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "ilosc": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "ilosc": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
				{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "ilosc": "83.50", "attr1": "With tail", "itemid": "EST-15" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "ilosc": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
				{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "ilosc": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
				{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "ilosc": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
			]
		}
		$(function () {
			$('#dg').datagrid({
				data: data,
				columns: [[
					{
						field: 'ilosc',
						title: 'Ilość',
						width: '100px',
						halign: 'center',
						align: 'right',
						editor: {
							type: 'numberbox',
							options: {
								precision: 3,
								decimalSeparator: ',',
								formatter: function (value) {
									if (value) {
										value = parseFloat(value);
									}
									value += '';
									const dpos = value.indexOf('.');
									if (dpos >= 0) {
										const s1 = value.substring(0, dpos);
										const s2 = value.substring(dpos + 1, value.length);
										return s1 + ',' + s2;
									} else {
										return value;
									}
								}
							}
						},
						formatter: function (value) {
							if (value) {
								value = parseFloat(value);
							}
							value += '';
							const dpos = value.indexOf('.');
							if (dpos >= 0) {
								const s1 = value.substring(0, dpos);
								const s2 = value.substring(dpos + 1, value.length);
								return s1 + ',' + s2;
							} else {
								return value;
							}
						}
					},
				]],
				idField: 'id',
				rownumbers: true,
				singleSelect: true,
				onSelect: function (index, row) {
					$(this).datagrid('unselectRow', index);
				},
				onBeforeEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				},
				onEndEdit: function (index, row) {
					if (parseFloat(row.ilosc) <= 0) {
						row.ilosc = 1;
					}
				},
				onAfterEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				},
				onCancelEdit: function (index, row) {
					$(this).datagrid('refreshRow', index);
				}
			}).datagrid('enableCellEditing');
		})
	</script>
</head>

<body>
	<table id="dg" class="easyui-datagrid" title="Editing in DataGrid" style="width:700px;height:auto" data-options="
				singleSelect: true,
			"></table>

</body>

</html>
Logged
Wojak
Jr. Member
**
Posts: 63


View Profile WWW Email
« Reply #5 on: June 18, 2024, 10:06:39 AM »
Ahh, now I understand. I forgot to add formatter also in row and not only in editor. Thanks for your quick help and sorry for my oversight
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!