js操作行

• 需求：弹出框中的数据是js动态生成的html代码，点击加号展开，点击减号折叠
  
• 步骤：

1.弹出框：

	<div class="am-modal am-modal-no-btn" tabindex="-1" id="popDiv1">
	    <div class="am-modal-dialog" style="width:800px;max-height: 100%;">
	        <div class="arrow"></div><div class="arrow"></div><div class="arrow"></div><div class="arrow"></div>
	        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	        <div class="am-modal-hd">
	            数据详情
	        </div>
	
	        <div style="overflow-y: auto;max-height: 400px">
	            <table class="am-table historyDataModel" style="margin:10px 0;">
	                <thead>
	                <tr>
	                    <th style="padding-left: 8px!important;">日期</th>
	                    <th style="padding-left: 8px!important;">详情</th>
	                    <th style="padding-left: 8px!important;">属性名称</th>
	                    <th>属性值</th>
	                </tr>
	                </thead>
	                <tbody>
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

2.打开弹出框：

	function goToHistoryDataDetails(item) {
	 $("#popDiv1").modal("open");
	 $(".historyDataModel tbody").html("");
	
	 var jsonString = {data:{code: 200,data:[{id:1,dateTime: "2019-05-13 16:09:00",attrList: [{name: 'gg',value:'gg'},{name: 'gg',value:'gg'},{name: 'gg',value:'gg'}]},{id:2,dateTime: "2019-05-13 16:09:00",attrList: [{name: 'gg1',value:'gg1'},{name: 'gg1',value:'gg1'},{name: 'gg1',value:'gg'}]}]}};
	 createModelTable1(jsonString.data.data);
	 }

3.生成动态的html代码：

function createModelTable1(data) {
    var content = "";
    for(var i=0; i<data.length; i++) {
        content += "<tr>";
        content += "<td style='width: 174px;padding-left: 10px;text-align: left;'>" + data[i].dateTime + "</td>";
        content += "<td style='width: 134px;text-align: left;'><img class='switchPic' src='/IotVisualMoniterSys/pub/img/his-data-add.png' style='width: 20px;height: 20px;'></td>";
        content += "<td colspan='2'>";
        content += "<div class='attr-container' style='display: none;'>"
        for(var j=0; j<data[i].attrList.length; j++){
            content += "<div style='display: flex;text-align: left;'>"
            content += "<div style='width: 217px;text-align: left;height: 24px;line-height: 24px;'>"+data[i].attrList[j].name+"</div>";
            content += "<div style='width: 217px;text-align: left;height: 24px;line-height: 24px;'>"+data[i].attrList[j].value+"</div>";
            content += "</div>"
        }
        content += "</div>"
        content += "</td>";
        content += "</tr>";
    }

    $(".historyDataModel tbody").html(content);
}

4.绑定折叠展开事件：

$("#popDiv1").on("click", ".switchPic", function () {
    if($(this).attr("src") == "/IotVisualMoniterSys/pub/img/his-data-jian.png"){
        $(this).attr("src", "/IotVisualMoniterSys/pub/img/his-data-add.png");
    }else{
        $(this).attr("src", "/IotVisualMoniterSys/pub/img/his-data-jian.png");
    }
    $(this).parent().next().children().slideToggle(500);
});