计算不适用于 Handsontable 中使用 AJAX 的自定义单元格渲染

Posted

技术标签:

【中文标题】计算不适用于 Handsontable 中使用 AJAX 的自定义单元格渲染【英文标题】:Calculation is not working with custom Cell Rendering with AJAX in Handsontable 【发布时间】:2017-03-19 07:07:30 【问题描述】:

在我的表(Handsontable)中,我有四列 CarsABCCarsA 列的数据从 mysql 数据库加载。 (如 PHP Demo)。

B 列的数据通过 AJAX 从 MySQL 数据库中填充,具体取决于 Cars 的值。代码如下:

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';
                        
                    );                 
                

C列是ABSUM,代码为:

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;
                

问题是虽然 B 中加载了值,但添加不起作用。如果我将 B 列的类型设置为除 AJAX 之外的数字(type: numeric),则添加工作正常。

AJAX 的结果:

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

没有 AJAX 的结果:

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

如果我遗漏了什么,谁能告诉我?

【问题讨论】:

【参考方案1】:

在您的情况下,TD.innerHTML = res.result[0].tax; 仅用于显示数据,但它不会将数据插入数据映射中。

您可以尝试为该单元格设置一个id,并通过 jquery 获取该单元格的值并将它们相加。所以代码看起来像这样:

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);

                

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;
                

【讨论】:

我仍然面临一些问题。很可能$('#'+row+'_1').text(); 无法获取 html 值 我只是稍微修改一下代码。我将 TD 的 html 传递给单元格值。 arguments[5] = TD.innerHTML;

以上是关于计算不适用于 Handsontable 中使用 AJAX 的自定义单元格渲染的主要内容,如果未能解决你的问题,请参考以下文章

Handsontable 不适用于 IE 和 Chrome

Jupyter Notebook 中的 Handsontable

Handsontable中的反向列和行标题

Tensorflow - 多 GPU 不适用于模型(输入),也不适用于计算梯度

OpenGL - 在 NDC 中计算位置适用于着色器,但不适用于“常规”程序

Ember 数据模型中的计算属性不适用于 ember-cli-mirage 模型