`
wb1991wb
  • 浏览: 157135 次
  • 来自: 上海
社区版块
存档分类
最新评论

Easyui DataGrid自定义loader适配器

 
阅读更多
function myLoader(param,success,error){
	var that = $(this);
	var opts = that.datagrid("options");
	if (!opts.url) {
		return false;
	}
	var cache = that.data().datagrid.cache;
	if (!cache) {
		$.ajax({
			type : opts.method,
			url : opts.url,
			data : param,
			dataType : "json",
			success : function (data) {
				that.data().datagrid['cache'] = data;
				success(bulidData(data));
			},
			error : function () {
				error.apply(this, arguments);
			}
		});
	} else {
		success(bulidData(cache));
	}
	
	function bulidData(data) {
		var temp = $.extend({},data);
		var tempRows = [];
		var start = (param.page - 1) * parseInt(param.rows);
		var end = start + parseInt(param.rows);
		var rows = data.rows;
		for (var i = start; i < end; i++) {
			if(rows[i]){
				tempRows.push(rows[i]);
			}else{
				break;
			}
		}
		temp.rows = tempRows;
		return temp;
	}
}

 

具体使用:配置datagrid的loader属性为myLoader即可。

当你需要重新请求后台刷新数据时,请在你调用刷新方法之前执行$("#gridId").data().datagrid.cache = null; 该语句作用于清除当前缓存。

当然你实现的是前端分页。所以你后台返回的应该是该结果集下所有的记录。并且请不要在后天处理分页参数。后台返回的结果格式应该如是:{"total":106,"rows":[{},{},{}.....]},且rows.length的长度应该等于total的值。

分享到:
评论

相关推荐

    easyui datagrid自定义标题拖拽配置

    纯原创开发,datagrid支持表头拖拽前后,支持浏览器左右跟随鼠标滚动,表头右键支持自定义配置,恢复默认等功能,请访问jquery-easyui-1.5\demo\datagrid\columnConfig.html,所有代码都在该文件中,可以自行抽离或2次扩展

    easyui datagrid 自定义编辑器 colorpickerEditor

    在本文中,我们将深入探讨如何在EasyUI的DataGrid中创建自定义编辑器,特别是`colorpickerEditor`,用于在行内编辑时选择颜色。EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加...

    DataGrid自定义列标题

    在实际开发中,我们经常需要根据需求对DataGrid的列标题进行自定义,以增强界面的用户体验和美观度。本篇将深入探讨如何在DataGrid中实现自定义列标题。 一、自定义列标题文本 1.1 使用AutoGenerateColumns属性 ...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    easyui datagrid 表格 打印

    1. **扩展Datagrid功能**:可以通过扩展EasyUI Datagrid的默认功能来实现打印,这可能涉及到自定义事件监听器,当用户触发打印操作时,将当前视图的数据转换为适合打印的格式。 2. **CSS调整**:由于打印时浏览器...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid 右冻结

    标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

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

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

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    JS EasyUI DataGrid动态加载数据

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

    easyUI datagrid rownumber自适应宽度扩展JS

    easyUI datagrid 自动调整行号大小

    easyui datagrid 增加鼠标悬停弹窗事件

    在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    easyui使用datagrid定制生成一个table

    EasyUI 的 DataGrid 控件支持两种方式的数据绑定:自动列生成和用户自定义列。 - **自动列生成**:当 `AutoGenerateColumns` 属性被设置为 `true` 时,DataGrid 会根据数据源自动创建列。 - 示例代码: ```csharp...

    easyui datagrid在编辑状态下更新列的值

    在使用EasyUI框架开发Web应用时,Datagrid组件是一个非常重要的元素,它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地...

    EasyUI Datagrid 中文排序的问题

    ### EasyUI Datagrid 中文排序解决方案 #### 一、前言 在开发Web应用程序时,经常需要处理中文数据的排序问题。特别是在使用如EasyUI Datagrid这样的前端组件时,中文排序成为了开发者面临的一个常见挑战。本文将...

    easyui的datagrid中editor和combobox的级联

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

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

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

Global site tag (gtag.js) - Google Analytics