jquery.checktree_yctin.js 8.36 KB
Newer Older
Thitichaipun Wutthisak committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
/**
 * CheckTree(ycTIN Edition)  v0.1 (jQuery Plugins)
 *
 * @author Timmy Tin (ycTIN)
 * @license GPL
 * @version 0.1
 * @copyright Timmy Tin (ycTIN)
 * @website http://project.yctin.com/checktree/
 *
 * this plugins is improved CheckTree v0.2, Project 
 * Website: http://static.geewax.org/checktree/ 
 * Author: JJ Geewax <jj@geewax.org>
 * 
 * @edit by: James
 * @edit date: 2010-06-07
 */
(function(jQuery){
    jQuery.fn.checkTree = function(settings){
        settings = jQuery.extend({            
			/* Callbacks
             The callbacks should be functions that take one argument. The checkbox tree
             will return the jQuery wrapped LI element of the item that was checked/expanded.
             */
            onExpand: null,
            onCollapse: null,
            onCheck: null,
            onUnCheck: null,
            onHalfCheck: null,
            onLabelHoverOver: null,
            onLabelHoverOut: null,
			
            /* Valid choices: 'expand', 'check' */
            labelAction: "check",
            attrHalfChecked: "checked",
            collapseAll: false,
            debug: false
        }, settings);

        var $tree = this;

        $tree.clear = function(){
            $tree.find(":checkbox").attr("checked", "");
        };

		$tree.getValue = function(){
			var checked = [];
			$tree.find(":checkbox").filter(":checked").each(function(){
				checked.push($(this).val());
			});
			return checked.join(',');
		};

		$tree.setValue = function(fieldValues){
			/*
			$field = $tree.find(":checkbox").each(function(){
				var value = $(this).val();
				if($.inArray(value, fieldValue)!=-1){
					$(this).attr('checked','true');
				}else{
					$(this).attr('checked','');
				}
			});*/
			
			$tree.find(":checkbox").val(fieldValues);
			
		};

        $tree.update = function(){
            $tree.find("li").each(function(){
                var $checkbox = jQuery(this).children('.checkbox');
                if (jQuery(this).children(':checkbox').attr("checked")) 
                    $checkbox.addClass('checked');
                else {
                    $checkbox.removeClass('checked');
                }
            });
            $tree.find("li").each(function(){
                if (jQuery(this).is(":has(ul)")) {
                    var $checkbox = jQuery(this).children('.checkbox');
                    var $input_checkbox = jQuery(this).contents().find('.checkbox');
                    var $input_checkbox_checked = jQuery(this).contents().find('.checked');
                    if ($input_checkbox_checked.length == 0) {
                        $checkbox.removeClass("checked half_checked").siblings(":checkbox").attr("checked", "");
                    } else if ($input_checkbox.length == $input_checkbox_checked.length) {
                        $checkbox.removeClass("half_checked").addClass('checked').siblings(":checkbox").attr("checked", "checked");
                    } else {
                        $checkbox.removeClass("checked").addClass('half_checked').siblings(":checkbox").attr("checked", settings.attrHalfChecked);
                    }
                }
            });
        };

		//-------------------------------------------------------------

        $tree.find("li").find(":checkbox").change(function(){
            var $all = jQuery(this).siblings("ul").find(":checkbox");
            var $checked = $all.filter(":checked");
            if ($all.length == $checked.length) {
                jQuery(this).attr("checked", "checked").siblings(".checkbox").removeClass("half_checked").addClass("checked");
                if (settings.onCheck) 
                    settings.onCheck(jQuery(this).parent());
            } else if ($checked.length == 0) {
                jQuery(this).attr("checked", "").siblings(".checkbox").removeClass("checked").removeClass("half_checked");
                if (settings.onUnCheck) 
                    settings.onUnCheck(jQuery(this).parent());
            } else {
                if (settings.onHalfCheck && !jQuery(this).siblings(".checkbox").hasClass("half_checked")) 
                    settings.onHalfCheck(jQuery(this).parent());
                jQuery(this).attr("checked", settings.attrHalfChecked).siblings(".checkbox").removeClass("checked").addClass("half_checked");
            }
        }).hide().end().each(function(){
            if (settings.collapseAll) {
                jQuery(this).find("ul").each(function(){
                    if (!jQuery(this).siblings(".expanded").length) 
                        jQuery(this).hide();
                });
            }
            var $label = jQuery(this).children("label").clone();
            var $checkbox = jQuery('<div class="checkbox"></div>');
            var $arrow = jQuery('<div class="arrow"></div>');
            if (jQuery(this).is(":has(ul)")) {
                //if (jQuery(this).children("ul").is(":hidden")){ // bug when container was hiden
				if (jQuery(this).children("ul").css("diaplay")== "hidden"){	
                    $arrow.addClass("collapsed");
                } else{
                    $arrow.addClass("expanded");
				}
                $arrow.click(function(){
                    jQuery(this).siblings("ul").toggle();
                    if (jQuery(this).hasClass("collapsed")) {
                        jQuery(this).addClass("expanded").removeClass("collapsed");
                        if (settings.onExpand){
                            settings.onExpand(jQuery(this).parent());
						}
                    } else {
                        jQuery(this).addClass("collapsed").removeClass("expanded");
                        if (settings.onCollapse){
                            settings.onCollapse(jQuery(this).parent());
						}
                    }
                });
            }
            $checkbox.click(function(){
                jQuery(this).toggleClass("checked").removeClass("half_checked").siblings(":checkbox").attr("checked", (jQuery(this).hasClass("checked") ? "checked" : ""));
                if (jQuery(this).hasClass("checked")) {
                    if (settings.onCheck) 
                        settings.onCheck(jQuery(this).parent());
                    jQuery(this).siblings("ul").find(".checkbox").not(".checked").removeClass("half_checked").addClass("checked").each(function(){
                        if (settings.onCheck) 
                            settings.onCheck(jQuery(this).parent());
                    }).siblings(":checkbox").attr("checked", "checked");
                } else {
                    if (settings.onUnCheck) 
                        settings.onUnCheck(jQuery(this).parent());
                    jQuery(this).siblings("ul").find(".checkbox").filter(".checked").removeClass("half_checked").removeClass("checked").each(function(){
                        if (settings.onUnCheck) 
                            settings.onUnCheck(jQuery(this).parent());
                    }).siblings(":checkbox").attr("checked", "");
                }
                jQuery(this).parents("ul").siblings(":checkbox").change();
            });
            if (jQuery(this).children('.checkbox').hasClass('checked')) 
                $checkbox.addClass('checked');
            else if (jQuery(this).children(':checkbox').attr("checked")) {
                $checkbox.addClass('checked');
                jQuery(this).parents("ul").siblings(":checkbox").change();
            } else if (jQuery(this).children('.checkbox').hasClass('half_checked')) 
                $checkbox.addClass('half_checked');
            jQuery(this).children(".arrow").remove();
            jQuery(this).children(".checkbox").remove();
            jQuery(this).children("label").remove();
            jQuery(this).prepend($label).prepend($checkbox).prepend($arrow);
        }).find("label").click(function(){
            switch (settings.labelAction) {
                case 'expand':
                    jQuery(this).siblings(".arrow").click();
                    break;
                case 'check':
                    jQuery(this).siblings(".checkbox").click();
                    break;
            }
        }).hover(function(){
            jQuery(this).addClass("hover");
            if (settings.onLabelHoverOver) 
                settings.onLabelHoverOver(jQuery(this).parent());
        }, function(){
            jQuery(this).removeClass("hover");
            if (settings.onLabelHoverOut) 
                settings.onLabelHoverOut(jQuery(this).parent());
        }).end();
        return $tree;
    };
})(jQuery);