ext.lingo.jsoncheckboxtree.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

        }

    }

    , checkParent : function() {
        this.checkboxImg.className = "x-tree-node-checkbox-" + this.isAllChildrenChecked();
        if (this.checkboxImg.className == "x-tree-node-checkbox-none") {
            this.node.attributes.checked = false;
        } else {
            this.node.attributes.checked = true;
        }
        if (this.node.parentNode.getUI().checkParent) {
            this.node.parentNode.getUI().checkParent();
        }
    }

    , checkChild : function(flag) {
        this.node.attributes.checked = flag;
        if (!node.isLeaf) {
            node.getUI().checkChild(flag);
        }
    }

    , onDblClick : function(e){
        e.preventDefault();
        if(this.disabled){
            return;
        }
        if(this.checkbox){
            this.toggleCheck();
        }
        //if(!this.animating && this.node.hasChildNodes()){
        //    this.node.toggle();
        //}
        this.fireEvent("dblclick", this.node, e);
    }

    , toggleCheck : function(state) {
        this.check();
    }

    // 是否为叶子节点
    , isLeaf : function() {
        return this.node.attributes.leaf;
    }

    // 获得子节点
    , getChildren : function() {
        return this.node.attributes.children;
    }

    // 是否为选中状态
    , isChecked : function() {
        return this.node.attributes.checked;
    }

    // 获得className
    , getClassName : function() {
        return this.checkboxImg.className;
    }

    // 初始化时，决定显示的图片
    , isAllChildrenChecked : function() {
        if (!this.isLeaf()) {
            var n = 0;
            var children = this.getChildren();
            for (var i = 0; i < children.length; i++) {
                if (children[i].checked) {
                    n++;
                }
            }
            if (this.isChecked()) {
                return (n == children.length) ? "x-tree-node-checkbox-all" : "x-tree-node-checkbox-some";
            } else {
                return "x-tree-node-checkbox-none";
            }
        } else {
            return this.isChecked() ? "x-tree-node-checkbox-all" : "x-tree-node-checkbox-none";
        }
    }

    // 计算点击后，应该显示的图片
    , getNextStatus : function() {
        if (this.isLeaf()) {
            return this.getClassName() == "x-tree-node-checkbox-all" ? "x-tree-node-checkbox-none" : "x-tree-node-checkbox-all";
        } else {
            if (this.getClassName() == "x-tree-node-checkbox-all") {
                return "x-tree-node-checkbox-none";
            } else if (this.getClassName() == "x-tree-node-checkbox-none") {
                return "x-tree-node-checkbox-some";
            } else {
                return "x-tree-node-checkbox-all";
            }
        }
    }

    // 改变父节点的className
    , changeParentStatus : function() {
        var n = 0;
        var children = this.getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].checked) {
                n++;
            }
        }
        if (n == children.length) {
            return "x-tree-node-checkbox-all";
        } else if (n == 0) {
            return "x-tree-node-checkbox-none";
        } else {
            return "x-tree-node-checkbox-some";
        }
    }

    // 处理点击节点事件
    , check : function() {
        this.checkboxImg.className = this.getNextStatus();
        this.node.attributes.checked = "x-tree-node-checkbox-none" != this.getClassName();
        if (this.node.parentNode.getUI().checkParent) {
            this.node.parentNode.getUI().checkParent();
        }
        if (!this.isLeaf()) {
            this.node.expand(false, false);
            var children = this.node.childNodes;
            for (var i = 0; i < children.length; i++) {
                children[i].getUI().checkChild("x-tree-node-checkbox-all" == this.getClassName());
            }
        }
    }

    // 点击节点后，事件传播到父节点
    , checkParent : function() {
        this.checkboxImg.className = this.changeParentStatus();
        this.node.attributes.checked = "x-tree-node-checkbox-none" != this.getClassName();
        if (this.node.parentNode.getUI().checkParent) {
            this.node.parentNode.getUI().checkParent();
        }
    }

    // 点击节点后，事件传播到子节点
    , checkChild : function(isCheck) {
        if (this.isLeaf()) {
            this.checkboxImg.className = isCheck ? "x-tree-node-checkbox-all" : "x-tree-node-checkbox-none";
            this.node.attributes.checked = "x-tree-node-checkbox-none" != this.checkboxImg.className;
        } else {
            if (isCheck) {
                // 只当下面节点没选中的时候，才强制改变成some
                // 否则保持some或all状态
                if (this.checkboxImg.className == "x-tree-node-checkbox-none") {
                    this.checkboxImg.className = "x-tree-node-checkbox-some";
                }
                this.node.attributes.checked = true;
            } else {
                this.checkboxImg.className = "x-tree-node-checkbox-none";
                this.node.attributes.checked = false;
                this.node.expand(false, false);
                var children = this.node.childNodes;
                for (var i = 0; i < children.length; i++) {
                    children[i].getUI().checkChild("x-tree-node-checkbox-all" == this.getClassName());
                }
            }
        }
    }

});


/**
 * @class Ext.tree.CheckNodeMultiSelectionModel
 * @extends Ext.tree.MultiSelectionModel
 * Multi selection for a TreePanel containing Ext.tree.CheckboxNodeUI.
 * Adds enhanced selection routines for selecting multiple items
 * and key processing to check/clear checkboxes.
 */
Ext.tree.CheckNodeMultiSelectionModel = function(){
   Ext.tree.CheckNodeMultiSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.tree.CheckNodeMultiSelectionModel, Ext.tree.MultiSelectionModel, {
    init : function(tree){
        this.tree = tree;
        tree.el.on("keydown", this.onKeyDown, this);
        tree.on("click", this.onNodeClick, this);
    },

    /**
     * Handle a node click
     * If ctrl key is down and node is selected will unselect the node.
     * If the shift key is down it will create a contiguous selection
     * (see {@link Ext.tree.CheckNodeMultiSelectionModel#extendSelection} for the limitations)
     */
    onNodeClick : function(node, e){
        if( e.shiftKey && this.extendSelection(node) ) {
            return true;
        }
        if( e.ctrlKey && this.isSelected(node) ) {
            this.unselect(node);
        } else {
            this.select(node, e, e.ctrlKey);
        }
    },

    /**
     * Selects all nodes between the previously selected node and the one that the user has just selected.
     * Will not span multiple depths, so only children of the same parent will be selected.
     */
    extendSelection : function(node) {
        var last = this.lastSelNode;
        if( node == last || !last ) {
            return false; /* same selection, process normally normally */
        }

        if( node.parentNode == last.parentNode ) {
            var cs = node.parentNode.childNodes;
            var i = 0, attr='id', selecting=false, lastSelect=false;
            this.clearSelections(true);
            for( i = 0; i < cs.length; i++ ) {
                // We have to traverse the entire tree b/c don't know of a way to find
                // a numerical representation of a nodes position in a tree.
                if( cs[i].attributes[attr] == last.attributes[attr] || cs[i].attributes[attr] == node.attributes[attr] ) {
                    // lastSelect ensures that we select the final node in the list
                    lastSelect = selecting;
                    selecting = !selecting;
                }
                if( selecting || lastSelect ) {
                    this.select(cs[i], null, true);
                    // if we're selecting the last node break to avoid traversing the entire tree
                    if( lastSelect ) {
                        break;
                    }
                }
            }
            return true;
        } else {
            return false;
        }
    }
});