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. 了解什么是redis的雪崩和穿透?redis崩溃之后会怎么样?系统该如何应对这种情况?如何处理redis的穿透?

    缓存雪崩发生的现象 缓存雪崩的事前事中事后的解决方案 事前:redis高可用,主从+哨兵,redis cluster,避免全盘崩溃 事中:本地ehcache缓存 + hystrix限流&降级, ...

  2. IDEA创建XML文件没有Spring Config选项

    我在resources目录下导入3个配置文件时,applicationContext-common.xml文件中有4处http地址红色报错,下图为修正后的图片 了解到可能是由于父工程的pom文件中没有 ...

  3. linux-shell 判断当前用户是否是root用户

    环境变量UID中保存的是用户ID. root用户的UID是0. #! /bin/bash if [ $UID -ne 0 ]; then echo Non root user. Please run ...

  4. (十三)VMware Harbor 身份验证模式

    VMware Harbor 修改Harbor仓库admin用户 参考:https://blog.csdn.net/qq_40460909 https://blog.csdn.net/qq_404609 ...

  5. C语言头文件到底是什么?

    C语言头文件到底是什么? 在C语言学习的时候总是会引入这样的语句#include <stdio.h>,书上解释说把stdio.h这个文件的全部内容直接插入到这个位置,然后再经过C语言的编译 ...

  6. MyBatisPlus入门学习

    目录 MyBatisPlus 概述 快速入门 配置日志输出 CRUD拓展 插入 主键生成策略 更新操作 自动填充 乐观锁 查询操作 分页查询 删除操作 逻辑删除 性能分析插件 条件构造器 代码自动生成 ...

  7. Tomcat管理弱口令页面Getshell

    目录 弱口令Getshell 利用Burpsuite对tomcat账号密码进行爆破 弱口令Getshell Tomcat安装完成后会有如下页面,点击该页面的 Manager App 处会弹出输入用户名 ...

  8. Intel汇编语言程序设计学习-第五章 过程-下

    5.3.3  库测试程序 测试程序#1:整数I/O 该测试程序把输出文本的颜色改为蓝底黄字,然后以十六进制数显示七个数组的内容,最后提示用户输入一个有符号整数,再分别以十进制.十六进制和二进制格式重复 ...

  9. Elasticsearch exception [type=mapper_parsing_exception, reason=No type specified for field [X]

    可能原因是实体类属性没有指定映射类型 创建mapping时需要指定field的type,如果不指定则报错 错误 //这是一个类中的字段 @Field(store = false) private St ...

  10. 30.Stream流

    5.Stream流 5.1体验Stream流[理解] 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合,存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集 ...