代码之家 › 专栏 › 技术社区 › Romualdo Caruso

为什么免费jqgrid的editoptions属性中的size属性没有得到尊重?

free-jqgrid jqgrid

0

Romualdo Caruso · 技术社区 · 6 年前

当设置自由jqgrid列模型的editoptions属性的HTML大小属性时,它不会像应该的那样修改相关的输入宽度元素。

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

当我从 jqgrid 4.6.0 到 免费jqgrid 14.15.4 ,此属性的工作方式应与以前相同,以保持编辑对话框的布局不受修改,这一点很重要。

您可以看到 JSFiddle 代码片段。

在该代码中,第6行设置字段的大小 身份证件 至3个字符。当试图编辑任何记录时,可以看到所有输入字段都具有相同的宽度,该宽度尽可能宽到包含对话框的右边距。

如何定义自由jqgrid的“添加”或“编辑”对话框上的输入字段大小?

$(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>

1 回复 | 直到 6 年前

1

0

Romualdo Caruso 6 年前

通过重写中的 css/ui。jqgrid。css 归档宽度的属性设置 .FormElement 类内部a .ui JQ对话框内容 按以下方式分类:

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

您可以看到修改的 JSFiddle 密码

解释

两者之间有区别 jqgrid公司 和 免费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;
}

生产线 宽度:100% 使编辑对话框中的所有输入尽可能广泛,忽略大小所有物
可以通过覆盖 witdh:首字母 如前所示。