【Ext-GWT(GXT)】TreePanel异步拖动处理方法

需求：

一、是个树（废话）

二、能拖动（再次废话）

三、异步处理（算个话）

 

首先用GXT来颗树（传送门：GXT的开发图文 ）MBmClient是我定义的一个GWT的Module，extends BaseModelData

    // 部门列表树
    TreePanel<MBmClient
> treeLieBiao = new TreePanel<MBmClient
>(getLieBiaoStore());
    // 设置显示属性为 标题
    treeLieBiao.setDisplayProperty("BIAO_TI");

 

恩，不错。让它能够拖动吧

    final TreePanelDragSource source = new TreePanelDragSource(treeLieBiao);
    source.addDNDListener(new DNDListener());

    TreePanelDropTarget target = new TreePanelDropTarget(treeLieBiao);

    target.setAllowSelfAsSource(true); // 自己可以拖到自己
    target.setAllowDropOnLeaf(true); // 可以拖到叶子
    target.setFeedback(Feedback.INSERT); // 插入方式拖动

 

介个，异步拖动是个什么东西？

首先，他是异步的（^_^），就是说拖动的动作处理是在后台异步进行的，这里我们采用RPC来实现（传送门：GXT+SpringMVC构建方法）。

其次，前台需要根据处理的情况来进行拖动失败提示、拖动成功后的前台节点移动。

重要的是第二条，在以前在ExtJS中的我也碰到过，最后简单的刷新树了事。

要处理好这两条，首先是要找到拖动的相关事件，然后根据事件的执行情况来进行前台操作。

修改上面的代码如下：

    final StrongTreePanelDragSource source = new StrongTreePanelDragSource(treeLieBiao);
    source.addDNDListener(new DNDListener() {

      @Override
      public void dragStart(DNDEvent e) {
        MBmClient sel = treeLieBiao.getSelectionModel().getSelectedItem();
        if (sel == null) {
          e.setCancelled(true);
          e.getStatus().setStatus(false);
          return;
        }
        super.dragStart(e);
      }

    });

    TreePanelDropTarget target = new TreePanelDropTarget(treeLieBiao) {
      @Override
      protected void handleInsertDrop(DNDEvent event, TreeNode item, int index) {
        if (((MBmClient) item.getModel()).getClassName().equals("aaaa")) {
          source.removeSource();
          super.handleInsertDrop(event, item, index);
        } else {
          event.getStatus().setStatus(false);
        }
      }
    };

    target.setAllowSelfAsSource(true);
    target.setAllowDropOnLeaf(true);
    target.setAutoExpand(true);
    target.setFeedback(Feedback.INSERT);

 

StrongTreePanelDragSource.java

public class StrongTreePanelDragSource extends TreePanelDragSource {
  private List<TreeModel> sel;

  @SuppressWarnings({ "rawtypes" })
  public StrongTreePanelDragSource(TreePanel tree) {
    super(tree);
  }

  public void removeSource() {
    if (sel != null && sel.size() > 0) {
      for (TreeModel tm : sel) {
        ModelData m = (ModelData) tm.get("model");
        tree.getStore().remove(m);
      }
    }
  }

  @Override
  protected void onDragDrop(DNDEvent event) {
    if (event.getOperation() == Operation.MOVE) {
      sel = event.getData();
    }
  }
}

 

比较TreePanelDragSource.java中的方法

  @Override
  protected void onDragDrop(DNDEvent event) {
    if (event.getOperation() == Operation.MOVE) {
      List<TreeModel> sel = event.getData();
      for (TreeModel tm : sel) {
        ModelData m = (ModelData) tm.get("model");
        tree.getStore().remove(m);
      }
    }
  }

 

我在StrongTreePanelDragSource.java中重写了onDragDrop方法，不再前台直接删除拖动的节点，而是增加了一个removeSource方法，为的就是将这个方法暴露给TreePanelDropTarget来调用。

 

最后执行的过程就是TreePanelDropTarget的handleInsertDrop事件发生时，判断拖动目标的显示名称是否为"aaaa"，是则拖动成功，并移除拖动节点，否则取消所有操作。

 

这里就可以在handleInsertDrop方法中调用RPC来进行异步的处理和判断了。

 

============总结的分割线============

 

GWT是个好东西，有的人说他效率底下，有的人说他代码优化。但是我觉得相对ExtJS这类拥有复杂的前台JS的程序来说，JS的开发过程远远痛苦于JAVA的开发过程。

 

最后，本人正在研究GXT，欢迎有兴趣的朋友一起合作。