固定列中的jQuery DataTables复选框

我正在使用 jquery.datatables插件和FixedColumns附加组件,并且遇到了一些问题,使两个表保持同步.

我表的前两行包含复选框.

由于数据是ajax加载的,我在JSON中为复选框返回“true”或“false”值,我将使用fnRowCallback动态创建并用适当的复选框替换“true”或“false”.

然后我添加了FixedColumns附加组件,虽然表最初正确加载,但后续重绘不会用复选框替换“true”或“false”值.

虽然fnRowCallback仍然会触发,但它只有表的一部分而且只有部分数据

请注意,此代码在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);
                    }
                }
            }

根据文档,似乎FixedColumns没有fnRowCallback.它只有fnDrawCallback,它只在它绘制的表之后触发一次,所以虽然我没有尝试过它但我担心它会导致“true”/“false”在被复选框替换之前闪烁.

如果这个假设是真的,在渲染表之前,我该怎么做才能替换复选框.

解决方法

关于这个问题有一个讨论,似乎终于解决了.

要注意的“技巧”是FixedColumns是克隆元素,而不是原始(使用DataTables的列可见性选项隐藏).当克隆被更新时,你的复选框节点被删除,然后在原件上被替换(注意这是与FixedColumns,而不是自己的DataTables),因此问题 – 原件尚未检查克隆,现在他们走了……

因此有两种方法可以解决这个问题 – 第一种方法是为克隆中的元素设置’更改’事件处理程序,当检查时将更新原始文件,因此克隆时它们将以正确的状态克隆.另一种选择是使用类似的事件处理程序并使用整行选择标志,即将参数添加到TR节点或类以指示它被选中,并且还可以在完成克隆以更新时使用固定列.我敢肯定,根据相同的原则,可能还有其他选择.

阅读更多:

Datatables Forum #1

Datatables Forum #2

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...