本文体验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. 基于1.3.3版本tooltip的datagrid单元格tip实现

    基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...

  2. NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel

    NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...

  3. ExtJs GridPanel 给表格行或者单元格自定义样式

    Ext.onReady(function(){ Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'ema ...

  4. WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决

    原文:WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决 如下图,在凭证编辑窗体中,有的单元格不需要数字,但如果录入数字后再删除,会触发数字验证,单元格显示红色框线,导致不能执行 ...

  5. python excel单元格及样式

    python excel单元格及样式: #!/usr/bin/env python # -*- coding: utf-8 -*-” #只对当前文件的中文编码有效 # Filename : Write ...

  6. EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  7. WPF中修改DataGrid单元格值并保存

    编辑DataGrid中的单元格的内容然后保存是非常常用的功能.主要涉及到的方法就是DataGrid的CellEditEnding  和BeginningEdit .其中BeginningEdit 是当 ...

  8. WPF学习笔记(1):DataGrid单元格实现逐键过滤功能

    最近,开始学习WPF,其UI设计完全颠覆了传统的设计理念,为程序员提供了极大的自由发挥空间,让我为之惊叹,且为之着迷.然而,WPF在国内的热度却并不高,大部分贴子都是2012年以前的,出版的图书也很少 ...

  9. easyui datagrid 单元格编辑(cell editing)

    demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...

随机推荐

  1. 多线程 or I/O复用select/epoll

    1:多线程模型适用于处理短连接,且连接的打开关闭非常频繁的情形,但不适合处理长连接.线程模型默认情况下,在Linux下每个线程会开8M的栈空间,在TCP长连接的情况下,以2000/分钟的请求为例,几乎 ...

  2. select into的缺点

    当使用到select  *  into 表A  from 表 B时可以复制表的结构和数据,但是千万不要忘了给新表A添加主键和索引, 因为在使用select  into 时不会复制索引和主键,因此,当我 ...

  3. CentOS下编译安装python包管理安装工具pip教程

    ubuntu 安装pip 代码如下: apt-get install python-pip 安装requests, pip install requests 对于centos的,直接 yum inst ...

  4. 配置JDK-Java运行环境

    1.将Java安装包上传到服务器某目录,如E:\jdk-7u45-windows-x64.exe 2.上传后运行jdk-7u45-windows-x64.exe 3.点击[下一步],后选择[更改],改 ...

  5. java 基础类库之 SysFun

    /** * 将对象转为字符串:为空,则返回空字符串:而不是"null" * @param pObj 为空,则返回空字符串 * @return */ public static St ...

  6. 洛谷P2671 求和 [数论]

    题目传送门 求和 格式难调,题面就不放了. 分析: $ZYYS$的一道题. 很显然是大力推公式.我们分析一下题目,实际上限制条件就是:下标同奇偶且颜色相同的数,那么我们先拿这个公式$(x+z)*(nu ...

  7. hdu-4027线段树练习

    title: hdu-4027线段树练习 date: 2018-10-10 18:07:11 tags: acm 算法 刷题 categories: ACM-线段树 # 概述 这道线段树的题可以说是我 ...

  8. 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 ...

  9. CentOS日志的简单介绍

    在CentOS7中,系统的日志消息由两个服务负责处理:system-journald和rsyslog. (1).常见的日志及作用 /var/log目录里存放了一些特定于系统和服务的日志文件,由rsys ...

  10. 删除或修改eclipse中svn的账号密码

    由于eclipse没有自带的管理svn账号的功能,我也没有找到相关的插件,要是有朋友知道的话也可以跟我说下哦!以下是关于自己手动去删除eclipse 软件的 svn账号,以便切换项目的时候去更换svn ...