Question

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

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

上创建了单独的CSS文件的链接引用

在该文件中，我覆盖ui.jqgrid.css处的默认左/右填充，在2px

中将其从15px更改为ui.jqgrid-bio-extended.css

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

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

如何让它不被切断？

Answer 1

首先，可以看到自动调整大小后列的宽度不是最佳的。存在该问题是因为在计算最佳大小期间使用的getAutoResizableWidth方法假设所有行的填充相同。存在宽度为0px的第一行，其具有类jqgfirstrow，而不是在具有数据的其他行中使用的类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;
}

并考虑增加列标题的填充：

.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"]，因此您也应该包含非压缩文件jquery-2.0.3.js。目前在调试器中加载demo会在控制台中生成以下错误消息：

HTTP404：NICHT GEFUNDEN：Der Server hatkeineÜbereinstimmungenfür den angeforderten URI（统一资源标识符）gefunden。（XHR）： GET - https://dealerapp-dev.bookitout.com/Member/Scripts/jquery-v2.0.3/jquery-2.0.3.min.map

手动覆盖列单元格左/右填充不起作用

1 个答案: