如何解决Kendo React Treeview - 添加新节点时编辑以前的元素
目前我正在使用 Kendo React Treelist 组件，但我有一个我自己无法解决的问题。 当我添加一个元素时，我们可以在这里看到它内联。问题是，当想要再次创建一个时，在我添加一个后，实体都进入编辑模式。有人/有人有类似的问题或有想法吗？ Adding element
在这里我们可以看到，正在渲染新的，但也正在渲染旧的。这不应该是这种情况。 Adding elements double
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
TreeList,TreeListToolbar,mapTree,extendDataItem,removeItems,modifySubItems,TreeListTextEditor,TreeListBooleanEditor
} from '@progress/kendo-react-treelist';
import { AutoComplete,ComboBox,multicolumnComboBox,DropDownList,MultiSelect,DropDownTree } from '@progress/kendo-react-dropdowns';
import MyCommandCell from './commandCell.jsx';
import employees from './data';
const subItemsField = 'Children';
const expandField = 'expanded';
const editField = 'inEdit';
var valueOfClasses = { id: "2",text: "Company" };
var parentId = null;
var lastClassname = null;
class DropDownForClasses extends React.Component {
constructor() {
super();
}
state = {
nodeClasses: ["1","2"],value: { id: "2",text: "Company" }
}
handleChange = (event) => {
valueOfClasses = event.target.value;
lastClassname = event.target.value.text;
this.setState({
value: event.target.value,lastClassId: event.target.text
});
}
componentDidMount = () => {
fetch('./Api/Nodes/GetAllClassesForKendoDropDown').then(response => {
if (response.ok) {
return response
} else {
throw new Error('Error with fetching data from server');
}
})
.then(response => response.json())
.then(response => JSON.parse(response))
.then(
result => {
if (result.length == 0) {
} else {
this.setState({
nodeClasses: result
});
}
})
.catch(error => this.setState({ error }));
}
render() {
const { dataItem,field } = this.props;
const cellData = dataItem[field];
return (
<td>
<DropDownList textField="text" dataItemKey="id" data={this.state.nodeClasses} value={this.state.value} onChange={this.handleChange} />
</td>
);
}
}
class CustomCellForClasses extends React.Component {
render() {
const { dataItem,field } = this.props;
const cellData = dataItem[field];
return (
<td>
{dataItem.classId == undefined ? <span >{lastClassname}</span> : <span >{dataItem.classId}</span>}
</td>
);
}
}
class KendoTreeview extends React.Component {
state = {
data: employees.slice(),expanded: [1,2,32],classId: 3,inEdit: []
}
addChild = (dataItem) => {
const newRecord = this.createNewItem();
parentId = dataItem.id;
this.setState({
inEdit: [...this.state.inEdit,newRecord],expanded: [...this.state.expanded,dataItem.id],data: modifySubItems(
this.state.data,subItemsField,item => item.id === dataItem.id,subItems => [newRecord,...subItems]
)
});
}
enterEdit = (dataItem) => {
this.setState({
inEdit: [...this.state.inEdit,extendDataItem(dataItem,subItemsField)]
});
}
generateGuid = () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function (c) {
var r = Math.random() * 16 | 0,v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
//when pressing add after inline editing
save = (dataItem) => {
var { isNew,inEdit,...itemToSave } = dataItem;
dataItem.id = this.generateGuid();
dataItem.Class = valueOfClasses.id;
var allCookies = document.cookie.split(';');
for (var i = 0; i < allCookies.length; i++)
document.cookie = allCookies[i] + "=;expires=" + new Date(0).toUTCString();
document.cookie = dataItem.id;
var baseUrl = window.location.origin;
var nameOfEntity = dataItem.name;
fetch(baseUrl + '/Api/Node/CreateNoteFromClient?parentId=' + parentId + "&classId=" + parseInt(valueOfClasses.id) + "&name=" + nameOfEntity + "&id=" + dataItem.id,{
method: 'post',headers: {
'Accept': 'application/json,text/plain,*/*','Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
return response
} else {
throw new Error('Error with fetching data from server');
}
})
.then(
this.setState({
data: mapTree(this.state.data,item => item.id === itemToSave.id ? itemToSave : item),inEdit: this.state.inEdit.filter(i => i.id !== itemToSave.id)
}));
}
cancel = (editedItem) => {
const { inEdit,data } = this.state;
if (editedItem.isNew) {
return this.remove(editedItem);
}
this.setState({
data: mapTree(data,item => item.id === editedItem.id ? inEdit.find(i => i.id === item.id) : item),inEdit: inEdit.filter(i => i.id !== editedItem.id)
});
}
remove = (dataItem) => {
this.setState({
data: removeItems(this.state.data,i => i.id === dataItem.id),inEdit: this.state.inEdit.filter(i => i.id !== dataItem.id)
});
const nodeId = dataItem.id;
if (window.confirm('Are you sure,you want to delete this item?')) {
window.location.href = './Node/Delete/' + nodeId;
}
}
CommandCell = MyCommandCell(this.enterEdit,this.remove,this.save,this.cancel,this.addChild,editField);
onExpandChange = (e) => {
this.setState({
expanded: e.value ?
this.state.expanded.filter(id => id !== e.dataItem.id) :
[...this.state.expanded,e.dataItem.id]
});
}
onItemChange = (event) => {
this.setState({
data: mapTree(
this.state.data,item => item.id === event.dataItem.id ?
extendDataItem(item,{ [event.field]: event.value }) : item
)
});
}
//When pressing add new and render inline edit setup
addRecord = () => {
const newRecord = this.createNewItem();
this.setState({
data: [newRecord,...this.state.data],inEdit: [...this.state.inEdit,{ ...newRecord }]
});
}
createNewItem = () => {
const timestamp = new Date().getTime();
return { id: null,isNew: true};
}
componentDidMount = () => {
fetch('./Api/Nodes/GetAllNodesWithChildrenForKendo')
.then(response => {
if (response.ok) {
return response
} else {
throw new Error('Error with fetching data from server');
}
})
.then(response => response.json())
.then(response => JSON.parse(response))
.then(
result => {
if (result.length == 0) {
} else {
this.setState({ data: result.slice()})
}
})
}
render() {
const { data,expanded,classId } = this.state;
return (
<TreeList
style={{ overflow: 'auto' }}
data={mapTree(data,item =>
extendDataItem(item,{
[expandField]: expanded.includes(item.id),[editField]: Boolean(inEdit.find(i => i.id === item.id))
}))
}
editField={editField}
expandField={expandField}
subItemsField={subItemsField}
onItemChange={this.onItemChange}
onExpandChange={this.onExpandChange}
columns={[
{ field: 'name',title: 'Name',width: 280,editCell: TreeListTextEditor,expandable: true },//{ field: 'Info',title: 'Info',width: 160,editCell: TreeListTextEditor },{ field: 'classId',title: 'Class',cell: CustomCellForClasses,editCell: DropDownForClasses },{ cell: this.CommandCell,width: 360 }
]}
toolbar={
<TreeListToolbar>
<button
title="Add new"
className="k-button k-primary"
onClick={this.addRecord}
>
Add new
</button>
</TreeListToolbar>
}
/>
);
}
}
ReactDOM.render(
<KendoTreeview />,document.getElementById('KendoTreeview')
);
命令单元：
import * as React from 'react';
import jquery from 'jquery';
window.$ = window.jQuery = jquery;
export default function MyCommandCell(enterEdit,remove,save,cancel,addChild,editField) {
return class extends React.Component {
EditPerAjax(rowInfo) {
//$(document).ready(function () {
var allCookies = document.cookie.split(';');
for (var i = 0; i < allCookies.length; i++) {
document.cookie = allCookies[i] + "=;expires=" + new Date(0).toUTCString();
}
if (rowInfo.id == null) {
rowInfo.id = document.cookie;
};
$.ajax({
url: '/Node/Edit/' + rowInfo.id,type: 'GET',success: function (data) {
$('#titleOfEntity').text('Edit: ' + rowInfo.name);
$('#contentOfBody').html(data);
},error: function () {
alert("Something went wrong while fetching partial view!");
},cache: true
});
//});
}
render() {
const { dataItem } = this.props;
return dataItem[editField]
? (
<td>
<div className="modal" role="dialog" id="myModal">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h3 id="titleOfEntity" className="modal-title"></h3>
<button type="button" className="close" data-dismiss="modal" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</div>
<div id="createNodeFormModalBody" className="modal-body">
<div id="contentOfBody"></div>
</div>
</div>
</div>
</div>
<button
className="k-button"
onClick={() => save(dataItem)}>
{dataItem.isNew
? 'Add'
: 'Update'}
</button>
<button
className="k-button"
onClick={() => cancel(dataItem)}>{dataItem.isNew
? 'discard'
: 'Cancel'}
</button>
</td>
) : (
<td>
<div className="modal" role="dialog" id="myModal">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h3 id="titleOfEntity" className="modal-title"></h3>
<button type="button" className="close" data-dismiss="modal" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</div>
<div id="createNodeFormModalBody" className="modal-body">
<div id="contentOfBody"></div>
</div>
</div>
</div>
</div>
<button
className="k-button"
onClick={() => addChild(dataItem)}>
Add Node
</button>
<button className="k-button" id="createModal" data-toggle="modal" data-target="#myModal" data-dismiss="modal" onClick={() => this.EditPerAjax(dataItem)}>Edit</button>
<button
className="k-button"
onClick={() => remove(dataItem)}>
Remove
</button>
</td>
);
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
