Show Posts
|
Pages: [1] 2
|
4
|
General Category / EasyUI for React / Re: Possibility to get a DataGrid filter rows
|
on: February 05, 2020, 10:41:01 PM
|
closest I've found is to use the onFilterChange event
I tried it but to no avail I did it like this: constructor(props){ super(props){ ... } this.viewRows = [], this.viewRowsLength = 0 }
renderCode = ({ value, row, rowIndex }) =>{ if (rowIndex < this.viewRowsLength) this.viewRows = this.viewRows.slice(0, rowIndex + 1); this.viewRows[rowIndex] = row; this.viewRowsLength = rowIndex; return value };
<DataGrid> ... <GridColumn render = { this.renderCode } field="code" title="Code" width="10%"/> ... ... <DataGrid/>
But maybe possible to make it more simple?
|
|
|
7
|
General Category / EasyUI for React / [SOLVED] DataGrid render only first time
|
on: January 24, 2020, 01:43:58 PM
|
Hello! EasyUI react didn't have the PropertyGrid component. Because I made it from DataGrid like a fragment code bellow. My component gets a new data. State is change but render DataGrid with a new data does not happen. Render happened only one time when new data is taken. "Data" is an array with always length 18. Each element is an object row like a: {"nameField": "code", "valueField": null, "titleField": "Код", "groupField": "Основные", "editorField": "text", "rules": ["required", "positive"] },
I don't understand why this is so Please help me fix this trouble Thanks import React, { Component } from 'react' import { ComboBox, DataGrid, GridColumn, SwitchButton, TextBox, Tooltip, ComboTree } from 'rc-easyui' import ContextMenu from '../context-menu' import ErrorBoundry from '../error-boundry' import CodeEditor from "./item-code-editor";
export default class ItemDetail extends Component { constructor(props) { super(props); this.state = { data: [], processedTreeData: null, parent: null, rules: null, errors: null, editing: false, selection: null, comboData: null, comboDlgClosed: true, comboDlgEditRow: null }; this.validateRules= { //const n = value ? String(value).trim().length : 0; //return value.length === parseInt(param[0], 10); "required": { ... }, "nullable": { ... }, "digital": { "validator": (value) => { console.log("digital validation", value); return /^\d+$/.test(value); }, message: 'Код может состоять только из цифр' }, "float": { "validator": (value) => { console.log("float validation", value); return /^\d*\.?\d+$/.test(value); }, message: 'Значение должно быть десятичным числом' }, "positive": { "validator": (value) => { console.log("positive validation", value); //if(Array.isArray(value)) return true; // Todo доделать!!! return parseInt(value, 10) > 0; }, message: 'Значение не может быть отрицательным', }, //...
}; this.cellErrorMessage = "Ошибка данных"; }
/* ----------------- Lifecycle methods -------------------------------------------- */ componentDidMount() { this.updateData(); }
componentDidUpdate(prevProps, prevState) { if(prevProps.data !== this.props.data) { console.log("componentDidUpdate ItemDetail", this.state.data); // works well this.updateData();} } /* ----------------- Data operations ---------------------------------------------- */ updateData = () => { const { data, processedTreeData } = this.props; if(data){ this.setState({ data, // set a new data processedTreeData, // for a tree }) } };
//...
/* ----------------- Render методы отображения компонента ------------------------- */ renderEditor = ({ row, error }) =>{ //... } };
renderView = ({ value, row }) => { console.log("render view=>", row.nameField, value); // this works only first render if (row.editorField === "text") return(<div>{ row.valueField }</div>); else if(row.editorField === "number") return(<div>{ row.valueField }</div>); else if(row.editorField === "switch") return(<SwitchButton value={row.valueField}/>); else if(row.editorField === "tree"){ const { processedTreeData } = this.state; const node = getNodeByUuid(processedTreeData, row.valueField); //console.log("Render View getNode=>", node, 'row.valuefield=>',row.valueField); if(node) return(<div>{ node.text }</div>);} else if(row.editorField === "combo"){ const dataField = Array.isArray(row.dataField) ? row.dataField : this.props[row.dataField] || null; if(row.valueField===null && Array.isArray(dataField)) return(<div>{ dataField[0].text }</div>); if(row.valueField !== null && Array.isArray(dataField)){ const value = dataField.find(item => (item.value === row.valueField)); if (value !== undefined) return(<div>{ value.text }</div>); } } // Ошибка return(<div className="error">{ this.cellErrorMessage }</div>); };
renderGroup = ({ value, rows }) =>{ return ( <span style={{ fontWeight:'bold'}}>{value} - <span style={{ color:'red' }}>{ rows.length }</span> свойств(а) </span> ) };
renderContextMenu = () => { return( <ContextMenu menu = { this.props.contextMenu } menuRef = { (ref)=>this.menu=ref } handleItemClick = { this.handleContextMenuClick } /> ) };
render() { const { data, rules, comboData, comboDlgClosed } = this.state; //console.log("render ItemDetail", data); return( <ErrorBoundry> <DataGrid ref = { detail=>this.detail=detail } data = { data } //idField = "nameField" columnResizing dblclickToEdit expanderWidth = { 20 } selectionMode = "row" editMode = "row" groupField = "groupField" renderGroup={ this.renderGroup } onCellContextMenu={ this.handleItemContextMenu } onRowClick = { this.handleItemDetailRowClick } onRowDblClick = { this.handleItemDetailRowDblClick } onEditEnd = { this.handleEndEdit } //onEditValidate = { this.handleEditValidate } > <GridColumn width={ 25 }/> <GridColumn field="titleField" title="Имя поля" width="40%"/> <GridColumn field="valueField" title="Параметр" width="60%" editable editRules={ rules } editor={ this.renderEditor } render={ this.renderView } /> </DataGrid> <CodeEditor comboData = { comboData } rules = { rules } comboDlgClosed = { comboDlgClosed } comboDlgManager = { this.comboDlgManager } setKeyboardEventsListener = { this.setKeyboardEventsListener } /> { this.renderContextMenu() } </ErrorBoundry> ) } }
|
|
|
|