easyui datagrid如何加载通过ajax获得的数据？？

从ajax中获得了数据，然后怎么把多个json对象让datagrid加载？？？

// 构建设备总览列表
	$('#dg_machine_list').datagrid({
		title : '设备列表模式',
		iconCls : 'icon-a_detail',
		fit : true,
		fitColumns : true,
		rownumbers : true,
		pagination : true,
		singleSelect : true,
		border : false,
		striped : true,
		toolbar : [ {
			text : '查看详情',
			iconCls : 'icon-script_link',
			handler : function() {
				viewDetail();
			}
		}, '-', {
			iconCls : 'icon-help',
			handler : function() {
				alert('帮助按钮');
			}
		} ],
		columns : [ [ {
			field : 'unid',
			title : 'UNID',
			width : 100,
			align : 'center',
			hidden : true
		}, {
			field : 'machine_name',
			title : '设备名称',
			width : 100,
			align : 'center'
		}, {
			field : 'machine_type',
			title : '设备类型',
			width : 100,
			align : 'center'
		}, {
			field : 'num_recoder',
			title : '备案编号',
			width : 100,
			align : 'center'
		}, {
			field : 'work_state',
			title : '当前状态',
			width : 100,
			align : 'center'
		}, {
			field : 'update_time',
			title : '更新时间',
			width : 100,
			align : 'center'
		}, {
			field : 'moment',
			title : '力矩（KN.m）',
			width : 70,
			align : 'center'
		}, {
			field : 'load',
			title : '载重（t）',
			width : 50,
			align : 'center'
		}, {
			field : 'height',
			title : '高度（m）',
			width : 50,
			align : 'center'
		}, {
			field : 'range',
			title : '幅度（m）',
			width : 50,
			align : 'center'
		}, {
			field : 'angle',
			title : '角度（度）',
			width : 50,
			align : 'center'
		}, {
			field : 'wind_speed',
			title : '风速（m/s）',
			width : 50,
			align : 'center'
		}, {
			field : 'dip_angle',
			title : '倾角（度）',
			width : 50,
			align : 'center'
		}, {
			field : 'alarm_info',
			title : '报警信息',
			width : 100,
			align : 'center'
		} ] ]
	});
	// 先通过ajax获取数据，然后再传给datagrid
	// https://bas.gimiscloud.com/api/crane/machinelist
	// json/data_machine_list.json

	$.ajax({
		method : 'GET',
		url : 'https://bas.gimiscloud.com/api/crane/machinelist',
		async : false,
		dataType : 'json',
		beforeSend : function(jqXHR) {
			jqXHR.setRequestHeader('Authorization', 'Bearer '
					+ '3feee5b76d8e698f4e5e29c626eb9dc2');
		},
		success : function(data) {
			for ( var machine in data) {
				alert(data[machine].name);
				var a = [ {
					'unid' : data[machine].unid,
					'machine_name' : data[machine].name,
					'machine_type' : data[machine].type,
					'num_recoder' : data[machine].unid,
					'work_state' : data[machine].online,
					'update_time' : data[machine].date,
					'moment' : data[machine].torque,
					'load' : data[machine].capa,
					'height' : data[machine].hook_height,
					'range' : data[machine].radius,
					'angle' : data[machine].angle,
					'wind_speed' : data[machine].wind_velocity,
					'dip_angle' : data[machine].obliquity,
					'alarm_info' : data[machine].content
				} ];
				$('#dg_machine_list').datagrid('loadData', a);
			}
		},
		error : function() {
			alert('error');
		}
	});

17 个解决方案

#1

自己解决了
在easyui中datagrid有个方法叫 appendRow其参数是 row
用法：

//追加一个新行。新行将被添加到最后的位置。 
$('#dg').datagrid('appendRow',{
	name: '新名称',
	age: 30,
	note: '新消息'
});

通过这个方法，datagrid可以在一开始的时候不加载任何数据。
有个非常好的地方是，在通过ajax获得数据后，不需要与datagrid中每个数据的名相同，这样支持非常多的自定义。

例如，后台传过来的表示开关的是1和0，前台拿到数据后，可以进行判断，在页面里输出‘开’和‘关’。

将后台与前台分离，前台的开发就不用受后台的制约。

$(function() {
// 先通过ajax获取数据，然后再传给datagrid
	var access_token = GetAccessToken();
	$.ajax({
		method : 'GET',
		url : 'https://bas.gimiscloud.com/api/crane/machinelist',
		async : false,
		dataType : 'json',
		beforeSend : function(xhr) {
			xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
		},
		success : function(data) {
			for ( var machine in data) {
				var row_data = {
					unid : data[machine].unid,
					machine_name : data[machine].name,
					machine_type : data[machine].type,
					num_recoder : '暂无',
					work_state : data[machine].online,
					update_time : data[machine].date,
					moment : data[machine].torque,
					load : data[machine].capa,
					height : data[machine].hook_height,
					range : data[machine].radius,
					angle : data[machine].angle,
					wind_speed : data[machine].wind_velocity,
					dip_angle : data[machine].obliquity,
					alarm_info : data[machine].content
				};
				$('#dg_machine_list').datagrid('appendRow', row_data);
			}
		},
		error : function() {
			alert('error');
		}
	});
});
// 获取access_token,通过正则表达式，在地址栏中截取需要的字符
function GetAccessToken() {
	return ((/access_token=(\w+)/ig.exec(window.location) || [])[1]) || '';
}

#2

突然发现，自己不能给自己结贴，40分，拿不回来了

#3

多看下API就好了。。

#4

其实目前我的解决方法不是很好，属于逐行添加纪录，而不是将所有的纪录读取完毕，一次性写入datagrid。
因为后台传过来的数据和前台不一致，得进行预处理，转换成前台datagrid可以使用的json。
API里有些说的不是很明确， appendRow其参数是row在API中并没有明确说明row的数据类型和格式。

我不知道有什么办法可以将多个json对象放到一起，如果解决了这个问题，那上面的方案可以换一个更好的方式。

#5

在后台拼接json

#6

是这样的，后台传过来的数据串是包含2个json的，但是前台不能直接用，得把每个拆分出来，然后绑定对应的数据，我上面那个就是代码就是依次取出绑定，然后添加 appendRow
现有的每条数据是这样的：

{
	unid : data[machine].unid,
	machine_name : data[machine].name,
	machine_type : type,
	num_recoder : '暂无',
	work_state : state,
	update_time : data[machine].date,
	moment : data[machine].torque,
	load : data[machine].capa,
	height : data[machine].hook_height,
	range : data[machine].radius,
	angle : data[machine].angle,
	wind_speed : data[machine].wind_velocity,
	dip_angle : data[machine].obliquity,
	alarm_info : data[machine].content
}

右边 data[machine].之后的是该json对象在后台的命名
要把json对象变成如下格式：

[{
	"unid" : "1",
	"machine_name" : "GMS01",
	"machine_type" : "塔吊",
	"num_recoder" : "RD123456",
	"work_state" : "正在工作",
	"update_time" : "2014-7-15",
	"moment" : "43",
	"load" : "12",
	"height" : "24",
	"range" : "42.3",
	"angle" : "180",
	"wind_speed" : "23",
	"dip_angle" : "18",
	"alarm_info" : "高度报警"
},{
	"unid" : "2",
	"machine_name" : "GMS02",
	"machine_type" : "塔吊",
	"num_recoder" : "RD123457",
	"work_state" : "暂停工作",
	"update_time" : "2014-7-15",
	"moment" : "54",
	"load" : "13",
	"height" : "32",
	"range" : "56.4",
	"angle" : "180",
	"wind_speed" : "23",
	"dip_angle" : "18",
	"alarm_info" : "幅度预警"
}]

#7

我尝试了新的思路，效果要比预想的要好
1.先定义一个数组

var data_json = new Array();

2.通过ajax请求数据，并对数据进行自定义处理

$.ajax({
		method : 'GET',
		url : 'https://bas.gimiscloud.com/api/crane/project',
		async : false,
		dataType : 'json',
		beforeSend : function(xhr) {
			xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
		},
		success : function(data) {
			for ( var machine in data) {
				var row_data = {
					unid : data[machine].unid,
					project_name : data[machine].name,
					project_area : data[machine].addr,
					project_content_man : '暂无',
					project_content_way : data[machine].tel,
					machine_function : '<a class="editcls"></a>'
				};
				// console.log(row_data);
				data_json.push(row_data);
			}
		},
		error : function() {
			alert('error');
		}
	});

3.将新数据输入数组

data_json.push(row_data);

4.用datagrid中data属性加载本地数据

$('#dg_project').datagrid({
		data : data_json,
		fit : true,
		fitColumns : true,
		rownumbers : true,
		pagination : true,
		singleSelect : true,
		border : false,
		striped : true,
		toolbar : [ {
			text : '增加工程',
			iconCls : 'icon-add',
			handler : function() {
				newProject();
			}
		}, '-', {
			text : '编辑工程',
			iconCls : 'icon-edit',
			handler : function() {
				editProject();
			}
		}, '-', {
			text : '移除工程',
			iconCls : 'icon-remove',
			handler : function() {
				removeProject();
			}
		} ],
		columns : [ [ {
			field : 'unid',
			title : 'UNID',
			hidden : true
		}, {
			field : 'project_name',
			width : 100,
			title : '工程名称',
			align : 'center',
		}, {
			field : 'project_area',
			width : 100,
			title : '行政区域',
			align : 'center'
		}, {
			field : 'project_content_man',
			width : 100,
			title : '联系人',
			align : 'center'
		}, {
			field : 'project_content_way',
			width : 150,
			title : '联系方式',
			align : 'center'
		}, {
			field : 'machine_num',
			width : 100,
			title : '设备数',
			align : 'center'
		}, {
			field : 'machine_function',
			width : 100,
			title : '设备维护',
			align : 'center',
			formatter : function(value, row, index) {
				var btn = '<a class="editcls"></a>';
				return btn;
			}
		} ] ],
		onLoadSuccess : function(data) {
			$('.editcls').linkbutton({
				text : '编辑',
				plain : false,
				iconCls : 'icon-a_edit',
				onClick : function() {
					editMachine();
				}
			});
		}
	});

Tips：应该多使用console.log()调用控制台查看前台收到的数据或者编辑后的数据是否符合预期

console.log(row_data);

#8

var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"检测设备","sortid":3,"valid":"1","handler":"系统管理员"}]}';  
var data = $.parseJSON(jsonstr);    
$('#goods_Type_Grid').datagrid('loadData', data); //将数据绑定到datagrid   

#9

好另类的思路,不过我喜欢

#10

楼主在吗？想请教一些问题

#11

楼主在吗，想问请教你个问题

#12

如果按楼主这种方式的话，那么是不是datagrid不能自动进行分页了？

#13

楼主，我用你的方法yici只能查询一条数据，知道是为什么吗

#14

谢谢分享

#15

厉害,帮了我不小的忙

#16

你这样不能实现分页，求教怎么分页加载数据。

#17