[转]Format a ui-grid grid column as currency
本文转自: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的更多相关文章
- NGUI UI Grid, two column
NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.
- kendo ui中grid页面参数问题
kendo ui 中grid 算是最长用的控件之一,当使用分页效果时,我们要传递分页参数与自己定义的参数如: var dataSource = new kendo.data.DataSource({ ...
- wx.grid.Grid
# -*- coding: cp936 -*- import wx import wx.grid import wx.lib.gridmovers as gridmovers import pymss ...
- wxPython控件学习之wx.grid.Grid 表格控件
wxPython控件学习之wx.grid.Grid (包括对GridCellEditor和GridCelRender的扩展,以支持更多的grid cell 样式, 以GridCellColorEdit ...
- Python3 tkinter基础 grid(row,column) 窗体的布局
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- kendo ui之grid列表
1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...
- Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
- Python Tkinter模块 Grid(grid)布局管理器参数详解
在使用Tkinter模块编写图像界面时,经常用到pack()和grid()进行布局管理,pack()参数较少,使用方便,是最简单的布局,但是当控件数量较多时,可能需要使用grid()进行布局(不要在同 ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
随机推荐
- WPF 卡顿调试经验
1. 问题 最近的一个项目,正常调试情况下,运行一切正常,但是有某个用户登录后,出现界面卡顿2-3mins后,才正常运行. 2.解决问题方法 (1)首先由于是必现问题,就想在vs的工作环境下调试一下, ...
- ceph 运维常用指令
集群 启动一个ceph 进程 启动mon进程 service ceph start mon.node1 启动msd进程 service ceph start mds.node1 启动osd进程 ser ...
- Problem I: GJJ的日常之玩游戏(GDC)
Contest - 河南省多校连萌(四) Problem I: GJJ的日常之玩游戏 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 107 Solve ...
- kali linux之无线渗透
无线技术变化大,难度大,既新鲜刺激,又压力山大.一半协议 一半理论 无线技术特点: 行业发展迅猛 互联网的重要入口 边界模糊 安全实施缺失而且困难 对技术不了解造成配置不当 企业网络私自接入ap破坏 ...
- 在PL/SQL里直接插入日期时提示 is not a valid date and time的解决方法
在PL/SQL Developer里直接往表里插入日期格式的数据时,经常会出现" is not a valid date and time"的错误,这是因为Oracle的日期格式和 ...
- day 08 课后作业
# -*- coding: utf-8 -*-# @Time : 2018/12/27 17:27# @Author : Endless-cloud# @Site : # @File : day 8课 ...
- day04 --class --homework
# -*- coding: utf-8 -*- # @Time : 2018/12/24 12:10 # @Author : Endless-cloud # @Site : # @File : 04 ...
- XCode7无证书真机调试教程
转载自http://altair21.com/156.html 前提条件: XCode版本>=7 1. 进入xcode,菜单栏选择xcode –> preferences (快捷键 com ...
- 解决Python向MySQL数据库插入中文数据时出现乱码
解决Python向MySQL数据库插入中文数据时出现乱码 先在MySQL命令行中输入如下语句查看结果: 只要character_set_client character_set_database ch ...
- javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...