最近在写一个人工智能的项目。智能当然牵扯到数据啦,说实话数据的展示很头疼,不说了,直接上代码

这里使用原生的js来添加节点达到内容的更新,头疼的是只有中间部分是改变的,两侧的是固定的,所以高度不能设置固定的,只能由内容撑起了

var reference = item.references;
            var style = getStyle(reference.length)
            html += "<div id='abnormalContent' class='CSSTop1' style='padding: 10px; height: auto; background-color:  #e9ecf3;overflow: hidden;'>\n" +
                    "   <div id='abnormalQuestion' class='col-md-3 col-xs-3 CSSTop3 "+style+"'>" + item.question + " </div>" +
                    "   <div id='otherQuestion' class='col-md-5  col-xs-5 col-md-offset-1' style='margin-bottom: 1%;margin-top: 1%;'>";
            for (var otherIndex in reference) {
                html += "   <div style='margin-top: 1%;'>"+reference[otherIndex]+"</div>";
            }
            html += "   </div>" +
                    "   <div class='col-md-1 col-xs-1 CSSTop3 "+style+"' onClick='dealIgnore(\"/qaClean/ignoreAbnormalQuestion\","+index+",\"false\")' >  <button type=\"button\" class=\"btn btn-primary btn-sm\">忽略</button>\n </div>" +
                "       <div class='col-md-1 col-xs-1 CSSTop3 "+style+"' onClick='deleteQuestion("+index+")'>  <button type=\"button\" class=\"btn btn-warning btn-sm\">删除该问法</button>\n </div>" +
                    "   <div class='col-md-1 col-xs-1 CSSTop3 "+style+"' onClick='relatedToQANew("+index+")'>  <button type=\"button\" class=\"btn btn-info btn-sm\">关联</button>\n</div>" +
                    "</div>";
        }

js判断内容的数量来设置margin-top的数值

function getStyle(length) {
if( length == 5){
    return "mpt52"
}
else if(length == 4){
    return "mpt39"
}
else if(length ==3){
    return "mpt22"
}
else if(length ==2){
    return "mpt15"
}
else{
    return "mpt5"
}

}
所实现的效果图原型
请输入图片描述


扫描二维码,在手机上阅读!