답변 감사합니다.
한가지 더 질문이 있습니다.
예제를 그리드와 트리그리드로 변경해서 구현중인데요
일반그리드에서 트리그리드로 데이터를 drop했을때
플랫한 collectionview 데이터를 트리 구조로 처리해줄 수 있는 메소드나 방법이 있는지 궁금합니다.
<template>
<div class="container-fluid">
<p>첫 번째 FlexGrid 입니다.</p>
<wj-flex-grid
:alternatingRowStep="0"
:allowDragging="true"
:itemsSource="view"
:initialized="initGrid"
>
</wj-flex-grid>
<p>두 번째 FlexGrid 입니다.</p>
<wj-flex-grid
child-items-path="children"
:itemsSource="viewTwo"
:initialized="initGridTwo"
:alternatingRowStep="0"
:allowDragging="true"
>
</wj-flex-grid>
</div>
</template>
<script>
import * as wjCore from "@grapecity/wijmo";
import * as wjGrid from "@grapecity/wijmo.grid";
import "@grapecity/wijmo.vue2.core";
import "@grapecity/wijmo.vue2.grid";
import { getData, getDataTwo } from "./data";
import { CollectionView } from "@grapecity/wijmo";
wjCore.setLicenseKey(window.evalkey);
export default {
name: "HelloWorld",
data() {
return {
flex: null,
flexTwo: null,
original: null,
view: new wjCore.CollectionView(getData(10)),
viewTwo: new CollectionView([
{
country: "Country",
children: [
{
country: "Europe",
children: [
{
country: "UK",
children: [
{ country: "UK-1", product: "UK-1 product" },
{
country: "UK-2",
children: [{ country: "UK-2-1", product: "UK-2-1 product" }]
}
]
},
{ country: "Italy" }
]
},
{
country: "Asia",
children: [{ country: "Korea" }, { country: "Japan" }]
}
]
}
])
};
},
methods: {
initGrid: function (grid) {
this.flex = grid;
},
initGridTwo: function (grid) {
this.flexTwo = grid;
},
// make grid rows draggable
_makeDragSource: function (s) {
// make rows draggable
s.itemFormatter = (panel, r, c, cell) => {
if (panel.cellType == wjGrid.CellType.Cell) {
cell.draggable = true;
}
};
// disable built-in row drag/drop
s.addEventListener(
s.hostElement,
"mousedown",
(e) => {
if (s.hitTest(e).cellType == wjGrid.CellType.Cell) {
e.stopPropagation();
}
},
true
);
// handle drag start
s.addEventListener(
s.hostElement,
"dragstart",
(e) => {
let ht = s.hitTest(e);
if (ht.cellType == wjGrid.CellType.Cell) {
s.select(
new wjGrid.CellRange(ht.row, 0, ht.row, s.columns.length - 1)
);
this.original = s; // drag가 시작된 그리드
e.dataTransfer.effectAllowed = "copy";
e.dataTransfer.setData("text", ht.row.toString());
}
},
true
);
},
// enable drop operations on an element
_makeDropTarget: function (s) {
s.hostElement.addEventListener("dragover", (e) => {
let dragRow = e.dataTransfer.getData("text");
if (dragRow != null) {
e.dataTransfer.dropEffect = "copy";
e.preventDefault();
}
});
s.hostElement.addEventListener("drop", (e) => {
let hti = s.hitTest(e);
let dragRow = e.dataTransfer.getData("text");
if (dragRow != null) {
let item = this.original.rows[parseInt(dragRow)].dataItem;
s.collectionView.sourceCollection.splice(hti.row, 0, item); // 행 추가
this.original.collectionView.removeAt(parseInt(dragRow)); // 드래그 시작 그리드 해당 행 삭제
s.collectionView.refresh();
e.preventDefault();
}
});
},
},
mounted: function () {
this._makeDragSource(this.flex);
this._makeDragSource(this.flexTwo);
this._makeDropTarget(this.flex);
this._makeDropTarget(this.flexTwo);
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* fixed grid height */
.wj-flexgrid {
height: 300px;
}
/* some extra cell padding */
.wj-flexgrid .wj-cell {
padding: 8px;
}
</style>