Question

对jquery和datatable完全陌生。我想添加一个编辑按钮，调出一个显示所有可编辑字段的colorbox div。任何人都可以指出我如何实现这一目标的正确方向？

我能够为每个字段添加一个sClass，并使用fnDrawCallback回调从字段调用colorbox。但这有点混乱，我只是在每行的末尾都有一个按钮用于编辑目的。非常感谢任何指针。

Answer 1

您可以在aoColumnDefs的列定义中通过fnCreatedCell回调添加内容以下内容向第一行添加了一个按钮，其中一个onclick事件处理程序重定向到第一列中的值（这是您可能需要更改的内容。

"aoColumnDefs" : [ 
                    {
                        "aTargets": [0],
                        "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol){
                            var b = $('<button style="margin: 0">edit</button>');
                            b.button();
                            b.on('click',function(){
                                document.location.href = oData[0];
                                return false;
                            });
                            $(nTd).empty();
                            $(nTd).prepend(b);
                        }
                    },

Answer 2

我建议使用优秀的DataTables Editable插件。该插件使得直接在表格中编辑字段变得非常容易。

如果你真的想在每一行上都有一个按钮，你可以在生成表服务器端时添加它，或者使用jQuery添加它。然后你需要将一个动作绑定到按钮上。

假设你要注入按钮，代码就像这样：

$('#form-id').delegate('.edit-button', 'click', function() {
   // action
}).find('.classname-of-field-for-button').html('<button class="edit-button">');

附加到每一行的jQuery Datatable动态编辑按钮

2 个答案: