界面设计(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)