Infragistics｜Ultimate UI Blazor｜更改 DataGrid 中任意行的背景色和文字顏色

1 次瀏覽

2023-02-15 更新

IgbDataGrid 是一個已經棄用的控件。請改用IgbGrid 。如果您對如何在IgbGrid中實現有任何疑問，請聯繫我們的技術支援。

要更改 DataGrid 特定行的樣式，例如背景顏色或文字顏色，請編寫更改單元格樣式的 JavaScript 並將其設置為每列的 DataBoundScript。下面是一個示例代碼，它根據“ProductName”單元格的值更改行的背景顏色和文本顏色。值為“Item1”的行的文本顏色為藍色，值為“Item2”的行的背景顏色為綠色。

Razor

<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);