zoukankan      html  css  js  c++  java
  • 带CheckBox的dojo Tree简单实现,并实现级联选取

    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);
                    });
                }
            }
  • 相关阅读:
    李宏毅机器学习课程笔记-9.3RNN的应用
    李宏毅机器学习课程笔记-9.2如何训练RNN
    李宏毅机器学习课程笔记-9.1循环神经网络RNN入门
    李宏毅机器学习课程笔记-8.2图神经网络(Spatial-based Convolution)
    李宏毅机器学习课程笔记-7.4基于CNN和PyTorch的食物图片分类
    PyTorch入门:基于LeNet5和CIFAR10的图片分类
    PyTorch入门:使用PyTorch搭建神经网络LeNet5
    李宏毅机器学习课程笔记-8.1图神经网络入门
    李宏毅机器学习课程笔记-7.3CNN应用案例
    李宏毅机器学习课程笔记-7.2CNN学到了什么
  • 原文地址:https://www.cnblogs.com/dojoblog/p/4023861.html
Copyright © 2011-2022 走看看