按其值着色 office-ui-fabric-react DetailsList Cell

Posted 2023-03-27

【中文标题】按其值着色 office-ui-fabric-react DetailsList Cell

【英文标题】：Color office-ui-fabric-react DetailsList Cell by its value

【发布时间】：2020-10-10 16:22:56

【问题描述】：

我在 SPFx Web 部件中使用 office-ui-fabric-react DetailsList，它工作正常。我想根据其中的值获得单元格的背景颜色。说红色表示否，绿色表示是。请帮帮我

【参考方案1】：

DetailsList 有一个关于RenderItemColumn 的属性。它指向渲染列表的方法。

我的测试演示：

import * as React from 'react';
import styles from './ReactSpfx1.module.scss';
import  IReactSpfx1Props  from './IReactSpfx1Props';
import  escape  from '@microsoft/sp-lodash-subset';
import  createListItems, IExampleItem  from '@uifabric/example-data';
import  Link  from 'office-ui-fabric-react/lib/Link';
import  Image, ImageFit  from 'office-ui-fabric-react/lib/Image';
import  DetailsList, buildColumns, IColumn  from 'office-ui-fabric-react/lib/DetailsList';
import  mergeStyles  from 'office-ui-fabric-react/lib/Styling';
export interface IDetailsListCustomColumnsExampleState 
  sortedItems: IExampleItem[];
  columns: IColumn[];

export default class ReactSpfx1 extends React.Component<IReactSpfx1Props, any> 
  
  constructor(props) 
    super(props);

    const items = createListItems(10);
    this.state = 
      sortedItems: items,
      columns: _buildColumns(items),
    ;
  
  public render(): React.ReactElement<IReactSpfx1Props> 
    const  sortedItems, columns  = this.state;

    return (
      <DetailsList
        items=sortedItems
        setKey="set"
        columns=columns
        onRenderItemColumn=_renderItemColumn
        onColumnHeaderClick=this._onColumnClick
        onItemInvoked=this._onItemInvoked
        onColumnHeaderContextMenu=this._onColumnHeaderContextMenu
        ariaLabelForSelectionColumn="Toggle selection"
        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
        checkButtonAriaLabel="Row checkbox"
      />
    );
  
  
  private _onColumnClick = (event: React.MouseEvent<htmlElement>, column: IColumn): void => 
    const  columns  = this.state;
    let  sortedItems  = this.state;
    let isSortedDescending = column.isSortedDescending;

    // If we've sorted this column, flip it.
    if (column.isSorted) 
      isSortedDescending = !isSortedDescending;
    

    // Sort the items.
    sortedItems = _copyAndSort(sortedItems, column.fieldName!, isSortedDescending);

    // Reset the items and columns to match the state.
    this.setState(
      sortedItems: sortedItems,
      columns: columns.map(col => 
        col.isSorted = col.key === column.key;

        if (col.isSorted) 
          col.isSortedDescending = isSortedDescending;
        

        return col;
      ),
    );
  ;

  private _onColumnHeaderContextMenu(column: IColumn | undefined, ev: React.MouseEvent<HTMLElement> | undefined): void 
    console.log(`column $column!.key contextmenu opened.`);
  

  private _onItemInvoked(item: any, index: number | undefined): void 
    alert(`Item $item.name at index $index has been invoked.`);
  


function _buildColumns(items: IExampleItem[]): IColumn[] 
  const columns = buildColumns(items);
  //console.log(columns)
  const thumbnailColumn = columns.filter(column => column.name === 'thumbnail')[0];

  // Special case one column's definition.
  thumbnailColumn.name = '';
  thumbnailColumn.maxWidth = 50;
  thumbnailColumn.ariaLabel = 'Thumbnail';
  //thumbnailColumn.className ="test";
  return columns;


function _renderItemColumn(item: IExampleItem, index: number, column: IColumn) 
  const fieldContent = item[column.fieldName as keyof IExampleItem] as string;
 //you just need to change code here 
  switch (column.key) 
    case 'thumbnail':
      return <Image src=fieldContent width=50 height=50 imageFit=ImageFit.cover />;

    case 'name':
      return <Link href="#">fieldContent</Link>;

    case 'color':
      //fieldContent is the column value
        if(fieldContent=="red")
          return (<span
            data-selection-disabled=true
            className=mergeStyles( color: fieldContent, height: '100%', display: 'block' ,background:fieldContent)
          >
            
            fieldContent
          </span>)
        else
          return (
        
            <span
              data-selection-disabled=true
              className=mergeStyles( color: fieldContent, height: '100%', display: 'block' )
            >
              
              fieldContent
            </span>
          );
        
    default:
      return <span>fieldContent</span>;
  


function _copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] 
  const key = columnKey as keyof T;
  return items.slice(0).sort((a: T, b: T) => 

测试结果：