easyUI中datagrid展示对象下属性以及显示多个子属性

显示对象单个属性值

添加formatter属性

<th field="decidedzone" width="100" align="center" formatter="formatName">所属定区</th>

<script>
// value:显示的值 row:行 index: 当前下标
function formatDistrict(value,row,index){
//region:对象名 district:要显示的字段名
return row.region.district;
}
</script>

显示对象多个子属性值

先来看看,若像上面显示单个属性值一样

结果显示如下图:

很显然,省市区显示有误,所以,当需要显示对象多个子属性时。我们需要从row这个参数上下手,将代码修改为如下:

<th field="province" width="110" align="center" formatter="formatProvince">省</th>
<th field="city" width="90" align="center" formatter="formatCity">市</th>
<th field="district" width="90" align="center" formatter="formatDistrict">区(县)</th>

field的值改为对象的属性值。

最终代码:

<tr>
<th field="idd"checkbox="true"></th>
<th field="id" width="90" align="center">分区编号</th>
<th field="province" width="110" align="center" formatter="formatProvince">省</th>
<th field="city" width="90" align="center" formatter="formatCity">市</th>
<th field="district" width="90" align="center" formatter="formatDistrict">区(县)</th>
<th field="addresskey" width="120" align="center">位置关键字</th>
<th field="startnum" width="60" align="center">起始号</th>
<th field="endnum" width="60" align="center">结束号</th>
<th field="single" width="60" align="center">单双号</th>
<th field="position" width="200" align="center">具体位置信息</th>
<th field="decidedzone" width="100" align="center" formatter="formatName">所属定区</th>
</tr>
<script>
function formatName(value,row,index) {
return row.decidedzone.name;
}
function formatProvince(value,row,index) {
return row.region.province;
}
function formatCity(value,row,index) {
return row.region.city;
}
function formatDistrict(value,row,index){
return row.region.district;
}
</script>

最终显示:

easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)的更多相关文章

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

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  2. EasyUI中datagrid的基本用法

    EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图

  3. EasyUI中datagrid双击事件

    EasyUI中datagrid双击事件 在jsp文件底部增加代码: <script type="text/javascript"> //数据表双击事件 $('#tabl ...

  4. easyui中datagrid标题居中内容居左实现方式

    easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好.这个时候就需要我们自己动手来修改easyui的源码了.easyu ...

  5. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

  6. EasyUI中datagrid控件的使用 设置多行表头(两行或多行)

    EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: $('#divData'). ...

  7. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  8. 修改easyui中datagrid表头和数据不能分开对齐的BUG。

    easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...

  9. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

随机推荐

  1. LNMP架构上线动态网站

    第一步,一键安装所需程序 yum install -y nginx php php-mysql php-fpm mariadb-server 第二步,修改Nginx配置文件/etc/nginx/ngi ...

  2. 一文教你读懂JVM的类加载机制

    Java运行程序又被称为WORA(Write Once Run Anywhere,在任何地方运行只需写入一次),意味着我们程序员小哥哥可以在任何一个系统上开发Java程序,但是却可以在所有系统上畅通运 ...

  3. Go之Zap日志库集成Gin

    简介 在许多Go语言项目中,我们需要一个好的日志记录器能够提供下面这些功能: 1 . 能够将事件记录到文件中,而不是应用程序控制台; 2 . 日志切割-能够根据文件大小.时间或间隔等来切割日志文件; ...

  4. JAVAEE_02_BS/CS架构

    BS/CS架构 系统构架分为? C/S: Client/Server B/S: Browser/Server B/S的优缺点? 优点: 1. 不需要安装特定的客户端软件,只需要浏览器. 2. 升级只需 ...

  5. rabbitmq五种模式详解(含实现代码)

    一.五种模式详解 1.简单模式(Queue模式) 当生产端发送消息到交换机,交换机根据消息属性发送到队列,消费者监听绑定队列实现消息的接收和消费逻辑编写.简单模式下,强调的一个队列queue只被一个消 ...

  6. 哈工大LTP进阶使用-三元组事件抽取

    哈工大LTP基本使用-分词.词性标注.依存句法分析.命名实体识别.角色标注 上一节我们讲了LTP的基本使用,接下来我们使用其进行事件抽取. 参考代码:https://github.com/liuhua ...

  7. 基于MATLAB的手写公式识别(7)

    今天晚上通过对原有T4模型的修改实现: 1.可以识别真彩图形.(这基本是一样大的,通过这个了解图像分割的原理) 2.在识别心脑管血药类的基础上实现数字的识别.(了解图像识别原理,熟练掌握图像分割技术) ...

  8. SpringIOE-以xml方式实现

    SpringIOC框架简单实现 简单介绍 依赖注入( Dependency Injection ,简称 DI) 与控制反转 (IoC) 的含义相同,只不过这两个称呼是从两个角度描述的同一个概念,具体如 ...

  9. hdu 5020 求三点共线的组合数(容器记录斜率出现次数)

    题意:       给你n个点,问你3点共线的组合数有多少,就是有多少种组合是满足3点共线的. 思路:      一开始抱着试1试的态度,暴力了一个O(n^3),结果一如既往的超时了,然后又在刚刚超时 ...

  10. hdu 2058 枚举区间和个数

    题意:       给你两个数n,m,意思是有一个序列长度n,他是1 2 3 4 ...n,然后让你输出所有连续和等于m的范围. 思路:       是个小水题,随便写几个数字就能发现规律了,我们可以 ...