###EasyUI【加条件的分页查询】之【提交查询条件表单的方式(特别!)只能用datagrid("load",$("formID").serializeJSON() )】reload也不行!有bug
====特别之处：就是 【不需要写Ajax请求】，一大串代码，就为了提交表单数据。
====但是注意：【只有在 dataGrid组件发请求才不用 Ajax。click等事件触发的请求，还是要用Ajax的。】
全部页面代码如下：====
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理取派员</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<!-- 一步提交form序列化 -->
<script src="../../js/jquery.serializejson.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//保存。点击提交表单
$("#saveBtn").click(function(){
if($("#addForm").form("validate")){
//$("#addForm").submit();
$.post(
"../../CourierAction_save.action",
$("#addForm").serializeJSON(),
function(data){
// data={"success":true|false,"message":"保存成功"|"保存失败"}
if(data.success){
// 1、关闭窗口
$("#addWindow").window('close');
// 2、刷新表格===######
$("#grid").datagrid("reload"); //刷新后保留在当前页######
// $("#grid").datagrid("load"); //刷新后跳转到第一页
}
// 3、alert提示
$.messager.alert("提示",data.message);
},"json");
//===一次请求完毕，清空form。===第二次添加默认回显上次添加的内容
$("#addForm").form("clear");
}
});
//=========【EasyUI分页查询不难，pageable属性就搞定。====================================================
//=========【重难点（超容易忘）】：【难在EasyUI【加条件的分页查询】之【提交查询表单数据的方式（很特别！）：
//=========不发Ajax请求，而是使用grid的load方法(自带发送请求和返回数据)】
//=========页面写法【固定的(目前没有其他方案)】=不用API load这个方案总是报错:当前页号不能小于0。=查询的js代码。====================================================
$("#searchBtn").click(function(){
var formData = $("#searchForm").serializeJSON();
$("#grid").datagrid("load",formData);//刷新后跳转到第一页
//$("#grid").datagrid("reload",formData);//刷新后保留在当前页(结果的页号)######
//######【只能用load不要用reload】 reload保留在当前页, 结果的最大页号可能都小于初始页码号。这时页面有bug。【所以只能用load不要用reload】
//===作为请求参数？是
//###### 【datagrid的load方法，带参数，会发一次带参请求。load返回值就是服务器返回的json数据。】并自动刷新页面。。。
//===datagrid("load",formData)极大地简化了 发送请求。【不用再写一大串 Ajax请求了。。。】O(∩_∩)O哈哈~
//===请求完毕 刷新【老师没写】
})
/* //=====datagrid("load",formData)极大地简化了grid发送请求。【不用再写一大串 Ajax请求了。。。】
//====【自己写了访问Ajax请求。反而总报错】页号不能小于0，找了两个多小时，还是没找到错误。如下：
//查询。点击提交表单
$("#searchBtn").click(function(){
if($("#searchForm").form("validate")){
//$("#addForm").submit();
$.post(
"../../CourierAction_searchByPage.action",
$("#searchForm").serializeJSON(),
function(data){
// data={"success":true|false,"message":"保存成功"|"保存失败"}
if(data.success){
// 1、关闭窗口
$("#searchWindow").window('close');
// 2、刷新表格===######
$("#grid").datagrid("reload"); //刷新后保留在当前页######
// $("#grid").datagrid("load"); //刷新后跳转到第一页
}
// 3、alert提示
$.messager.alert("提示",data.message);
},"json");
//===一次请求完毕，清空form。===第二次添加默认回显上次添加的内容
$("#searchForm").form("clear");
}
});*/
});
function doAdd(){
$('#addWindow').window("open");//弹窗口
}
function doEdit(){
//alert("修改...");
var arr = $("#grid").datagrid("getSelections")
if (arr.length!=1) {
alert("请选择一条要修改的数据");
return;
}
$("#addForm").form("load",arr[0]);
//===保存还是调用 添加 save()
}
function doDelete(){
//alert("删除...");
var arr = $("#grid").datagrid("getSelections")
if (arr.length==0) {
alert("请选择要作废的数据");
return;
}
var ids = new Array();
//for (var i = 0; i < array.length; i++) {
for (var i = 0; i < arr.length; i++) {
//ids.push(arr[i]);
ids.push(arr[i].id);
}
var idsStr = ids.join(",");
//alert(idsStr);
$.post(
"../../CourierAction_deleteBatch.action",
{"ids":idsStr},
function(data){
// data={"success":true|false,"message":"保存成功"|"保存失败"}
if(data.success){
// 2、刷新表格===######
$("#grid").datagrid("reload"); //刷新后保留在当前页######
// $("#grid").datagrid("load"); //刷新后跳转到第一页
}
// 3、alert提示
$.messager.alert("提示",data.message);
},"json");
}
function doRestore(){
alert("将取派员还原...");
}
function doSearch(){
//查询
$("#searchWindow").window("open");
}
//工具栏
var toolbar = [ {
id : 'button-add',
text : '增加',
iconCls : 'icon-add',
handler : doAdd
}, {
id : 'button-edit',
text : '修改',
iconCls : 'icon-edit',
handler : doEdit
}, {
id : 'button-delete',
text : '作废',
iconCls : 'icon-cancel',
handler : doDelete
},{
id : 'button-restore',
text : '还原',
iconCls : 'icon-save',
handler : doRestore
},{
id : 'button-search',
text : '查询',
iconCls : 'icon-search',
handler : doSearch
}];
// 定义列
var columns = [ [ {
field : 'id',
checkbox : true,
},{
field : 'courierNum',
title : '工号',
width : 80,
align : 'center'
},{
field : 'name',
title : '姓名',
width : 80,
align : 'center'
}, {
field : 'telephone',
title : '手机号',
width : 120,
align : 'center'
}, {
field : 'checkPwd',
title : '查台密码',
width : 120,
align : 'center'
}, {
field : 'pda',
title : 'PDA号',
width : 120,
align : 'center'
}, {
field : 'standard.name',
title : '取派标准',
width : 120,
align : 'center',
formatter : function(data,row, index){
if(row.standard != null){
//alert(row.standard.name);
//====###### 【页面显示 '取派标准'相同的'取派标准'显示失败。。。 】
return row.standard.name;
}
return "";
}
}, {
field : 'type',
title : '取派员类型',
width : 120,
align : 'center'
}, {
field : 'company',
title : '所属单位',
width : 200,
align : 'center'
}, {
field : 'deltag',
title : '是否作废',
width : 80,
align : 'center',
formatter : function(data,row, index){
if(data=="1"){
return "已作废";
}else{
return "正常使用";
}
}
}, {
field : 'vehicleType',
title : '车型',
width : 100,
align : 'center'
}, {
field : 'vehicleNum',
title : '车牌号',
width : 120,
align : 'center'
} ] ];
$(function(){
// 先将body隐藏，再显示，不会出现页面刷新效果
$("body").css({visibility:"visible"});
// 取派员信息表格
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true,
border : false,
rownumbers : true,
striped : true,
pageList: [3,5,9],
pagination : true,
toolbar : toolbar,
//url : "../../data/courier.json",
url : "../../CourierAction_findByPage",//==ok==【分页查询ok】
//url : "../../CourierAction_searchByPage",//self==ok==【分页查询ok】
//==######=页面初始化和 条件查询 共用一个 分页查询。
//====【所有grid使用 Ajax请求地方都换成grid的 load方法。 form的load不能发请求？】
idField : 'id',
columns : columns,
onDblClickRow : doDblClickRow
});
// 添加取派员窗口
$('#addWindow').window({
title: '添加取派员',
width: 800,
modal: true,//===模态窗口
shadow: true,
closed: true,
height: 400,
resizable:false
});
});
function doDblClickRow(){
alert("双击表格数据...");
}
</script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
<table id="grid"></table>
</div>
<div class="easyui-window" id="addWindow" title="对收派员进行添加或者修改" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
<div class="datagrid-toolbar">
<a id="saveBtn" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
</div>
</div>
<div region="center" style="overflow:auto;padding:5px;" border="false">
<form id="addForm">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="4">收派员信息</td>
</tr>
<tr>
<td>快递员工号</td>
<td>
<input type="text" name="courierNum" class="easyui-validatebox" required="true" />
</td>
<td>姓名</td>
<td>
<input type="text" name="name" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>手机</td>
<td>
<input type="text" name="telephone" class="easyui-validatebox" required="true" />
</td>
<td>所属单位</td>
<td>
<input type="text" name="company" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>查台密码</td>
<td>
<input type="text" name="checkPwd" class="easyui-validatebox" required="true" />
</td>
<td>PDA号码</td>
<td>
<input type="text" name="pda" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>快递员类型</td>
<td>
<input type="text" name="type" class="easyui-validatebox" required="true" />
</td>
<td>取派标准</td>
<td>
<!-- ===class="easyui-combobox" -->
<input type="text" name="standard.id"
class="easyui-combobox"
data-options="required:true,valueField:'id',textField:'name',
url:'../../standard_findAll.action'"/>
</td>
</tr>
<tr>
<td>车型</td>
<td>
<input type="text" name="vehicleType" class="easyui-validatebox" required="true" />
</td>
<td>车牌号</td>
<td>
<input type="text" name="vehicleNum" class="easyui-validatebox" required="true" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- 查询快递员-->
<div class="easyui-window" title="查询快递员窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px">
<div style="overflow:auto;padding:5px;" border="false">
<form id="searchForm">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="2">查询条件</td>
</tr>
<tr>
<td>工号</td>
<td>
<input type="text" name="courierNum" />
</td>
</tr>
<tr>
<td>收派标准</td>
<td>
<input type="text" name="standard.name" />
</td>
</tr>
<tr>
<td>所属单位</td>
<td>
<input type="text" name="company" />
</td>
</tr>
<tr>
<td>类型</td>
<td>
<input type="text" name="type" />
</td>
</tr>
<tr>
<td colspan="2"><a id="searchBtn" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>=====重点代码：
$(function(){
//=========【EasyUI分页查询不难，pageable属性就搞定。====================================================
//=========【重难点（超容易忘）】：【难在EasyUI【加条件的分页查询】之【提交查询表单数据的方式（很特别！）：
//=========不发Ajax请求，而是使用grid的load方法(自带发送请求和返回数据)】
//=========页面写法【固定的(目前没有其他方案)】=不用API load这个方案总是报错:当前页号不能小于0。=查询的js代码。==========
$("#searchBtn").click(function(){
var formData = $("#searchForm").serializeJSON();
$("#grid").datagrid("load",formData);//刷新后跳转到第一页
//$("#grid").datagrid("reload",formData);//刷新后保留在当前页(结果的页号)######
//######【只能用load不要用reload】 reload保留在当前页, 查询结果的最大页号可能都小于初始页码号。这时页面有bug。【所以只能用load不要用reload】
//===作为请求参数？是
//###### 【datagrid的load方法，带参数，会发一次带参请求。load返回值就是服务器返回的json数据。】并自动刷新页面。
//===datagrid("load",formData)极大地简化了 发送请求。【不用再写一大串 Ajax请求了。。。】O(∩_∩)O哈哈~
//===请求完毕 刷新【老师没写】
})
/* //=====我的方式：
//=====datagrid("load",formData)极大地简化了grid发送请求。【不用再写一大串 Ajax请求了。。。】
//====【自己写了访问Ajax请求。反而总报错】：页号不能小于0，找了两个多小时，还是没找到错误。如下：
//查询。点击提交表单
$("#searchBtn").click(function(){
if($("#searchForm").form("validate")){
//$("#addForm").submit();
$.post(
"../../CourierAction_searchByPage.action",
$("#searchForm").serializeJSON(),
function(data){
// data={"success":true|false,"message":"保存成功"|"保存失败"}
if(data.success){
// 1、关闭窗口
$("#searchWindow").window('close');
// 2、刷新表格===######
$("#grid").datagrid("reload"); //刷新后保留在当前页######
// $("#grid").datagrid("load"); //刷新后跳转到第一页
}
// 3、alert提示
$.messager.alert("提示",data.message);
},"json");
//===一次请求完毕，清空form。===第二次添加默认回显上次添加的内容
$("#searchForm").form("clear");
}
});*/
}); ===========总之，这个需要记一下。不然遇到了。很容易就手写Ajax，浪费时间。还玩成不了功能。
===【查API 估计还会费更多时间。】文字，没案例，难理解。
===百度，找 可能要看运气
==========遇到过。就记录一下。才能积累起来大量经验。。。
4203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
