EasyUI的treegrid实现自动顺序选择行节点

　这两天用EasyUI的treegrid写了一个根据滚动条滚动时相应的依次选中treegrid中的行的demo，之前用了一个递归实现不了，所以用了两个递归实现的，效果如图：　

这里的使用的easyui 1.4版本，这个treegrid的方法很少，所以实现起来很费劲，需要自己写函数。好了，上代码：

<%@ include file='/main/head.jsp' %>

<div data-options="region:'center',title:'项目时刻进度展示',split:true">

    <table id="i_dg" style="100%;height:300px;margin-bottom:20px;"></table>

    <div id="i_slider" style="height:200px;margin-top:20px;"></div>
    
</div>

<script type="text/javascript">
        
        var jTestData=[
            {'itemid':11,'productid':'sss','arr':[{subname:'sds1d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':15,'productid':'sdds','arr':[{subname:'sds2d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':14,'productid':'sffss','arr':[{subname:'sds3d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':13,'productid':'ssggs','arr':[{subname:'sd4sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':12,'productid':'sshhs','arr':[{subname:'sd5sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]}
        ];

        var jTestData2=[
            {"id":10,"name":'xxx1',"pro":'ssssss1',"children":[
                {"id":11,"name":'sds1',"pro":'sdsd1'},
                {"id":12,"name":'sds2',"pro":'sdsd2',"children":[
                {"id":121,"name":'sds21',"pro":'sdsd1'},
                {"id":122,"name":'sds22',"pro":'sdsd2'},
                {"id":123,"name":'sds23',"pro":'sdsd3'}]},
                {"id":13,"name":'sds3',"pro":'sdsd3'}]},

                {"id":20,"name":'xxx2',"pro":'ssssss2',"children":[
                {"id":21,"name":'sds21',"pro":'sdsd1'},
                {"id":22,"name":'sds22',"pro":'sdsd2'},
                {"id":23,"name":'sds23',"pro":'sdsd3'}]},

                {"id":30,"name":'xxx3',"pro":'ssssss3',"children":[
                {"id":31,"name":'sds31',"pro":'sdsd1'},
                {"id":32,"name":'sds32',"pro":'sdsd2'},
                {"id":33,"name":'sds33',"pro":'sdsd3'}]}
        ];

         var jTestData3=[
            {"id":10,"name":'10',"pro":'ssssss1',"children":[
                {"id":11,"name":'11',"pro":'sdsd1'},
                {"id":12,"name":'12',"pro":'sdsd2',"children":[
                {"id":121,"name":'121',"pro":'sdsd1'},
                {"id":122,"name":'122',"pro":'sdsd2',"children":[
                {"id":1221,"name":'1221',"pro":'sdsd1'},
                {"id":1222,"name":'1222',"pro":'sdsd1'}
                ]},
                {"id":123,"name":'123',"pro":'sdsd3'}]},
                {"id":13,"name":'13',"pro":'sdsd3'},
                {"id":14,"name":'14',"pro":'sdsd4'}]},

                {"id":20,"name":'20',"pro":'ssssss2',"children":[
                {"id":21,"name":'21',"pro":'sdsd1'},
                {"id":22,"name":'22',"pro":'sdsd2'},
                {"id":23,"name":'23',"pro":'sdsd3'}]},

                {"id":30,"name":'30',"pro":'ssssss3',"children":[
                {"id":31,"name":'31',"pro":'sdsd1'},
                {"id":32,"name":'32',"pro":'sdsd2'},
                {"id":33,"name":'33',"pro":'sdsd3'}]}
        ];

      
        //初始化数据表格
        function fInitDatagrid(){

            $('#i_dg').treegrid({    
                data:jTestData3,
                rownumbers:true,
                idField:'id',    
                treeField:'name',    
                columns:[[    
                    {title:'Task Name',field:'name',180},    
                    {field:'pro',title:'pro',160,align:'right'} 
                ]],
                onLoadSuccess:function(row,data){
                    $('#i_dg').treegrid("collapseAll");
                    $('#i_dg').treegrid("select",data[0].id);//通过id进行选择
                    //$("#i_dg").treegrid("expand",data[0].id);
                }    
            });  

        }

        
        //根据node的Id获取当前节点的子一级节点
        function fSelectChildNode(sNodeId){
            var aChild=[];
            var aChildren=$("#i_dg").treegrid("getChildren",sNodeId);//获取所有子节点
            var    nChildLevel=$("#i_dg").treegrid("getLevel",sNodeId)+1;//获取子一级节点的节点等级
            
            if(aChildren.length>0){
                for (var i = 0; i < aChildren.length; i++) {
                    
                    if($("#i_dg").treegrid("getLevel",aChildren[i].id)==nChildLevel){
                        aChild.push(aChildren[i]);
                    }

                }
            }
            return aChild;
        }

        
        //获取当前节点的所有兄弟节点
        function fSelectSiblingNode(sNodeId){

            if($("#i_dg").treegrid("getLevel",sNodeId)==1){//如果当前节点是根节点
                return $("#i_dg").treegrid("getRoots");
            }

            var oPerNode= $("#i_dg").treegrid("getParent",sNodeId);//获取当前节点的父级节点
            //var aSiblingNode =fSelectChildNode(oPerNode.id);//获取当前节点的兄弟节点
            return fSelectChildNode(oPerNode.id);
        }

        
        //获取当前节点的下一个节点（无论该节点和下一个节点是否包含子节点）
        var oNextNode=null;
        function fSelectNextNode(sNodeId) {
            var aSiblingNode=fSelectSiblingNode(sNodeId);

            for(var i=0; i<aSiblingNode.length;i++){
                if (aSiblingNode[i].id==sNodeId && i < aSiblingNode.length-1) {//不是兄弟节点的最后一个节点
                    var k=i+1;
                    //return aSiblingNode[k];//这里return返回，只是结束本次循环，arguments.callee(perNode.id)这个调用几次（递归执行几次）return完了之后，会接着执行上次没有执行完的for循环
                    oNextNode = aSiblingNode[k];
                    break;
                }else if(aSiblingNode[i].id==sNodeId && i == aSiblingNode.length-1){//如果当前节点是最后一个节点，需要跳出返回父节点的下一个节点
                    if($("#i_dg").treegrid("getLevel",sNodeId)>1){//当前节点不是根节点
                        var oPerNode= $("#i_dg").treegrid("getParent",sNodeId);//获取当前节点的父节点
                        arguments.callee(oPerNode.id);
                    }else{//如果是根节点的最后一个，执行完了
                        return null;
                    }
                }
                /*else{
                    continue;
                }*/
            }

        }


        //选中下一个节点
        var aNextChildren;
        function fSelectNode(oRowData,bFlag){
            
            if(!oRowData){
                return false;
            }

            if(bFlag){
                if($("#i_dg").treegrid("getRoots")[0].id!=oRowData.id && $("#i_dg").treegrid("getLevel",oRowData.id)>1){
                    fSelectNextNode(oRowData.id);
                    oRowData=oNextNode;
                }
            }
            aNextChildren = fSelectChildNode(oRowData.id);
            if(aNextChildren.length > 0){//如果当前节点有子节点
                //$('#i_dg').treegrid("select",oRowData.id);
                $("#i_dg").treegrid("expand",oRowData.id);

                //$('#i_dg').treegrid("select",aNextChildren[0].id);
                arguments.callee(aNextChildren[0]);
                        
                }else{//如果当前节点没有子节点
                    $('#i_dg').treegrid("select",oRowData.id);
                    
                }
       
        }    

        //初始化滑动条
        function fInitSlider(){
            $('#i_slider').slider({    
                mode: 'h',  
                800,
                height:200,
                showTip:true,
                min:0,
                max:400,
                value:0,
                step:10,
                tipFormatter: function(value){    
                    return value + '%';    
                },
                onChange:function(){fSelectNode($("#i_dg").treegrid("getSelected"),true);}
            }); 
        }

        //设置Timer
        function fSetTimer(){
            var terval=setInterval(function(){
                var nValue=$("#i_slider").slider("getValue");
                $("#i_slider").slider("setValue",nValue + 10);
            },1000);
        }


        $(function(){

           fInitDatagrid();
           fInitSlider();
           fSetTimer();
        });

</script>

<%@ include file='/main/footer.jsp' %>

上边注释很全，请多多指教。