博客

1.  首先在页面中配置好一个表格框架

		<tr>
			<td>新增参数:</td>
			<td class="pn-fcontent"><input type="button" value="选择" οnclick="openAppParamsPage();"/></td>
			
			<td>参数列表:</td> 
			<td class="pn-fcontent"><input type="hidden" id="paramslist" name="paramslist" style="width:190%" height="500"/></td>
		</tr> 
		
		<tr>
				<table id="tab" width="100%" cellspacing="1" cellpadding="0" border="0" style="" class="pn-ltable">
					<tr>
					    <td height="20" valign="top" align="center">
							参数名称:
						</td>
						<td height="20" valign="top" align="center">
							参数编码:
						</td>
						<td height="20" valign="top" align="center">
							参数值:
						</td>
						<td id="pos_1" height="20">
							操作
						</td>
					</tr>
					<tbody id="sortList"></tbody>
				</table>
        </tr> 

		<tr>
				<td align="center" colspan="4">
					<input type="submit"  class="btn" value="保存" οnclick="setParamslist();"/>
					 
					<input type="button"  class="btn" value="返回"/>
				</td>
		</tr>

2.  相关JS函数

	function setParamslist() {
    	
    	var tab = document.getElementById("tab");
    	//表格行数
      	var rows = tab.rows.length ;
        //表格列数
        var cells = tab.rows.item(0).cells.length ;
        //alert("行数"+rows+"列数"+cells);
    	var rowData = "";
    	for(var i=1;i<rows;i++) {
    		var cellsData = new Array();
    		for(var j=0;j<cells-1;j++) {
				cellsData.push(tab.rows[i].cells[j].innerText);	    			
    		}
    		rowData = rowData + "|" + cellsData;
    	}
	    
	    document.getElementById("paramslist").value = rowData;
    }

    //打开相关新增应用参数界面
	function openAppParamsPage() {
		
		var param = new Object();
		//这个参数一定要传。
		param.win = window;
		param.id = 100;
		param.name = "test";
		param.birthday = new Date();
		var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");
		//var temp = document.getElementById("paramslist").value;
		//document.getElementById("paramslist").value = temp + result;
		
		addSort(result);
	}
	
	  // 增加应用参数函数
    function addSort(data) {
        var name = data;
        if(name == ""||name==undefined ) {
            return;
        }
		console.log(data);
        var params = data.split(",");
        var paramName = params[0];
        var paramCode = params[1];
        var paramValue = params[2];
        
        var row = document.createElement("tr");
        row.setAttribute("id", paramCode);
        var cell = document.createElement("td");
        cell.appendChild(document.createTextNode(paramName));
        row.appendChild(cell);
        
        cell = document.createElement("td");
        cell.appendChild(document.createTextNode(paramCode));
        row.appendChild(cell);
        
        cell = document.createElement("td");
        cell.appendChild(document.createTextNode(paramValue));
        row.appendChild(cell);
        
        var deleteButton = document.createElement("input");
        deleteButton.setAttribute("type", "button");
        deleteButton.setAttribute("value", "删除");
        deleteButton.onclick = function () { deleteSort(paramCode); };
        cell = document.createElement("td");
        cell.appendChild(deleteButton);
        row.appendChild(cell);
        
        document.getElementById("sortList").appendChild(row);

     }
    // 删除应用参数函数
    function deleteSort(id) {
        if (id!=null){
            var rowToDelete = document.getElementById(id);
            var sortList = document.getElementById("sortList");
            sortList.removeChild(rowToDelete);
        }
    }

附加表格的修改函数

     //弹出更新界面相关信息
     function updateSort(id) {
     	if (id!=null){
     		var row = document.getElementById(id);
     		//alert("row is " + row.cells[0].innerHTML);
     		var id = row.cells[0].innerHTML;
     		var paramName = row.cells[1].innerHTML;
     		var paramCode = row.cells[2].innerHTML;
     		var paramValue = row.cells[3].innerHTML;
     		
			var param = new Object();
			//这个参数一定要传。
			param.win = window;
			param.id = 100;
			param.name = "test";
			param.birthday = new Date();
			var result = window.showModalDialog(baseUrl + "app/updateParamsItem?id=" + id + "¶mName=" + paramName + "¶mCode=" + paramCode + "¶mValue=" + paramValue,
					"dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");
     		
     		var arr = result.split(",");
     		row.cells[0].innerHTML = arr[0];
     		row.cells[1].innerHTML = arr[1];
     		row.cells[2].innerHTML = arr[2];
     		row.cells[3].innerHTML = arr[3];     		
     	}
     }

3.  弹出框页面，新增或者修改参数，并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新增应用</title>
<#include "/views/head.html"/>
</head>

<body>
<div class="body-box">
		<div class="clear"></div>
<form >
	<table width="100%" cellspacing="1" cellpadding="2" border="0"	class="pn-ftable">
		<tr>
			<td>参数名称:</td>
			<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramName" name="paramName"/></td>
		</tr>
		<tr>
			<td>参数编码:</td>
			<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramCode" name="paramCode" required="true" /></td>  
		</tr>
		<tr>
			<td>参数值:</td>
			<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramValue" name="paramValue" required="true" /></td>  
		</tr>
		<tr>
				<td align="center" colspan="4">
					<input type="submit" value="保存" οnclick="returnResult();"/>
					 
					<input type="button" value="返回" οnclick="closeWindow();"/>
				</td>
		</tr>
		
	</table>
	
</form>
</div>
</body>
</html>

<script type="text/javascript">

    //直接关闭窗口	
	function closeWindow() {
		window.close();
	}
 
 	//获取值，组装后返回
 	function returnResult() {
 		
 		if(!$('form').valid())
 			return;
 		
 		var paramName = document.getElementById("paramName");   
 		var paramCode = document.getElementById("paramCode");   
 		var paramValue = document.getElementById("paramValue");   
 		
 		//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);
 		
 		var result = paramName.value + "," + paramCode.value + "," + paramValue.value;
 		window.returnValue = result;
 		window.close();
 	}
     

</script>