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

Question

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

感谢您的帮助。

Answer 1

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

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

至

对应代码:

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});