javascript - インライン編集フィールドを表示すると、jQuery DataTable 列のサイズが自動的に変更される

Question

わかりました私はできる限り明確にしようとします。私はdataTables 1.9.4を使用しており、特定の高さにしたいテーブルで作業しています。このテーブルには5つの列があり、そのうち2つは非表示の列で、他の3つは表示されています。

つまり、3 つの列の 1 つである 2 つの div 要素の 1 つは、ユーザーが編集できるようにしたいもののプレーン テキスト版です。その名前/タイトルをクリックして編集すると、そのdivが非表示になり、同じ列の別のものが表示されます。表示されているものには、入力要素とキャンセルを示すリンクがあります。キャンセルをクリックすると、現在非表示になっているショーと表示されている非表示が逆になります。

すべてが期待どおりに機能するため、実際の問題はありません。問題は、datatables api で次の 1 つ以上が設定されていることに関係しているように見えることです。

sScrollY、bAutoWidth、およびおそらくいくつかの他のもの。列の全体的なデータが元々そこにあったものよりも大きい場合、特定の行でそれぞれ div を非表示/表示すると、列のサイズが変更されます。sScrollYいずれにせよ、テーブルの高さを任意のサイズにすると、設定が主な原因であることがわかりました。次に、テーブルは「再描画」のたびに列ごとの幅を自動修正しようとしません

または、必要なもの/必要なものの仕様に反しますが、入力フィールドを削除することもできます。

したがって、私の全体的な質問は、このテーブルに使用する api の各設定を設定/設定解除、操作、調整しようとした後です。インライン要素を提供しながら、テーブル全体の高さを維持するためにできることはありますか?

   var oTable = $('#the_table').dataTable({
        //"sPaginationType": "full_numbers",
        "bPaginate": false,
        "bFilter": false,
        "bAutoWidth": false,
        //"sScrollY": "200px",
        "bScrollCollapse": true,
        "aaSorting": [[1,'desc'],[0,'desc']],
        "oLanguage": {
            //"sInfo": 'Tasks: _END_',
            //"sInfoEmpty": 'No Job/Task(s).',
            "sInfo": '',
            "sInfoEmpty": '',
            "sEmptyTable": ' ',
        },
        "aoColumns": [
              { "bSortable": true, "bVisible": false, "iDataSort": 0, "aTargets": [ 2 ]},
              { "bSortable": true, "bVisible": false},
              { "bSortable": false, "sWidth":"67%", "sClass":"hide_overflow"},
              { "bSortable": false, "sWidth":"30%"},
              { "bSortable": false, "sWidth":"3%", "sClass":"rgt"}
           ]
    });
    return oTable;