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. JavaScript中Date(日期对象),Math对象--学习笔记

    Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date();  注:初始值为当前时间(当前电脑系统 ...

  2. ADIv5.2

    ADI:ARM Debug Interface,出到现在共有五代: 1)version1 and version 2:只针对ARM7TDMI和ARM9的processor: 2)version 3:只 ...

  3. SQL关于apply的两种形式cross apply和outer apply(转载)

    SQL 关于apply的两种形式cross apply 和 outer apply   apply有两种形式: cross apply 和 outer apply   先看看语法:   <lef ...

  4. android——单点触控移动,多点触控放大缩小

    xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  5. Ul li 竖排 菜单

    Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. Oracle DB SQL 性能分析器

    • 确定使用SQL 性能分析器的优点 • 描述SQL 性能分析器工作流阶段 • 使用SQL 性能分析器确定数据库更改所带来的性能改进 SQL 性能分析器:概览 • 11g 的新增功能 • 目标用户:D ...

  7. GPS学习

    1.每一个你不满意的现在,都有一个你没有努力的曾经. //ios根据gps坐标来计算两点间的距离 //x1,y1 点1的坐标 x2,y2点2的坐标 -(double) gps2m:(double)x1 ...

  8. ctl 里面pdef解说

    WRF 模式MM5 模式都是目前从网上可以下载的气象软件,因此在国内经常可以见到.但这两种模式的数据特点数据的水平网格都不是标准的经纬度网格.需要在ctl 文件中加入PDEF 定义说明把这种非标准的数 ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  10. inupt textarea提示文字(点击消失,不输入恢复)及限制字数

    效果: input: textarea: 限100字 源码: input: <input name="textfield" type="text" max ...