1

我正在使用具有内联编辑功能的 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 版

4

1 回答 1

1

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

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

于 2013-12-31T23:00:01.947 回答