jQuery DevExtreme使用cellTemplate时数值格式与自定义文本不生效如何解决

算力阿峰

2026-9-27

问题原因

DevExtreme DataGrid 中 cellTemplate 为最高优先级的单元格渲染配置，声明后会完全覆盖默认渲染逻辑，因此你原本配置的 format 格式化、customizeText 自定义文本规则都不会自动生效，需要在 cellTemplate 中手动实现对应逻辑。

解决方法

你可以直接将原本的格式化、零值判断逻辑迁移到 cellTemplate 内实现，修正后的贷方列配置如下：

{
  dataField: "credit",
  caption: "CREDIT",
  dataType: "number",
  width: 150,
  cellTemplate: function(container, cellInfo) {
    // 1. 手动实现格式化逻辑，和你之前配置的format规则一致
    const formatConfig = { format: "#,##0.00;(#,##0.00)" };
    const formattedValue = DevExpress.localization.formatNumber(cellInfo.value, formatConfig);
    
    // 2. 零值判断，和你之前customizeText逻辑一致，零值直接留空
    if (formattedValue === "0.00") {
      return;
    }

    // 3. 非零值渲染蓝色可点击链接
    $('<a/>').addClass('dx-link')
      .text(formattedValue)
      .css("color", "blue")
      .on('dxclick', function() {
        $("#popup").dxPopup("instance").show();
        $("#txt").dxTextArea("instance").option("value", formattedValue);
      })
      .appendTo(container);
  }
}