Question

正在移动树中的节点，并且当它们被移动时，它们的ID在后端通过C＃在数据库中更新。到目前为止，我已经设法更新了正在移动的节点的位置，但在移动之后，树中其他节点的位置也应该更新。谁能告诉我如何继续这个？

itemmove : {
fn : function(v, oldParent, newParent, index, eOpts) {
var nodeID = v.data.id;
var oldParent = oldParent.data.id;
var newParent = newParent.data.id;
var index = index;
var level = v.data.level;
movenode(nodeID, oldParent, newParent, index, level);
}
}


function movenode(nodeID, oldParent, newParent, index, level) {
Ext.Ajax.request({
    url : 'data/pages.aspx',
    params : {
        UserID : USER.UserID,
        mode : 'MOVENODE',
        currentNode : nodeID,
        oldParentNode : oldParent,
        newParentNode : newParent,
        index : index,
        level : level,
        ProjDB : projDB
    },
    success : function() {
        loadTREEst();
        genMessage(LANG.Suc, LANG.SaveOK, 'tick', false);

    },
    failure : function() {
        genMessage(LANG.Warn, LANG.GenWarn, 'warn', false);
    }
});
}

因此，我将参数发送到SQl，然后更新已移动的节点的索引。

例如，如果我将节点从位置8移动到1，则第8个节点的索引在数据库中更改为1，但第一个节点的索引保持为1.因此，树也不会得到更新。我希望树中的所有其他节点也得到更新。因此，在这种情况下，索引1中的节点将变为索引2，索引2中的节点将变为索引3，依此类推。任何人都可以解释我如何做到这一点。

除自动同步或同步之外是否还有其他方法可以执行此操作？提前谢谢。

Answer 1

这是我为4.0.7编写的代码，在我记忆中它解决了这个问题。

// This happens after drag and drop
onItemMove: function(aNode, aOldParent, aNewParent, aIndex, aOptions)
{

    // Update the indeces of all the parent children (not just the one that moved)
    for ( i = 0; i < aNewParent.childNodes.length; i++ )
    {
        aNewParent.childNodes[i].data.sort = i;
        aNewParent.childNodes[i].setDirty();
    }

    this.mStore.sync();
},

请注意，当您向服务器发送自己的请求时，您将不会有mStore.sync（），这只涉及一条记录。通过将子节点设置为脏，sync将多个记录发送到服务器的更新调用（在我的情况下，我使用自动同步和直接）。

您应该考虑当用户将节点从父节点移动到父节点时会发生什么 - 旧父节点和新父节点中某些节点的索引（排序）将发生变化。因此，您最终可能需要在服务器上更新6条记录。

我所说的是，鉴于4.1已经正确处理节点移动，您可能最好升级到4.1并利用本机支持，而不是自己编码。如果您坚持4.0.7，请记住考虑移动节点可能需要更新许多节点。

Answer 2

以下是一些适用于4.1的示例代码：

Ext.define('BS.model.ItemCategory', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'     , type: 'string'},
        {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
        {name: 'leaf'     , type: 'boolean', defaultValue: false},
        {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
        {name: 'index'     , type: 'int'},        
    ],

    proxy: {
        type: 'direct',

        api: {
            create: ItemCategories.Create,
            read: ItemCategories.Read,
            update: ItemCategories.Update,
            destroy: ItemCategories.Delete,
        },
    }, 
});

您将没有直接代理，因为您的服务器不是php，而只是放置相应的服务器脚本（请参阅docs）。

然后我的商店：

Ext.define('BS.store.ItemCategories', {

    extend: 'Ext.data.TreeStore',    
    model: 'BS.model.ItemCategory',

    autoSync: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },

    clearOnLoad: true,
});

观点：

Ext.define('BS.view.admin.pages.item-categories.ItemCategories' ,
{
    extend: 'Ext.tree.Panel',
    alias : 'widget.item-categories-tree',

    store: 'ItemCategories',

    displayField: 'name',

    rootVisible: false,
    useArrows: true,
    multiSelect: false,
    singleExpand: false,    
    allowDeselect: true,

    plugins: {
        ptype: 'treeviewdragdrop',                    
    },          
});

这就是它！移动节点时，您将看到ExtJS向服务器发送更新请求，其中包含索引（排序）已更改的所有节点的数组。

在EXTJS 4中移动树中的节点

2 个答案: