easyui中datagrid执行loadData方法出现异常

最新推荐文章于 2023-02-05 12:44:14 发布
最新推荐文章于 2023-02-05 12:44:14 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： EasyUI框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chyuanrufeng/article/details/105350564
版权

在测试easyui中datagrid加载本地文件时，使用 loadData方法出现异常。

loadData使用的时候，提示：Cannot read property 'options' of undefined

具体如下：

jquery.easyui.min.js:10372 Uncaught TypeError: Cannot read property 'options' of undefined
    at _718 (jquery.easyui.min.js:10372)
    at HTMLTableElement.<anonymous> (jquery.easyui.min.js:11312)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at Object.loadData (jquery.easyui.min.js:11311)
    at n.fn.init.$.fn.datagrid (jquery.easyui.min.js:11073)
    at 表格过滤 - 副本.html:47

有人说是格式的问题。需要JSON对象，而不能是JSON格式的字符串。但没有解决。

我的测试代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
</head>
<body>
	<h2>Basic DataGrid</h2>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true" >
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var data ={"total":28,"rows":[
			{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
			{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}
			]};
		
		$('#dg').datagrid('loadData', data); 

	</script>
</body>
</html>

后来 发现有人说是html的加载顺序有关系。所有怀疑还没加载好table这个标签，就执行了$('#dg').datagrid('loadData', data); 

所有就修改为

    $(document).ready(
            function (){
                $('#dg').datagrid("loadData",data);
            }
        );

就可以啦！记录一下。

缘如风
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui中datagrid执行loadData方法没有刷新数据
technologys的博客
12-10 8850
原因分析： loadData方法执行的时候参数必须是JSON对象，而不能是JSON格式的字符串！！！ 估计搞前端的人都有这个概念吧。    开始我是这样写的 var data = '{"total":1,"rows":[{"id":"001","name":"哈哈哈","role":"系统管理员"}]}';  $('#dg').datagrid('loadData', data
Jquery下EasyUI组件中的DataGrid结果集清空方法
10-26
这可以通过调用`datagrid('loadData')`方法并传入一个包含`total`为0和`rows`为空数组的对象来实现。如下所示： ```javascript $('#dg2').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid $('#dg...
Easyui loadData 用法及使用场景
itcast_jwz_310的博客
11-02 1万+
在Easyui Datagrid 初始化的时候可以使用  $('#TicketDataGrid').datagrid("loadData", {"total":"0",rows:[] });   使用原因： datagrid 加载完成后显示5条数据，当加入查询条件后，查询不到数据，但是在前台还在显示之前查询到的数据，所以使用loadData 在查询之前进行初始化
EasyUI-datagrid中load,reload,loadData方法的区别
weixin_39605428的博客
08-16 373
EasyUI-datagrid中load,reload,loadData方法的区别EasyUI中的datagrid比较复杂，其中有load,reload,loadData三种加载方法loadreloadloadData EasyUI中的datagrid比较复杂，其中有load,reload,loadData三种加载方法 EasyUI比较常用，其中的datagrid比较复杂，它有其中有load,re...
easyUi的combobox属性 loadData，数据乱窜的问题。
applesin猿的博客
02-05 792
easyUi的combobox属性 loadData，传递并修改数据，导致传递前后两次的数据完全相同（数据乱窜），其实就是变量的深拷贝和浅拷贝的问题，解决办法“...”展开符，再包装回去再传递。
EasyUI（datagrid）: load()、reload()、loadData()方法含义及区别比较
travel7623的博客
07-22 4476
1.load方法 $(“#grid”).datagrid(“load”,{ });//后台快捷追加查询 该方法是一个简便后台方式，可以带参数，参数为一个json对象，里面写的是你要传输的参数的键值对，调用这个方法来加载数据的时候，它传给后台的分页信息是从第一页开始的，然后遵照表格初始化的方法进行回显数据 2.reload方法: $(“#grid”).datagrid(“reload”,{ });...
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
在开发Web应用时，使用EasyUI的datagrid组件展示大量数据时，可能会遇到加载效率低下的问题。本文主要探讨如何针对EasyUI datagrid进行性能优化，以解决大数据量加载慢的问题。 首先，我们需要理解问题的根源。当...
JS EasyUI DataGrid动态加载数据
03-15
3. **处理加载事件**: 使用EasyUI提供的`onLoadSuccess`或`load`事件，当数据加载成功后执行相应的处理函数。例如，可以在这个事件中添加额外的逻辑，如加载更多按钮的触发。 ```javascript $(function () { $('#...
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
01-21
错误，网上搜索了下错误解决办法，参考 “JavaScript处理Json的invalid label错误解决办法“的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误，感觉原因不在格式问题。 搜索了下JavaScript跨域...
详解EasyUi控件中的Datagrid
08-29
Datagrid控件提供了许多实用的方法，例如reload、loadData、sort等。这些方法可以用来控制Datagrid的行为，例如重新加载数据、排序数据等。 在实际应用中，Datagrid控件可以用来展示大量数据，并提供了许多实用的...
1. easyui-datagrid-Cannot read property ‘nodeName‘ of undefined
白果园的博客
12-08 997
文章目录1. 问题描述2. 解决方案 1. 问题描述     首先加载datagrid正常，格式化（formatter）了datagrid的操作列也正常，点击操作列，操作完成后，重新使用$("#list").datagrid(“loadData”,JSON数组)加载时，发现了惊人一幕： 2. 解决方案     笔者发生这种情况是由于事件冒泡导致，阻止冒泡就OK，不说了，贴上暖心的代码： // 阻止事件冒泡 event.stopP
easyui列表查询报错：Cannot read property 'length' of undefined
热门推荐
随便起个不重复的名字
01-20 3万+
1.问题描述     easyui中datagrid执行loadData方法出现如下异常：Cannot read property 'length' of undefined 2.一开始怀疑是js或者页面的问题，然后从早上干到下午，网上各种方法用尽了就是不行！     最后发现规律了：     使用mybatis从数据库查询返回的List不报错，但是自己new的ArrayList总是报
EasyUI的treegrid组件动态加载数据问题的解决办法-jquery
活着
01-30 6048
EasyUI的treegrid组件动态加载数据问题的解决办法-jquery 搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的，不过以往利用datagrid的reload方法加参数的方式加载查询结果数据，可是treegrid却只执行reload不能加载带参数的查询结果，可能是做了限制，如下代码不能加载查询结果： 复制代码代码如下: $
load,reload,loadData方法的区别
05-13 485
原文地址：load,reload,loadData方法的区别作者：myharbour easyui第二讲——datagrid中load,reload,loadData方法的区别 Home/ Blog / 技术文章 / 企业开发相关技术 /easyui第二讲——datagrid中load,reload,loadData方法的区别
easyui datagrid 的数据加载
wmqdn的专栏
09-04 8887
转载自： http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。 这里就自己的使用经验，对两
datagrid('resize')出现 Cannot read property 'options' of undefined
weberhuangxingbo的博客
12-22 709
//延迟1秒resize setTimeOut(function(){ $('#sys_redis_conf_ext_dg').datagrid('resize'); }, 1000); 使用延时器后，Cannot read property 'options' of undefined问题没再出现了 ...
EasyUI的Datagrid在Dialog中加载数据不显示
缘如风的博客
12-24 950
在第一次Dialog显示（open）的时候是正常的。调用Dialog的close再次调用open的时候就不行了。 关闭在打开的效果 代码具体如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Format DataGrid Columns - jQuery EasyUI Demo</title> <link rel=..
在 EasyUI 的 datagrid 中如何刷新视图且赋值
最新发布
07-14
在 EasyUI 的 `datagrid` 中，可以使用 `reload` 方法来刷新视图，并可以通过设置 `loadFilter` 方法来赋值新数据。 以下是一个示例代码： ```javascript // 定义新的数据 var newData = [ { id: 1, name: 'John', age: 25 }, { id: 2, name: 'Alice', age: 30 }, // 其他数据... ]; // 刷新视图并赋值新数据 $('#datagrid').datagrid('reload', newData); ``` 在上面的示例中，我们首先定义了一个新的数据 `newData`，其中包含了一些新的行数据。然后，我们使用 `reload` 方法来刷新视图，并将新的数据作为参数传递给 `reload` 方法。 在实际使用中，你需要根据自己的具体情况进行调整和扩展，比如根据接口返回的数据进行赋值、重新加载数据等。 另外，你也可以通过调用 `loadData` 方法来赋值新数据，然后再调用 `reload` 方法刷新视图。具体的方法选择可以根据你的需求来决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值