easyui datagrid如何加载通过ajax获得的json格式的数据

文章为转载，地址：http://www.xue163.com/588880/39097/390970679.html

为了帮助网友解决“easyui datagrid如何加载通”相关的问题，中国学网通过互联网对“easyui datagrid如何加载通”相关的解决方案进行了整理,用户详细问题包括:easyuidatagridajaxjson从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');
}
});

，具体解决方案如下：

解决方案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);