在dialog里绘制端口及其状态

任务是需要展示出某个设备的所有端口的名称以及状态，首先我使用了如下方法绘制：

for (var i = 0; i < arrayObj1.length; i++) {

                     var li1 = document.createElement("li1");
                     li1.style.left = li1.offsetLeft+10 + i % 12 * 75 + "px";
                     li1.style.top = li1.offsetTop + parseInt(i / 12) * 40+ 10 + "px"; // 实现换行
					 if(arrayObj1[i][0].length>10){
						 var str1= arrayObj1[i][0].substring(0,10);
						 var str2= arrayObj1[i][0].substring(10);
						 li1.innerHTML = str1+"<br>"+str2; 
					 }else{
						 li1.innerHTML=arrayObj1[i][0];
					 }
                            					 
					 if(arrayObj1[i][1]=="1"){
						 li1.style.background="green";
					 }
                     ul1.appendChild(li1);

                 }

但是在panel里显示的却是固定位置的，不能随着滚动条的滚动而滚动，最后终于搞好了（因为对css掌握的不好）

<ul id="ulGateway" style="height:360px;overflow-x:hidden; overflow-y:scroll;position:relative"></ul>

将ul里的position改为relative，因为默认为absolute，然后就可以了

最后用到了排序以及字符串分割等，最后效果如图

卡了我很久的一个功能终于实现了