本文介绍如何利用EasyUI框架实现订单查询功能，包括表单设计和数据交互过程。
本页面使用easyui的方式实现
orderCheck.jsp
<script type="text/javascript">
function find(){
//点击提交的时候查询的结果显示在下面这个页面里，看上图：
document.getElementById("form1").action="http://localhost:8080/appContenManageUI/WEB_APP/view/order/orderCheckTable.jsp";
//提交表单
$("#form1").submit();
}
</script>
</head>
<body onload="find()">
<br><br><br>
<!-- 注意：form里的target="dg3"要和iframe里的name="dg3"属性名相同！！！查询结果才会显示在下面 -->
<form method="post" id="form1" name="form1" target="dg3">
<table width="100%">
<tr>
<td>用户号码:</td><td><input id="userPhone_query" name="telnum" style="width: 160px"
class="easyui-validatebox" validType="length[11,11]"></input></td>
<td>
<button style="padding:3px 17px 3px 17px;" onclick="find()">查询</button>
</td>
</tr>
</table>
</form>
<iframe id="dg3" name="dg3" style="width:98%;height:80%;border: 1px solid red" title="easyui datagrid使用jsonp数据" >
</iframe>
</body>
</html>
注意：orderCheck.jsp里面的input标签里的name属性名称要和orderCheckTable.jsp里面的ajax data参数的key值相同！！
orderCheckTable.jsp
<body>
<table id="dg3" style="width:700px;height:337px" title="easyui datagrid使用jsonp数据"
data-options="fitColumns:true,collapsible:true,
loader:function(param,success,error){
$.ajax({ url:'http://192.168.200.246:8080/appContentManageSys/queryPayHistoryList',
dataType: 'jsonp',
type:'post' ,
data:{'telnum':'<%=request.getParameter("telnum")%>'},//前台传到后台的参数
success: function (data) {
success(data);
}, error: function (xhr) {error(xhr.responseText) }
});}">
<thead>
</thead>
</table>
</body>
扫一扫
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
