jQuery Ajax EasyUI周期性更新datagrid的数据

1、定时任务接口：javascript中的HTML DOM Window 对象：setInterval/clearInterval。

setInterval用法：参考http://www.w3school.com.cn/jsref/met_win_setinterval.asp

语法

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

使用方法：

设置定时器任务：ohject_returned_from_setInterval = setInterval(function(){ mycode; }, interval_ms,);

取消定时器任务：clearInterval(ohject_returned_from_setInterval);

2、jQuery的Ajax接口：$.ajax()

参数：

$.ajax({
type: "POST",
url: "item.do",
data: {command:"showJson"},
dataType: "json",
success: function(data){

mycode...
  }
});

3、EasyUI更新datagrid方法：使用$('#tableId').datagrid("load");  可以触发数据更新。

datagrid定义：

$('#Ajax').datagrid({
fit:true,
fitColumns:true,
width: 'auto',  
height:300,               
striped: true,  
singleSelect : true,  
url:'item.do',  
//POST parameters: command=showJson
queryParams:{
command: 'showJson'
},  
loadMsg:'数据加载中请稍后……',  
pagination: true,  
rownumbers: true,     
columns:[[  
{field:'itemNo',title: '物料代码',align: 'center',width: 100,  
//添加超级链，并将来文号作为参数传入  
formatter:function(value,row,index){  
//alert(value+" "+row.itemNo+" "+index);  
return "<a href='item.do?command=showDetail&itemNo="+value+"'>"+value+"</a>";
  }  
},  
{field:'itemName',title: '物料名称',align: 'center',width: 100},  
{field:'spec',title: ' 物料规格',align: 'center',width: 100},  
{field:'pattern',title: '物料型号',align: 'center',width: 100},
{field:'itemCategory.name',title: '类别',align: 'center',width: 100},
{field:'itemUnit.name',title: '计量单位',align: 'center',width: 100},                                  
    
                  
]]  
}); 

4、实例代码：

a.先使用ajax的方式来实现：

$('#Ajax').datagrid("load");

var intervamManager = setInterval(function(){

$.ajax({
type: "POST",
url: "item.do?command=showJson",
data: {username:"username", content:"content"},
dataType: "json",
success: function(data){
$('#Ajax').datagrid("reload");  
alert("ajax reload completed, cancel.");
clearInterval(intervamManager);
 }
}); 

},5000);

通过firefox调试发现：EasyUI中的datagrid获取数据的方式就是用ajax方式来实现的，所以可以直接使用如下代码即可实现周期性更新数据，而不需要显式编写ajax代码。

b. var intervamManager = self.setInterval(function(){
$('#Ajax').datagrid("load");
},5000);