微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

的Dijit复选框树事件委托

我正在尝试实现类似于http://thejekels.com/dojo/cbtree_AMD.html的dijit复选框树

并覆盖这样的方法

      connect.connect( tree, "_onExpandoClick", model, this,function(/*data.item*/ item) {
       console.log("My onExpandoClick");
 });

Dijit Tree javascript文件已经包含此事件的处理程序方法.我的问题是

I want the above overridden method to be called after tree js method handler
have been executed.As per Now its always called first.Any idea.(dijit 1.7)

在我的设置中,以下代码不起作用:

    require(["dijit/TitlePane"]);

    require([
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/aspect",
        "dijit/CheckBoxTree", 
        "dojox/data/JsonRestStore",
        "my_ext/CheckBoxForestStoreModel", 
        "dojo/domready!"
        ], function(dom, Tree, JsonRestStore, CheckBoxForestStoreModel) {
            var treeStore = new JsonRestStore({ target: "ObjectTreeServlet/",labelAttribute:"name",allowNoTrailingSlash:true});
            var treeModel = new CheckBoxForestStoreModel({
                    store: treeStore,
                    deferItemloadingUntilExpand: true,
                    rootId: "ROOT",
                    rootLabel: "NETWORK",
                    childrenAttrs: ["children"],
                    query:"?id=0"         

                });

            var treeStateSession= '<%=session.getAttribute("treeState")%>';
            //alert(treeStateSession);
            var tree = new Tree({
                    id : "tree",
                    model : treeModel,
                    showRoot : false,
                    persist: true,
                    setCheckBoxOnClick : false,

                    _sessionVal:treeStateSession
                    },
                'treeDiv');

            function getParameterByName(url,name) {
                var match = RegExp('[?&]' + name + '=([^&]*)')
                                .exec(url);
                return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
            }
            dojo.require("dojo.aspect");
            /*
            aspect.after(tree, "_onExpandoClick",  function(item) {
                console.log(tree.getSessionValue());
                document.getElementById("treeState").value=tree.getSessionValue();
                console.log(document.getElementById("treeState").value.length);

            }); */
aspect.after(tree, "_onExpandoClick", function() {
console.log("My onExpandoClick");        

});

CheckBoxTree.js内部的代码

_state: function(node, expanded){
        // summary:
        //      Query or set expanded state for an node
        if(!this.persist){
            return false;
        }
        var path = array.map(node.getTreePath(), function(item){
                return this.model.getIdentity(item);
            }, this).join("/");
        if(arguments.length === 1){
            return this._openednodes[path];
        }else{
            if(expanded){
                this._openednodes[path] = true;
            }else{
                delete this._openednodes[path];
            }
            var ary = [];
            for(var id in this._openednodes){
                ary.push(id);
            }
            //console.log(ary.length);
            //cookie(this.cookieName, ary.join(","), {expires:365});
            var sessionVal=ary.join(",");
            console.log("TreeSTATE CheckBox");

     **//FROM HERE SEND sessionVal TO MAIN HTML PAGE WHERE TREE IS CREATED?**

            //this.getSessionValue(ary.join(","));
        }
    },

我尝试了什么,但没有得到预期的结果.

aspect.after(tree, "_state", function() {
                    console.log("TreeSTATE  "  + tree.getSessionValue());
                    document.getElementById("treeState").value=tree.getSessionValue();

                    });

解决方法:

请改用dojo/aspect

// var aspect = require("dojo/aspect");
// var lang   = require("dojo/_base/lang");

aspect.after(tree, "_onExpandoClick", lang.hitch(this, function(item) {
    console.log("My onExpandoClick");
}))

编辑:还请注意,dijit / Tree以及cbtree / Tree会发出onopen和onClose事件,因此您可以注册事件侦听器以扩展和折叠节点操作:

tree.on("open", function(item, node) {
    console.log("onopen:", item, node);        
});

tree.on("close", function(item, node) {
    console.log("onClose:", item, node);        
});

编辑2:根据下面的讨论,我将方法从使用dojo / aspect更改为对Tree进行子类化(因为那里存在一些古怪的异步时髦).因此,第一个子类Tree:

// var declare  = require("dojo/_base/declare"); 
// var lang     = require("dojo/_base/lang");
// var Deferred = require("dojo/_base/Deferred");

var MyTree = declare([Tree], {

    persist: true,

    _expandNode: function(node, recursive) {
        var dfd = this.inherited(arguments);
        Deferred.when(dfd, lang.hitch(this, function() {
            if (recursive === undefined) {
                this.set("state", this._objectToArray(this._openednodes));
            }
        }));
        return dfd;
    },

    _collapseNode: function(node) {
        this.inherited(arguments);
        this.set("state", this._objectToArray(this._openednodes));
    },

    _objectToArray: function(object) {
        var arr = [];
        for (var each in object) {
            if (object.hasOwnProperty(each)) {    
                arr.push(each);
            }
        }
        return arr;
    }
});

然后,您可以观察MyTree实例的展开/折叠状态变化:

tree.watch("state", function(/*String*/key, /*Array*/oldValue, /*Array*/newValue) {
    console.log(newValue);        
});

实际操作中:http://jsfiddle.net/phusick/LcPzv/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐