一起使用 DataTable FixedColumns 和 JEditable

Posted 2023-05-07

【中文标题】一起使用 DataTable FixedColumns 和 JEditable

【英文标题】：Using DataTable FixedColumns and JEditable together

【发布时间】：2015-01-03 09:01:56

【问题描述】：

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

问题是每当你使用DataTable's FixedColumns plugin

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

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

【参考方案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
        
    );
;