`

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

 
阅读更多


EasyUI 中 DataGrid 控件 是我们经常用到的控件之一,

但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定。

 

模型如下:

 

public class Manager implements java.io.Serializable {
       
	private Integer id;
	private Role role;
	private String loginName;
	private String password;
	private int status;
	private Date lastDate;
	private Date createAt;
	private String remarks;

         //省略 get and  set
}

 其中Role 是一个对象

 

 

 

 

<table id="manager_datagrid">
 <thead>
	<tr>
	  <th data-options="field:'loginName'">帐号</th>
	  <th data-options="field:'role',formatter:managerRoleFormat">所属岗位</th>
	  <th data-options="field:'createAt'">创建时间</th>
	  <th data-options="field:'lastDate'">最后登录时间</th>
	  <th data-options="field:'status',formatter:managerStatusFormat">状态</th>
	  <th data-options="field:'remarks'">备注</th>
	</tr>
 </thead>
</table>

 

 

 

function managerRoleFormat(val,row){
	if(val) return val.roleName;
	else return "";
}

 

function managerStatusFormat(val,row){
			
switch(val){
  case 0: return '停用';
  case 1: return '正常';
  default: return '';
  }
}

 

 

这样通过 EasyUI 给我们提供的 formatter  函数 我们就可以实现 对象属性的绑定.

 

分享到:
评论

相关推荐

    解决easyui datagrid控件的日期显示问题1

    在使用EasyUI的datagrid控件时,我们常常会遇到日期数据在前端显示为`object`类型的问题,这主要是因为服务器返回的日期数据没有被正确格式化。在标题和描述中提到的解决方案,主要涉及到以下几个关键点: 1. **...

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

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    easyui的datagrid的数据渲染

    easyui的datagrid的数据渲染

    easyui的datagrid中editor和combobox的级联

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

    easyui DataGrid 数据表格 属性

    通过阅读文档中的 `.doc` 文件,你可以更全面地了解 EasyUI DataGrid 的各种属性和用法,包括一些高级特性,如动态加载数据、数据绑定、异步操作等。同时,结合实际项目实践,这些知识将有助于提升你的前端开发技能...

    easyui-datagrid之间拖拽效果demo

    首先,Datagrid 是 EasyUI 提供的一种表格控件,它可以展示大量结构化的数据,并支持排序、分页、过滤等多种功能。在拖拽效果中,用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid,实现数据的...

    EasyUI Datagrid 中文排序的问题

    在 EasyUI Datagrid 中,可以通过配置 `sorter` 属性来自定义排序函数。对于中文排序的需求,可以使用 JavaScript 的 `localeCompare` 方法来实现。 2. **实现代码示例**: ```javascript // 定义排序函数 ...

    DataGrid自定义列标题

    在.NET框架中,WPF(Windows Presentation Foundation)提供了一个强大的数据呈现控件——DataGrid,它用于显示和编辑网格形式的数据。在实际开发中,我们经常需要根据需求对DataGrid的列标题进行自定义,以增强界面...

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

    其中,DataGrid组件是EasyUI用来展示数据列表的重要组件,类似于其他技术中的表格控件。DataGrid组件支持多种特性,比如分页、排序、行号显示、复选框、编辑等等。在Web开发中,DataGrid组件常用于显示和操作数据...

    datagrid中编辑状态(editor)下一列嵌入多个控件

    ### easyUI Datagrid 控件中实现单列内嵌入多个控件的方法 #### 一、概述 在使用easyUI框架时,我们经常会遇到需要在`datagrid`控件的某一列中嵌入多个输入控件的需求。这样的设计可以极大地方便用户进行数据的...

    easyui使用datagrid定制生成一个table

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

    easyui-datagrid21-demo.zip

    1. **Datagrid21**: Datagrid是EasyUI的核心组件之一,它是一个用于展示表格数据的控件。Datagrid21可能是指该版本或示例中的特定功能增强或改进,如增加了一些新的特性或优化了性能。在 "datagrid21_demo.html" ...

    EasyUI中datagrid 分页,僧删改查,上下移动数据.net案例

    EasyUI的datagrid是一个表格控件,它具有数据展示、排序、过滤、分页等功能,非常适合用于数据管理。在.NET环境中,结合后台的数据处理能力,datagrid能够实现高效的数据交互。 **分页**: 在大量数据展示时,分页...

    easyUI的dataGrid重画

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括`dataGrid`,它是一个强大的数据展示控件,支持分页、排序、过滤等功能。 首先,我们要理解`dataGrid`的基本用法。`dataGrid`是用于展示结构化数据的表格,...

    EasyUI:基本布局&tree菜单数据的绑定&DataGrid数据查询&数据绑定&分页

    在这个主题中,我们将探讨 EasyUI 的几个核心知识点:基本布局、tree 菜单数据的绑定、DataGrid 数据查询和数据绑定以及分页功能。 首先,我们来看 EasyUI 的基本布局。EasyUI 提供了一套灵活的布局系统,允许...

    jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    EasyUI的一个重要组件是datagrid,它是一个数据表格控件,可以显示多行多列的数据,并允许对这些数据进行操作和管理。有时候,为了满足特定的业务需求,在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。...

    easyUI的dataGrid的使用DEMO

    在这些组件中,`dataGrid` 是一个非常重要的数据展示控件,它类似于 HTML 的表格,但提供了更多功能,如分页、排序、过滤和自定义列等。这个“easyUI的dataGrid的使用DEMO”包含了数据库脚本文件,意味着它不仅展示...

    easyui帮助手册datagrid

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

    EasyUIDataGrid(net)

    EasyUIDataGrid是一款基于.NET平台的数据网格控件,它提供了丰富的功能和易用性,使得在.NET应用中处理和展示数据变得更加便捷。EasyUI是基于jQuery的轻量级前端框架,而EasyUIDataGrid则是这个框架的一部分,专门...

    .net 使用easyUI_DataGrid分页

    本教程将深入讲解如何在.NET环境中利用EasyUI的DataGrid实现分页功能,同时也会涉及列的操作。 首先,我们需要理解什么是分页。分页是当数据量过大时,为了提高用户界面的响应速度和用户体验,将数据分成若干页进行...

Global site tag (gtag.js) - Google Analytics