思路：使用jquery-easyui框架实现弹出div，在jsp初始化时从后台获得数据初始化div中的form表单元素的value属性，从而获得后台数据。在点击确定按钮时使用ajax向后台发送数据。
步骤：
1、jsp页面引入如下文件
<link rel="stylesheet" type="text/css" href="<c:url value="/jquery-easyui-1.3.2/themes/gray/easyui.css"/>"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/jquery-easyui-1.3.2/themes/icon.css"/>"/>
<script type="text/javascript" src="/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
2、在create.jsp页面上添加弹出div
<div id="generateProductNum" modal='true' closed='true' class='easyui-dialog' style='340px;height:330px' title="产生代码">
<table>
<tr>
<td>当前值</td>
<td><s:textfield id="currentValue" theme="simple" value="%{#request.lgpAutoNum.currentValue}" cssStyle="150px" readonly="true"/></td>
</tr>
<tr>
<td>增量</td>
<td><s:textfield id="increase" theme="simple" value="%{#request.lgpAutoNum.increase}" cssStyle="150px"/></td>
</tr>
<tr>
<td>最大值</td>
<td><s:textfield id="max" theme="simple" value="%{#request.lgpAutoNum.max}" cssStyle="150px"/></td>
</tr>
<tr>
<td>种类</td>
<td><s:textfield id="category" theme="simple" value="%{#request.lgpAutoNum.category}" cssStyle="150px" readonly="true"/> </td>
</tr>
<tr>
<td>部门名称</td>
<td><s:select list="#request.departList" id="departId" name="departId" theme="simple" cssStyle="150px" listKey="deptCode" listValue="deptName" value="1"></s:select></td>
</tr>
<tr>
<td><input type="button" value="确定" onclick="confim()"/></td>
<td><input type="button" value="取消"/></td>
</tr>
</table>
</div>
其中 modal='true' closed=“true”属性设置div的初始状态为隐藏,在div中初始化表单元素的value值为后台的数据
3、点击文本框时触发弹出div的函数
<s:textfield id="productNum" name="productNum" value="%{model.productNum}" cssClass="required" theme="simple" cssStyle="150px" readonly="true" onclick="generateNum()"></s:textfield>
4、js函数如下
function generateNum(){
$j('#generateProductNum').dialog('open');
}
在框架中存在jquery和prototype的冲突，为解决冲突问题必须采用
var $j= jQuery.noConflict();
将$j符合作为jquery的标志符合。且var $j= jQuery.noConflict();必须紧跟<script>之后，即在在开始执行script的时候先执行冲突函数，这样后续的prototype中的冲突就可以解决。即应用于所有js代码
5、点击div的确定按钮后执行的方法（将用户自定义的代码产生格式赋值到form表单中对应的文本域中 ，同时关闭弹出的div）
function confim(){
var now=new Date();
var departCode=document.getElementById('departId').value.toUpperCase();
//var departCode=document.getElementById('departId').options[document.getElementById('departId').selectedIndex].text.toUpperCase();
var currentValue=document.getElementById('currentValue').value;
var increase=document.getElementById('increase').value;
var valueNum=parseInt(currentValue)+parseInt(increase);
if(valueNum/100<1){
if(valueNum/10<1){
valueNum="00"+valueNum;
}else{
valueNum="0"+valueNum;
}
}
var productNum=departCode+now.getFullYear()+valueNum;
document.getElementById('productNum').value=productNum;
$j('#generateProductNum').dialog('close');
}
6、当点击jsp页面上的提交按钮时将最终数据提交到后台，但是一定要同时修改代码产生规则表的数据使用ajax实现
function updateNum(){
var currentValue=document.getElementById('currentValue').value;
var increase=document.getElementById('increase').value;
var url="/product/LgpAutoNum_update.action?increase="+increase+"&_t="+new Date().getTime();
var myAjax=new Ajax.Request(
url,
{
method:'get',
setRequestHeader:{"If-Modified-Since":"0"},
setRequestHeader:{"Cache-Control":"no-cache"},
onComplete:afterNum
}
);
}
function afterNum(originalRequst){
var result=originalRequst.responseText;
if(result.length<0){
alert("编号不符合规范");
}
}
使用ajax时如果多次添加产品记录，就会多次修改代码生成规则表的记录，这就需要使用ajax重复提交到相同的url，由于ajax的异步性在浏览器中多次提交时只执行一次并获得response中数据，这样就会在产品中产生相同的产品代码。