jsp中添加弹窗口并且实现向后台双向传递数据

思路：使用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中数据，这样就会在产品中产生相同的产品代码。