如何在jqgrid中增加表单中的自动完成组合文本元素宽度

Question

在编辑和添加表单中看起来所有字段都有固定的宽度。

我尝试从宽度增加编辑/添加但输入元素宽度仍然是 太小，小于colmodel中定义的列宽。

如何增加这些宽度或使它们与colmodel中定义的相同？ 标签栏的风速太大。如何减少标签列宽度 它的宽度等于最大标签文字宽度？

更新1

colmodel包含自动完成组合框

{name:"AutocompleteWidthIssue",
edittype:"custom",
editoptions:{
    maxlength:54,
    size:54,
    custom_element:function(value, options) {
    return combobox_element(value, options,'17','test','Summak','Tululiik')
    },
    custom_value:combobox_value
},
editable:true,
width:39,
fixed:true
},


function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr = '<div><input style="width:' + width + 'px" value="' + value + '"/>' +
'<button type="button" style="height:20px;width:20px;vertical-align:center;margin-left:-2px" tabindex=-1/></div>';
    var newel = $(elemStr)[0];

    input.autocomplete({
        source: 'Grid/GetLookupList'
    }
);

    $("button", newel)
    .button({ icons: { primary: 'ui-icon-triangle-1-s'} })
       });

    return newel;
}

在内联编辑模式下，代码渲染了具有正确宽度的组合框， 大小：54被忽略。

如何仅在表单编辑/添加模式下增加自动完成文本输入元素的宽度，以使其文本元素宽度从大小或其他属性获取宽度？

Answer 1

尝试使用editoptions: {size:35, maxlength: 45}。可能这就是你需要的。它应该增加相应列的输入元素的大小，以便能够在不滚动数据的情况下输入大约35个字符。将禁止输入更多45个字符。您可能需要增加编辑/添加表单的width参数的默认值300，以便能够显示表单的所有输入元素而无需水平滚动。

不应对长标签进行其他设置。表格由表格组成，可自动增加列宽。

更新：您可以将display:inline-block用于包含<span class="FormElement">返回的HTML片段的父custom_element。以下代码

function combobox_element(value, width) {
    var elemStr = '<div>' +
                  '<input class="FormElement ui-widget-content ui-corner-all" ' +
                  'style="vertical-align:top;width:' +  width + 'px" value="' +
                  value + '"/>' +
                  '<button class="ui-widget-content ui-corner-right ui-button-icon"' +
                  ' style="height:22px;width:22px;" tabindex="-1" /></div>',
        newel = $(elemStr)[0];

    setTimeout(function () {
        $(newel).parent().css({display: "inline-block"})
                .parent().css({'padding-bottom': 0});
        $('input:first', newel).autocomplete({
            source: 'Grid/GetLookupList'
        });

        $("button", newel).button({
            icons: { primary: 'ui-icon-triangle-1-s'},
            text: false
        });
    }, 50);

    return newel;
}

将产生

您将找到相应的演示here。