“固定列”中的jQuery DataTables复选框 [英] jQuery DataTables checkboxes in Fixed Column
问题描述
我正在使用jquery.datatables插件以及FixedColumns加载项，并遇到一些问题，使两个表保持同步。
I'm using the jquery.datatables plugin along with the FixedColumns add-on and am experiencing some issues keeping the two tables in sync.
前2行我的表格包含复选框。
The first 2 rows of my table contain checkboxes.
由于数据是ajax加载的，所以我在JSON中为复选框返回了true或false值，我将使用 fnRowCallback 以动态创建和替换true或false与相应的复选框。
Since the data is ajax loaded I returned "true" or "false" values in the JSON for the checkboxes and I would use fnRowCallback to dynamically create and replace the "true" or "false" with the appropriate checkbox.
然后我添加了FixedColumns add尽管表最初加载正确，但随后的重绘不会用复选框替换true或false值。
Then I added the FixedColumns add-on and although the table initially loads correctly, subsequent redraws do not replace the "true" or "false" values with checkboxes.
尽管 fnRowCallback 仍然触发，它只有表的一部分，只有部分数据
Although fnRowCallback still fires, it only has part of the table and only part of the data
请注意，此代码在TypeScript但是类似于JS，足够了解，不知道它
fnRowCallback: (row : DataTables.Settings, data: any[], displayIndex: number, displayIndexFull: number) : void => {
if($(row).children("td.checkboxColumn").length > 0){
var isFlaggedIdentifier = 'isFlaggedCheckbox_' + displayIndexFull;
var isFlaggedCheckbox = $('<input />', { type: 'checkbox', id: isFlaggedIdentifier, 'class': 'tableCheckboxInput', value: isFlaggedIdentifier });
var isFlaggedLabel = $('<label />', { 'for': isFlaggedIdentifier, 'class': 'tableCheckboxLabel' });
var isFlagged: bool = $(row).children("td").eq(1).text() === "TRUE";
var flaggedCheckboxEntry = $(row).children("td").eq(1);
if(flaggedCheckboxEntry.hasClass("checkboxColumn")){
flaggedCheckboxEntry.html(isFlaggedCheckbox);
flaggedCheckboxEntry.append(isFlaggedLabel);
}
}
}
根据docs似乎FixedColumns没有一个 fnRowCallback 。它只有 fnDrawCallback ，它只是在表被绘制之后才触发一次，尽管我没有尝试过，但我担心会在替换前导致true/false闪烁通过复选框。
According to docs it seems FixedColumns doesn't have an fnRowCallback. It only has fnDrawCallback which only fires once after the table it drawn so although I havent tried it I fear it will cause the "true"/"false" to flash before being replaced by checkboxes.
如果这个假设是真的，我可以做什么来替换表格之前的复选框。
If this assumption is true what can I do to replace the checkboxes before the table is rendered.
推荐答案
有关这个问题的讨论，似乎终于解决了。
这里要注意的诀窍是FixedColumns是克隆的元素，而不是原件（使用DataTable的列可见性选项隐藏）。当克隆更新时，您的复选框节点将被删除，然后在原始文本时更换（注意，这是与FixedColumns，而不是DataTables），因此问题 - 原始文件未被检查克隆是，现在他们已经走了...
There is an discussion about this issue and seems finally solved.
The "trick" to be aware of here is that the FixedColumns are cloned elements, not the originals (which are hidden using the column visibility options of DataTables). When the clones are updated your checked boxes nodes are deleted and then replaced when the originals (note that this is with FixedColumns, not DataTables on its own), thus the issue - the originals haven't been checked the clones were, and now they've gone...
所以有几种方法可以应付这个 - 第一个是为了在克隆，当检查将更新原件，所以克隆时，它们将被克隆在正确的状态。另一个选择是使用类似的事件处理程序，并使用整行选择标志，即向TR节点添加一个参数或一个类以指示它被选中，并且还可以在克隆完成时更新固定列。我相信基于同样的原则，可能还有其他选择。
So there are a couple of ways to cope with this - the first would be to have a 'change' event handler for the elements in the clone that when checked will update the originals, so when cloned they will be cloned in the correct state. Another option would be to use a similar event handler and use a whole row select flag, i.e. add a parameter to the TR node or a class to indicate that it is selected, and that can also be used when a clone is done to update the fixed columns. I'm sure there are probably other options as well based on the same principle.
阅读更多内容：
这篇关于“固定列”中的jQuery DataTables复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
