listtree

    newModuleModule.directive('listHierarchy',function($compile){
        return{
            scope:{
                add:'=',
                isadd:'=',
                getdata:'=',
                setvalues:'=',
                delete:'&' ,
                renameobject:'='//重命名
            },
            restrict:'E',
            replace:true,
            template:['<div class="listMain layeredListTree"><div class="treeMain">',
                    '<table class="treeTable" cellpadding="0" border="1" cellspacing="0" width="100%" ></table><div></div>'].join(''),

            link:function(scope,element,attr){
                scope.addName=$i18n('src_app_business_newModule_newModule_js_1');
                scope.clearName=$i18n('src_app_business_newModule_newModule_js_2');

                var CHECKED ='checked';
                var LEFT='left';
                var number =0;
                var hierarchy='hierarchy';
                var lova ='lova';
                var PADDINGLEFT=30;
                var TOPID=-1;//頂級id-1;

                function getTr(){
                    var node =$('<tr><td><i class="icon icon-uniE902"></i><i class="childflag">▼</i><b class="of"></b><span></span></td></tr>');
                    node.find('i').css({fontStyle:'normal'});
                    node.find('.childflag').hide();
                    node.find('span').addClass('glyphicon glyphicon-trash del');
                    return node;
                }

                scope.renameobject=reNameObject;
                function reNameObject(object){
                    for(var key in object){
                        element.find('[flowid='+key+']').find('b').html(object[key]).attr('title',object[key]);
                    }
                }

                function getChildflagByParent(){
                    return this.find('.childflag');
                }

                scope.add=addfn;
                scope.isadd=isSelectedNode;
                scope.addfn=function(){
                    addfn();
                };

                function isSelectedNode(){
                    var checkedli =element.find('.treeTable .'+CHECKED);
                    if(checkedli.length || !element.find('.treeTable tr').length){
                        return true;
                    }else{
                        return false;
                    }
                }

                function addfn(addData){
                    var checkedli =element.find('.treeTable .'+CHECKED);
                    var id=addData.id || 'lova'+$.now()+Math.random().toString().replace(/\./ig,'');
                    var tr =getTr();
                    var child;
                    tr.find('b').html(addData.label).attr('title',addData.label);
                    tr.data(addData);
                    //獲取追加的位置
                    function getlastChild(flowid){
                        var cacheNode =false;
                        function fn(id){
                            var c =element.find('[parentid='+id+']:last');
                            if(c.length){
                                cacheNode=c;
                                fn(c.attr('flowid'));
                            }
                            return cacheNode;
                        }
                        return fn(flowid);
                    }

                    //添加子節點
                    if(checkedli.length){
                        var parentLeft=parseInt(checkedli.attr(LEFT));
                        var parentid=checkedli.attr('flowid');
                        tr.attr({LEFT:parentLeft+PADDINGLEFT,parentid:parentid,flowid:id});
                        tr.find('td').css({'paddingLeft':parentLeft+PADDINGLEFT+'px'});
                        child=element.find('[parentid='+parentid+']:last');
                        if(child.length){//有兒子
                            var descendants =getlastChild(child.attr('flowid'));
                            if(descendants){//若是最後一個兒子節點還存在兒子，則在最後的子孫後面追加
                                descendants.after(tr);
                                getChildflagByParent.call($('[flowid='+descendants.attr('parentid')+']')).show();
                            }else{
                                child.after(tr);
                                getChildflagByParent.call($('[flowid='+child.attr('parentid')+']')).show();
                            }
                        }else{
                            checkedli.after(tr);
                            getChildflagByParent.call(checkedli).show();
                        }
                        $compile(tr)(scope.$parent);
                        return addData;
                        //第一次新增 頂級對象
                    }else if(!element.find('.treeTable tr').length){
                        tr.attr({LEFT:0,flowid:id,parentid:TOPID});
                        tr.find('td').css({'paddingLeft':0});
                        element.find('.treeTable').append(tr);
                        $compile(tr)(scope.$parent);
                        return addData;
                        //alert('請選擇')
                    }else{
                        return false;
                    }
                }

                function deletetr(){
                    var checked = this;
                    var data=checked.data();

                    if(element.find('.treeTable tr').length==1){
                        checked.remove();
                        //傳遞事件
                        exec();
                        return
                    }

                    var parentid= checked.attr('parentid');

                    var childLenth =$('[parentid='+checked.attr('flowid')+']');
                    if(parentid!=TOPID){//不是頂級
                        setStyleByRemove(checked);
                        checked.remove();
                        //傳遞事件
                        exec();
                        if($('[parentid='+parentid+']').length==0){
                            getChildflagByParent.call($('[flowid='+parentid+']')).hide();
                        }
                    }else if((parentid==TOPID)&&childLenth.length==1){
                        setStyleByRemove(checked);
                        childLenth.attr('parentid',TOPID);
                        checked.remove();
                        //傳遞事件
                        exec();
                    }

                    function exec(){
                        if(('delete' in scope) && typeof(scope.delete) =='function')
                            scope.delete(data);
                    }
                }

                function setStyleByRemove(node){
                    var id =node.attr('flowid');
                    var children = element.find('[parentid='+id+']');//被影響到的兒子節點
                    if(children.length){
                        children.each(function(){
                            $(this).attr({parentid:node.attr('parentid')});
                            dg($(this));
                        })
                    }

                    function dg(thisnode){
                        var node =thisnode;
                        var id =node.attr('flowid');//本身的id
                        var changeLeft =parseInt(node.attr('left'))-PADDINGLEFT;//自身退一行
                        node.attr({left:changeLeft});
                        node.find('td').css({paddingLeft:changeLeft+'px'});
                        var children = element.find('[parentid='+id+']');//被影響到的兒子節點
                        children.each(function(i,v){
                            dg($(this));
                        });
                    }

                }

                //獲取數據
                scope.getdata =function(){
                    var arr=[];
                    element.find('.treeTable tr').each(function(i,v){
                        var o =$(this);
                        arr.push({
                            pid:o.attr('parentid'),
                            id:o.attr('flowid'),
                            value: o.find('b').html()
                        })
                    });
                    var listData= $.extend(true,[],arr);
                    var treeData =toTreeData(arr);
                    return {
                        listData:listData,
                        treeData:treeData[0] || {}
                    }
                };

                //回填數據
                scope.setvalues=setValuefn;
                function setValuefn(data){
                    var table = $('<table></table>');
                    if(data.length && angular.isArray(data)){
                        $.each(data,function(i,v){
                            var tr =getTr();
                            tr.attr({'flowid':v.id,parentid:v.pid,left:v.left});
                            tr.find('td').css({'paddingLeft':v.left+'px'});
                            tr.find('b').html(v.value).attr('title', v.value);
                            tr.data({id:v.id,label:v.value});
                            table.append(tr);
                        });
                        element.find('.treeTable').append(table.find('tr'));
                    }
                };

                function toTreeData(data){
                    var pos={};
                    var tree=[];
                    var i=0;
                    while(data.length!=0){
                        if(data[i].pid==-1){
                            tree.push({
                                id:data[i].id,
                                value:data[i].value,
                                children:[]
                            });
                            pos[data[i].id]=[tree.length-1];
                            data.splice(i,1);
                            i--;
                        }else{
                            var posArr=pos[data[i].pid];
                            if(posArr!=undefined){

                                var obj=tree[posArr[0]];
                                for(var j=1;j<posArr.length;j++){
                                    obj=obj.children[posArr[j]];
                                }

                                obj.children.push({
                                    id:data[i].id,
                                    value:data[i].value,
                                    children:[]
                                });
                                pos[data[i].id]=posArr.concat([obj.children.length-1]);
                                data.splice(i,1);
                                i--;
                            }
                        }
                        i++;
                        if(i>data.length-1){
                            i=0;
                        }
                    }
                    return tree;
                }
                function setListLeft(treeData){
                    var step =30;
                    var cache =[];
                    fn(treeData);
                    function fn(data,n){
                        n=n?n:0;
                        var temp={};
                        if(typeof(data)=='object'){
                            if((data instanceof Array)){
                                for(var i =0 ;i <data.length ;i++){
                                    fn(data[i],n);
                                }
                            }else if((data instanceof Object)){
                                for(var k in data){
                                    if(!('left' in data)){
                                        data['left']=n+=step;
                                    }
                                    if(('id' in data) && !('flag' in data)){
                                        temp = $.extend(false,temp,data);
                                        delete temp.child;
                                        data['flag']=true;
                                        cache.push(temp);
                                    }
                                    fn(data[k],n);
                                }
                            }
                        }else{
                            //console.log(data);
                        }
                    }
                    return cache;
                }

                element.find('.treeTable')                     .delegate('tr','click',function(event){                     var me =$(this);                     var isclick=me.hasClass('checked');                     //return;                     element.find('.treeTable tr.'+CHECKED).removeClass(CHECKED);                     if(isclick){                         me.removeClass(CHECKED)                     }else{                         me.addClass(CHECKED)                     }                 })                     .delegate('.del','click',function(event){                     deletetr.call($(this).closest('tr'));                     event.stopPropagation();                 });                 scope.clearfn=function(){                     element.find('.treeTable').empty();                     number=0;                 }             }         }     });