如何在JQuery数据表上使用JEditable时停止行高度更改

Question

我在JQuery数据表上遇到了JEditable的问题，这样当单击某个字段以启用JEditable文本框时，包含该框的行高会发生变化，即使它有足够的空间非常不受欢迎。

在文本框中似乎还有一些我无法删除的填充，它会将文本框的可见范围下方的任何文本推送到下方...

代码如下......

的.js

$(document).ready(function () {
    var oTable = $('#spellTable0').dataTable({
        "sScrollY": "650px",
        "bPaginate": false,
        "bScrollCollapse": true,
        "bAutoWidth": true,
        "bSort": false
     })

     oTable.$('.SpellNoCol-Edit').editable('test.php', {

        "callback": function (sValue, y) {
            var aPos = oTable.fnGetPosition(this);
            oTable.fnUpdate(sValue, aPos[0], aPos[1]);
        },
        "submitdata": function (value, settings) {
            return {
                "row_id": this.parentNode.getAttribute('PatientID'),
                "column": oTable.fnGetPosition(this)[2]
            };
        },

        "height": "24px",
        "width": "100%"

     });

     $(window).on('resize', function () {
         oTable.fnAdjustColumnSizing();
     });

表定义和行定义

<table id="spellTable0" class="table table-condensed" style="border:none">
<tr class="SpellWarningRow; DropDownChild" style="border-collapse:collapse;background-color:khaki">
<tr class="SpellRow; DropDownChild" id="duplicateRow" style="border-collapse:collapse;background-color:oldlace>

是否有任何我不知道的参数可以阻止这种骚扰？

Answer 1

找到解决方案，似乎JEditable总是在其活动时添加一点额外的，不幸的是无法完全避免。然而，问题的大部分是使用一个复选框来增加行的高度，使较小的固定大小跳跃问题。

也可以通过初始化代码手动设置宽度和高度。

$('.colClass1').editable('', {
    event: "click",
    "style": "inherit",
    "width": ($('.colClass1').width()-15) + "px",
    "height": ($('.colClass1').height() + 8) + "px",
    "callback": function (sValue, y) {
        var aPos = oTable.fnGetPosition(this);
        oTable.fnUpdate(sValue, aPos[0], aPos[1]);
    },
    "submitdata": function (value, settings) {
        return {
            "row_id": this.parentNode.getAttribute('AttributeX'),
            "column": oTable.fnGetPosition(this)[2]
        };
    },
    "cssclass": "~/Content/themes/header-table/editable.css",
});