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

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

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

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

view source print ?

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 source print ?

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 source print ?

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/,在线帮助