jQuery datagrid

項目中使用了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....


發佈了14 篇原創文章 · 獲贊 24 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章