Ext Tree之拖动排序并保存到数据库

Ext Tree的拖动功能，主要包括两方面，同级别节点的拖动和跃级拖动．

Ext Tree提供的响应拖动操作的事件还是比较多的．

Ext Tree demo里面，使用movenode : ( Tree tree, Node node, Node oldParent, Node newParent, Number index ) 来响应节点的拖动操作，在Ext.tree.TreePanel的定义中，加入如下代码，响应拖动操作：

view sourceprint?

01.tree.on('movenode',function(tree,node,oldParent,newParent,index){

02.            Ext.Ajax.request({

03.                url:base.path+'example/extTreeAction!move.do',

04.                params:{

05.                 nodeId:node.id,

06.                 oldParentId:oldParent.id,

07.                 newParentId:newParent.id,

08.                 index:index

09.                }

10.            });

11.        });

在拖动的时候，主要通过发送ajax请求，到后台，进行数据的同步修改．

在action 中，使用如下代码：

view sourceprint?

01./**

02.     * 移动节点

03.     * @return

04.     */

05.    public String move(){

06.        Map params=this.getParameterMap();

07.        String index=params.get("index").toString();

08.        String oldParentId=params.get("oldParentId").toString();

09.        String newParentId=params.get("newParentId").toString();

10.        String nodeId=params.get("nodeId").toString();

11.        this.getBaseService().saveMoveNode(nodeId, oldParentId, newParentId, index);

12.        return null;

13.    }

在service,进行节点的索引，父节点的修改，来执行拖动操作数据到数据库的同步．节点的拖动，像上面说的，分为同级和跃级，同级拖动中，又分为向上拖动和向下拖动，而跃级拖动中，需要处理父节点的变更等事宜，同时，要分别处理原父节点下剩余子节点的索引变更，新父节点下其它子节点的索引变更等问题．：

view sourceprint?

001./**

002.     * 移动节点时,适时保存节点排序到数据库 节点排序规则,同级节点按0-x排序,中间不空缺.

003.     *

004.     * @param nodeId

005.     * @param oldParentId

006.     * @param newParentId

007.     * @param index

008.     *            节点的新索引顺序

009.     */

010.    public void saveMoveNode(String nodeId, String oldParentId, String newParentId, String index)

011.    {

012.        Page page = this.getPageByProperty(null, null, null);

013.        TreeUtils treeUtils = new TreeUtils(page.getItems());

014.        ExtTree tree = this.get(nodeId);

015.        ExtTree parent = tree.getParent();

016.        List nodes = null;

017.        Integer oldOrderIndex = tree.getOrder();

018.        Integer newOrderIndex = Integer.parseInt(index);

019.        // 如果是同级移动

020.        if (oldParentId.equals(newParentId))

021.        {

022.            if (null != parent)

023.            {

024.                nodes = treeUtils.getDirectChildrenTrees(treeUtils.getTransferedTrees(), parent.getId());

025.            } else

026.            {

027.                nodes = treeUtils.getAllParents(treeUtils.getTransferedTrees());

028.            }

029.            // 如果是向下移动

030.            if (newOrderIndex.intValue() > oldOrderIndex.intValue())

031.            {

032.                if (CollectionUtils.isNotEmpty(nodes))

033.                {

034.                    for (int i = oldOrderIndex + 1; i < newOrderIndex + 1; i++)

035.                    {

036.                        Map map = (Map) nodes.get(i);

037.                        ExtTree temp = this.get(map.get(StringPool.TREE_ID).toString());

038.                        if (null != temp)

039.                        {

040.                            temp.setOrder(temp.getOrder().intValue() - 1);

041.                            this.save(temp);

042.                        }

043.                    }

044.                }

045.                tree.setOrder(newOrderIndex);

046.                this.save(tree);

047.            } else

048.            {

049.                // 如果向上移动

050.                if (CollectionUtils.isNotEmpty(nodes))

051.                {

052.                    for (int i = newOrderIndex; i < oldOrderIndex; i++)

053.                    {

054.                        Map map = (Map) nodes.get(i);

055.                        ExtTree temp = this.get(map.get(StringPool.TREE_ID).toString());

056.                        if (null != temp)

057.                        {

058.                            temp.setOrder(temp.getOrder().intValue() + 1);

059.                            this.save(temp);

060.                        }

061.                    }

062.                }

063.                tree.setOrder(newOrderIndex);

064.                this.save(tree);

065.            }

066.        } else

067.        {

068.            // 如果是跃级移动

069.            // 对节点原位置进行处理

070.            if (oldParentId.equals(StringPool.TREE_ROOT_ID))

071.            {

072.                nodes = treeUtils.getAllParents(treeUtils.getTransferedTrees());

073.            } else

074.            {

075.                nodes = treeUtils.getDirectChildrenTrees(treeUtils.getTransferedTrees(), oldParentId);

076.            }

077. 

078.            if (CollectionUtils.isNotEmpty(nodes) && nodes.size() > 1)

079.            {

080.                for (int i = tree.getOrder() + 1; i < nodes.size(); i++)

081.                {

082.                    Map map = (Map) nodes.get(i);

083.                    ExtTree temp = this.get(map.get(StringPool.TREE_ID).toString());

084.                    temp.setOrder(temp.getOrder().intValue() - 1);

085.                    this.save(temp);

086.                }

087.            }

088.            // 对新节点位置进行处理

089.            if (newParentId.equals(StringPool.TREE_ROOT_ID))

090.            {

091.                nodes = treeUtils.getAllParents(treeUtils.getTransferedTrees());

092.            } else

093.            {

094.                nodes = treeUtils.getDirectChildrenTrees(treeUtils.getTransferedTrees(), newParentId);

095.            }

096.            if (CollectionUtils.isNotEmpty(nodes))

097.            {

098.                for (int i = newOrderIndex; i < nodes.size(); i++)

099.                {

100.                    Map map = (Map) nodes.get(i);

101.                    ExtTree temp = this.get(map.get(StringPool.TREE_ID).toString());

102.                    temp.setOrder(temp.getOrder().intValue() + 1);

103.                  &n <script src="../scripts/lib/tinymce/jscripts/tiny_mce/themes/advanced/langs/en.js" type="text/javascript"></script><script src="../scripts/lib/tinymce/jscripts/tiny_mce/plugins/syntaxhl/langs/en.js" type="text/javascript"></script> bsp; this.save(temp);

104.                }

105.            }

106.            tree.setOrder(newOrderIndex);

107.            parent = this.get(newParentId);

108.            tree.setParent(parent);

109.            this.save(tree);

110.        }

111.    }

 

在Ext 2.2的官方文档中，可以看到的拖动事件如下：

movenode : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )

Fires when a node is moved to a new location in the tree

Fires when a node is moved to a new location in the tree

Listeners will be called with the following arguments:

• tree : Tree
  The owner tree
• node : Node
  The node moved
• oldParent : Node
  The old parent of this node
• newParent : Node
  The new parent of this node
• index : Number
  The index it was moved to

nodedragover : ( Object dragOverEvent )

Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent ...

Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent passed to handlers has the following properties:

• tree - The TreePanel
• target - The node being targeted for the drop
• data - The drag data from the drag source
• point - The point of the drop - append, above or below
• source - The drag source
• rawEvent - Raw mouse event
• dropNode - Drop node(s) provided by the source.
• cancel - Set this to true to signal drop not allowed.

Listeners will be called with the following arguments:

dragOverEvent : Object

 

nodedrop : ( Object dropEvent )

Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following propert...

Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following properties:

• tree - The TreePanel
• target - The node being targeted for the drop
• data - The drag data from the drag source
• point - The point of the drop - append, above or below
• source - The drag source
• rawEvent - Raw mouse event
• dropNode - Dropped node(s).

Listeners will be called with the following arguments:

• dropEvent : Object

enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )

Fires when a drag operation is complete

Fires when a drag operation is complete

Listeners will be called with the following arguments:

• this : Ext.tree.TreePanel
• node : Ext.tree.TreeNode
• e : event
  The raw browser event

dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )

Fires when a dragged node is dropped on a valid DD target

Fires when a dragged node is dropped on a valid DD target

Listeners will be called with the following arguments:

• this : Ext.tree.TreePanel
• node : Ext.tree.TreeNode
• dd : DD
  The dd it was dropped on
• e : event
  The raw browser event

以上几乎是Ext Tree提供的所有响应拖动操作的事件

Demo地址:http://www.faceye.com/xuser/,在线帮助

评论

2 楼 释皇天 2010-09-19  

能不能发个源码，包括数据库。谢了我邮箱是：[e-mail]

1 楼 demojava 2010-07-23  

能不能发个源码，谢了我邮箱是：[e-mail]