前端 js渲染树结构数据

    function fun_getTreeNodeHtml(dataArr,isFilterChild,kingId){
        var classHidden = (isFilterChild) ? 'initHidden' : '' ;
        var htmlStr = '<ul class="'+ classHidden +'">';
        var liStr = '';
        for(var i=0; i<dataArr.length; i++){
            var item = dataArr[i];
            var childSize = item.childItems.length;
            var labelClass = (childSize==0) ? '' : 'moreItem';
            var iconStr = (childSize==0) ? '' : '<span class="icon"></span>' ;
            var checkBoxStr = (childSize==0) ? '<input type="checkbox" class="checkItem"/>' : '' ;
            //var titleTextStr = titleText ? titleText+'/'+item.Describe_CN : item.Describe_CN
            var kingId = (kingId) ? kingId : item.Kind ;
            liStr += '<li><label class="'+ labelClass +'" data-kind="'+ kingId +'" data-id="'+ item.DangerousCargoCodeID +'" data-text="'+ item.Describe_CN +'">'+ iconStr + checkBoxStr + item.Describe_CN +'</label>'                
            if(childSize){
                liStr += fun_getChildNodeHtml(item.childItems,kingId) 
            }else{
                liStr += '</li>'
            }
        }
        htmlStr += liStr + '</ul>'
        return htmlStr
        
    }
    function fun_getChildNodeHtml(childDataArr,kingId){
        var htmlStr = fun_getTreeNodeHtml(childDataArr,true,kingId)
        return htmlStr;
    }
    var dataArr = [{
    "Kind": 1,
    "ParentID": 0,
    "Describe_CN": "",
    "childItem": [{
        "Kind": 1,
        "ParentID": 29,
         "Describe_CN": "",
        "childItems": [],
    }, {
        "Kind": 1,
        "ParentID": 29,
         "Describe_CN": "",
        "childItems": [{
        "Kind": 1,
        "ParentID": 29,
         "Describe_CN": "",
        "childItems": []
    }]
    }];  //tree结构数据  参考数据
    var HTML = fun_getTreeNodeHtml(dataArr,false,'')
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容