Как использовать поля «template» и «rowTemplate» в Syncfusion React DataGrid? - PullRequest
Новая
       22

Как использовать поля «template» и «rowTemplate» в Syncfusion React DataGrid?

0 голосов
/ 24 мая 2019

Я настраиваю таблицу Data Grid из React syncfusion в моем приложении.

Мое приложение построено с использованием шаблона antDesign Pro, DvaJS, UmiJS и ReactJS. Я сделал базовую таблицу данных Syncfusion, которая использует поля по умолчанию для извлечения данных ячейки, и она отлично работает.

Как только я добавляю поле "template" в ColumnDirective или "rowTemplate" в 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 сотрудника FirstName

Текст 123 Джон

На самом деле, ничего не отображается после добавления поля шаблона в код.

В консоли я получаю эту ошибку:

Uncaught 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

Буду очень признателен за вашу помощь!

1 Ответ

0 голосов
/ 04 июня 2019

Запрос № 1: Как использовать шаблон столбца в Syncfusion EJ2 Grid на платформе React.

Вы можете настроить собственный элемент вместо значения поля в столбце EJ2 Grid. Для получения дополнительной информации см. Приведенный ниже пример кода, образец и справочную документацию. 

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: Как использовать шаблон строки в Syncfusion EJ2 Grid на платформе React.

Мы предоставили 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

Пожалуйста, свяжитесь с нами, если вам нужна дополнительная помощь.

С уважением,

Thavasianand S.

...