界面设计(struts)

以下是我个人开发的一个订单管理程序的订单录入介面. (开发平台jdk1.4+tomcat5.0+sql2000+struts1.1)主要使用了javascript(子父窗口控制,弹出新窗口,子父窗口之间传值).

以下是具体步骤.

第一步:主档添加介面(如图1)

当点击客户代号右边的按钮时.将弹出一个子窗口,然后点击子窗口中的"选择"链接.所选的客户资料将传递到父窗口表单中.

以下是javascript代码.

1.子父窗口传值.

<script language="JavaScript">
function popup()
{
window.opener.document.all["test"].value='mytest'; //在子窗口设置父窗口表单元素的值.
window.close() //关闭子窗口.
}
</script>

<a href="#" onClick="javascript:popup()">选择</a> //调用代码.

2.弹出新窗口

<script language="JavaScript">
function winopen(url,title)
{
window.open(url,title,"toolbar=no,directories=no,menubar=no,scrollbars=yes,width=600,height=300");
}

</script>

//--调用代码.

<a href="#" onClick="javascript:winopen('order_formlistAction.do?action=add&nid=123456','add')">添加明细</a>

 

图(1)

图(2)

第二步: 添加明细资料(如图3)

当主档资料输入完成.点击"添加"按钮后. 进入(图3)所示介面.这里主要有二个状态改变. "添加"按钮自动变成"修改". 显示明细资料介面.这里用了一个内框来显示明细资料.

1.使用内框代码.

<iframe src="order_formlistAction.do?action=view&nid=123456" name="com" id="com" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" align="center" scrolling="yes"></iframe>

2.控制内框是否显示的代码

我们这里使用struts提供的<logic:equal> 标签. 主要判断sale1ActionForm的action属性的值.如果action的值等于edit就显示内框.

<logic:equal name="sale1ActionForm" property="action" scope="request" value="edit">

<!--在这里加入内框代码-->

</logic:equal>

图(3)

第三步:明细资料管理(如图4)

点击"添加明细" 还是弹出一个子窗口. 这是一个明细添加介面.主要是录入订单的产品资料.在这里. 还是通过点击产品代码右边的按钮来弹出产品资料的"子窗口".从吕选择要添加的产品. 当输入完一笔资料后.按"添加"后.将自动关闭子窗口. 并刷新父窗口.

1.刷新父窗口代码.

<script language="JavaScript" type="text/JavaScript">
window.opener.location.reload(); //刷新父窗口
window.close(); //关闭子窗口.
</script>

 

图(4)

第四步: 完成输入介面(如图5)

在这里放了一个"完成"按钮. 点击即可导向其它介面.

图(5)