文档章节

listtree

一颗星星变了心
 一颗星星变了心
发布于 2016/05/17 17:42
字数 875
阅读 29
收藏 0


    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;
                }
            }
        }
    });

© 著作权归作者所有

上一篇: json对象找根节点
下一篇: treeData转listData
一颗星星变了心
粉丝 9
博文 28
码字总数 12517
作品 0
成都
网页/平面设计
私信 提问
ElementUI tree的取值与回显

ElementUI tree的取值与回显 目的 场景一 选择树的节点后,希望提交当前选中的节点,以及节点对应的父级节点。比如下面结构,当我选中字典管理时,我希望能够获取到的ids = [1,2,3] 场景二 ...

GMarshal
2018/07/10
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

没有更多内容

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部