我正在编辑CMS的仪表板，其中包含浮点值表，显示所提供服务的财务状况。添加服务按钮将显示一个模式表单，该表单将允许用户输入新服务的数据，然后将该服务添加到表中。
<span class="help-block" style="display: none;">Wrong value : Can't be empty</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="add_service_services_group">Services group</label><input id="add_service_services_group" type="text" name="services_group" class="form-control" list="list_services_group">
<span class="help-block" style="display: none;"><img src="/assets/images/loading.gif"/></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="add_service_quantity">Quantity </label><input type="number" id="add_service_quantity" name="quantity" class="form-control" value="1">
<span class="help-block">Has to be a positive number</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="add_service_months">Months </label><input type="number" id="add_service_months" name="months" class="form-control">
<span class="help-block">Has to be a positive number</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="add_service_unit_sell">Unit cost (1 licence - X months)</label><span class="input-group"><span class="input-group-addon">$</span><input type="number" id="add_service_unit_sell" name="unit_sell" class="form-control"></span>
<span class="help-block">Has to be a positive number or 0</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="add_service_invoice_date">Invoice date </label><input type="date" id="add_service_invoice_date" name="invoice_date" class="form-control" value="<?php echo date('Y-m-d', mktime(0,0,0,(date("m")+1),01,date("Y"))); ?>">
<span class="help-block" style="display: none;">Wrong value : Can't be empty</span>
</div>
</div>
<div class="col-md-6" style="display:none">
<div class="form-group">
<label for="add_service_unit_buy">Unit buy</label><span class="input-group"><span class="input-group-addon">$</span><input type="number" id="add_service_unit_buy" name="unit_buy" class="form-control"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="add_service_domain">Domain name </label><input type="text" id="add_service_domain" name="domain" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="add_service_registrar">Registrar name </label><input type="text" id="add_service_registrar" name="registrar" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="add_service_renewal_date">Renewal date </label><input type="date" id="add_service_renewal_date" name="renewal_date" class="form-control" value="<?php echo date('Y-m-d', mktime(0,0,0,(date("m")+1),01,date("Y")+1)); ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="add_service_notes">Notes </label><textarea id="add_service_notes" name="notes" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="add_service_invoice_type">Invoice type </label><input type="text" id="add_service_invoice_type" name="invoice_type" value="01_start+1m" class="form-control" list="list_invoice_type">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="add_service_invoice_notes">Invoice notes </label><textarea id="add_service_invoice_notes" name="invoice_notes" class="form-control"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div id="add_service_info"></div>
<input class="btn btn-custom" type="submit" value="ADD" id="add_service_submit">
</div>
</div>
</div>
</div>
调用 JavaScript 函数
/**
* Add a click event on the add services button to add the new service
* Check the fields and correct some exceptions
* Display a message at the bottom of the modal window in case of error
* Load the services group after a customer is chosen
* Load the default values for months and price after a service is selected
**/
if( $('#add_service_form').length ) {
$('#add_service_submit').on('click', function () {
var array_names = [
'customer',
'service',
'services_group',
'invoice_date',
'renewal_date',
'quantity',
'unit_sell',
'unit_buy',
'months',
'domain',
'registrar',
'notes',
'invoice_notes',
'invoice_type',
];
var ref_form = document.forms['service_form']; //The reference on the form
$('#add_service_info').empty().append('<img src="/assets/images/loading.gif" />'); //Display a loading image on the bottom
var json_data = {};
var valid = true;
for( var i=0 ; i < array_names.length ; i++ ){
var field_name = array_names[i]; //The name of the field
var field_value = ref_form.elements[field_name].value.trim(); //The value of the field after removed the space at the beginning and at the end
/* Remove the error alert in some fields */
if( $(ref_form.elements[field_name]).parents('.form-group').hasClass('has-error') ){
$(ref_form.elements[field_name]).parents('.form-group').removeClass('has-error').find('span.help-block').hide();
}
switch(field_name){
case 'customer':
case 'service':
case 'invoice_date':
if( field_value == '' ){ //The value can't be empty
$( ref_form.elements[field_name] ).parents('.form-group').addClass('has-error').find('span.help-block').show();
valid = false;
}
break;
case 'renewal_date':
if( field_value == '' ) {
field_value = '0000-00-00';
}
break;
case 'quantity':
case 'months':
if( field_value == '' || field_value < 1 ){ //The value has to be positive
$( ref_form.elements[field_name] ).parents('.form-group').addClass('has-error');
valid = false;
}
break;
case 'unit_sell':
if( field_value == '' || field_value < 0 ){ //The value can't be empty or negative
$( ref_form.elements[field_name] ).parents('.form-group').addClass('has-error');
valid = false;
}
break;
case 'unit_buy':
if( field_value == '' || field_value < 0 ){ //The value can't be empty or negative
$( ref_form.elements[field_name] ).parents('.form-group').addClass('has-error');
valid = false;
}
break;
}
json_data[field_name] = field_value; //Record the value to send it to the server
}
if(!valid){
//One or more fields have not been validated
$('#add_service_info').empty();
return ;
}
$.post(base_url+'services/add_service', json_data, function(result){
if( result.added && (result.ID_inserted != false) ){
if( $('#table_services').length ){ //If the table exists we can add the new line
//ADD the new line
var table_API = $('#table_services').DataTable();
json_data['id'] = result.ID_inserted;//Record the ID inserted in the object added in the dataTable
json_data['total_sell'] = ( json_data['unit_sell'] * json_data['quantity'] ) ;
json_data['unit_buy'] = ( json_data['unit_buy'] ) ;
json_data['total_buy'] = ( json_data['unit_buy'] * json_data['quantity'] ) ;
json_data['monthly_sell'] = ( ( json_data['unit_sell'] * json_data['quantity'] ) / json_data['months'] ) ;
json_data['invoice_date'] = (typeof change_date_format == 'function') ? change_date_format(json_data['invoice_date'], '/') : json_data['invoice_date'] ;
json_data['renewal_date'] = (typeof change_date_format == 'function') ? change_date_format(json_data['renewal_date'], '/') : json_data['renewal_date'] ;
json_data['options'] = '<span class="glyphicon glyphicon-edit edit_line"></span><span class="glyphicon glyphicon-folder-open archive_line" ></span><span class="glyphicon glyphicon-floppy-remove delete_line"></span>'; //Add the option data to add on the table
var ref_new_row = table_API.row.add( json_data ).draw(); //Add the new row and get it
$( ref_new_row.node() ).attr('id','table_services_row_'+result.ID_inserted); //Add the id of the row
var array_columns = table_API.init().columns; //Array with the settings of the columns //CAN CAUSE ERROR AFTER DATATABLES UPDATE IF THEY CHANGED THE INIT RETURN
table_API.cells(ref_new_row,'').every(function() {
//For every cell we add the header attribute
//Used with the css style
var ref_cell = this;
var cell_name = array_columns[ref_cell.index().column].name; //The name of the column to use exceptions
$( ref_cell.node() ).attr('headers','table_services_'+cell_name); //Add the header attribute
if( cell_name == 'id' )
$( ref_cell.node() ).css('display','none'); //Hide the cell
});
}
$('#add_service_info').empty(); //Remove the loading image
$('#add_service_form').modal('hide'); //Hide the modal form
/* Change the value in the form - Empty or default value */
for( ref_element in ref_form.elements ){ Services view - decimal places - test 6.4
ref_form.elements[ref_element].value = ""; //Set the null value in the form
}
var actual_date = new Date(); //An object of the actual date
var def_inv_date = new Date(actual_date.getFullYear(), actual_date.getMonth()+1, '01', '', '', '', ''); //The date for the year after
var def_ren_date = new Date(actual_date.getFullYear()+1, actual_date.getMonth()+1, '01', '', '', '', ''); //The date for the year after
ref_form.elements['invoice_date'].value = (typeof change_date_format == 'function') ? change_date_format(def_inv_date.toLocaleDateString(), '-') : ''; //The date at the good format, otherwise empty
ref_form.elements['renewal_date'].value = (typeof change_date_format == 'function') ? change_date_format(def_ren_date.toLocaleDateString(), '-') : '';//The renewal date at the good format, otherwise empty
ref_form.elements['quantity'].value = 1;
ref_form.elements['unit_sell'].value = 0;
ref_form.elements['unit_buy'].value = 0;
ref_form.elements['months'].value = 1;
ref_form.elements['invoice_type'].value = '01_start+1m';
/* Change the value in the form - Empty or default value */
}
else{
//The function worked but the data has not been added in the database
$('#add_service_info').empty().addClass('alert alert-danger').append("ERROR adding a new service.<br />" + result.message);
window.setTimeout(function () {
$('#add_service_info').removeClass('alert alert-danger').empty();
},10000);
return false;
}
},'json')
.fail(function(jqXHR_object){
//An error happened when the function worked
$('#add_service_info').empty().addClass('alert alert-danger').append("FAIL adding the service.<br />Function error : Contact your administrator.<br />Status : " + jqXHR_object.status + " | StatusText : " +jqXHR_object.statusText);
window.setTimeout(function () {
$('#add_service_info').removeClass('alert alert-danger').empty();
},10000);
return false;
});
return true;
});
我已经格式化了表格，以便在每个浮点数后显示 2 个小数点点。 我有一个功能，它将存储每行的累积值并在顶部菜单显示总计。
var table_api = this.api(); //The API reference of the table
//Modify the select lists in the header
var total_sell = 0;
$.each(currData,function(key,element){
total_sell += element.monthly_sell.replace(',','')*1.0;
});
$('#total_sell').text(parseFloat(total_sell).toFixed(2));
//Total the amount spent on services
var total_buy = 0;
$.each(currData,function(key,element){
total_buy += element.total_buy.replace(',','')*1.0;
});
$('#total_buy').text(parseFloat(total_buy).toFixed(2));
最初，由于值超过 1000 的逗号，我的总数没有显示。我用 .replace() 函数修复了这个问题，以删除数字中的第一个逗号。
但是，这导致了我的"添加服务"模式表单出现问题，在我选择"添加"后，表单处于恒定加载循环中。如果我点击刷新按钮，这些值仍然会添加到表中，但我无法弄清楚为什么表单不会像以前那样最小化 (注意：如果我删除替换功能，"添加服务"模式表单将正常工作，但我的总数将显示$NaN)。
如果您的数据集中有单个值无法通过乘以 *1 转换为数字(例如"1,200"或"$10")，它将影响整个等式，始终导致NaN。(见此 https://coderwall.com/p/5tlhmw/converting-strings-to-number-in-javascript-pitfalls)
因此，您将逗号替换为replace方法。但replace是 String 类中的一个方法。所以现在，如果你的数据集中有一个不是字符串的值(如undefined或数字)，你的代码将中断，因为replace将不可用，所以你将永远停留在微调器上。
所以我的建议是确保你使用的是正确的类型：
var total_sell = 0;
$.each(currData,function(key,element){
var item_sell = element.monthly_sell.toString().replace(',','')*1.0;
if( !isNaN(item_sell) ) {
total_sell += item_sell;
}
})
element.monthly_sell.replace(',','')) replaces the first occurence of , in the string element.monthly_sell and returns the result string.
当 *1.0 在字符串上完成时，它不会返回数字。它返回 NaN。 因此，将字符串转换为数字并尝试如下或使用parseInt。
var table_api = this.api(); //The API reference of the table
//Modify the select lists in the header
var total_sell = 0;
$.each(currData,function(key,element){
total_sell += Number(element.monthly_sell.replace(',',''))*1.0;
});
$('#total_sell').text(parseFloat(total_sell).toFixed(2));
//Total the amount spent on services
var total_buy = 0;
$.each(currData,function(key,element){
total_buy += Number(element.total_buy.replace(',',''))*1.0;
});
$('#total_buy').text(parseFloat(total_buy).toFixed(2));