活字格V9帮助手册
页面树结构
转至元数据结尾
转至元数据起始

活字格的单元格可以通过 Ribbon 设置样式，包括背景颜色、字体、字体颜色、字号、对齐方式、缩进等。

本章节将介绍如何让这些样式设置对插件单元格起作用。

支持样式不需要修改C#代码，只需要在 JavaScript 类中添加相应的处理，在设计器中的样式设置可以通过this.CellElement.StyleInfo属性获取，通过转化为指定Dom元素的Css样式发生效果。

class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
  createContent() {
    const div = $("<div style='width:100%;height:100%;display:flex'>");
    const style = this.CellElement.StyleInfo;

    // 文字样式
    const cssStyle = {
      "color": Forguncy.ConvertToCssColor(style.Foreground),
      "font-size": style.FontSize > 0 ? style.FontSize : undefined,
      "font-family": style.FontFamily ? '"' + style.FontFamily + '"' : undefined,
      "font-style": style.FontStyle?.toLowerCase(),
      "font-weight": style.FontWeight?.toLowerCase(),
      "word-wrap": style.WordWrap ? "break-word" : undefined,
      "word-break": style.WordWrap ? "break-word" : undefined,
      "white-space": style.WordWrap ? "pre-wrap" : "pre",
    };

    // 下划线与删除线
    if (style.Underline || style.Strikethrough) {
      const textDecoration = [];
      if (style.Underline) {
        textDecoration.push("underline");
      }
      if (style.Strikethrough) {
        textDecoration.push("line-through");
      }
      cssStyle["text-decoration"] = textDecoration.join(" ");
    }

    // 对齐方式
    if (style.VerticalAlignment === Forguncy.Plugin.CellVerticalAlignment.Center) {
      cssStyle["align-items"] = "center";
    }
    else if (style.VerticalAlignment === Forguncy.Plugin.CellVerticalAlignment.Bottom) {
      cssStyle["align-items"] = "end";
    }
    if (style.HorizontalAlignment === Forguncy.Plugin.CellHorizontalAlignment.Center) {
      cssStyle["justify-content"] = "center";
    }
    else if (style.HorizontalAlignment === Forguncy.Plugin.CellHorizontalAlignment.Right) {
      cssStyle["justify-content"] = "end";
    }
    div.css(cssStyle);
    this.content = div;
    return div;
  }
  setValueToElement(_, value) {
    this.content.text(value?.toString());
  }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);


上例子中，所有样式都是在 createContent 中设置的，这样做会有一个问题，活字格单元格的样式是可以通过设置单元格属性命令或者条件格式在运行时修改的。如果需要支持运行时修改样式，需要重写setFontStyle方法。

修改后代码如下：

class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
    createContent() {
        const div = $("<div style='width:100%;height:100%;display:flex'>");
        const style = this.CellElement.StyleInfo;

        const cssStyle = this.createFontStyleCss(style);

        // 下划线与删除线
        if (style.Underline || style.Strikethrough) {
            const textDecoration = [];
            if (style.Underline) {
                textDecoration.push("underline");
            }
            if (style.Strikethrough) {
                textDecoration.push("line-through");
            }
            cssStyle["text-decoration"] = textDecoration.join(" ");
        }

        // 对齐方式
        if (style.VerticalAlignment === Forguncy.Plugin.CellVerticalAlignment.Center) {
            cssStyle["align-items"] = "center";
        }
        else if (style.VerticalAlignment === Forguncy.Plugin.CellVerticalAlignment.Bottom) {
            cssStyle["align-items"] = "end";
        }
        if (style.HorizontalAlignment === Forguncy.Plugin.CellHorizontalAlignment.Center) {
            cssStyle["justify-content"] = "center";
        }
        else if (style.HorizontalAlignment === Forguncy.Plugin.CellHorizontalAlignment.Right) {
            cssStyle["justify-content"] = "end";
        }
        div.css(cssStyle);
        this.content = div;
        return div;
    }
    setValueToElement(_, value) {
        this.content.text(value?.toString());
    }

    createFontStyleCss(style) {
        // 文字样式
        return {
            "color": Forguncy.ConvertToCssColor(style.Foreground),
            "font-size": style.FontSize > 0 ? style.FontSize : undefined,
            "font-family": style.FontFamily ? '"' + style.FontFamily + '"' : undefined,
            "font-style": style.FontStyle?.toLowerCase(),
            "font-weight": style.FontWeight?.toLowerCase(),
            "word-wrap": style.WordWrap ? "break-word" : undefined,
            "word-break": style.WordWrap ? "break-word" : undefined,
            "white-space": style.WordWrap ? "pre-wrap" : "pre",
        };
    }

    setFontStyle(style) {
        const cssStyle = this.createFontStyleCss(style);
        this.content.css(cssStyle);
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);
  • 无标签