【分享】jQuery EasyUI+ajax+datagrid 实现table数据刷新

没头脑and不高兴

一、问题引入  日常开发中jQuery EasyUI的使用使页面展示table变得异常方便，特别使用datagrid组件。但使用ajax异步请求刷新table数据反填datagrid时，存在数据无法重新加载问题，本文皆在于解决这一问题二、具体实现1.加载JS

[Asm] 纯文本查看 复制代码

/**
 * 客户信息JS
 */
$(document).ready(function(){
	//初始载入数据
	loadData();
	
	//刷新数据
	reload();
});

2.初始载入数据

[Asm] 纯文本查看 复制代码

/*
 * 初始载入数据
 */
function loadData()
{
	var url = "Report/ReportSelectCustomer";
	var param = null;
	//查询需要载入的数据
	getDateGrid();
	getData(url,param);
};

3.载入数据

[Asm] 纯文本查看 复制代码

/**
* 载入数据
*/
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.发送请求，获取数据

[Asm] 纯文本查看 复制代码

/*
 * 发送请求，获取数据
 */
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数据

[Asm] 纯文本查看 复制代码

/*
 * 组装dataGrid数据
 */
function reLodadDateGrid(data)
{
	var values = [];
	 for ( var i = 0; i <data.length; i++) {
         var a = {
             'custid' : data[i].custid,
             'custname' : data[i].custname,
             'goodsname' : data[i].goodsname,
             'custtel' : data[i].custtel,
             'custemail' : data[i].custemail,
             'custadd' : data[i].custadd,
             'custremark' : data[i].custremark
         };
         values.push(a);
     }
	 $('#wu-datagrid').datagrid('loadData', values);
}

6.刷新table时，刷新数据

[Asm] 纯文本查看 复制代码

/**
* 刷新记录
*/
function reload()
{
	$("#customer-reload").click(function(){
		$.messager.confirm('信息提示','确定要刷新？', function(result)
		{
			loadData();
		});
	});
}

shelly1314

感谢楼主分享

妙证菩提

感谢分享。