无限级分类和循环渲染

首先讲一下循环渲染。有时候我们会遇到存在父子关系的列表渲染,就像购物网站的类别选择,一层套一层,而父对子还有控制。如果挨着不停的去渲染代码会控制不住,所以循环渲染是必要的。下面是简单的代码实现。

 

<div id="app">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
        var data = [{
            'name':'word',
            'child':[
                {
                    'name':'A',
                    'child':[{
                        'name':'Aa',
                        'child':[]
                    },{
                        'name':'Ab',
                        'child':[]
                    }]
                },{
                    'name':'B',
                    'child':[{
                        'name':'Ba',
                        'child':[{
                            'name':'Baa',
                            'child':[]
                        }]
                    },{
                        'name':'Bb',
                        'child':[]
                    }]
                },{
                    'name':'C',
                    'child':[{
                        'name':'Ca',
                        'child':[]
                    },{
                        'name':'Cb',
                        'child':[{
                            'name':'Cba',
                            'child':[{
                                'name':'Cbaa',
                                'child':[]
                            }]
                        }]
                    }]
                }

            ]
        }]
        var container = document.getElementById('app');
        function render(arr){
            var oUl = document.createElement('ul');
            arr.forEach(function(value, index, allArray){
                var li = document.createElement('li');
                li.innerHTML = value.name;
                oUl.appendChild(li);
                if(value.child.length>0){
                    var child = render(value.child);
                    li.appendChild(child);
                }
            });
            return oUl;
        }
        container.appendChild(render(data));
</script>

运行结果就是不同的级别都是一个ul列表,然后嵌套在父级的li中。

有了渲染方式,但是后端返回的数据不一定是上述格式,针对无序返回的列表(如下)做了一个无限极排序。

//返回的数据不同级别都放在一个列表中,其中有标示其级别父id自己id的信息,根据这些信息我们把它做成之前渲染所需要的数据格式。
"datalist": [{ "faccountname": "库存现金", "fcurrencynumber": " ", "fparentid": "0", "flevel": "1", "fdebit": "0.0000", "faccountid": "1001", "fdetailidorder": "0", "fdc": "1", "fendbalancefor": "0.0000", "fdetailid": "0", "fdetail": "True", "fbeginbalancefor": "0.0000", "fcredit": "0.0000", "fname": "库存现金", "fnumber": "1001" }, { "faccountname": "银行存款", "fcurrencynumber": " ", "fparentid": "0", "flevel": "2", "fdebit": "0.0000", "faccountid": "1002", "fdetailidorder": "0", "fdc": "1", "fendbalancefor": "0.0000", "fdetailid": "0", "fdetail": "False", "fbeginbalancefor": "0.0000", "fcredit": "0.0000", "fname": "银行存款", "fnumber": "1002" }]

直接上代码

var newArr = [];
    var obj = {};
    //首先把不同级的数据分类,并添加childs属性,方便子集的插入
    Data.datalist.forEach(function(item){
        item.childs = [];
        //以级别为key定义对象数组,这里级别一般以数字为主方便在下面插入数组的时候自动排序
        if(!obj[item.flevel]){
            obj[item.flevel] = [];

        }
        //如果该级别已存在则直接添加到该级别数组
        obj[item.flevel].push(item);
    })
    //把数据插入数组
    for(var item in obj){
        newArr.push(obj[item]);
    }
    //倒序插入父级
    var len = newArr.length;
    //由于是倒序所以使用while循环,避免for循环每次的比较
    while(len){
        insert(newArr[len], newArr[len-1]);
        len--;
    }
    function insert(child, parent){
        //在这里先循环子集,在与对应的父级匹配之后break;减少父级循环
        child.forEach(function(itemChild){
            parent.forEach(function(itemParent){
                if(itemChild.fparentid == itemParent.faccountid){
                    itemParent.childs.push(itemChild);
                    break;
                }
            })
        })
    }

在这里做了尽可能的优化。可以直接上github拉代码测试:

https://github.com/Stevenzwzhai/plugs/tree/master/无限级分类

posted @ 2016-12-02 11:28  故园苒苒  阅读(1337)  评论(0编辑  收藏  举报