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

我相信当初始化数据表的jeditable函数时，可以通过将width属性设置为100％来解决问题。看这里： DataTable Column resizes on edit

该链接指的是可编辑的演示，当您在page上查看代码时，您可以看到如何使用width属性。

编辑模式下的jQuery数据表列宽

1 个答案: