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

带电的鼠标 2015-01-13 01:56:54
从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');

		}

	});
...全文
51113 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
愚公移码 2017-08-26
  • 打赏
  • 举报
 回复
懒咯 2017-08-10
  • 打赏
  • 举报
 回复
你这样不能实现分页，求教怎么分页加载数据。
ljw_logs 2017-08-06
  • 打赏
  • 举报
 回复
厉害,帮了我不小的忙
qq_34101912 2017-08-05
  • 打赏
  • 举报
 回复
谢谢分享
1方通行 2016-12-15
  • 打赏
  • 举报
 回复
楼主，我用你的方法yici只能查询一条数据，知道是为什么吗
wenzhenhai_ 2016-12-14
  • 打赏
  • 举报
 回复
如果按楼主这种方式的话，那么是不是datagrid不能自动进行分页了？
qq_15419703 2016-01-14
  • 打赏
  • 举报
 回复
楼主在吗？想请教一些问题
闲云野鹤爱咧咧 2015-07-28
  • 打赏
  • 举报
 回复
好另类的思路,不过我喜欢
feb9903 2015-06-18
  • 打赏
  • 举报
 回复
var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"检测设备","sortid":3,"valid":"1","handler":"系统管理员"}]}'; var data = $.parseJSON(jsonstr); $('#goods_Type_Grid').datagrid('loadData', data); //将数据绑定到datagrid
带电的鼠标 2015-01-19
  • 打赏
  • 举报
 回复
我尝试了新的思路，效果要比预想的要好 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);
带电的鼠标 2015-01-14
  • 打赏
  • 举报
 回复
是这样的，后台传过来的数据串是包含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" : "幅度预警"
}]
0轰隆隆0 2015-01-14
  • 打赏
  • 举报
 回复
在后台拼接json
带电的鼠标 2015-01-14
  • 打赏
  • 举报
 回复
其实目前我的解决方法不是很好，属于逐行添加纪录，而不是将所有的纪录读取完毕，一次性写入datagrid。 因为后台传过来的数据和前台不一致，得进行预处理，转换成前台datagrid可以使用的json。 API里有些说的不是很明确，appendRow其参数是row在API中并没有明确说明row的数据类型和格式。 我不知道有什么办法可以将多个json对象放到一起，如果解决了这个问题，那上面的方案可以换一个更好的方式。
Go 旅城通票 2015-01-13
  • 打赏
  • 举报
 回复
多看下API就好了。。
带电的鼠标 2015-01-13
  • 打赏
  • 举报
 回复
突然发现，自己不能给自己结贴，40分，拿不回来了
带电的鼠标 2015-01-13
  • 打赏
  • 举报
 回复
自己解决了
在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]) || '';

}
php+easyui DataGrid+ajax实例开发
php+easyui DataGrid+ajax实例开发 完成数据库的增删查改
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
EasyUi DataGrid增删改查(EasyUI)示例源码
源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie，火狐和谷歌，删除在 删除调用一下删除的方法即可;绝对可用，提供这方面学习和开发的朋友！
C# mvc4加存储过程加easyUI-DataGrid开发的数据分页Demo
该项目主要使用到的知识点： 0.html基础知识 1.继承 2.泛型 3.存储过程 4.反射 5.特性 6.Jquery Easy-UI DataGrid的使用 7.jquery 的ajax 示例数据库表和存储过程在MyMVC.WebUI\App_Data文件夹里。数据库自己创建，创建完修改web.config文件里的数据库连接字符串。 自己写的，很简单，但是需要去好好研究一下。希望对新手有一定帮助 分页方式为存储过程分页。
EasyUI tree 及 DataGrid
内含数据库 及存储过程 主要以easyUI+JQuery+Ajax 实现后台数据交互的tree 及DataGrid 希望能帮到你的学习！
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章