Free jqGrid与Ace Admin模板头部显示问题及解决方案咨询

API 探路者

2026-5-29

解决Ace Admin与jqGrid集成时分组标题的多余竖线问题

我之前也碰到过类似的样式冲突问题，刚好可以给你几个靠谱的CSS覆盖方案，不用去修改jqGrid或者Ace Admin的源码：

方案1：针对性覆盖冲突样式

先通过开发者工具确认Ace Admin的.ui-row-ltr是哪个具体样式导致了多余竖线（大概率是右侧边框或者某个伪元素），然后给jqGrid的首行.jqgfirstrow单独覆盖：

/* 假设是右侧边框导致的多余竖线，直接去掉 */
.ui-jqgrid-btable .jqgfirstrow.ui-row-ltr {
  border-right: none !important;
}

/* 如果是伪元素（比如::after）生成的线条，就隐藏它 */
.ui-jqgrid-btable .jqgfirstrow.ui-row-ltr::after {
  display: none !important;
}

方案2：重置jqgfirstrow的样式，不受ui-row-ltr影响

如果不确定具体冲突样式，或者想彻底让.jqgfirstrow摆脱.ui-row-ltr的影响，可以用all: unset重置样式，再恢复jqgfirstrow本身需要的基础样式：

.ui-jqgrid-btable tr.jqgfirstrow.ui-row-ltr {
  /* 重置所有样式 */
  all: unset;
  /* 恢复jqGrid首行必要的样式 */
  display: table-row !important;
  height: auto !important;
  background-color: transparent !important;
}