如何使用jQuery DataTables和响应式扩展在行详细信息中初始化控件 [英] How to initialize controls in row details with jQuery DataTables and Responsive extension

问题描述

我遇到了这个问题，在开发过程中没有看到，但是我的客户遇到了.我使用jQuery DataTables来使用户了解信息.

I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.

在大/正常分辨率下，这不会发生，因为DataTables可以显示所有列.但是在较低的分辨率下，网格显示绿色的加号按钮，并且该组内部"的控件未正确初始化.

On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.

分辨率较低的普通页面:

Normal page with lower resolution:

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

Using the Chrome Dev Tools' Console: I can excecute this:

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

并且控件现在可以正确显示.

And the controls now are display correctly.

因此，似乎DataTables隐藏了适合显示的列时，JS并未调用控件.我尝试搜索此内容，但我什至不知道如何正确搜索它.

So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.

推荐答案

原因

之所以会出现此问题，是因为响应式扩展在准备行详细信息时会创建新的元素.这些新元素需要再次初始化.

This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.

解决方案

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

You need to re-initialize those controls that become part of row details in a separate function.

解决方案是:

• 使用responsive.details.renderer选项为行详细信息定义自定义渲染
• 使用$.fn.DataTable.Responsive.defaults.details.renderer()调用默认渲染器，该渲染器返回jQuery集合.
• 在返回该集合之前初始化其自定义控件.

• define a custom render for the row details with responsive.details.renderer option
• call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
• initialize custom controls in this collection before returning it.

示例:

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

演示

有关代码和演示，请参见此jsFiddle .

See this jsFiddle for code and demonstration.

链接

请参见 jQuery DataTables –响应式扩展和自定义控件文章以获取更多信息.

See jQuery DataTables – Responsive extension and custom controls article for more information.

这篇关于如何使用jQuery DataTables和响应式扩展在行详细信息中初始化控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！