Как отключить конкретные столбцы из Eiditing при использовании CellEditCatory из React-Bootstrap-Table2-Editor ⇐ Html

[Anonymous]

Прилагается ниже, код
// Запускается код здесь

Код: Выделить всё

    import React, { Component ,useState } from "react";
import logo from "./logo.svg";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import "./App.css";
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from 'react-bootstrap-table2-paginator';
import Select from 'react-select';
import cellEditFactory from 'react-bootstrap-table2-editor';
`
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";

import moment from 'moment';

class App extends React.Component {
constructor(props, context){
super(props);
this.state={columns : [],schemaData: [] ,fromDate:null,endDate: null,
submittedValue:[],columnsList: [],schemaDataOriginal: [] ,selectedOption: null,selectedOptionNext: null, options: [{ value: null, label: 'Select...' }] , optionsNext: [{ value: null, label: 'Select...' }] ,
colStyle : {
backgroundColor: '#5F9EA0',
width: '200px',
fontSize: '13px'
},
paginationOption :{
custom: true,
marginLeft: '35px'
}
};

this.state.selectStyles = {
menuList: styles => ({
...styles,
background: 'white',
}),
option: (styles, { isFocused, isSelected }) => ({
...styles,
background: isFocused
? '#5F9EA0'
: isSelected
? '#5F9EA0'
: undefined,
zIndex: 1,
}),
menu: base => ({
...base,
zIndex: 100,
}),
}

}

// Первая функция запускается здесь
fetchEdSource(tableNameFirst){
var paramKey = {};
paramKey['tableNameFirst']= tableNameFirst;

axios.get("/apiEdSource",{responseType: 'json',params: paramKey}).then((res)=>{
this.setState({schemaDataOriginal: res.data});
this.state.schemaData= this.state.schemaDataOriginal;
var sb = [];
var ot = [];
var otn = [];
this.state.columnsList = Object.keys(this.state.schemaDataOriginal[0]);
Object.keys(this.state.schemaDataOriginal[0]).map((key) =>{
sb.push({dataField: key,text: key, sort : true, headerStyle: this.state.colStyle});
})
this.state.columns = sb;
this.state.schemaDataOriginal.map((arrayData) =>{
ot.push({value: arrayData["SOURCE_SYSTEM"]
, label: arrayData["SOURCE_SYSTEM"]
})
})

this.state.schemaDataOriginal.map((arrayData) =>{
otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]
});

})

const filtered = ot.filter(function({value, label}) {

const key =`${value}${label}`;

return !this.has(key) && this.add(key);

}, new Set);
console.log(this.state.options);
for(var i=0;i{

if(selectedOption!==null && selectedOption["label"]==arrayData["SOURCE_SYSTEM"]) {
otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]
});
}
else if(selectedOption["label"] == "Select..."){

otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]

} )
}

})

for(var i=0;i{
if(selectedOption!==null || this.state.selectedOptionNext!== null){

if(this.state.selectedOptionNext==null){

if(selectedOption["label"]==arrayData["SOURCE_SYSTEM"]){
tempSchemaData.push(arrayData);
}
else if (selectedOption["label"]=="Select..."){
this.state.schemaData=this.state.schemaDataOriginal;

}
}

else if(this.state.selectedOptionNext!==null && (selectedOption["label"]==arrayData["SOURCE_SYSTEM"]&&this.state.selectedOptionNext["label"]==arrayData["TABLE_NAME"])){
tempSchemaData.push(arrayData);
}
else if(selectedOption["label"]=="Select..."){
this.state.schemaData=this.state.schemaDataOriginal;

}

}
if(selectedOption["label"]!=="Select..."){
this.state.schemaData=tempSchemaData ;
}
})

}

handleChange = (selectedOption) => {
this.setState({ selectedOption }, () =>
console.log(`Option selected:`, this.state.selectedOption)

)
this.state.selectedOption=selectedOption;
this.updateSelectList(selectedOption);
this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);

};

handleChangeNext = (selectedOptionNext) => {
this.setState({ selectedOptionNext }, () =>
console.log(`Option selected:`, this.state.selectedOptionNext)
);
this.state.selectedOptionNext=selectedOptionNext;
this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);
};

submitCell=()=>{
var paramKey = {};

if(this.state.submittedValue.length!==0){
var params = new URLSearchParams();

const encodedFilters = encodeURIComponent(JSON.stringify(this.state.submittedValue));
console.log(encodedFilters.toString);

let config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
} ;
var url =`/apiEdSourceUpdate?filters=${encodedFilters}`;

axios.post(url,params, config).then((res)=>{

}).catch(e=>{
console.log(e)
});
}
this.state.submittedValue=[];
}
saveCell=(oldValue, newValue, fieldUpdated,TABLE_ID)=>{

this.state.submittedValue.push({"oldValue": oldValue,"newValue":newValue,"fieldUpdated":fieldUpdated,"TABLE_ID":TABLE_ID});

}

handleFromDateChange(date) {
this.setState({
fromDate: date
});
}
handleEndDateChange(date){
this.setState({
endDate: date
});

}

//here is the render function

render()
{
const { selectedOption } = this.state;
const {selectedOptionNext} = this.state;
const {selectedDate} = this.state;

return (

{this.state.columns.length !==0 ?



this.handleFromDateChange(date)} placeholderText="From Load Date"/>
this.handleEndDateChange(date)} placeholderText="End Load Date"/>

{this.submitCell(this.state)}}>SUBMIT
{
this.saveCell(oldValue, newValue,row, column)
}
})}/>:

• {this.fetchEdSource('[ODIN_WORK.[dbo].[ed_source_table]')}}>ED Source Table

}


);
}
}

export default App;
< /code>
Как отключить конкретные столбцы из редактирования CellEditFactory от 'React-Bootstrap-Table2-Editor. Есть ли предварительно построенный метод для этого. < /P>
выше-это код, в котором используется React-bootstrap, react-search, react-дат-пикер.
вместе с тем, что есть пара определенных пользовательских функций.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... y-from-rea