`

easyui的datagrid获得自定义json信息

阅读更多

案例:

使用easyui的datagrid进行局部刷新时, table外的其他区域也要根据返回的数据动态取得值。

function loadData() {
	$('#tb_list').datagrid('reload',{
		name1: $('#name1').val(),
		name2:$('#name2').val()
	});
	// 取得返回的列 更新tb_list外的其他区域
}

 -------------------------------------------------------------------------------------

遇到一个问题,需要获得datagrid的总行数,把datagrid的API找了一遍,getRows这个方法也只能获取当前页中记录的行数.

发现datagrid依赖pagination这个组件,从这个线索找还真的找到了, 分享出来.

var options = $('#resulttable').datagrid('getPager').data("pagination").options;  
var totalRowNum = options.total;

第一行:getPager获取页面对象进而获取pagination这个组件.
第二行:pagination组件提供了total这个属性.

 

From: http://blog.163.com/liuyb_94242/blog/static/421676462012111944220392/

---------------------------------------------------------------------------------------------------

原创文章,转载请标明出处:http://hae.iteye.com/blog/2101477

 

上面是在网上找的,可能是因为没有使用easyui自带的分页标签,而使用了项目自定义的分页标签,所以easyui到这里$('#resulttable').datagrid('getPager')已经是空了,无法获得总行数,后来自己调试+跟踪+摸索了半天终于找到了一个解决方法:

 

服务器端返回json对象自定义:

public class DatagridJson {
	private int total;
	private List<Row> rows;
	private Map<String, String> footer; //自定义,封装自己想要得到的后台数据

	// get, set 方法省略。。。。
}

 

原创文章,转载请标明出处:http://hae.iteye.com/blog/2101477

 

使用ajax 请求服务器端controller时,将返回的json对象组装为自己有用的信息:

...
datagridJson.setRows(rowList);
Map<String, String> footer = new HashMap<String, String>();

footer.put("key1", "name1");
footer.put("key2", "name2");
footer.put("key3", "name3");
......
datagridJson.setFooter(footer);
return datagridJson;

 最后前台使用如下方法:

function loadData() {
	$('#tb_list').datagrid('reload',{
		name1: $('#name1').val(),
		name2:$('#name2').val()
	});
	// 取得返回的列 更新tb_list外的其他区域
	var footer = $('#tb_list').datagrid('getFooterRows');
	if (footer === undefined || footer == null) {
		return;
	}
	var key1 = footer['name1'];
	var key2 = footer['name2'];
	var key3 = footer['name3'];
	
	// 拿到后台的值 然后该干什么就干什么吧。
}
分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

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

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

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid,用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的...

    easyui的datagrid中editor和combobox的级联

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

    EasyUI DataGrid及Pagination(源码)

    DataGrid是EasyUI中的一个重要组件,它主要用于展示和管理表格数据,而Pagination则是DataGrid的一个配套功能,用于处理大量的数据分页显示。 DataGrid是一个强大的表格控件,它可以动态加载数据、排序、过滤、编辑...

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据...此外,还可以通过扩展 EasyUI 的功能,实现更多自定义功能,如自定义过滤、排序等。

    EasyUI DataGrid 添加工具

    ### EasyUI DataGrid 添加工具详解 #### 一、概述 在使用EasyUI框架进行Web开发时,DataGrid组件是常用的数据展示控件之一。通过合理配置DataGrid的工具栏(`toolbar`),开发者能够轻松地为其添加各种操作按钮,...

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

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

    easyui DataGrid动态编辑

    在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...

    easyui帮助手册datagrid

    在本篇文章中,我们将深入探讨 EasyUI Datagrid 的主要配置选项及其用途。 1. **columns**:这是 Datagrid 最基本的配置,它是一个数组,包含了表格的所有列信息,如字段名(field)、标题(title)和宽度(width)...

    easyUidataGrid

    `easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...

    EasyUI DataGrid 增删改查源码

    此外,EasyUI DataGrid还支持各种定制化,如自定义列、行样式、工具栏和操作按钮。源码分析可以帮助我们理解如何通过配置选项和事件监听来实现这些定制。例如,我们可以通过监听`onClickRow`事件来实现单击行时的...

    jquery easyui datagrid 教程

    1. CSS 样式:通过修改 EasyUI 的默认样式或自定义 CSS,调整 Datagrid 的颜色、大小、边距等。 2. 行级样式:使用 `class` 或 `styler` 参数为特定行或单元格设置样式。 七、优化与性能 1. 分页优化:在大数据量时...

    easyUI的dataGrid的使用DEMO

    这个“easyUI的dataGrid的使用DEMO”包含了数据库脚本文件,意味着它不仅展示了如何在前端使用 dataGrid,还可能涉及到了后端数据的处理和交互。 1. **jQuery EasyUI 数据网格(dataGrid)**: - `dataGrid` 是 ...

    easy ui datagrid项目完整源代码

    &lt;table id="datagrid" class="easyui-datagrid" title="数据表格" style="width:100%;height:250px" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" url="get_data.json" method=...

    easyUI,datagrid小样例

    2. **EasyUI 数据源**:Datagrid 可以通过 JSON、XML 或者服务器端动态加载数据。在小样例中,数据源可能是 JavaScript 对象数组或者通过 AJAX 动态请求获取。 3. **Datagrid 配置**:配置项包括列定义(columns)...

    jquery-easyui-portal 自定义布局

    5. **Data Binding**:EasyUI与后端数据源的交互通常通过Ajax完成,可以将数据显示在各种组件中,如DataGrid、TreeGrid等。这使得动态加载和更新数据变得简单,同时也便于实现用户界面的自定义配置。 6. **Theme ...

    easyui-datagrid2-demo.zip

    "easyui-datagrid2-demo.zip" 文件包含了使用 EasyUI Datagrid 的一个示例,帮助开发者了解如何实现数据的加载、分页、排序等基本操作。 在这个 demo 中,我们可以从以下几个方面学习 EasyUI Datagrid 的使用: 1....

    easyUI的dataGrid重画

    在本文中,我们将深入探讨如何在EasyUI框架中实现`dataGrid`的重画功能,特别是在自定义搜索框和调整默认按钮大小方面。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括`dataGrid`,它是一个强大的数据展示...

    struts2+easyUI+ajax+json用户登验证

    Struts2、EasyUI、Ajax 和 JSON 是现代Web开发中常用的技术栈,它们结合使用可以构建出高效、交互性强的用户界面。以下是对这些技术及其在用户登录验证中的应用的详细解释。 **Struts2** 是一个基于MVC(Model-View...

    .net 使用easyUI_DataGrid分页

    关于列的操作,EasyUI DataGrid允许我们自定义列的显示方式,包括设置宽度、是否可编辑、对齐方式等。例如,我们可以设置某一列不显示,或者设置为只读: ```javascript { field: 'ColumnName3', title: '列3标题',...

Global site tag (gtag.js) - Google Analytics