項目中使用了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 : [ [
...........
3. 對datagrid數據進行操作後,在reload datagrid時想讓datagrid顯示在第一頁
(例如頁面有搜索按鈕,在datagrid翻至第二頁時點擊搜索,jQuery默認停留在點擊前的頁面,一頁顯示的條數也沒變,這樣的情況是不合理的)
//點擊頁面的【搜索】,觸發的方法
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");
},
繼續關注jQuery....