`

转载:【解决方法】easyui中datagrid执行loadData方法出现异常

 
阅读更多

转载:http://blog.csdn.net/zhyl8157121/article/details/19634037

 

问题描述:

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

 

 

  • Cannot read property 'length' of undefined

 

问题代码:
原始代码比较复杂,抽取内容描述如下:

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. var data = '{"total":1,"rows":[{"id":"001","name":"哈哈哈","role":"系统管理员"}]}';  
  2. $('#dg').datagrid('loadData', data);   

解决方法:

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. var data = '{"total":1,"rows":[{"id":"001","name":"哈哈哈","role":"系统管理员"}]}';  
  2. data = JSON.parse(data);//转换成json对象,必须的!!!不然有异常!!!  
  3. $('#dg').datagrid('loadData', data);   

原因猜测:

loadData方法执行的时候参数必须是JSON对象,而不能是JSON格式的字符串!!!
我以为javascript这种弱类型的不强调这个呢,结果就一直在异常,一直在异常。
折腾了一个下午,终于搞定了,网上查也没有类似的问题,更不要说解决方法了。
估计搞前端的人都有这个概念吧,对我这种前端半吊子的新手,还是很困那的。
记录在此,以惠后人。

分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    3. **处理加载事件**: 使用EasyUI提供的`onLoadSuccess`或`load`事件,当数据加载成功后执行相应的处理函数。例如,可以在这个事件中添加额外的逻辑,如加载更多按钮的触发。 ```javascript $(function () { $('#...

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

    EasyUI的DataGrid显示ASP.NET内容

    EasyUI的DataGrid是一款基于jQuery的轻量级前端数据展示组件,它被广泛应用于Web应用中,用于展示和操作结构化的数据。在结合ASP.NET框架时,DataGrid能有效地将服务器端的数据动态地呈现到客户端,提供排序、分页、...

    easyui-datagrid2-demo.zip

    在这个 demo 中,我们可以从以下几个方面学习 EasyUI Datagrid 的使用: 1. **HTML 结构**: - `datagrid2_demo.html` 文件是主页面,它定义了 Datagrid 的结构和样式。Datagrid 通常包含在 `<div>` 元素中,通过 ...

    easyui datagrid排序图标

    $(this).datagrid('loadData', data); } }); } }); ``` 总结起来,EasyUI DataGrid的排序图标是一个提高用户交互体验的重要元素。通过设置`sortable`属性、自定义`formatter`函数和处理排序事件,我们可以轻松...

    C# MVC4 easyui datagrid expand row

    $('#dg').datagrid('loadData', { total: 0, rows: [] }); $('#dg').datagrid('appendRow', { id: row.id, loading: true }); $.ajax({ url: detailUrl, type: 'GET', success: function (data) { $('#dg')....

    easyui嵌套datagrid

    这可以通过EasyUI的`loadData`或`reload`方法实现,传入对应的子级数据源ID或查询条件。 5. **样式和交互**:最后,可能需要对datagrid的样式进行调整,如折叠图标、展开状态等,以符合整体应用的视觉风格。同时,...

    jquery-easyui-datagrid

    3. **数据绑定**: 通过 `loadData` 方法或者在初始化时传入 `data` 参数,可以将数据绑定到 datagrid。 4. **操作方法**: `datagrid` 提供了如 `reload`(重新加载数据)、`appendRow`(添加行)、`editRow`(编辑...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,...因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在提供了解决方法。

    EasyUI-Datagrid

    这通常涉及到 `loadData` 或 `load` 方法来加载数据,以及 `saveRow` 或 `updateRow` 方法来处理编辑操作。 在 `datagrid19_demo.html` 中,我们可能会看到以下关键代码片段: 1. 初始化 Datagrid: ```html ...

    扩展easyui.datagrid,添加数据loading遮罩效果代码

    而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候...

    easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    本文主要探讨如何针对EasyUI datagrid进行性能优化,以解决大数据量加载慢的问题。 首先,我们需要理解问题的根源。当datagrid加载大量数据时,如果未进行优化,其内部的某些功能,如行高自动调整,可能导致性能...

    详解EasyUi控件中的Datagrid

    Datagrid控件提供了许多实用的方法,例如reload、loadData、sort等。这些方法可以用来控制Datagrid的行为,例如重新加载数据、排序数据等。 在实际应用中,Datagrid控件可以用来展示大量数据,并提供了许多实用的...

    easy ui datagrid项目完整源代码

    此外,还有多种方法用于操作 Datagrid,如 `loadData`、`reload`、`appendRow`、`deleteRow` 等。 在源代码中,你可能还会看到对 Datagrid 功能的扩展,如自定义编辑器(editors)、行级操作按钮、复杂的筛选条件等...

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    EasyUI DataGrid 增删改查源码

    在EasyUI DataGrid的源码中,我们会发现这些操作对应的JavaScript函数,如`addRow()`, `deleteRow()`, `updateRow()`和`loadData()`。学习这些函数的工作方式,可以帮助我们自定义自己的业务逻辑,比如在提交更改前...

    jQuery EasyUI中文手册

    手册将解释如何使用`datagrid`的`url`属性和`loadData`方法实现数据加载。 4. **事件处理**:了解如何监听和响应用户交互,比如点击按钮、关闭窗口等,通过`on`方法或直接在HTML标记中设置事件处理函数。 5. **...

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    这可以通过调用`datagrid('loadData')`方法并传入一个包含`total`为0和`rows`为空数组的对象来实现。如下所示: ```javascript $('#dg2').datagrid('loadData', { total: 0, rows: [] });//清空下方DateGrid $('#dg...

    easyUI工具

    - **数据操作**:使用`datagrid`等组件时,可以通过`loadData`或`reload`方法来加载和刷新数据,同时利用`onLoadSuccess`等回调函数处理加载完成后的工作。 - **AJAX通信**:EasyUI 提供了`$.ajax`和`$.post`等方法...

    jQuery Easyui datagrid/treegrid 清空数据

    2. 对于方法二,同样需要将`datagrid('loadData')`改为`treegrid('loadData')`。 ### 注意事项 在使用上述方法清空数据时,需要注意以下几点: - 确保在操作前有正确的引用到相应的grid对象,例如使用`$('#file...

Global site tag (gtag.js) - Google Analytics