gpt4 book ai didi

typescript - 从 Tree 组件拖放到 DataTable

转载 作者:太空狗 更新时间:2023-10-29 18:26:45 25 4
gpt4 key购买 nike

我想使用从 Tree 组件拖放到 DataTable 的方法。我该怎么做?我使用 PrimeNG,但出了点问题。编译后我没有错误,但我的数据没有拖拽。怎么了?

我的代码:

拖放.ts

import { Component, OnInit } from '@angular/core';
import {Tree} from 'primeng/primeng';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import {Draggable,Droppable} from 'primeng/primeng';
import {ObjectsService} from "../app.tree/objects.service";
import {ClassObject} from "./class.object";

@Component({
selector: 'drag-drop',
template: `
<p-growl [value]="msgs"></p-growl>
<div class="row">
<div class="col-md-6 col-xs-12" style="height: 600px">
<div class="panel">
<div class="panel-heading">
<label class="col-md-offset-5 col-xs-offset-5">Все объекты</label>
</div>
<div class="panel-body">
<p-tree [value]="availableObjects" [style]="{'width':'470px','height':'530px'}"
selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)"
pDraggable="classObjs" (onDragStart)="dragStart($event)" (onDragEnd)="dragEnd($event)"></p-tree>
Selected Node: {{selectedFile ? selectedFile.label : 'none'}}
</div>
</div>
</div>
<div class="col-md-6 col-xs-12" style="height: 600px;">
<div class="panel">
<div class="panel-heading">
<label class="col-md-offset-2 col-xs-offset-5">Объекты, которые относятся к классу</label>
</div>
<div class="panel-body" pDroppable="classObjs" (onDrop)="drop($event)"
[ngClass]="{'ui-state-highlight':draggedObject}">
<p-dataTable [value]="selectedObject">
<p-column field="name" header="Наименование"></p-column>
<p-column field="dBegin" header="Дата начала"></p-column>
<p-column field="dEnd" header="Дата окончания"></p-column>
</p-dataTable>
<div class="row" style="position: absolute; bottom: 0px;">
<p class="col-lg-1" style="height: 30px; width: 5px; border: 1px solid #000; background: #90E803"></p>
<label class="col-lg-7" style="font-size: 12px;"> - новые записи</label>
<a title="Корзина" type="button" class="col-lg-3 btn btn-lg" style="color: #000; float: right;">
<span class="glyphicon glyphicon-trash"></span></a>
</div>
</div>
</div>
</div>
</div>
`,
directives: [Tree, DataTable, Column, Draggable, Droppable]
})
export class DragAndDrop implements OnInit {

availableObjects: ClassObject[];

selectedObjects: ClassObject[];

draggedObject: ClassObject;

constructor(private objectService: ObjectsService){}

ngOnInit() {
this.selectedObjects = [];
this.availableObjects = this.objectService.getObjects();
}

dragStart(event, classObj: ClassObject){
this.draggedObject = event.node;
}

drop(event) {
if(this.draggedObject) {
this.selectedObjects.push(this.draggedObject);
this.availableObjects.splice(this.findIndex(this.draggedObject), 1);
this.draggedObject = null;
}
}

dragEnd(event) {
this.draggedObject = null;
}

findIndex(event) {
let index = -1;
for(let i = 0; i < this.availableObjects.length; i++) {
if(event.node.label === this.availableObjects[i].label) {
index = i;
break;
}
}
return index;
}
nodeSelect(event) {
console.log(event.node);
}
}

object.service.ts

import { Injectable } from '@angular/core';
import {ClassObject} from "../app.drag.and.drop/class.object";

@Injectable()
export class ObjectsService {
getObjects():ClassObject[] {
return [
{
"label": "1",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{"label": "2", "icon": "fa-file-o", "data": "Expenses Document"},
{
"label": "3",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children":[
{"label": "4", "icon": "fa-file-o", "data": "Expenses Document"},
{"label": "5", "icon": "fa-file-o", "data": "Expenses Document"},
]
},
]
}
]
}
}

class.object.ts

import {TreeNode} from "primeng/primeng";

export interface ClassObject {
label?: string;
icon?: any;
expandedIcon?: any;
collapsedIcon?: any;
children?: TreeNode[];
leaf?: boolean;
data: any;
}

最佳答案

尝试添加 draggableNodes="true"& droppableNodes="true"。

<p-tree [value]="files" 
selectionMode="multiple"
[(selection)]="selectedFiles"
(onNodeSelect)="nodeSelect($event)"
draggableNodes="true"
droppableNodes="true"
[contextMenu]="cm">

关于typescript - 从 Tree 组件拖放到 DataTable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37617597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com