手动覆盖列单元格 left/right 填充不起作用

Question

演示可在 link remvoed 找到并使用 jqgrid 版本 4.9.2

在那里你会发现我在 https://dealerapp-dev.bookitout.com/Member/Css/jqgrid-v4.9.2/ui.jqgrid-bio-extended.css

中对单独的 CSS 文件进行了 link 引用

在该文件中，我覆盖了 ui.jqgrid.css 中的默认 left/right 填充，将其从 2px 更改为 15px ui.jqgrid-bio-extended.css[=18] =]

左侧填充效果很好，但右侧填充被隐藏（或切掉）。

.ui-jqgrid tr.jqgrow > td { padding: 0 15px 0 15px; }

如何让它不被砍掉？

Answer 1

首先可以看到，在 auto-resizing 之后，列的宽度不是最佳的。之所以存在这个问题，是因为在计算最佳大小时使用的 getAutoResizableWidth 方法假设所有行的填充相同。存在宽度为 0px 的第一行具有 class jqgfirstrow 而不是其他行中使用的 class jqgrow 数据。要解决此问题，您也应该调整 .ui-jqgrid tr.jqgfirstrow > td

.ui-jqgrid tr.jqgfirstrow > td { padding: 0 15px 0 15px; }

我建议您使用以下更常见的 CSS 规则：

.ui-jqgrid tr.jqgfirstrow > td,
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.footrow > td {
    padding: 0 15px 0 15px;
}

并考虑额外增加列 headers 的填充：

.ui-jqgrid .ui-jqgrid-htable th {
    padding: 0 15px 0 15px;
}
.ui-jqgrid .ui-jqgrid-resize-ltr {
    margin: -2px -15px -2px 0;
}

关于删掉单元格中的文字，我认为存在padding的误解。文本不必被截断。我不知道 CSS 是否足够好，但我可以建议您将每个单元格的内容放在 <div> 中，其中有 CSS 属性 overflow: hidden。它将跟随案例中的内容进行切割。对应代码

$("#" + _jqgridSpreadsheetId).bind("jqGridAfterLoadComplete jqGridAfterAddRow", function () {
    $(this).find("tr.jqgrow>td").wrapInner("<div style='overflow: hidden;'></div>");
});

会降低网格的性能，但它会像你想要的那样切断文本。建议在创建网格之前添加代码。仅在您确定代码将在第一次加载网格时起作用的情况下。

最后一句话。您应该添加 jquery-2.0.3.min.map 并在您拥有 jquery-v2.0.3.min.js 的同一文件夹中，因为评论 //@ sourceMappingURL=jquery-2.0.3.min.map 存在于 jquery-v2.0.3.min.js 中。同样，jquery-2.0.3.min.map 通常包含 "sources":["jquery-2.0.3.js"]，因此您也应该包含 non-compressed 文件 jquery-2.0.3.js。当前在调试器中加载您的演示会在控制台中产生以下错误消息：

HTTP404: NICHT GEFUNDEN: Der Server hat keine Übereinstimmungen für den angeforderten URI (Uniform Resource Identifier) gefunden. (XHR): GET - https://dealerapp-dev.bookitout.com/Member/Scripts/jquery-v2.0.3/jquery-2.0.3.min.map

手动覆盖列单元格 left/right 填充不起作用

Manually override column cells left/right padding dont work

jqgrid

free-jqgrid