将 ag-grid 的方向更改为 RTL

Posted 2023-02-18

【中文标题】将 ag-grid 的方向更改为 RTL

【英文标题】：Change the direction of ag-grid to RTL

【发布时间】：2020-04-30 11:57:58

【问题描述】：

我在反应中使用 ag-grid，我想将方向更改为 RTL，也使用本地文本。基于 ag-grid 文档enableRtl=true 将改变网格的样式。当我们永久设置它时确实如此，但是当我想以编程方式更改它时，它不会改变。我通过 props 将变量传递给组件以更改方向和翻译文本。这是我的代码

 const Grid= (dir) =>
  return (
    <div 
      className="ag-theme-balham"
      style= height: '100%', width: '100%'  
    >
      <AgGridReact
        defaultColDef=defaultColDef
        columnDefs=column
        rowData=rowData
        enableRtl=dir === 'rtl'
        localeTextFunc=(key, defaultValue) => 
          return dir === 'rtl' ? gridLocal[key] : defaultValue; 
        
      />
    </div>
  );

before changing direction

after changing direction

As it should be

我搜索了解决方案，但找不到解决方法。 我该怎么办？我的代码有什么问题？

编辑：我在哪里使用了 Grid 组件

const MainLayout = (props) => 
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = useState(false);

  const handleDrawerOpen = () =>  setOpen(true) ;
  const handleDrawerClose = () =>  setOpen(false) ;

  return (
    <div >
      <Topbar 
        setLang=props.setLang
        drawerOpen=handleDrawerOpen 
        drawerClose=handleDrawerClose 
        status=open
        handleSignOut=props.handleSignOut
      />
      <div style=height:'48px'/>
      <div className=classes.content>
        <Sidebar open=open drawerClose=handleDrawerClose/> 
        <Grid dir=theme.direction/>
      </div>
    </div>
  );

【问题讨论】：

尝试使用 dir == 'rtl' 或 dir==="rtl" 作为三等号检查类型并进行比较，因此两个值应具有相同的类型。

没有区别，我认为问题与网格的渲染有关

调试并查看传递给 dir 的值

我用React DevTools和console.log查了一下，值是正确的。

当变量改变时如何重新渲染网格？ @SameerRezaKhan

【参考方案1】：

我也有同样的问题。经过多次搜索，我发现只有一种解决方案。 我用 Angular 没有反应，但是，我可以告诉你我用来解决这个问题的步骤。

我按照以下步骤操作：

我将方向的值存储在本地存储中 创建了一个按钮来触发将改变方向值的事件。 在构造函数中从localstorage中获取方向的值 在触发器内部，我为每个点击事件更改了 localstorage 上的值。 最后，在每次点击事件时，用window.location.reload()刷新页面以查看效果。

我知道。这不是完美的解决方案，但这是唯一对我有用的解决方案。我认为在ag-grid的企业版中没有发现这个问题。

更新： 我找到了更好的解决方案。我使用角度而不是反应。 在角度，我使用<ng-template> 如下：

<ng-template [ngIf]="AgGridDir === 'rtl'" [ngIfElse]="LeftGrid" #Withbutton>
          <ag-grid-angular style="width: 100%; height: 450px;"
            [class]="Table_Color_mode===Constants.light || Theme_dir===Constants.light?'ag-theme-alpine':'ag-theme-alpine-dark'"
            [rowData]="ItemsMainCategories | async" [columnDefs]="columnDefs" (gridReady)="OnGridReady($event)"
            [defaultColDef]="defaultColDef" [overlayLoadingTemplate]="overlayLoadingTemplate" [animateRows]="true"
            [enableRtl]="true" [frameworkComponents]="agFrameworks" rowSelection="single"
            (rowEditingStarted)="onRowEditingStarted($event)" (cellValueChanged)="UpdateItemMainCat($event)">
          </ag-grid-angular>
        </ng-template>
        <ng-template #LeftGrid>
          <ag-grid-angular style="width: 100%; height: 450px;"
            
            [class]="Table_Color_mode===Constants.light || Theme_dir===Constants.light?'ag-theme-alpine':'ag-theme-alpine-dark'"
            [rowData]="ItemsMainCategories | async" [columnDefs]="columnDefs" (gridReady)="OnGridReady($event)"
            [defaultColDef]="defaultColDef" [overlayLoadingTemplate]="overlayLoadingTemplate" [animateRows]="true"
            [enableRtl]="false" [frameworkComponents]="agFrameworks" rowSelection="single"
            (rowEditingStarted)="onRowEditingStarted($event)" (cellValueChanged)="UpdateItemMainCat($event)">
          </ag-grid-angular>
        </ng-template>

<ng-template> 是 Angular 框架创建的标签，可用于根据条件渲染某些组件或 html 标签。

如您所见，我使用了具有相同参数的相同 Ag-grid 表。每个都有一个ng-template。我使用了一个名为AgGridDir 的变量，它根据用户的选择动态更改为rtl 到ltr。

如果用户选择'rtl'，第一个模板被渲染并且[enableRtl]="true"设置为true，如果用户选择'ltr'，那么第二个模板将被动态渲染而不重新加载页面和@987654330 @。

我不知道反应的很多细节，但是，我想分享一下这个想法。