blazor——更改数据网格中任何行的背景/文本颜色

IgbDataGrid 是一个已弃用的控件。请改用IgbGrid 。如果您对如何在IgbGrid中实现有任何疑问，请联系我们的技术支持。

要更改 DataGrid 特定行的样式，例如背景颜色或文本颜色，请编写更改单元格样式的 JavaScript 并将其设置为每列的 DataBoundScript。

下面是一个示例代码，它根据“ProductName”单元格的值更改行的背景颜色和文本颜色。
值为“Item1”的行的文本颜色为蓝色，值为“Item2”的行的背景颜色为绿色。

剃刀

<DataGrid Height="100%"

          Width="100%"

          @ref="DataGridRef"

          DataSource="DataSource"

          AutoGenerateColumns="false">

    <NumericColumn Field="ProductID" HeaderText="Product ID" DataBoundScript="onColumnDataBound" />

    <TextColumn Field="ProductName" HeaderText="Product Name" DataBoundScript="onColumnDataBound" />

    <NumericColumn Field="Price" HeaderText="Price" DataBoundScript="onColumnDataBound" />

    <DateTimeColumn Field="OrderDate" HeaderText="Order Date" DataBoundScript="onColumnDataBound" />

</DataGrid>

javascript

function onColumnDataBound(column, args) {

    if (args.rowObject.ProductName == "Item1") {

        args.cellInfo.textColor = "blue";

    }

    else {

        args.cellInfo.textColor = '#181d1f';

    }

    if (args.rowObject.ProductName == "Item2") {

        args.cellInfo.background = "green";

    }

    else {

        args.cellInfo.background = 'white';

    }

}

igRegisterScript("onColumnDataBound", onColumnDataBound, false);