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获取数据，然后再传给datagridvar 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);