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

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发现，在ui.jqgrid-bio-extended.css

改变它2px到15px左填充的伟大工程，但右填充隐藏（或剁掉）。

.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-v2.0.3.min.js的相同文件夹中添加jquery-2.0.3.min.map，因为在jquery-v2.0.3.min.js中存在//@ sourceMappingURL=jquery-2.0.3.min.map评论。以相同的方式jquery-2.0.3.min.map通常包含"sources":["jquery-2.0.3.js"]，因此您还应该包含非压缩文件jquery-2.0.3.js。当前正在加载的你在调试器演示产生在控制台以下错误信息：

HTTP404：NICHT GEFUNDEN：明镜服务器帽子keineÜbereinstimmungen献给 书房angeforderten URI（统一资源标识符）gefunden。 （XHR）： GET - https://dealerapp-dev.bookitout.com/Member/Scripts/jquery-v2.0.3/jquery-2.0.3.min.map