easyui datagrid 的數據加載

時間 2019-12-06

標籤 easyui datagrid 數據加載简体版

原文原文鏈接

這篇文章只談jQuery easyui datagrid 的數據加載，由於這也是你們談論最多的內容。其實easyui datagrid加載數據只有兩種方式：一種是ajax加載目標url返回的json數據；另外一種是加載js對象，也就是使用loadDate方法。

這裏就本身的使用經驗，對兩種方式作簡單總結和概括，而且對使用過程當中容易產生的誤區作較爲詳細的描述，但願能對你們有所幫助。 javascript

url方式加載數據

調用方式

目前可能大多數人都是選擇這種方式，由於跟流行的框架結合的也比較好，使用url的話，能夠將url寫在DOM裏面或者申明datagrid對象的url屬性，如下兩種方式都是能夠的： css

<table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="datagrid_data2.json">

$('#test').datagrid({
url:'datagrid_data2.json'
});

二次加載問題

對於使用url方式的初學者，常常碰到重複請求的問題，這個問題的根源是屢次渲染組件，如何避免二次加載這樣問題呢，我的以爲注意如下兩點基本就能夠防止二次加載了。 html

使用load和reload函數去動態加載數據，而不是選擇再次渲染組件。不少人再次渲染組件的目的僅僅是爲了設置url，這得不償失，url的設置能夠經過options方法獲取到組件實例的opts，而後在給opts.url從新賦值便可；
class方式註冊組件和javascript註冊方式不要同時使用。class註冊方式通常是爲了初始化屬性，javascript方式則屬性和事件均可初始化，可是不論是class方式仍是javascipt方式註冊組件，每次註冊，只要被設置過url屬性就會作請求。因此在不可避免要使用javascript方式註冊的狀況下，索性就不要使用class方式註冊了。

由於url方式網上的資料特別多，我這裏就簡述這麼多，下面重點討論一下loadDate方式加載數據。 html5

加載本地數據方式

首先要明白「加載本地數據」是個什麼概念，這裏指的是加載javascript對象數據，而javascript數據對象顯然可使是經過其它異步方式得到的，因此這個「加載本地數據」的描述並不許確。 java

調用方式

先要將url屬性設置爲null，或者不設置，而後使用datagrid的loadDate方法加載js數據對象，這個對象包含兩個屬性，一個是記錄總數，一個是當前頁碼的對象數組。例如： jquery

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]};
$('#tt').datagrid('loadData',obj);

如何分頁

不對源碼作任何改動的話，能夠首先獲取datagrid的Pagination對象，而後經過寫Pagination對象的onSelectPage事件來實現分頁： ajax

//初始化dategrid
$('#tt').datagrid({
url:null,
pagination:true,
pageSize:20,
pageNumber:1,
rownumbers:true
});
$('#tt').datagrid('getPager').pagination({
displayMsg:'當前顯示從 [{from}] 到 [{to}] 共[{total}]條記錄',
onSelectPage : function(pPageIndex, pPageSize) {
//改變opts.pageNumber和opts.pageSize的參數值，用於下次查詢傳給數據層查詢指定頁碼的數據
var gridOpts = $('#tt').datagrid('options');
gridOpts.pageNumber = pPageIndex;
gridOpts.pageSize = pPageSize;
//定義查詢條件
var queryCondition = {name:"世紀之光"};
//異步獲取數據到javascript對象，入參爲查詢條件和頁碼信息
var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
//使用loadDate方法加載Dao層返回的數據
$('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
}
});

上面的代碼應該很容易看懂了，作出來的分頁基本也算正常，惟一的缺憾就是寫起來不怎麼便捷。那麼如何才能便捷地實現分頁呢？ json

以前我寫過jQuery easyui datagrid 非URL後臺分頁的文章，稍微對easyui datagrid作下擴展，增長一個doPagination事件，那麼編碼就較爲簡單了。 api

//初始化dategrid
$('#tt').datagrid({
url:null,
pagination:true,
pageSize:20,
pageNumber:1,
rownumbers:true,
doPagination:function(pPageIndex, pPageSize) {
var gridOpts = $('#tt').datagrid('options');
//定義查詢條件
var queryCondition = {name:"世紀之光"};
//異步獲取數據到javascript對象，入參爲查詢條件和頁碼信息
var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,{pageNumber:gridOpts.pageNumber,pageSize:gridOpts.pageSize});
//使用loadDate方法加載Dao層返回的數據
$('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
},
});

這種方式就不用再去獲取Pagination對象了，並且也不用設置opts的pageNumber和pageSize這兩個屬性了，編碼變得簡易了，是否是變得清爽了不少呢？數組

加載中效果

easyui datagrid只有在使用url方式獲取數據的時候纔會顯示「加載中……」的遮罩效果，使用loadDate方法加載數據的話，其實也能夠用上這效果，只不過稍微麻煩些：

//初始化dategrid
$('#tt').datagrid({
url:null,
pagination:true,
pageSize:20,
pageNumber:1,
rownumbers:true,
doPagination:function(pPageIndex, pPageSize) {
//改變opts.pageNumber和opts.pageSize的參數值，用於下次查詢傳給數據層查詢指定頁碼的數據
var gridOpts = $('#tt').datagrid('options');
gridOpts.pageNumber = pPageIndex;
gridOpts.pageSize = pPageSize;
Exec_Wait('tt','loadDateGrid()');
},
});
function loadDateGrid(){
var gridOpts = $('#tt').datagrid('options');
//定義查詢條件
var queryCondition = {name:"世紀之光"};
//異步獲取數據到javascript對象，入參爲查詢條件和頁碼信息
var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
//使用loadDate方法加載Dao層返回的數據
$('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
}
/**
* 封裝一個公用的方法
* @param {Object} grid table的id
* @param {Object} func 獲取異步數據的方法
* @param {Object} time 延時執行時間
*/
function Exec_Wait(grid,func,time){
var dalayTime = 500;
__func_=func;
__selector_ = '#' + grid;
$(__selector_).datagrid("loading");
if (time) {
dalayTime = time;
}
gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
}
function _Exec_Wait_(){
try{eval(__func_);
}catch(e){
alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
}finally{
window.clearTimeout(gTimeout);
$(__selector_).datagrid("loaded");
}
}

固然了，你也能夠利用datagrid的onLoadSuccess事件來實現，反正最終都是調用datagrid的loding和loaded方法完成等待DIV的顯示和隱藏的：

function loadDateGrid(){
$('#tt').datagrid('loading');//打開等待div
var queryCondition = {
name: "世紀之光"
};
var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);
$('#tt').datagrid('loadData', {
"total": oData.page.recordCount,
"rows": oData.data
});
}
$('#tt').datagrid({
onLoadSuccess: function(){
//加載完數據關閉等待的div
$('#tt').datagrid('loaded');
}
});

如何不統計總數

有時候數據層的數據量特別大，查詢統計總數的話會很耗時，統計總數就顯得不怎麼合適了，如何不統計總數徹底看你後臺怎麼寫了，能夠虛擬一個一個總數，這個數字老是比當前頁碼大1就好了，具體實現就不在本篇文章關注的範圍內了。

到這裏，loadData方式加載grid數據就已經算是完美了，至少該有的問題均已經解決了，但願你們有更好建議一塊兒交流……

下面有我本身編寫的一個例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script>
	   	$(function(){
			$("#dategriguse").datagrid({
					fit:true,
					border:false,
					url:null,
					height:50,
					singleSelect:true,
					columns:[[
		                      {field:'id',title:'序號',width:120},
		                      {field:'name',title:'產品id',width:120},
					          {field:'sortid',title:'價格',width:120},
							  {field:'valid',title:'價格',width:120},
							  {field:'handler',title:'價格',width:120}	  
					      ]],
				    rowStyler:function(index,row){
				        return "height:38px;";
			        }
				});
		
		});
	
		function OnLoad()
		{
				
			
			/*
			var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"檢測設備","sortid":3,"valid":"1","handler":"系統管理員"}]}';  
			var data = JSON.parse(jsonstr);    
			$('#dategriguse').datagrid('loadData', data);
			*/
			
            var data1={total:1,rows:[
			{id:"M000005",name:"檢測設備",sortid:3,valid:"1",handler:"系統管理員"}
			]}
			$('#dategriguse').datagrid('loadData', data1); 
		}
		
		function OnInsert(){
			var insertdata={id:"M000006",name:"檢測設備",sortid:4,valid:"2",handler:"系統管理員1"};
			$('#dategriguse').datagrid("insertRow", {row:insertdata}); 	
		}
	</script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	加載數據
	<input type="button" id="selectAll"  checked="checked" onclick="OnLoad()">加載</input>
	<div style="margin:20px 0;"></div>
	
	<input type="button" id="selectAll"  checked="checked" onclick="OnInsert()">插入數據</input>
	<div style="margin:20px 0;"></div>
	
	<table id="dategriguse" class="easyui-datagrid" title="Basic DataGrid">
	</table>

</body>
</html>

最後能夠查看datagrid的全部屬性和api:

http://www.html5wd.com/archives/1518.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

load	param	加載第一頁數據，param將代替默認查詢參數，注意的是該方法只適用於url方式.
reload	param	刷新當前頁數據，與load方法不一樣的時候reload方法刷新當前頁數據，而load方法會跳到第一頁而後刷新.
options	null	獲取datagrid實例的各項參數值，經常使用的參數有url,pageNumber,pageSize這三個參數在請求數據以及分頁功能中起重要做用.

easyui datagrid 的數據加載

url方式加載數據

調用方式

相關方法

二次加載問題

加載本地數據方式

調用方式

如何分頁

加載中效果

如何不統計總數