使用Handsontable中的AJAX进行自定义单元格渲染时，计算无法正常工作

Question

In my table(Handsontable) I have four columns Cars , A , B and C . Data for Cars and A columns are loaded from MySQL database. (like PHP Demo ).

Data of Column B is populated from MySQL database via AJAX depending on the value of Cars . The code is as follows:

{type: { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                Handsontable.TextCell.renderer.apply(this, arguments);
                var cr,prc;
                cr = instance.getDataAtCell(row, 0);
                prc = instance.getDataAtCell(row, 1);
                $.ajax({
                    url: "php/act-go-t.php",
                    data: {cars: cr, price: prc}, 
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        if (res.result[0].tax === null) {
                            TD.innerHTML = '0.000';
                            }
                            else {
                            TD.innerHTML = res.result[0].tax;
                            }
                        },
                        error: function () {
                        TD.innerHTML = '0.000';
                        }
                    });                 
                }}}

The C column is the SUM of A and B and the code is:

{type : { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                    Handsontable.TextCell.renderer.apply(this, arguments);
                    var a,b;
                    a = instance.getDataAtCell(row, 1);
                    b = instance.getDataAtCell(row, 2);                     
                    TD.innerHTML = +a + +b;
                }}}

The problem is although the value is loaded in B but the addition is not working. If I set the type of B column to numeric( {type: numeric} ) except the AJAX, the addition is working fine.

Result with AJAX:

 +----------+------+-------+--------------+ | Cars | A | B | C | +----------+------+-------+--------------+ | Nissan | 20 | 10 | 20 | | Honda | 5 | 6 | 5 | +----------+------+-------+--------------+ 

Result without AJAX:

 +----------+------+-------+-------------+ | Cars | A | B | C | +----------+------+-------+-------------+ | Nissan | 20 | 10 | 30 | | Honda | 5 | 6 | 11 | - +----------+------+-------+-------------+ 

Can anybody please tell me if I am missing something?

Answer 1

In your case TD.innerHTML = res.result[0].tax; is only for displaying data, however it not inserts data into datamap.

You may try to set a id for that cell and get the value of that by jquery and summing them up. So the codes will look something like that:

{type: { renderer : function (instance, TD, row, col, prop, value, cellProperties) {

                var cr,prc;
                cr = instance.getDataAtCell(row, 0);
                prc = instance.getDataAtCell(row, 1);
                $.ajax({
                    url: "php/act-go-t.php",
                    data: {cars: cr, price: prc}, 
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        if (res.result[0].tax === null) {
                            TD.innerHTML = '0.000';                                
                            }
                            else {
                            TD.innerHTML = res.result[0].tax;                                
                            }
                        },
                        error: function () {
                        TD.innerHTML = '0.000';                            
                        }
                    });  
                arguments[5] = TD.innerHTML;
                TD.id = row+'_'+col;
                Handsontable.TextCell.renderer.apply(this, arguments);

                }}}

And

{type : { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                    Handsontable.TextCell.renderer.apply(this, arguments);
                    var a,b;
                    a = $('#'+row+'_1').text();
                    b = $('#'+row+'_2').text();                     
                    TD.innerHTML = +a + +b;
                }}}