Blazor 在运行时在网格单元中设置属性背景颜色

Question

问题是：我有一个网格（智能 htmlelements），当我添加一行时，我想将该行中单元格的背景颜色设置为数据行中提供的值 - 因此单元格颜色在行之间有所不同。

为了能够拦截单元格格式，我在列上有一个模板。 这正在触发，我有值（比如

#AABBCC

），但我需要将 div 的 style 属性的背景颜色设置为此 - 这就是生活变得困难的地方。

[编辑：我已经扩展了代码，并用我尝试过但不起作用的方法重新定义了问题的本质]

这是我写的

<template id="colourTemplate">
  <div style="width: 100%; height:100%;">
    <div smart-if="value == value">
      ***<div @attributes=ColourFunction(#AABBCC) >{{value}}</div>***
    </div>
  </div>
</template>
<Grid @ref="cdfGrid1" DataSource=@dsColourDifference Appearance=@appearance>
  <Columns>
     <Column DataField="sample1" Label="Colour1" Template="@colourTemplate"> 
     </Column>
  </Columns>
</Grid>

      @code{ 
        Dictionary<string, object> ColourFunction(string value)
        {
          var dict = new Dictionary<string, object>();
          dict.Add("style", "background-color: " + value);
          return dict;
        }
      }

我需要将单元格值

{{value}}

推入div的背景颜色中。 “value”可用作 div 输出 {{value}} 和 smart-if 中，但不适用于 div 属性。所以替换这条线

<div style="background-color: #AABBCC">{{value}}</div>

使用传入单元格

{{value}}

而不是硬编码

#AABBCC

。以下不起作用：

<div style="background-color: {{value}}">{{value}}</div>
<div style="background-color: @value">{{value}}</div>
<div style="background-color: @{value}">{{value}}</div>
<div style="background-color: @{{value}}">{{value}}</div>
<div style="background-color: @(x => {value;}">{{value}}</div>
<div style="background-color: @(x => {{value;}}">{{value}}</div>
//Last two based on the error message from attempt #3
//Code blocks delimited by '@{...}' like '@{ {value} }' for attributes 
//are no longer supported These features have been changed to use 
//attribute syntax. Use 'attr="@(x => {... }"

我尝试了属性喷溅（如下），但我也遇到了同样的问题，即将

{{value}}

推入我内联执行的函数参数中。

这不起作用（编译错误）

<div @attributes="ColourFunction({{value}})">{{value}}</div>

Answer 1

执行此操作的 blazor 方法是为单元格内容创建一个组件：

Cell.razor

<div style="width: 100%; height:100%;">
    <If Condition="true">
        <div @attributes="@ColourFunction(Color)" >@CurrencyValue</div>
    </If>
</div>

@code {
    [Parameter]
    public string Color { get; set; }

    [Parameter]
    public double Value { get; set; }

    string CurrencyValue => Value.ToString("C2");

    Dictionary<string, object> ColourFunction(string value)
    {
        var dict = new Dictionary<string, object>();
        dict.Add("style", $"background-color: {value};");
        return dict;
    }
}

用法

<Cell Color="red" Value="20"/>

注意：您不必使用字典方法来实现此目的，您可以将

style="background-color: @Value;"

直接放在

<div>

上。由于问题是关于喷溅，我只更新了您的函数以使用字符串。

工作REPL

Answer 2

HTMLElements 的技术支持已做出回应，这是他们的 Grid 组件的问题。 无法完成，因为无法访问“值”。

更新：HTMLElements 技术支持人员有一个解决方案：

<template id="colourTemplate">
  <div style="width: 100%; height:100%;">
    <!-- Note: this shows a few designer errors but works-->
    <div style="background:{{value}};">&nbsp;</div>
  </div>
</template>
<Grid @ref="cdfGrid1" DataSource=@dsColourDifference Appearance=@appearance>
  <Columns>
    <Column DataField="sample1" Label="Colour1" Template="@colourTemplate"> 
    </Column>
   </Columns>
</Grid>

1. 需要使用背景而不是背景颜色；
2. div内容需要使用不间断空格来保证显示。

Answer 3

我们可以使用 JavaScript 设置特定列的背景颜色来赋予颜色。Quickgrid Table

我想要的是检查表中显示的数据是否为 nomainee。如果此人是提名人，则值为 1。 脚本

高排：

<style>
.highlight-row{
    background-color: limegreen;
}

我希望这能回答你的问题

Answer 4

无意冒犯，但这就是为什么我不为 Blazor 使用第 3 方的东西。 如果我遇到一个问题，可能会浪费一天的时间去弄清楚别人是如何做某事的——但我可以编写一个控件在一两个小时内完成几乎任何事情。 Blazor 让它变得几乎可笑的简单。

我唯一会使用第三方的是一个完整的 HTML 编辑器，因为这涉及一些非常聪明的字符串解析，我不想自己弄清楚。 但是桌子呢？ 不值得。