如何使用 jQuery DataTables 和响应扩展初始化行详细信息中的控件

Question

我遇到了这个问题，我在开发过程中没有看到它，但它发生在我的客户身上。我使用 jQuery DataTables 让用户完成信息。

在 big/normal 分辨率下不会发生这种情况，因为 DataTables 可以显示所有列。但是在较低的分辨率下，网格显示一个绿色加号按钮，并且该组的控件 "inside" 未正确初始化。

分辨率较低的普通页面：

使用 Chrome 开发工具控制台：我可以执行此操作：

$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });

控件现在可以正确显示了。

所以看起来当 DataTables 隐藏列以适合显示时，控件没有被 JS 调用。我试着搜索这个，但我什至不知道如何正确搜索它。

Answer 1

CAUSE

出现此问题是因为响应式扩展在准备行详细信息时创建了新元素。这些新元素需要重新初始化。

SOLUTION

您需要在单独的函数中重新初始化那些成为行详细信息一部分的控件。

解决方法是：

使用 responsive.details.renderer 选项为行详细信息定义自定义呈现
使用 $.fn.DataTable.Responsive.defaults.details.renderer() returns jQuery 集合调用默认渲染器。
在返回之前初始化此集合中的自定义控件。

示例：

var table = $('#example').DataTable({
    responsive: {
        details: {
            renderer: function (api, rowIdx, columns) {
               var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
                $(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
                return $details;                    
            }
        }
    },
    createdRow: function( row, data, dataIndex ){
       $(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });    
    }
});

DEMO

有关代码和演示，请参阅 this jsFiddle。

LINKS

有关详细信息，请参阅 jQuery DataTables – Responsive extension and custom controls 文章。

如何使用 jQuery DataTables 和响应扩展初始化行详细信息中的控件

How to initialize controls in row details with jQuery DataTables and Responsive extension

html

datatables

responsive-design

kendo-ui