EasyUI DataGrid onBeforeRender 使用记录

有时候会想在视图渲染之前修改表格数据,比如说:sex属性为“1”时,页面显示“男”;“0”时页面则显示为“女”。

那么我们知道,DataGrid 在onLoadSuccess时已经对页面渲染完毕,此时则无法对数据再进行修改,所以API又提供了 onBeforeRender 这个事件。

使用示例:

1、将此段代码附加在DataGrid初始化后执行,即可完成在DataGrid渲染之前进行操作

$('#grid').datagrid("options").view.onBeforeRender = function (target, rows) {
	$.each(rows, function (index, row) {
		row.sex = formatSex(row.sex);
	});
};

2、formatSex函数代码

// 格式化性别
function formatSex(sex) {
	if (typeof(sex) != "undefined") {
		if (sex== "1") {
			return "男";
		} else if (sex== "0") {
			return "女";
		}
	}
	return sex;
}
时间: 2024-11-01 19:56:51

EasyUI DataGrid onBeforeRender 使用记录的相关文章

Easyui datagrid 实现表格记录拖拽

datagrid 实现表格记录拖拽 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 jquery-easyui-datagrid-dnd 下载地址: http://www.jeasyui.net/demo/193.html 实现 编辑datagrid-dnd.js,注释头尾两行代码,如下 //(function($){ //})(jQuery); 关键代码 引入js文件 <script type="text/javascript" src

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

easyui datagrid 导出excel

本片文章是介绍如何用ajax的方式将easyui中的datagrid数据导出到excel中. 声明:该代码是在参考前人的代码写出来的,并非我原创,我只是新增了些功能. 新增部分: 1. 对于列是枚举列的可以设置枚举值,导出时会自动替换列中的枚举值,详细见用例代码. 2. 新增导出时不导出首列或末列指定个数的列,详细接用例代码. 下面是插件源码: /** Jquery easyui datagrid js导出excel 修改自extgrid导出excel * allows for download

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

(转)easyui datagrid 部分参数说明

easyui datagrid 部分参数 数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节. undefined frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动. undefined fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动. false autoRowHe

EasyUI Datagrid 分页

EasyUI Datagrid 分页,两种情况 第一种,向后台请求数据,点击分页请求一次,点击排序请求一次.使用表格自带的ajax. box.datagrid({ url: '', //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 width: '100%', height: '500px', fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20

实现easyui datagrid在没有数据时显示相关提示内容

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct