BlogJava-不做浮躁的人-随笔分类-dojo

dojo tree：program create tree

不做浮躁的人 — Thu, 23 Nov 2006 18:42:00 GMT

主要使用他做带有复选框的树，一次性从数据库得到数据，产生js代码，送到浏览器执行。复选框可以直接写到标题里面，注意复选框的id命名规则，合理的命名可以处理一些操作（比如，取消上级，则取消所有下级）。最后就是对一次读取数据库可以采用路径发和封闭法一次性读取树的所有数据，避免递归方式。

"http://www.w3.org/TR/html4/strict.dtd">

Dojo Tree Widget Test (dynamic node creation)

Create tree programmatically

不做浮躁的人 2006-11-24 02:42 发表评论

dojo tree 代码汇总，基本上功能都全

不做浮躁的人 — Thu, 23 Nov 2006 18:37:00 GMT

    "http://www.w3.org/TR/html4/loose.dtd">


        Untitled Document

不做浮躁的人 2006-11-24 02:37 发表评论

dojoTree TreeSelector

不做浮躁的人 — Wed, 22 Nov 2006 15:47:00 GMT

TreeSelector继承于HtmlWidget，其作用主要是处理Tree的Select的功能。
1：具有selectedNode的属性
2：默认的事件名有：
eventNamesDefault: {
  select : "select",
  destroy : "destroy",
  deselect : "deselect",
  dblselect: "dblselect" // select already selected node.. Edit or whatever
},
3：注意这段代码：eventNames的值。
initialize: function() {

  for(name in this.eventNamesDefault) {
   if (dojo.lang.isUndefined(this.eventNames[name])) {
    this.eventNames[name] = this.widgetId+"/"+this.eventNamesDefault[name];
   }
  }

},
4：监听树的事件：
listenTree: function(tree) {
  //标题和图标的click都绑定到Selector的select事件。
  dojo.event.topic.subscribe(tree.eventNames.titleClick, this, "select");
  dojo.event.topic.subscribe(tree.eventNames.iconClick, this, "select");

  dojo.event.topic.subscribe(tree.eventNames.collapse, this, "onCollapse");
  dojo.event.topic.subscribe(tree.eventNames.moveFrom, this, "onMoveFrom");
  dojo.event.topic.subscribe(tree.eventNames.removeNode, this, "onRemoveNode");
  dojo.event.topic.subscribe(tree.eventNames.treeDestroy, this, "onTreeDestroy");

/* remember all my trees to deselect when element is movedFrom them */
this.listenedTrees.push(tree);
},

5：

不做浮躁的人 2006-11-22 23:47 发表评论

dojoTree Controller(3)

不做浮躁的人 — Wed, 22 Nov 2006 15:19:00 GMT

接上面，继续讨论TreeRPCController。该类在TreeLoadingController上扩充了以下方法：
1：doMove的部分代码：
var params = {
   // 移动的节点以及节点所在的树
   child: this.getInfo(child),
   childTree: this.getInfo(child.tree),
   // 移动目的树，目的节点，以及目的位置。
   newParent: this.getInfo(newParent),
   newParentTree: this.getInfo(newParent.tree),
   newIndex: index
  };

var success;

  this.runRPC({
   url: this.getRPCUrl('move'),

   load: function(response){
    success = this.doMoveProcessResponse(response, child, newParent, index) ;
   },
   //同步处理
   sync: true,
   //锁定操作的两个节点。
   lock: [child, newParent],
   params: params
  });
2：doRemoveNode
   var params = {
   node: this.getInfo(node),
   tree: this.getInfo(node.tree)
  }

  this.runRPC({
    url: this.getRPCUrl('removeNode'),
    load: function(response){
     this.doRemoveNodeProcessResponse(response, node, callObj, callFunc)
    },
    params: params,
    lock: [node]
  });

3:doCreateChild
var params = {
    tree: this.getInfo(parent.tree),
    parent: this.getInfo(parent),
    index: index,
    data: output
   }

   this.runRPC({
    url: this.getRPCUrl('createChild'),
    load: function(response) {
     // 建议采用死数据？
     this.doCreateChildProcessResponse( response, parent, index, callObj, callFunc)
    },
    params: params,
    lock: [parent]
   });

不做浮躁的人 2006-11-22 23:19 发表评论

dojoTree Controller(2)

不做浮躁的人 — Wed, 22 Nov 2006 15:15:00 GMT

我们接dojoTree Controller(1)继续讨论 TreeLoadingController
1：该类在TreeBasicController基础上增加了RPCUrl和RPCActionParam（默认为action）两个参数。解释这两个参数必须看下面的代码：
if (this.RPCUrl == "local") {
   var dir = document.location.href.substr(0, document.location.href.lastIndexOf('/'));
   var localUrl = dir+"/"+action;
   //dojo.debug(localUrl);
   return localUrl;
  }

  if (!this.RPCUrl) {
   dojo.raise("Empty RPCUrl: can't load");
  }

  return this.RPCUrl + ( this.RPCUrl.indexOf("?") > -1 ? "&" : "?") + this.RPCActionParam+"="+action;

2：通用的错误处理器：
  RPCErrorHandler: function(type, obj, evt) {
  alert( "RPC Error: " + (obj.message||"no message"));
},
可以自己定义处理方式。

3：看以下runRPC的这段代码，就能明白服务器端该怎么处理请求：
dojo.io.bind({
   url: kw.url,
   /* I hitch to get this.loadOkHandler */
   handle: dojo.lang.hitch(this, handle),
   mimetype: "text/json",
   preventCache: true,
   sync: kw.sync,
   content: { data: dojo.json.serialize(kw.params) }
  });
4：loadRemote是动态装载该节点的子节点的方法，可以看看该方法的rpc部分：
var params = {
   node: this.getInfo(node),
   tree: this.getInfo(node.tree)
  };
dojo.io.bind({
   url: kw.url,
   /* I hitch to get this.loadOkHandler */
   handle: dojo.lang.hitch(this, handle),
   mimetype: "text/json",
   preventCache: true,
   sync: kw.sync,
   content: { data: dojo.json.serialize(kw.params) }
  });
5：相对TreeBasicController，该Controller还重写了doMove和doCreateChild方法。
doMove: function(child, newParent, index) {
  /* load nodes into newParent in sync mode, if needed, first */
  if (newParent.isTreeNode && newParent.state == newParent.loadStates.UNCHECKED) {
   this.loadRemote(newParent, true);
  }

return dojo.widget.TreeBasicController.prototype.doMove.apply(this, arguments);
},
可以看到是在同步处理完服务器的请求后，再执行的客户端操作。因此我们只要在服务器端处理添加新节点和移动节点时，只要返回true或false就可以了。

不做浮躁的人 2006-11-22 23:15 发表评论

dojoTree Controller(1)

不做浮躁的人 — Wed, 22 Nov 2006 14:36:00 GMT

对树进行一些操作的后台是Controller类。而RpcController能够以RPC的方式，Json数据传递的方式将前端和后台进行结合。

我们可以查看原代码知道 TreeRPCController 继承于TreeLoadingController，而TreeLoadingController继承于TreeBasicController，TreeBasicController继承HtmlWidget。

我们先对TreeBasicController进行分析：
1：DNDController属性，如果该属性为“create"，那么该Controller就具有拖动的功能。
if (this.DNDController == "create") {
   dojo.require("dojo.dnd.TreeDragAndDrop");
   this.DNDController = new dojo.dnd.TreeDNDController(this);
  }

2：dieWithTree：表示当树Destroy,Controller是否同时Destroy。
3：listenTree：将Controller绑定Tree的4个事件，如果DNDController存在，也同时绑定Tree的时间。
createDOMNode,treeClick,treeCreate,treeDestroy。
比如：两个绑定的原代码：
onCreateDOMNode: function(message) {

var node = message.source;

  if (node.expandLevel > 0) {
   this.expandToLevel(node, node.expandLevel);
  }
},

// perform actions-initializers for tree
onTreeCreate: function(message) {
  var tree = message.source;
  var _this = this;
  if (tree.expandLevel) {
   dojo.lang.forEach(tree.children,
    function(child) {
     _this.expandToLevel(child, tree.expandLevel-1)
    }
   );
  }
},
4：改controller还提供了canMove，canRemoveNode,canCreateChild等方法判断是否能够移动节点，删除节点和创建子节点。移动节点的方法是move，在move方法体里面，首先调用canMove，判断是否能够移动，然后是调用doMove方法执行具体的移动，move方法返回true或false。其它删除和创建同理。
三个方法签名如下：
move: function(child, newParent, index)
removeNode: function(node, callObj, callFunc)
createChild: function(parent, index, data, callObj, callFunc)

未完...

不做浮躁的人 2006-11-22 22:36 发表评论