具有父子关系的Extjs 4.x网格拖放记录

qvsjd97n  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(205)

我创建了一个Extjs(4.X)网格,其中包含父母和孩子的记录。记录是按排序顺序排列的,其中子级中的记录总是出现在其父级的正下方,如图所示,其中“P”指定一个记录为父级,而“C”指定一条记录为子级。
“May”是Peter的父母,Odin是Thor和Loki的父母,Bruce没有孩子被标记为parent(独立实体)

当我在网格中拖放记录时,我希望只更改父母的排序顺序,同时也带上他们的孩子。我已经进步到了一个程度,我可以只允许父母拖拽,而不允许孩子四处移动。例如,如果我持有记录“May Parker”,那么应该允许它放在记录Loki之后,即父级的最后一个子级,或者放在另一个父级之前的一行,或放在网格中最后一行之后。我已经创建了一个小提琴,适用于以下情况:
1> 只允许移动父记录。
2> 如果遍历的记录是Child,则不允许父级移动。(nodeOver记录是子项)。
3> 如果上面的节点是子节点,但它是最后一行,则允许父节点删除。
<3>无法正常工作,因为无论我将Parent放在最后一行之后还是最后一行之前,nodeOver索引都会为我提供网格的最后一个索引。
我使用了如下覆盖:

Ext.override(Ext.view.DropZone, {
    onNodeOver: function(nodeData, source, e, data) {
        if (data && data.records && data.records[0]) {
            // The check should be better specified, e.g. a
            // female with the name 'Malena' would be recognized as male!
            //debugger;

            console.log(this.view.getStore().data.items[nodeData.rowIndex].data);
            console.log(data.records[0].data.type);
           // debugger;
            console.log(nodeData.rowIndex +" Hello  "+this.view.getStore().data.length);
            if (data.records[0].data.type.localeCompare('P') != 0  || ( 
                    this.view.getStore().data.items[nodeData.rowIndex].data.type.localeCompare('  C') == 0  &&
                        nodeData.rowIndex != (this.view.getStore().data.length -1 ) ) ) {
                    return this.dropNotAllowed;
            }

        }
        return this.callOverridden([nodeData, source, e, data]);
    },
    onContainerOver: function(source, e, data) {
        return this.dropNotAllowed;
    }
});

以下是我迄今为止取得的进步:https://fiddle.sencha.com/#view/editor&fiddle/3ji3
如果有人能为我指出以下项目的正确方向,我将不胜感激
1> 我如何将父母及其子女合并,以便拖放俱乐部并移动所有俱乐部?
3> 我如何确保父母不能在另一个父母与其子女之间断绝关系?
请忽略为子记录提供的排名,在现实世界中,我打算仅为父记录提供排名,而为子记录的排名将为空。

dffbzjpn

dffbzjpn1#

使用树梢可以更好地实现这一点,例如:https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#tree-从Ext2.0开始重新排序Works。您可以对任何分支(父级)进行D&D,所有叶子(子级)都将随之移动。

ohfgkhjo

ohfgkhjo2#

下面是网格组标题的一个工作示例。
主要工作是将侦听器添加到groupmousedown并更新eventlistener:

grid.mon(grid, {
            scope: me,
            groupmousedown: me.onGroupMouseDown
        });
onGroupMouseDown: function(view, item, groupName, e) {
        if (e.pointerType === 'mouse') {
            var groupFeature = view.findFeature('grouping'),
                group = groupFeature.getGroup(groupName),
                selectionModel = view.getSelectionModel();

            selectionModel.select(group.items);

            this.onTriggerGesture(view, group.items, item, null, e);
        }
    }

相关问题