如何在jQWidgets中用cellsRenderer设置单元格样式并实现垂直居中？

当你使用cellsRenderer直接返回文本时，会替换掉jqxGrid默认的单元格内部结构——默认情况下，单元格内容会被包裹在带有垂直居中样式的容器中，而自定义返回的文本没有这个容器，因此无法继承居中样式，导致内容靠左上对齐。

有两种简单方式能让自定义内容和其他单元格显示保持一致：

方法1：复用默认单元格结构（推荐） #

利用cellsRenderer的defaulthtml参数，它包含了默认的单元格容器结构，只需替换其中的内容即可完整保留默认样式：

cellsRenderer: function (row, column, value, defaulthtml, columnproperties) {
  if (value == "") {
    // 替换默认容器内的文本
    return defaulthtml.replace(/<div[^>]*>(.*?)<\/div>/, '<div><i>--未指定--</i></div>');
  }
  // 非空值返回默认结构，避免破坏其他单元格样式
  return defaulthtml;
}

方法2：手动添加居中样式容器 #

手动给自定义文本加上和默认单元格一致的容器结构，确保样式匹配：

cellsRenderer: function (row, column, value, defaulthtml, columnproperties) {
  if (value == "") {
    // 模拟默认单元格的容器结构，添加垂直居中样式
    return '<div style="display:flex;align-items:center;height:100%;"><i>--未指定--</i></div>';
  }
  // 非空值返回默认内容
  return defaulthtml;
}

• 必须在value != ""时返回defaulthtml，否则非空的日期单元格会丢失默认的格式和样式。
• 你的代码已开启autorowheight，两种方法都能完美适配行高变化，保持居中效果。

内容的提问来源于stack exchange，提问作者Millhorn