以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色。

为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。这个格式化函数包含三个参数:

  • value:当前列对应字段值。
  • row:当前的行记录数据。
  • index:当前的行下标。

创建数据网格(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 格式化列的更多相关文章

  1. EasyUI 格式化DataGrid列

    easyui DataGrid中格式化列,如果单价低于20,则使用定义列formatter为红色文本.格式化DataGrid列,我们应该设置formatter属性,这个属性是一个函数.格式化函数包括两 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  3. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  4. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  5. easyui datagrid 格式化列显示两位小数、千分位

    { field: , formatter: function (value, row, index) { if (row != null) { ); } } }, //二位小数.千分位 { field ...

  6. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

  7. 让jquery easyui datagrid列支持绑定嵌套对象

    嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...

  8. easyUI datagrid 列宽自适应(简单 图解)(转)

    响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...

  9. jquery-easyui:格式化列

    主框架页面: 在主界面区会加载西区菜单点击的URL内容. <!DOCTYPE html> <html> <head> <meta charset=" ...

随机推荐

  1. 20155330 《网络对抗》 Exp9 web安全基础实践

    20155330 <网络对抗> Exp9 web安全基础实践 实验问题回答 SQL注入攻击原理,如何防御 原理:SQL注入攻击值得是通过构建特殊的输入作为参数传入web应用程序,而这些输入 ...

  2. 20155331《网络对抗技术》Exp4:恶意代码分析

    20155331<网络对抗技术>Exp4:恶意代码分析 实验过程 计划任务监控 在C盘根目录下建立一个netstatlog.bat文件(先把后缀设为txt,保存好内容后记得把后缀改为bat ...

  3. MySQL主从报错1594

    一.主从报错 Relay log read failure 问题原因,MySQL主从使用的是kvm虚拟机,物理机超分严重,在负载高的情况下会kill掉占用资源最多的虚拟机,再启动后导致主从失败 mys ...

  4. linux 定时器原理

    内核定时器:    unsigned long timeout = jiffies + (x * HZ);    while(1) {        // Check the condition.   ...

  5. mac终端将本地代码push到github总结

    1.创建一个github账号 2.在本地目录下创建一个本地仓库,用来存放代码 mkdir prepass_repository (/Users/gejuncheng/文件/prepass_reposi ...

  6. Django实现websocket完成实时通讯、聊天室、在线客服等

    一 什么是Websocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebS ...

  7. 使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

    这边主要是有一个客户,需要在电视机上安装一个客户端,含有视频直播功能:刚开始我们采用的webapp打包成apk安装在电视机上,发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频):排除一些 ...

  8. 使用pyspark模仿sqoop从oracle导数据到hive的主要功能(自动建表,分区导入,增量,解决数据换行符问题)

    最近公司开始做大数据项目,让我使用sqoop(1.6.4版本)导数据进行数据分析计算,然而当我们将所有的工作流都放到azkaban上时整个流程跑完需要花费13分钟,而其中导数据(增量)就占了4分钟左右 ...

  9. [沈航软工教学] 学生项目Coding地址汇总

    同学们把自己的coding主页链接贴在评论里,要求格式"班号+学号+coding主页链接",如: "1301+13061193 + https://coding.net/ ...

  10. Day Five

    站立式会议 站立式会议内容总结 442 今天:编写具体计划的界面 遇到的问题:相对布局.绝对布局理解不够深刻 明天:完成设定计划时间的功能 331 今天:添加书籍/计划按钮,添加书籍时有一个文件选择 ...