在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",
});