datagrid单元格格式化样式化
本文体验datagrid单元格的格式化和样式化。
datagrid显示的DOM结构
<td field="code">
<div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code">
文字
</div>
</td>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
field属性对应字段.
div中的内容对应单元格内容。
formatter的用法
field: 'UserStatus', title: '状态', formatter: function (value, row, index) {
if (value == "0") {
return '启用';
} else {
return '禁用';
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
□ 日期格式化
field: 'SubTime', title: '注册时间', formatter: function (value, row, index) {
return eval("new " + value.substr(1, value.length - 2)).toLocaleDateString();
}
styler的用法
styler: function(value, row, index){
if (value == "1") {
return 'background-color:red;';
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
datagrid单元格格式化样式化的更多相关文章
- 基于1.3.3版本tooltip的datagrid单元格tip实现
基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...
- NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel
NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...
- ExtJs GridPanel 给表格行或者单元格自定义样式
Ext.onReady(function(){ Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'ema ...
- WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决
原文:WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决 如下图,在凭证编辑窗体中,有的单元格不需要数字,但如果录入数字后再删除,会触发数字验证,单元格显示红色框线,导致不能执行 ...
- python excel单元格及样式
python excel单元格及样式: #!/usr/bin/env python # -*- coding: utf-8 -*-” #只对当前文件的中文编码有效 # Filename : Write ...
- EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本
nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...
- WPF中修改DataGrid单元格值并保存
编辑DataGrid中的单元格的内容然后保存是非常常用的功能.主要涉及到的方法就是DataGrid的CellEditEnding 和BeginningEdit .其中BeginningEdit 是当 ...
- WPF学习笔记(1):DataGrid单元格实现逐键过滤功能
最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...
- easyui datagrid 单元格编辑(cell editing)
demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...
随机推荐
- 多线程 or I/O复用select/epoll
1:多线程模型适用于处理短连接,且连接的打开关闭非常频繁的情形,但不适合处理长连接.线程模型默认情况下,在Linux下每个线程会开8M的栈空间,在TCP长连接的情况下,以2000/分钟的请求为例,几乎 ...
- select into的缺点
当使用到select * into 表A from 表 B时可以复制表的结构和数据,但是千万不要忘了给新表A添加主键和索引, 因为在使用select into 时不会复制索引和主键,因此,当我 ...
- CentOS下编译安装python包管理安装工具pip教程
ubuntu 安装pip 代码如下: apt-get install python-pip 安装requests, pip install requests 对于centos的,直接 yum inst ...
- 配置JDK-Java运行环境
1.将Java安装包上传到服务器某目录,如E:\jdk-7u45-windows-x64.exe 2.上传后运行jdk-7u45-windows-x64.exe 3.点击[下一步],后选择[更改],改 ...
- java 基础类库之 SysFun
/** * 将对象转为字符串:为空,则返回空字符串:而不是"null" * @param pObj 为空,则返回空字符串 * @return */ public static St ...
- 洛谷P2671 求和 [数论]
题目传送门 求和 格式难调,题面就不放了. 分析: $ZYYS$的一道题. 很显然是大力推公式.我们分析一下题目,实际上限制条件就是:下标同奇偶且颜色相同的数,那么我们先拿这个公式$(x+z)*(nu ...
- hdu-4027线段树练习
title: hdu-4027线段树练习 date: 2018-10-10 18:07:11 tags: acm 算法 刷题 categories: ACM-线段树 # 概述 这道线段树的题可以说是我 ...
- Could not open JDBC Connection for transaction; nested exception is org.apache.commons.dbcp.SQLNestedException: Cannot create PoolableConnectionFactory (Could not create connection to database server.
报错信息:Could not open JDBC Connection for transaction; nested exception is org.apache.commons.dbcp.SQL ...
- CentOS日志的简单介绍
在CentOS7中,系统的日志消息由两个服务负责处理:system-journald和rsyslog. (1).常见的日志及作用 /var/log目录里存放了一些特定于系统和服务的日志文件,由rsys ...
- 删除或修改eclipse中svn的账号密码
由于eclipse没有自带的管理svn账号的功能,我也没有找到相关的插件,要是有朋友知道的话也可以跟我说下哦!以下是关于自己手动去删除eclipse 软件的 svn账号,以便切换项目的时候去更换svn ...