>引入easyui 的文件
<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basePath }resource/plugin/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<link href="${basePath }resource/plugin/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="${basePath }resource/plugin/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
>两个普通的table
<div>
<div id="div_tj">
<table id="tj" style="width: 860px;"></table>
</div>
<div>
<table id="dg" style="width: 860px;"></table>
</div>
</div>
>datagrid初始化
<script type="text/javascript">
$(function(){
$("#tj").datagrid({
url:"${basePath}rest/trans/statistics",
method:"POST",
columns: [[
{ field: 'CURRENCY_TYPE', title: '', width: 100, align: 'right'},
{ field: 'TRANS_MONEY', title: '', width: 750, align: 'left'}
]],
toolbar:[
{
text:'返回',
iconCls: 'icon-undo',
handler: function(){
window.location.href = "${basePath}rest/trans/index";
}
},
{
text:'新增',
iconCls: 'icon-add',
handler: function(){
window.location.href = "${basePath}rest/trans/addInit";
}
},
{
text:'搜索',
iconCls: 'icon-search',
handler: function(){
var param = {
transNo:$("#transNo").val(),
currencyType:$("#currencyType").combobox("getValue"),
startTime:$("#startTime").datebox("getValue"),
endTime:$("#endTime").datebox("getValue")
};
$("#dg").datagrid("load", param);
$("#tj").datagrid("load", param);
}
},
{
text:'清空',
iconCls: 'icon-cancel',
handler: function(){
$("#form").form('clear');
}
}
]
});
$("#dg").datagrid({
url:"${basePath}rest/trans/page",
method:"POST",
pageSize: 1,
pageList: [5, 10, 20, 50],
pagination: true,
nowrap: true,
striped: true,
nowrap: true,
rownumbers: true,
columns: [[
{ field: 'id', checkbox: true },
{ field: 'transNo', title: '交易流水号', width: 250, align: 'center'},
{ field: 'currencyType', title: '币种', width: 100, align: 'center', formatter:
function(value, row, index){
if(value == 'CNY'){
return "人民币";
}else if(value == 'USD'){
return "美元";
}else if(value == 'EUR'){
return "欧元";
}
}
},
{ field: 'transType', title: '交易类型', width: 100, align: 'center', formatter:
function(value, row, index){
if(value == 'INCOME'){
return "收入";
}else if(value == 'EXPENDITURE'){
return "支出";
}
}
},
{ field: 'transMoney', title: '交易金额', width: 100, align: 'center'},
{ field: 'createTime', title: '交易时间', width: 200, align: 'center'}
]],
});
});
</script>
>搜索条件
<div style="margin-top: 20px; margin-bottom: 10px;">
<form id="form">
<table>
<tr>
<td>交易流水号:</td>
<td>
<input class="easyui-textbox" type="text" name="transNo" id="transNo"/>
</td>
<td>币种:</td>
<td>
<select class="easyui-combobox" name="currencyType" id="currencyType">
<option value="">请选择</option>
<option value="CNY">人民币</option>
<option value="USD">美元</option>
<option value="EUR">欧元</option>
</select>
</td>
</tr>
<tr>
<td>开始时间:</td>
<td>
<input id="startTime" name="startTime" type="text" class="easyui-datebox"/>
</td>
<td>结束时间:</td>
<td>
<input id="endTime" name="endTime" type="text" class="easyui-datebox"/>
</td>
</tr>
</table>
</form>
</div>
>搜索
$("#dg").datagrid("load", param);
param = form元素的json串
>清空搜索条件
$("#form").form('clear');
>easyui控件怎么取值
文本框:<input class="easyui-textbox" type="text" name="transNo" id="transNo"/>
var transNo = $("#transNo").val();
复选框:<select class="easyui-combobox" name="currencyType" id="currencyType">
<option value="">请选择</option>
<option value="CNY">人民币</option>
<option value="USD">美元</option>
<option value="EUR">欧元</option>
</select>
var currencyType = $("#currencyType").combobox("getValue");
日期控件:<input id="startTime" name="startTime" type="text" class="easyui-datebox"/>
var startTime = $("#endTime").datebox("getValue"); 1.3.1版本返回的日期是字符,格式:yyyy-MM-dd
顺便一提, 后台分页用的mybatis的pagehelper插件