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,'')
前端 js渲染树结构数据
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前言 四月春光晴方好,斜风微醉不须归。北京的春,这么美,那么艳。青草联排,春花烂漫。不过,有的时候,这春风,倒是有...
- js 数据结构类型扩展:immutable-js 相对 java、.net 之类的强类型语言,js 有一点很大的区...
- 1. 树结构示意图 补充: 兄弟节点:具有相同父节点的节点互称为兄弟节点。 树的深度:从根节点开始(其深度为0)自...