Question

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

问题在于，无论何时使用DataTable's FixedColumns plugin

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

与JEditable一起发现您无法编辑这些冻结列（即here）。所以我试图为此提供一个解决方案，我将在答案中解释

Answer 1

可以找到解决方案here，但我将在下面解释

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

我想出的解决方案是简单地允许在克隆表上进行编辑，然后将更新的结果推回原始表。我通过向FixedColumns初始化添加fnDawCallback来实现此目的。每次应用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
        }
    });
};

一起使用DataTable FixedColumns和JEditable

1 个答案: