最近做了个用户管理系统，其中有项目需求，要求用js生成带有缩进的表格，真是把我难住了，通过查阅相关资料，才实现此功能，下面小编把实现代码做个笔记，也方便以后查找，同时也希望能与我同样需求的朋友可以做个参考，如有更好的方法，留言给我，谢谢！
js做如下表格：
json
查询信息","value":"","comment":"","parentId":-1,"childrenParam":[{"id":305,"name":"info","paramDesc":"查询内容","parentId":302,"childrenParam":[{"id":312,"name":"entInvList","type":"List","paramDesc":"企业对外投资情况","parentId":305,"childrenParam":[{"id":343,"name":"regNo","type":"String","paramDesc":"注册号","parentId":312,"childrenParam":null},{"id":342,"name":"regCapCur","paramDesc":"注册资本币种",{"id":341,"name":"regCap","paramDesc":"注册资本(万元)",{"id":340,"name":"ent_name","paramDesc":"法定代表人姓名",{"id":339,"name":"fundedRatio","paramDesc":"出资比例",{"id":338,"name":"esDate","paramDesc":"开业日期",{"id":337,"name":"error","paramDesc":"认缴出资额(万元)",{"id":336,"name":"entType","paramDesc":"企业(机构)类型",{"id":345,"name":"revDate","paramDesc":"吊销日期",{"id":344,"name":"regOrg","paramDesc":"登记机关",{"id":334,"name":"currency","paramDesc":"认缴出资币种",{"id":335,"name":"entStatus","paramDesc":"企业状态",{"id":333,"name":"canDate","paramDesc":"注销日期","childrenParam":null}]},{"id":346,"paramDesc":"企业名称",{"id":311,"name":"basic","paramDesc":"企业基本信息","childrenParam":[{"id":326,"name":"opScope","paramDesc":"经营(业务)范围","parentId":311,{"id":327,"name":"opTo","paramDesc":"经营期限至 YYYY-MM-DD",{"id":324,"name":"industryPhy","paramDesc":"国民经济行业代码",{"id":325,"name":"opFrom","paramDesc":"经营期限自 YYYY-MM-DD",{"id":322,"name":"frName","paramDesc":"定代表人姓名 企业为法定代表人姓名，个体户为负责人姓",{"id":323,"name":"industryCo","paramDesc":"行业门类代码",{"id":320,"paramDesc":"企业(机构)类型 有限责任公司等",{"id":321,"paramDesc":"开业日期 YYYY-MM-DD",{"id":332,"paramDesc":"吊销日期 YYYY-MM-DD",{"id":330,{"id":331,{"id":328,"paramDesc":"注册资本 单位：万元",{"id":329,"paramDesc":"币种 人民币、美元等",{"id":313,"name":"OPSCOANDFORM","paramDesc":"经营(业务)范围及方式",{"id":315,"name":"ancheYear","paramDesc":"最后年检年度 YYYY ",{"id":314,"name":"abuItem","paramDesc":"许可经营项目",{"id":317,"name":"cbuItem","paramDesc":"一般经营项目",{"id":316,"paramDesc":"注销日期 YYYY-MM-DD",{"id":319,"paramDesc":"经营状态 在营、吊销、注销、其他",{"id":318,"name":"dom","paramDesc":"住址","childrenParam":null}]}]},{"id":304,"name":"result","paramDesc":"核查结果","value":"match| not_match| not_found",{"id":303,"name":"status","type":"Boolean","paramDesc":"接口返回状态",{"id":306,"name":"api_status","paramDesc":"返回状态码","childrenParam":[{"id":307,"parentId":306,{"id":309,"name":"description","paramDesc":"返回状态描述",{"id":308,"name":"code","paramDesc":"状态码",{"id":310,"name":"serial_no","paramDesc":"流水号","childrenParam":null}]}]
js
页面 输出参数说明
var APItoHTML_outParamFn = function(json,returnExample){
var html=''
var mustArr = ['必填','选填']
var paramHtml = ''
var data = $.parseJSON(json);
console.log(data)
// name：参数英文名
// type：参数类型
// paramDesc：参数中文释义
// value：参数赋值说明
// comment：参数其它说明
// childrenParam：子参数列表
console.log('-------------------------------------------------------------')
var flagI = 0
var bbb = []
var c=[]
dataFormatFn2(data,flagI)
// 统计子类数量
// 每个节点增加len属性，统计所以子节点和子节点的子节点的总和
function dataFormatFn2(data){
for (var i = 0; i < data.length; i++) {
bbb[i]=0
bbb[i]=dataFormatFn(data[i],bbb[i],c )
};
// data转html
paramHtml = jsontohtml(data,0);
}
function dataFormatFn(data,flagI,b,c){
data.len = (data.childrenParam && data.childrenParam.length)||1
// debugger
// console.log(data)
c = c||[]
if(data.childrenParam){
for (var i = 0; i < data.childrenParam.length; i++) {
b++
data.len += dataFormatFn(data.childrenParam[i],flagI+1,c[i])
};
return data.len
}else{
return (data.childrenParam && data.childrenParam.length) ||0
}
}
console.log(bbb)
console.log(data)
var flagI = 0
// 移动到 dataformataFn2 后执行
// paramHtml = jsontohtml(data,flagI);
function jsontohtml(data,len){
var paramHtml='';
var nbspArr =['','Ⅰ','Ⅱ','Ⅲ','Ⅵ','Ⅴ','Ⅶ','Ⅷ','Ⅸ','Ⅹ']
for(var i=0;i0 && len>1){
span = (10-flagI)
str2 = ''+ nbspArr[flagI] + data[i].name +'\
\
'
$('#outParam dl').html(html);
}
html
<Meta charset="UTF-8">
js<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>有缩进的表格