本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0

You can use 'currency' cellFilter to format your data.

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{name: 'Award Title', field: 'projectTitle', minWidth: 100 },
{name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
]
};

Have a look at this nice article : http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

In summary your options are :

  • Bindings
  • Cell Filters
  • Cell Templates
  • Links
  • Buttons
  • Custom directives

I have used the cell Filter option myself (code translated to your case, not tested):

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
name: 'Award Title',
field: 'projectTitle', minWidth: 100
}, {
name: 'Amount',
field: 'awardAmount',
cellFilter: 'currencyFilter'
}
]
};

With filter defined hereunder :

app.filter('currencyFilter', function () {
return function (value) {
return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
});

Cheers, G

I'm late to the party, but wanted to share the best thing that worked for me:

JS:

myGrid.columnDefs = [{
field: "Sale",
cellFilter: 'number:2',
cellClass:'currency'
}]

CSS:

.currency{
text-align:right;
}
.currency .ui-grid-cell-contents:before{
content: '$';
float: left;
}

Final result:


Details:

First I tried using cellFilter:'currency' as mentioned in a previous answer, but it didn't allow for various dollar amounts and didn't align the values to the right:

So then I added a currency class, and right-align, which fixed alignment, but not different dollar amounts.

Unfortunately, I wasn't able to find an easy fix for this (although I feel like there is one out there somewhere), so I had to change the cellFilter from currency to number:2 - this means "Always show 2 decimals".

Then I wanted a dollar sign at the left of the cell (to avoid varying dollar amounts), for that I added the following css:

.currency .ui-grid-cell-contents:before{
content: '$';
float: left;
}

Which left me with the final result:

[转]Format a ui-grid grid column as currency的更多相关文章

  1. NGUI UI Grid, two column

    NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.

  2. kendo ui中grid页面参数问题

    kendo ui 中grid 算是最长用的控件之一,当使用分页效果时,我们要传递分页参数与自己定义的参数如: var dataSource = new kendo.data.DataSource({ ...

  3. wx.grid.Grid

    # -*- coding: cp936 -*- import wx import wx.grid import wx.lib.gridmovers as gridmovers import pymss ...

  4. wxPython控件学习之wx.grid.Grid 表格控件

    wxPython控件学习之wx.grid.Grid (包括对GridCellEditor和GridCelRender的扩展,以支持更多的grid cell 样式, 以GridCellColorEdit ...

  5. Python3 tkinter基础 grid(row,column) 窗体的布局

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. kendo ui之grid列表

    1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...

  7. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  8. Python Tkinter模块 Grid(grid)布局管理器参数详解

    在使用Tkinter模块编写图像界面时,经常用到pack()和grid()进行布局管理,pack()参数较少,使用方便,是最简单的布局,但是当控件数量较多时,可能需要使用grid()进行布局(不要在同 ...

  9. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

随机推荐

  1. WPF 卡顿调试经验

    1. 问题 最近的一个项目,正常调试情况下,运行一切正常,但是有某个用户登录后,出现界面卡顿2-3mins后,才正常运行. 2.解决问题方法 (1)首先由于是必现问题,就想在vs的工作环境下调试一下, ...

  2. ceph 运维常用指令

    集群 启动一个ceph 进程 启动mon进程 service ceph start mon.node1 启动msd进程 service ceph start mds.node1 启动osd进程 ser ...

  3. Problem I: GJJ的日常之玩游戏(GDC)

    Contest - 河南省多校连萌(四) Problem I: GJJ的日常之玩游戏 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 107  Solve ...

  4. kali linux之无线渗透

    无线技术变化大,难度大,既新鲜刺激,又压力山大.一半协议  一半理论 无线技术特点: 行业发展迅猛 互联网的重要入口 边界模糊 安全实施缺失而且困难 对技术不了解造成配置不当 企业网络私自接入ap破坏 ...

  5. 在PL/SQL里直接插入日期时提示 is not a valid date and time的解决方法

    在PL/SQL Developer里直接往表里插入日期格式的数据时,经常会出现" is not a valid date and time"的错误,这是因为Oracle的日期格式和 ...

  6. day 08 课后作业

    # -*- coding: utf-8 -*-# @Time : 2018/12/27 17:27# @Author : Endless-cloud# @Site : # @File : day 8课 ...

  7. day04 --class --homework

    # -*- coding: utf-8 -*- # @Time : 2018/12/24 12:10 # @Author : Endless-cloud # @Site : # @File : 04 ...

  8. XCode7无证书真机调试教程

    转载自http://altair21.com/156.html 前提条件: XCode版本>=7 1. 进入xcode,菜单栏选择xcode –> preferences (快捷键 com ...

  9. 解决Python向MySQL数据库插入中文数据时出现乱码

    解决Python向MySQL数据库插入中文数据时出现乱码 先在MySQL命令行中输入如下语句查看结果: 只要character_set_client character_set_database ch ...

  10. javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...