固定列的大小调整和重新排列

编程问答 2022-06-08

问题描述

我有一个数据表，在单击行时有一个popOver，但是我的左右固定列并未相对于popOver see this imageLink for reference to popOver移动 。 我希望我的固定列与其他列对齐。请帮忙!! 

//JS datatable 
  $('.tblTECards').DataTable({
                    ///  scrollY: 300,scrollX: true,colReorder: true,responsive:true,scrollCollapse: true,paging: false,"bSort": false,"bFilter": false,"info": false,//fixedColumns: true 

                    fixedColumns: {
                        leftColumns: 2,rightColumns: 2
                    }
                });
/////
//PopWindow Code  


        tableAllowace = "<table id='tblallowance' style='width: -webkit-fill-available;'><thead style='background-color:#f2f2f2; color:#7f7f7f;'><tr><th style='border-right:1px solid #cdd0d4;text-align:center;'>Allowance</th><th style='border-right:1px solid #cdd0d4;text-align:right;'>Quantity</th><th style='border-right:1px solid #cdd0d4;text-align:right;'>Rate</th><th style='border-right:1px solid #cdd0d4;text-align:right;'>Total</th><th style='text-align:center;'></th></tr></thead><tbody>" + allowanceRow + "</tbody></table>";
        $.fn.dataTable
            .tables({ visible: true,api: true })
            .columns.adjust()
            .fixedColumns().relayout();

        var divAllocations = '<div style="background-color:#eaeff5;" class="popover-content"><div style="text-align: end;margin-top: -5%;"><a href="javascript:void();" onclick="javascript:CloseAllowanceRow(this);"><i class="fal fa-window-close" style="font-size:larger; margin-top:3%;"></i></a></div><div><label style=" width: 120px;">Allowance(' + allocationCount + ') </label><label style="width:100px;"><a href="javascript:void(0);" onclick="javascript:AddAllowanceNewRow(' + allowancePunchID + ');"><i class="fa fa-plus-circle" style="color:#2a97ea;">&nbsp;&nbsp;Add</i></a></label><label id="lblAllocationMsg" style="width: 300px;"></label><input id="btnSaveAllowance" type="button" onclick="javascript:SaveTECardAllowance();" value="Save" style="font-size:smaller; background-color:#92d050; color:#f1f9e8; width:85px;height:24px;" class="btn btn-sm"></div><br />' + tableAllowace + '</div>'
        //   $(".DTFC_LeftBodyLiner").find(".tblTECards").find('tbody').find('tr').find('td:eq(1)')[1].innerHTML = '';
        newRows = newRows + divAllocations + "</td><td></td><td></td><td></td><td></td><td></td></tr>"
        $('#' + tableControlID + ' > tbody > tr:eq("' + (parseInt(index) + 1) + '")').after(newRows);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-tablesdatatablesjavascriptjquery