Question

我正在从我的应用程序中的React syncfusion设置一个Data Grid表。

我的应用程序是使用antDesign Pro模板，DvaJS，UmiJS和ReactJS构建的。我已经制作了基本的syncfusion数据网格，该网格使用默认字段来获取单元格数据，并且工作正常。

将“模板”字段添加到ColumnDirective或将“行模板”添加到GridComponent时，就会出现错误。

import React, { Component } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { Input } from 'antd';
import moment from 'react-moment';
import { ColumnDirective, ColumnsDirective, Filter, Grid, GridComponent } from '@syncfusion/ej2-react-grids';

@connect(({loading, data})=> ({
  data: data.data,
  loading: loading.effects['data/fetchData']
}))
class dataComponent extends Component {
  constructor(){
    super(...arguments);
    this.state = {
      data: [],
    }
    this.columnTemplate = this.columnTemplate;
  }    

  columnTemplate(props) {  
   return (
       <div className="image"><p>text</p></div>
    );
  }

render() {
    const { match, children, location, dispatch, data} = this.props;
    return (               
       <GridComponent dataSource={data}>
            <ColumnsDirective>
                 <ColumnDirective headerText='Heading' template={this.columnTemplate}/>
                 <ColumnDirective field='EmployeeID' headerText='Employee ID'/>
                 <ColumnDirective field='FirstName' headerText='Name'/>                       
             </ColumnsDirective>
       </GridComponent>
   );
}

预期输出：

标题员工ID名

文本123约翰

实际上，在向代码中添加模板字段后，它不会呈现任何内容。

在控制台中，出现此错误：

未捕获的TypeError：str.match不是函数

at evalExp (template.js:65)
at compile (template.js:52)
at Object.push../node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:57)
at compile (template-engine.js:16)
at templateCompiler (util.js:145)
at new Column (column.js:131)
at prepareColumns (util.js:185)
at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (grid.js:704)
at GridComponent.push../node_modules/@syncfusion/ej2-react-grids/src/grid/grid.component.js.GridComponent.render (grid.component.js:35)
at finishClassComponent (react-dom.development.js:14741)
at updateClassComponent (react-dom.development.js:14696)
at beginWork (react-dom.development.js:15644)
at performUnitOfWork (react-dom.development.js:19312)
at workLoop (react-dom.development.js:19352)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at replayUnitOfWork (react-dom.development.js:18578)
at renderRoot (react-dom.development.js:19468)
at performWorkOnRoot (react-dom.development.js:20342)
at performWork (react-dom.development.js:20254)
at performSyncWork (react-dom.development.js:20228)
at requestWork (react-dom.development.js:20097)
at scheduleWork (react-dom.development.js:19911)
at Object.enqueueSetState (react-dom.development.js:11169)
at DynamicComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
at dynamic.js:91

当我点击 template.js：65 时它显示以下错误：

var isClass = str.match（/ class =“（[^ \”] + |）\ s {2} / g）;

这是我要遵循的代码链接： Syncfusion template example

非常感谢您的帮助！

Answer 1

查询1：如何在React平台的Syncfusion EJ2 Grid上使用列模板。

您可以自定义自己的元素，而不是EJ2网格列中的字段值。请参考下面的代码示例，示例和帮助文档以获取更多信息。

export class ColumnTemplate extends SampleBase { 
constructor() { 
    super(...arguments); 
    this.template = this.gridTemplate; 
} 
gridTemplate(props) { 

     return ( 
   <div className="image"><p>text</p></div>  //Here defined your element 
); 
} 
render() { 
    return (<div className='control-pane'> 
            <div className='control-section'> 
                <GridComponent dataSource={employeeData} width='auto' height='359'> 
                    <ColumnsDirective> 
                        <ColumnDirective headerText='Heading' width='180' template={this.template} textAlign='Center'/> 
                        <ColumnDirective field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'/> 
                        <ColumnDirective field='FirstName' headerText='Name' width='120'/>                            
                    </ColumnsDirective> 
                </GridComponent> 
            </div> 
        </div>); 
}

}

示例链接：https://stackblitz.com/edit/react-gdraob?file=index.js

帮助文档：https://ej2.syncfusion.com/react/documentation/grid/columns/#column-template

查询2：如何在React平台的Syncfusion EJ2网格上使用行模板。

我们为EJ2 Grid提供了行模板功能支持，它允许为行添加模板，并且已渲染元素而不是每个Grid行。请参考下面的代码示例，示例和帮助文档以获取更多信息。

export class RowTemplate extends SampleBase { 
constructor() { 
    super(...arguments); 
    this.format = (value) => { 
        return instance.formatDate(value, { skeleton: 'yMd', type: 'date' }); 
    }; 
    this.template = this.gridTemplate; 
} 
gridTemplate(props) { 

    return (<tr className="templateRow">             
        <td className="details"> 
            <table className="CardTable" cellPadding={3} cellSpacing={2}> 
                   .     .     .     . 
                </tbody> 
            </table> 
        </td> 
    </tr>); 
} 
render() { 
    return (<div className='control-pane'> 
            <div className='control-section'> 
                <GridComponent dataSource={employeeData} rowTemplate={this.template.bind(this)} width='auto' height='335'> 
                    <ColumnsDirective>                             
                        <ColumnDirective headerText='Employee Details' width='300' textAlign='Left' /> 
                    </ColumnsDirective> 
                </GridComponent> 
            </div> 
       </div>); 
}

}

示例链接：https://stackblitz.com/edit/react-ka9ixk?file=index.js

如果您需要进一步的帮助，请与我们联系。

关于

Thavasian和S.

如何在同步融合React DataGrid中使用“模板”和“行模板”字段？

1 个答案: