easyui DataGrid中格式化列,如果单价低于20,则使用定义列formatter为红色文本。

格式化DataGrid列,我们应该设置formatter属性,这个属性是一个函数。格式化函数包括两个参数:
· value: 显示字段当前列的值
· record: 当前行记录数据 
Markup
<table id="tt"></table>
jQuery
$('#tt').datagrid({
    title:'Formatting Columns',
    width:550,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right',
            formatter:function(val,rec){
                if (val < 20){
                    return '<span style="color:red;">('+val+')</span>';
                } else {
                    return val;
                }
            }
        },
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});

EasyUI 格式化DataGrid列的更多相关文章

  1. EasyUI的datagrid列属性添加超链接

    $("#dg").datagrid({        url: "../Ajax/PurchaseAjax.ashx",        queryParams: ...

  2. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

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

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

  4. easyui的datagrid行的某一列添加链接

    通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...

  5. easyui datagrid 列隐藏和显示

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

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

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

  7. [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

    为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...

  8. easyui datagrid列使用按钮的一些心得 .

    以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下: $('#datagrid').datagrid({ border:false, fitColumns:true, si ...

  9. easyui datagrid列使用按钮的一些心得(转)

    http://blog.csdn.net/sskicgah/article/details/16939959 以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下: $('# ...

随机推荐

  1. CCF真题之出现次数最多的数

    201312-1 问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有多个,请输出其中最小的一个. 输入格式 输入的第一行只有一个正整数n(1 ≤ n ≤ 1000),表示数字的个数. ...

  2. demo06

    city_data.xml <?xml version="1.0" encoding="utf-8"?> <resources> < ...

  3. react编译器jsxTransformer,babel

    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransformerJSX代码 ...

  4. oracle中的常用函数

    一.运算符算术运算符:+ - * / 可以在select 语句中使用连接运算符:|| select deptno|| dname from dept; 比较运算符:> >= = != &l ...

  5. jQuery讲解

    在讲解jQuery时,要和JavaScript进行对比的讲解,易于理解 JavaScript部分 <title>jquery讲解使用</title> <script sr ...

  6. Android小案例——简单图片浏览器

    今天上午休息看Android书,里面有个变化图片的示例引起了我的兴趣. 示例需求: 有N张图片,循环显示图片的内容.如果需求让我写我会使用一个变量count来保存显示图片数据的索引,图片显示时做个判断 ...

  7. APP的UI测试要点

    1.文字显示是否正确 比如与需求图片对比是否正确,无错别字 2.对齐方式是否正确 3.图片 图片显示的篇幅不要太大. 4.颜色是否正确 颜色与需求规定的是否一致

  8. Ubuntu 13.10 64位 无法 安装 ia32-libs 解决办法

    安装新立德软件包管理器:打开终端,输入以下命令:sudo apt-get install synaptic 打开新立德软件包管理器,选择“设置>软件库” 选择“其他软件 > 添加” 在AP ...

  9. Hadoop入门实践之从WordCount程序说起

    这段时间需要学习Hadoop了,以前一直听说Hadoop,但是从来没有研究过,这几天粗略看完了<Hadoop实战>这本书,对Hadoop编程有了大致的了解.接下来就是多看多写了.以Hado ...

  10. Linux下Date命令的用法

    转自http://blog.chinaunix.net/uid-8223172-id-2511672.html linux下date的用法比较复杂,但是也用的比较多,尤其是shell里面.现总结一下自 ...