http://blog.163.com/ppy2790@126/blog/static/103242241201512502532379/

设置formatter属性,是一个函数,格式化函数有3个参数:
The cell formatter function, take three parameters:
value: the field value.
rowData: the row record data.
rowIndex: the row index.
 
一、格式化显示性别
后台传过来的json中性别值是0、1,页面显示时调用格式化函数:
(js方式)

{

title : '性别',

field : 'gender',

width : 50,

formatter:function(value,rec){

return rec.gender==0?'女':'男';

}

}

 
二、格式化显示时间

{

title : '回访日期',

field : 'date',

width : 120,

formatter: function (value, rec, index) {

if (value == undefined) {

return "";

}

/*json格式时间转js时间格式*/

var date = new Date(value);

return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()+'  '+date.getHours()+":"+date.getMinutes();

}

},

 
三、格式化显示数据样式
格式化小于20的价格显示红色(Html方式)

创建 DataGrid

  1. <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
  2. url="data/datagrid_data.json"
  3. singleSelect="true" iconCls="icon-save">
  4. <thead>
  5. <tr>
  6. <th field="itemid" width="80">Item ID</th>
  7. <th field="productid" width="80">Product ID</th>
  8. <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>
  9. <th field="unitcost" width="80" align="right">Unit Cost</th>
  10. <th field="attr1" width="100">Attribute</th>
  11. <th field="status" width="60" align="center">Stauts</th>
  12. </tr>
  13. </thead>
  14. </table>

注意 'listprice'字段有一个 'formatter'属性这个指明格式化函数.

写格式化函数

  1. function formatPrice(val,row){
  2. if (val < 20){
  3. return '<span style="color:red;">('+val+')</span>';
  4. } else {
  5. return val;
  6. }
  7. }

EasyUI datagrid 格式化显示数据的更多相关文章

  1. EasyUI Datagrid 分页显示(客户端)

    转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...

  2. easyui datagrid 每条数据后添加操作按钮

    easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...

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

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  4. 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...

  5. JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  6. 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...

  7. jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

  8. Easyui datagrid加载数据时默认全选的问题

    问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...

  9. 在easyui datagrid中formatter数据后使用linkbutton

    http://ntzrj513.blog.163.com/blog/static/2794561220139245411997/ formatter:function(value,rowData,ro ...

随机推荐

  1. python案例-用户登录

    要求: •输入用户名密码 •认证成功后显示欢迎信息 •输错三次后锁定 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 "" ...

  2. SqlDevlepor注册表监听器设置

      1.打开plsqldev.   2. 键入环境变量 NLS_LANG SIMPLIFIED CHINESE_CHINA.ZHS16GBK   3.下载sqldevclient. http://pa ...

  3. 【Spring开发】—— Spring注入静态变量

    今天碰到一个问题,我的一个类提供了几种静态方法,静态方法需要另外一个类的实例提供处理,因此就写出了这样的代码: Class aa{ private static XXX xxx; xxx = Bean ...

  4. android Camera 中添加一种场景模式

    转自:http://blog.csdn.net/fulinwsuafcie/article/details/8833652 首先,来了解一下什么是场景模式. 最简单的方法当然是google了,这里有一 ...

  5. 【Android性能优化】(一)使用SparseIntArray替换HashMap

    SparseArray是android里为<Interger,Object>这样的Hashmap而专门写的class,目的是提高效率,其核心是折半查找函数(binarySearch)

  6. 基于Html5的移动端开发框架的研究

    下面统计信息部分来自网络,不代表个人观点.请大家参考.         基于Html5移动端开发框架调查                                   序号 框架 简介 优点 缺 ...

  7. <转载> 你应该更新的Java知识之常用程序库(一)

    原文出处:http://www.blogbus.com/dreamhead-logs/226738702.html 很多人眼中,Java已经是一门垂垂老矣的语言,但并不妨碍Java世界依然在前进.如果 ...

  8. [CareerCup] 9.2 Robot Moving 机器人移动

    9.2 Imagine a robot sitting on the upper left corner of an X by Y grid. The robot can only move in t ...

  9. HDU5336-XYZ and Drops-模拟

    模拟水珠那个游戏. 小水珠超过边界会消失. 会有两个水珠同时到达一个size=4大水珠的情况.要移动完统一爆炸 #include <vector> #include <cstdio& ...

  10. HoloLens开发手记 - Unity之Spatial Sounds 空间声音

    本文主要讲述如何在项目中使用空间声音特性.我们主要讲述必须的插件组件和Unity声音组件和属性的设置来确保空间声音的实现. Enabling Spatial Sound in Unity 在Unity ...