本文共 3927 字，大约阅读时间需要 13 分钟。
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> </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