Question

当设置了free-jqgrid列模型的editoptions属性的HTML size属性时，它不会按原样修改相关的输入宽度元素。

无论您在编辑选项中设置的大小值是什么，添加或编辑对话框中的输入元素宽度都保持不变，在包含它的对话框中具有最大宽度。
值得注意的是，如果使用浏览器检查工具检查HTML元素，则它具有您设置的width属性。

当我从 jqgrid 4.6.0 迁移到 free-jqgrid 14.15.4 时，重要的是此属性应该像以前一样工作为了保持编辑对话框的布局而不做任何修改。

您可以看到JSFiddle代码段。

在该代码中，第6行将 id 字段的大小设置为3个字符。在尝试编辑任何记录时，可以看到所有输入字段具有相同的宽度，该宽度尽可能宽，直到包含对话框的右边距。

如何定义free-jqgrid的add或edit对话框中的输入字段大小？

$(function() {
  "use strict";
  $("#grid").jqGrid({
      colModel: [{
          name: "id",
          width: 20,
          editable: true,
          editoptions: {
            size: 3 // doesn't get honored
          }
        },
        {
          name: "firstName",
          width: 200,
          editable: true
        },
        {
          name: "lastName",
          width: 200,
          editable: true
        }
      ],
      data: [{
          id: 10,
          firstName: "Angela",
          lastName: "Merkel"
        },
        {
          id: 20,
          firstName: "Vladimir",
          lastName: "Putin"
        },
        {
          id: 30,
          firstName: "David",
          lastName: "Cameron"
        },
        {
          id: 40,
          firstName: "Barack",
          lastName: "Obama"
        },
        {
          id: 50,
          firstName: "François",
          lastName: "Hollande"
        }
      ],
      pager: true,
      pgbuttons: false,
      pginput: false,
      viewrecords: true,
      pagerRightWidth: 90
    })
    .jqGrid('navGrid', {
      edittext: 'Edit',
      addtext: 'Add',
      deltext: 'Del',
      search: false,
      view: true,
      viewtext: 'View',
      refresh: true,
      refreshtext: 'Refresh'
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>

Answer 1

通过在 css / ui.jqgrid.css 文件中覆盖 .formElement 类的 width 属性设置来解决该问题。 .ui-jqdialog-content 类以下列方式：

.ui-jqdialog-content .FormElement {
    width: initial;
}

您可以看到修改后的JSFiddle代码

<强>解释

jqgrid 和 free-jqgrid 在设置 .FormElement 类

的属性方面存在差异

/* jqgrid 4.6.0 css/ui.jqgrid.css line 112 */
.ui-jqdialog-content input.FormElement {padding:.3em}

/* free-jqgrid 4.15.4 css/ui.jqgrid.css line 935 */
.ui-jqdialog-content .FormElement {
  width: 100%;
  box-sizing: border-box;
}

行 width：100％会导致编辑对话框中的所有输入尽可能宽，忽略 size 属性。
这可以通过重写 witdh：initial 来解决，如前所示。

为什么free-jqgrid的editoptions属性中的size属性不受尊重？

1 个答案: