【分享】jQuery EasyUI+ajax+datagrid 实现table数据刷新
一、问题引入日常开发中jQuery EasyUI的使用使页面展示table变得异常方便，特别使用datagrid组件。但使用ajax异步请求刷新table数据反填datagrid时，存在数据无法重新加载问题，本文皆在于解决这一问题二、具体实现1.加载JS/*** 客户信息JS
*/
$(document).ready(function(){
//初始载入数据
loadData();
//刷新数据
reload();
});2.初始载入数据/*
* 初始载入数据
*/
function loadData()
{
var url = "Report/ReportSelectCustomer";
var param = null;
//查询需要载入的数据
getDateGrid();
getData(url,param);
};3.载入数据/**
* 载入数据
*/
function getDateGrid(){
$('#wu-datagrid').datagrid({
loadFilter:pagerFilter,
rownumbers:true,
singleSelect:false,
pageSize:20,
pagination:true,
multiSort:true,
fitColumns:true,
fit:true,
columns:[[
{checkbox:true},
{ field:'custid',title:'客户编号',width:100,sortable:true},
{ field:'custname',title:'客户名称',width:100,sortable:true},
{ field:'goodsname',title:'货物名称',width:100},
{ field:'custtel',title:'联系电话',width:100},
{ field:'custemail',title:'电子邮箱',width:100},
{ field:'custadd',title:'送货地址',width:100},
{ field:'custremark',title:'备注',width:100}
]]
});
}4.发送请求，获取数据/*
* 发送请求，获取数据
*/
function getData(url,param)
{
$.ajax({
url: url,
type: "POST",
async : false,
contentType:'application/json;charset=UTF-8',
data: JSON.stringify(param),
dataType: "JSON",
timeout: 20000,
success : function (data) {
reLodadDateGrid(data);
},
error : function (data){
}
});
}5.组装dataGrid数据组装dataGrid数据/*
* 组装dataGrid数据
*/
function reLodadDateGrid(data)
{
var values = [];
for ( var i = 0; i <data.length; i++) {
var a = {
'custid' : data.custid,
'custname' : data.custname,
'goodsname' : data.goodsname,
'custtel' : data.custtel,
'custemail' : data.custemail,
'custadd' : data.custadd,
'custremark' : data.custremark
};
values.push(a);
}
$('#wu-datagrid').datagrid('loadData', values);
}6.刷新table时，刷新数据/**
* 刷新记录
*/
function reload()
{
$("#customer-reload").click(function(){
$.messager.confirm('信息提示','确定要刷新？', function(result)
{
loadData();
});
});
} 感谢楼主分享 感谢分享。
页:
[1]