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代码

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" onclick="updateEquipment(this.value)" value="${entity.equID }">编辑设备信息</button></td>
</c:forEach>
</tbody>
</table>

效果如下

JQueryUI实现对话框

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

<button class="update" onclick="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.****.net/happyhaojie/article/details/51087646

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

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

JQueryUI实现对话框

相关推荐