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);