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

cfnet

浏览: 48586 次
性别:
来自: 合肥

最近访客更多访客>>

jaymsimusic

xiaozhucan

caobb

hch1011

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT tinymce Ajax JavaScript

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

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

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

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

            Ext.Ajax.request({

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

                params:{

                 nodeId:node.id,

                 oldParentId:oldParent.id,

                 newParentId:newParent.id,

                 index:index

                }

            });

        });

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

在action 中，使用如下代码：

/**

     * 移动节点

     * @return

     */

    public String move(){

        Map params=this.getParameterMap();

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

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

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

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

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

        return null;

    }

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

/**

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

     * 

     * @param nodeId

     * @param oldParentId

     * @param newParentId

     * @param index

     *            节点的新索引顺序

     */

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

    {

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

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

        ExtTree tree = this.get(nodeId);

        ExtTree parent = tree.getParent();

        List nodes = null;

        Integer oldOrderIndex = tree.getOrder();

        Integer newOrderIndex = Integer.parseInt(index);

        // 如果是同级移动

        if (oldParentId.equals(newParentId))

        {

            if (null != parent)

            {

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

            } else

            {

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

            }

            // 如果是向下移动

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

            {

                if (CollectionUtils.isNotEmpty(nodes))

                {

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

                    {

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

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

                        if (null != temp)

                        {

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

                            this.save(temp);

                        }

                    }

                }

                tree.setOrder(newOrderIndex);

                this.save(tree);

            } else

            {

                // 如果向上移动

                if (CollectionUtils.isNotEmpty(nodes))

                {

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

                    {

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

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

                        if (null != temp)

                        {

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

                            this.save(temp);

                        }

                    }

                }

                tree.setOrder(newOrderIndex);

                this.save(tree);

            }

        } else

        {

            // 如果是跃级移动

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

            if (oldParentId.equals(StringPool.TREE_ROOT_ID))

            {

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

            } else

            {

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

            }

 

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

            {

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

                {

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

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

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

                    this.save(temp);

                }

            }

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

            if (newParentId.equals(StringPool.TREE_ROOT_ID))

            {

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

            } else

            {

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

            }

            if (CollectionUtils.isNotEmpty(nodes))

            {

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

                {

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

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

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

                  &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);

                }

            }

            tree.setOrder(newOrderIndex);

            parent = this.get(newParentId);

            tree.setParent(parent);

            this.save(tree);

        }

    }

在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