jstree

<script type="text/javascript">

    $(function(){
        var checks=<?php echo json_encode($output['limit']); ?>;

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
            });
        }
        var checkboxs={};
        var buildTreeData=function(data,parent){
            for(var i=0;i<data.length;i++)
            {
                if(data==undefined||data.length==0)
                {
                    return [];
                }
                var item=data[i];
                item.guid=guid();
                item.parent=parent;
                item.ischecked=false;
                item.checkednum=0;
                item.uncheckednum=0;
                item.ismiddle=false;
                item.childlength=0;
                checkboxs[item.guid]=item;
                if(item['child'])
                {
                    item.childlength=item['child'].length;
                    buildTreeData(item['child'],item);
                }
            }
        };

        var itemchecked=function(ischecked,item)
        {
            var changeItems=[];
            checkedChildTree(ischecked,item,changeItems);
            checkedParentTree(ischecked,item,item.ismiddle,changeItems);
            return changeItems;
        };

        //所有自己都选中或不选中
        var checkedChildTree=function(ischecked,item,changeItems){
            if(item==undefined)
            {
                return;
            }
            item.ischecked=ischecked;
            item.ismiddle=false;
            if(!item.child)
            {
                return;
            }
            for(var i=0;i<item['child'].length;i++)
            {
                var child=item['child'][i];
                child.ischecked=ischecked;
                child.ismiddle=false;
                checkedChildTree(ischecked,child,changeItems);
                changeItems.push(child);
            }
            changeItems.push(item);
        };

        //检查选中个数
        var checkedParentTree=function(ischecked,item,ismiddle,changeItems)
        {
            if(item==undefined||item.parent==undefined||item.parent.child==undefined)
            {
                return;
            }
            var parent=item.parent;
            parent.checkednum=0;
            parent.ischecked=false;
            parent.ismiddle=false;
            for(var i=0;i<parent.child.length;i++)
            {
                var child=parent.child[i];
                if(child.ischecked)
                {
                    parent.checkednum++;
                }
            }
            if(parent.checkednum==parent.childlength)
            {
                parent.ischecked=true;
            }
            if(parent.checkednum>0&&parent.checkednum<parent.childlength)//如果父级是部分选中状态
            {
                parent.ismiddle=true;
            }
            if(ismiddle)
            {
                parent.ismiddle=true;//所有的父级都是部分选中状态
            }
            changeItems.push(parent);
            checkedParentTree(ischecked,parent,parent.ismiddle,changeItems);

        };

        var showTree=function(checks,index){
            if(checks==undefined||checks.length==0)
            {
                return "";
            }
            var class_name='';
            var span_class='';
            switch(index)
            {
                case 0: span_class='span0'; class_name='li0';break;
                case 1: class_name='li1';break;
                default: class_name='li2';break;
            }
            index++;
            var ul="<ul>";
            //给li元素分组
            for(var i=0;i<checks.length;i++)
            {
                var cname="class='"+class_name+"'";
                var sname="class='"+span_class+"'";
                var level=index;
                var item=checks[i];
                var guid=checks[i]['guid'];
                var guidspan=guid+'_span';
//                var parentid=checks[i].parent?checks[i].parent.guid:'';
                var ischecked=item.ischecked;
                var ismiddle=item.ismiddle;

                if(ischecked)
                {
                    ul+="<li "+cname+"><span id='"+guidspan+"' "+sname+"><input type='checkbox' id='"+guid+"'  class='l_check' level='"+level+"' checked='checked'>"+checks[i].name+"</span>";
                }else{
                    ul+="<li "+cname+"><span id='"+guidspan+"' "+sname+"><input type='checkbox' id='"+guid+"'  class='l_check' level='"+level+"' >"+checks[i].name+"</span>";
                }

                if(checks[i]['child'])
                {
                    var t=showTree(checks[i]['child'],index);
                    ul+=t;
                }
                ul+="</li>";

            }
            if(index>=2)
            {
                ul+="<div class='clear'></div>";
            }
            ul+='</ul>';
            return ul;
        };

        buildTreeData(checks);//构造基本数据
        var html=showTree(checks,0,'',[]);
        $("#ltree").html(html);
        $('.l_check').live('change',function(){
            var checked=$(this).attr("checked");
            var guid=$(this).attr('id');
            var item=checkboxs[guid];
            var changelist=itemchecked(checked=="checked",item);
            for(var i=0;i<changelist.length;i++)
            {
                var nitem=changelist[i];
                $('#'+nitem.guid).attr('checked',nitem.ischecked);
                $('#'+nitem.guid).attr('checkednum',nitem.checkednum);
                if(nitem.ismiddle)
                {
                    $('#'+nitem.guid+"_span").addClass('spanmiddle');
                }else
                {
                    $('#'+nitem.guid+"_span").removeClass('spanmiddle');
                }
            }
        });

    });

</script>