项目中使用了easyUI,在此记录一下
1. 组装访问后台获取datagrid数据所需要的参数
function getParams(){
//获取页面网页元素的值
var eVal = $("#e1").val();
var eVal2 = $("#e2").val();
//去掉左右空格
var queryParams={};
queryParams.e =$.trim(eVal);
queryParams.e2 = $.trim(eVal2);
return queryParams;
}
2. 在callback方法中,组织datagrid
var examleDataGrid = $("<table id='examleDataGrid'></table>");
$("#example_table").append(examleDataGrid);
examleDataGrid
.datagrid(// 此处表示生成一个表格,并动态创建行列关系
{
// title : 'example列表',// 表格标题
loadMsg : '正在加载数据...',// 此处设置数据加载的动态效果
// width : '100%',// 表格宽度
// height:500,//表格高度
striped : true,// 表格奇偶行颜色交替变化
collapsible : true,// 可折叠,即某一行太长,自动换行
fitColumns : true,// 自动调整各列,则各列的宽度值为一个比例值
pagination : true,// 分页工具
//rownumbers : true,// 表示显示行号
url : example_webRoot + 'example.ajax',
queryParams: getParams(),
pageSize : 20,
pageList : [ 10 , 20,50 ],
columns : [ [
...........
//点击页面的【搜索】,触发的方法
search : function() {
//搜索后的datagrid数据将显示第一页的内容,并将页数栏置为1
var $grid = $("#exampleDataGrid");
//显示第一页数据
$grid.datagrid("options").pageNumber = 1;
//分页栏上跳转到第一页,并将一页显示的数据条数设置为20
$grid.datagrid('getPager').pagination({pageSize:20,pageNumber: 1});
//加上参数reload
$grid.datagrid('options').queryParams=getParams();
$grid.datagrid("reload");
},