动态调整jqGrid添加/编辑表单字段的大小

时间:2011-08-21 01:31:15

标签: javascript jquery jqgrid

我有一个jqGrid,它有多个选择框和文本字段。我希望所有表单字段的长度相同。我希望所有表单字段都是最宽的选择框或文本字段的大小。有没有办法可以做到这一点?

感谢您的所有帮助。

1 个答案:

答案 0 :(得分:2)

您可以使用afterShowForm事件获取最宽选择框的宽度,并将所有选择的宽度设置为该值。

demo更改标准编辑/添加表单

enter image description here

enter image description here

相应的代码:

var resizeSelectWidth = function ($form) {
        var maxWidth = 0, newMaxWidth = 0, i,
            $selects = $form.find('tr.FormData > td.DataTD > select.FormElement'),
            cn = $selects.length;

        // calculate the max width of selects
        for (i = 0; i < cn; i += 1) {
            maxWidth = Math.max(maxWidth, $($selects[i]).width());
        }
        maxWidth += 2; // increase width to improve visibility

        // change the width of selects to the max width
        for (i = 0; i < cn; i += 1) {
            $($selects[i]).width(maxWidth);
            newMaxWidth = Math.max(maxWidth, $($selects[i]).width());
        }
    };

...
$("#list").jqGrid('navGrid', '#pager', {del: true},
    {afterShowForm: resizeSelectWidth},
    {afterShowForm: resizeSelectWidth});