带CheckBox的dojo Tree简单实现，并实现级联选取

标签：io   ar   for   sp   art   on   cti   代码   html   

dojo自带的Tree不能实现CheckBox选取节点功能，第三方cbtree过于复杂，因此自己写了个简单的实现，能够实现子节点级联父节点直到根节点，父节点选取全选子节点的功能，但没有写父节点取消时的子节点取消，代码如下，大家可以自行拷贝修改

function createMenuTree() {
            require(["dojo/request",
               "dojo/store/Memory",
               "dijit/tree/ObjectStoreModel",
               "dijit/Tree"], function (request, Memory, ObjectStoreModel, Tree) {
                   request("/Role/Menus/", { handleAs: "json", preventCache: true }).then(function (data1) {

                       for (var i = 0; i < data1.length; i++) {
                           data1[i].checked = false;
                       }

                       menuStore = new Memory({
                           idProperty: "PID",
                           data: data1,
                           getChildren: function (object) {
                               return this.query({ PPARENT: object.PID });
                           }
                       });

                       menuModel = new ObjectStoreModel({
                           store: menuStore,
                           labelAttr: "PNAME",
                           query: { PID: "Menu" },
                           mayHaveChildren: function (item) {
                               var subs = menuStore .query({ "PPARENT": item.PID });
                               return subs.length > 0;
                           }
                       });

                       menuTree = new Tree({
                           model: menuModel,
                           autoExpand:true,
                           onClick: function (item, node, evt) {
                               console.debug(menuTree.paths);
                              
                               var selCb = dojo.byId("pjtchk"+item.PID);
                               if (selCb == null) { return; }
                               if (!dojo.hasAttr(selCb, "checked")) {
                                   node.labelNode.innerHTML = "<input id=‘pjtchk" + item.PID + "‘ checked type=‘checkbox‘ />" + item.PNAME;
                                   selectUppers(item.PID);
                                   selectSubs(item.PID);
                               } else { node.labelNode.innerHTML = "<input id=‘pjtchk" + item.PID + "‘ type=‘checkbox‘ />" + item.PNAME; }
                           },
                           _createTreeNode: function (/*Object*/args) {
                               var tnode = new dijit._TreeNode(args);
                               tnode.labelNode.innerHTML = "<input id=‘pjtchk" + args.item.PID + "‘ type=‘checkbox‘ />" + args.label;
                               return tnode;
                           }
                       });
                       
                       menuTree.placeAt($("menuTree"));
                       menuTree.startup();
                   });
               });
        }

function selectUppers(id) {
            var sMenus = menuStore.query({ PID: id });
            if (sMenus != null && sMenus.length > 0) {
                var cb = $("pjtchk" + id);
                if (cb != null) {
                    dojo.attr(cb, ‘checked‘, true);
                    selectUppers(sMenus[0].PPARENT);
                }
            }
        }

        function selectSubs(id) {
            var sMenus = menuStore.query({ PID: id });
            if (sMenus != null && sMenus.length > 0) {
                var cb = $("pjtchk" + id);
                if (cb != null) {
                    dojo.attr(cb, ‘checked‘, true);
                }
            }
           
            var menus = menuStore.query({ PPARENT: id });
            if (menus != null && menus.length > 0) {
                dojo.forEach(menus, function (menu) {
                    selectSubs(menu.PID);
                });
            }
        }

带CheckBox的dojo Tree简单实现，并实现级联选取

标签：io   ar   for   sp   art   on   cti   代码   html   

原文地址：http://www.cnblogs.com/dojoblog/p/4023861.html