0

我发布这个问题是因为我在互联网上搜索时从未找到解决方案，但我知道其他人也有这个问题，我想分享一个解决方案。

问题是每当您使用DataTable 的 FixedColumns 插件时 

   new $.fn.dataTable.FixedColumns(grid, {
            leftColumns: 2,
    });

与JEditable结合使用，您会发现无法编辑那些冻结的列（即此处）。所以我试图为此提供一个解决方案，我将在答案中解释

4

1 回答 1

1

解决方案可以在这里找到，但我会在下面解释

问题的存在是因为使用 FixedColumns 创建了两个表；一个表，克隆表（由类名表示DTFC_CLONED，仅包含您想要冻结的列。另一个表是创建的原始表。因此，每当您尝试进行编辑时，我的示例使用内联编辑，您'实际上是对原始字段而不是从克隆表创建的字段进行编辑。

我想出的解决方案是简单地允许在克隆表上进行编辑，然后将更新的结果推送回原始表。我通过fnDawCallback在 FixedColumns 初始化中添加一个来实现这一点。每次应用 FixedColumns 时都会调用我在那里的函数，也就是每次重绘表格后。 

new $.fn.dataTable.FixedColumns(grid, {
        leftColumns: 3,
        fnDrawCallback:function(){
            clone_grid_init();
        }
});

clone_grid_init()

//Allows editing of fixed fields
function clone_grid_init (){
    $('.DTFC_Cloned tbody tr').each(function(nRow){
        $('td:gt(0)', this).addClass('editText_clone'); //apply new class to tds
    });

    $('.editText_clone').editable(theCallBack, {
        indicator : "<img src='resources/images/indicator.gif'>",
        tooltip   : "Double Click to edit...",
        event     : "dblclick",
        style  : "inherit",
        submit : '<span class="fa fa-check"></span>',
        cancel : '<span class="fa fa-close"></span>',
        placeholder:"",
        callback : function (sValue, y){
            var col = $(this).parent().children().index($(this));//get col index of field from clone table
            var row = $(this).parent().parent().children().index($(this).parent());//get row index of field from clone table
            //var aPos = grid_clone.fnGetPosition( this ); // Get the position of the current data from the node
            grid.fnUpdate(sValue, row, col);// Update the original table with the new value
            return sValue.trim(); //return the new value for the clone table
        }
    });
};
于 2014-11-06T18:42:12.813 回答