jQuery datatable在编辑模式下的列宽

Question

我正在使用具有内联编辑功能的jQuery数据表。 我可以成功定义表格的所有自定义宽度，但是，一旦进入编辑模式，列宽就会扩大，表格会不断地来回跳动。 看来“ sWidth”视图工作正常，并且我得到了所需的列宽，但是只要用户按两次双击进入编辑模式，列大小就会扩展并压缩所有其他列。 这是实际js代码中的挥之不去的问题，还是我做错了什么？

这是我的脚本：

$(document).ready(function(){
                oTable = $("#datatables").dataTable({
                            "aoColumns" : [
                                {
                                    "sName" : "fullName",
                                    "sWidth" : "15%"
                                },
                                {
                                    "sName" : "location",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "lengthOfStay",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "codeStatus",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "dvt",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "catheter",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "lae",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "lace",
                                    "sClass": "alignCenter"
                                },
                                {
                                    "sName" : "comments",
                                    "sWidth" : "25%"
                                },
                                {
                                    "sName" : "discharge",
                                    "sClass": "alignCenter"
                                }
                             ],
                            "aaSorting":[[1, "desc"]],
                            "bPaginate": false,
                            "bLengthChange": false,
                            "bFilter": false,
                            "bSort": true,
                            "bInfo": false,
                            "bAutoWidth": false,
                            "sAjaxSource" : 'checklistdataallteam',
                            "sServerMethod": "GET",
                            "fnDrawCallback" : function(oSettings) {
                                //The call to makeEditable is set here to make sure all the data are loaded 
                                this.makeEditable({
                                    oEditableSettings: { event: 'dblclick' },
                                    sUpdateURL : 'UpdateChecklistData',
                                    aoColumns : [
                                         null,  //patient name; no editing
                                         null,  //location; no editing  
                                         null,  //stay length; no editing
                                         {      //code status; default edit
                                            placeholder: '-'
                                         }, 
                                         {      //dvt; default edit
                                            placeholder: '-',
                                         }, 
                                         {      //catheter, default edit
                                            placeholder: '-',
                                         },
                                         null,  //lae; no editing
                                         null,  //lace; no editing
                                         {      //comment; default editing
                                            placeholder: '-',
                                         }, 
                                         null   //discharge; no editing                                          
                                     ]
                                });
                            }
                   });
        });

我正在使用Jeditable版本1.7.1，Datatables版本1.9.4和jquery.dataTables.editable.js版本1.1.5

Answer 1

我相信，初始化数据表的可编辑函数时，可以通过将width属性设置为100％来解决您的问题。 参见此处： DataTable列在编辑时调整大小

该链接引用了可编辑的演示，当您查看该页面上的代码时，您可以看到width属性的使用方式。