2013-04-17 23 views
1

我正在使用jQuery數據表格和內聯編輯功能。我可以成功地爲表定義所有自定義寬度,但是,只要我進入編輯模式,列寬就會擴大,表格會不停地來回跳動。看起來這個視圖的寬度工作正常,並且我得到了所需的列寬,但只要用戶按下雙擊進入編輯模式,列大小就會展開並擠壓所有其他列。這是一個在實際的JS代碼中揮之不去的問題還是我做錯了什麼?編輯模式下的jQuery數據表欄寬度

這裏是我的腳本:

$(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,數據表版本1.9.4和jquery.dataTables.editable.js 1.1.5版

回答

0

我相信你的問題可以通過在初始化數據表的可jeditable函數時將width屬性設置爲100%來解決。在這裏看到: DataTable Column resizes on edit

該鏈接指向可編輯的演示,當你對page查看代碼,你可以看到width屬性是如何使用的。