JQueryUI实现对话框

JQueryUI实现对话框，进行更新操作

• 引入相应的文件

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

• 编写JS代码

    <script type="text/javascript">
$(function() {
   var equID = $( "#equID" ),
      equName = $( "#equName" ),
      equCode = $( "#equCode" ),
      isPurchase = $( "#isPurchase" ),
      actualMount = $( "#actualMount" ),
      fundIdentifier = $( "#fundIdentifier" ),
      allFields = $( [] ).add( equID ).add( equName ).add( equCode ).add( isPurchase ).add( actualMount ).add( fundIdentifier );
   
   $( "#dialog-form" ).dialog({
   autoOpen: false,
   height: 500,
   width: 400,
   modal: true,
      buttons: {
        "提交": function() {
        alert("确定要提交信息？");
        document.forms[0].submit();
        $( this ).dialog( "close" );
        },
       "取消": function() {
          $( this ).dialog( "close" );
       }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
});
       $('.update').button({
           icons: {
               primary: 'ui-icon-pencil'
           }
      });
});
    function updateEquipment(id){
<c:forEach items="${page.result }" var="entity">
if("${entity.equID}" == id){
$("#equID").val("${entity.equID}");
  $("#equName").val("${entity.equName }");
  $("#equCode").val("${entity.equCode }");
  $("#isPurchase").val("${entity.isPurchase }");
  $("#actualMount").val("${entity.actualMount }");
  $("#fundIdentifier").val("${entity.fundIdentifier }");
}
</c:forEach>
    $( "#dialog-form" ).dialog( "open" );
    }
    </script>

• JSP页面中的表单/表格

<div id="dialog-form" title="编辑设备信息">
<form action="${ctx}/manage/equipment/update?projID=${projID}" method="post">
<fieldset>
<label for="equID">设备标识号</label>
  <input type="text" name="equID" id="equID" readonly="readonly" class="text ui-widget-content ui-corner-all">
<label for="equName">设备名称</label>
<input type="text" name="equName" id="equName" readonly="readonly" class="text ui-widget-content ui-corner-all">
<label for="equCode">设备编号</label>
<input type="text" name="equCode" id="equCode" class="text ui-widget-content ui-corner-all">
<label for="isPurchase">设备是否购买</label>
<input type="text" name="isPurchase" id="isPurchase" class="text ui-widget-content ui-corner-all">
<label for="actualMount">实际报账金额</label>
<input type="text" name="actualMount" id="actualMount" class="text ui-widget-content ui-corner-all">
<label for="fundIdentifier">经费编号</label>
<input type="text" name="fundIdentifier" id="fundIdentifier" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<table width="100%" class="need-border">
<thead>
<tr>
<th>&nbsp;</th>
<th>设备名称</th>
<th>设备类型</th>
<th>设备单价</th>
<th>数量</th>
<th>总价</th>
<th>计划购置时间</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.result }" var="entity">
<tr>
<td></td>
<td>${entity.equName }</td>
<td>${entity.equType }</td>
<td>${entity.equUnitPrice }</td>
<td>${entity.equNumber }</td>
<td>${entity.equTotal }</td>
<td>${entity.purchaseDate }</td>
<td>${entity.detailRemark }</td>
<td><button class="update" οnclick="updateEquipment(this.value)" value="${entity.equID }">编辑设备信息</button></td>
</c:forEach>
</tbody>
</table>

• 效果如下

关键：对话框中怎眼实现数据回显，就是设置对话框中输入区域的值

<button class="update" οnclick="updateEquipment(this.value)" value="${entity.equID }">编辑设备信息</button>

<c:forEach items="${page.result }" var="entity">

if("${entity.equID}" == id){

$("#equID").val("${entity.equID}");

$("#equName").val("${entity.equName }");

$("#equCode").val("${entity.equCode }");

$("#isPurchase").val("${entity.isPurchase }");

$("#actualMount").val("${entity.actualMount }");

$("#fundIdentifier").val("${entity.fundIdentifier }");

}

</c:forEach>

JQuery的方式对input进行赋值

之前一直不知道怎样获取c:foreach中某一个变量的值，以上就是一种方法

参考地址

http://www.runoob.com/try/try.php?filename=jqueryui-example-dialog-modal-form（实现对话框，添加信息）

http://blog.csdn.net/happyhaojie/article/details/51087646

http://blog.csdn.net/u010678947/article/details/19205509

http://blog.csdn.net/xue_feitian/article/details/6535971