`
Notebookdong
  • 浏览: 122331 次
社区版块
存档分类
最新评论

得到EasyUI DataGrid中当前页行数,DataGrid接收JSON的数据格式

阅读更多
var data=$('#name').datagrid('getData'); 
//注意你的数据源一定要定义了total,要不会为undefined,datagrid分页就是靠这个total定义 
alert('总数据量:'+data.total)
alert('当前页数据量:'+data.rows.length)

 使用JQuery EasyUI的时候有时会为控件的接收数据烦恼,这个时候可以在官网中找到对应控件的例子,比如说

DataGrid控件所接收的格式是这样的:

 

{"total":28,"rows":[
	{"productid":"FL-DLH-02","attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","attr1":"Adult Male","itemid":"EST-18"}
]}
 这里是以大括号为开头的,表示从后台传来的是一个对象形式的JSON,并且这个对象里面有两个字段,一个是total,另一个是rows,其中total为整型,rows则是一个集合。当需要使用datagrid的时候,需要把这两个字段封装在一个类中,然后把这个类的实例转换成JSON格式输出给浏览器。

 

easyui-tree控件所接收的JSON格式是这样的:

[{
	"id":0,
	"text":"Foods",
	"children":[{
		"id":1,
		"text":"Fruits",
		"children":[{
			"id":11,
			"text":"apple"
		},{
			"id":12,
			"text":"orange"
		}]
	},{
		"id":2,
		"text":"Vegetables",
		"state":"closed",
		"children":[{
			"id":21,
			"text":"tomato"
		},{
			"id":22,
			"text":"carrot"
		},{
			"id":23,
			"text":"cabbage"
		},{
			"id":24,
			"text":"potato"
		},{
			"id":25,
			"text":"lettuce"
		}]
	}]
}]

 这里是以一个中括号( [  ) 开头的,表示接收的是一个集合形式的JSON格式,当后台需要将数据转换成easyui-tree能接收的形式时,必须是把一个集合类型的数据进行转换

分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid 分页查询样例

    首先,EasyUI Datagrid的核心在于其强大的数据绑定能力,它可以与JSON或XML格式的数据源进行交互,通过配置列定义、分页参数等,实现动态加载数据并展示在表格中。在分页查询中,Datagrid通常会通过Ajax请求向服务器...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细介绍如何解决当dataGrid列较多且无数据显示不全的情况,并...

    Easyui Datagrid 实现行过滤[模糊查询]

    在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如Datagrid,用于构建数据展示和管理的表格。在本篇中,我们将深入探讨如何在EasyUI的Datagrid中实现行...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、过滤等多种操作。在实现多条件筛选时,我们需要对datagrid的`columns`属性进行配置,定义每一列的显示方式和筛选条件。例如,我们...

    easyui的datagrid中editor和combobox的级联

    - 确保数据接口返回的数据格式与`combobox`的配置相匹配,避免因为数据格式不一致而导致的显示异常。 #### 五、扩展思考 除了基本的级联选择外,还可以考虑以下几种优化方案: - **异步加载**: 对于数据量较大的...

    落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo

    本示例项目"落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo"提供了一个解决方案,通过使用NPOI库来实现这一功能。 NPOI是一个强大的.NET库,它允许开发者在.NET环境中读写Microsoft Office文件,...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    easyui帮助手册datagrid

    EasyUI 是一个基于 jQuery 的 UI 框架,用于快速构建用户界面。其 Datagrid 组件是一个功能丰富的表格控件,常用于展示和...在实际应用中,结合具体的 JSON 数据源和这些配置,你可以轻松构建出功能完备的数据表格。

    JqueryEasyUI DataGrid例子

    6. **数据源格式**:DataGrid 需要的 JSON 数据格式通常是这样的: ```json { "total": 100, // 数据总数 "rows": [ // 数据行数组 {"id": 1, "name": "张三"}, {"id": 2, "name": "李四"}, // ... ] } ``` ...

    easyui datagrid+SSH集成项目问题

    以上是对“easyui datagrid+SSH集成项目问题”的总结,涵盖了Struts2与JSON的配合、DataGrid的JSON数据格式、Hibernate懒加载的处理以及循环引用的解决策略。理解这些知识点有助于在实际开发中更顺畅地集成EasyUI与...

    EasyUI DataGrid及Pagination(源码)

    DataGrid支持JSON、XML等多种数据格式,可以方便地与后台服务器进行数据交互。 Pagination分页功能是DataGrid处理大数据量时的关键组件。当数据量过大,一次性加载所有数据会影响页面性能和用户体验时,Pagination...

    EasyUI的DataGrid显示ASP.NET内容

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

    easyui datagrid ashx 结合的例子,虚拟json数据

    网络上找了好久没找到简单易上手的.net版本的easyui datagrid ashx 结合的.net例子,自己个人实现,后台虚拟json数据,不包含数据库操作,实现了datagrid的增删改,100%可运行(VS2012开发)

    EasyUI DataGrid 添加工具

    本文将详细介绍如何在EasyUI DataGrid中添加工具栏,并对工具栏中的各个按钮属性进行解释。 #### 二、DataGrid工具栏属性详解 ##### 1. 工具栏(`toolbar`)属性 DataGrid插件提供了一个`toolbar`属性,用于定义...

    easyui DataGrid动态编辑

    7. **数据提交格式**:通常,你需要定义一个JSON格式的API来接收和处理这些编辑操作,如上文的`onEndEdit`中的`$.post`调用所示。 以上就是实现EasyUI DataGrid动态编辑的主要步骤和关键技术点。理解并熟练运用这些...

    EasyUI的DataGrid绑定Json数据源的示例代码

    在Web应用中,Json数据经常作为前后端交互的数据格式。 文章提到的示例代码主要展现了如何利用EasyUI的DataGrid组件结合Json数据源来展示数据。从给定的内容中我们可以看出,有以下几个关键知识点: 1. EasyUI的...

    easyUI datagrid 简便使用文件(含api文档)

    1. **简化初始化过程**:EasyUI datagrid 允许开发者通过简单的 JSON 对象定义列、数据源和其他设置,从而快速创建一个功能完整的表格。简便使用文件可能提供了一种更简洁的方式来初始化 datagrid,比如预设了一些...

    C# MVC4 easyui datagrid expand row

    创建一个动作方法来获取数据并返回JSON格式,以便于EasyUI处理。 ```csharp public ActionResult GetData() { var orders = GetOrdersFromDatabase(); // 获取数据的逻辑 return Json(orders, ...

Global site tag (gtag.js) - Google Analytics