1.通过HTML标签创建数据表格时使用formatter

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">

        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>

        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

        <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                var data = {

                    "rows": [{

                        "stuName": "李斯",

                        "stuAge": 23

                    }, {

                        "stuName": "白起",

                        "stuAge": 25

                    }],

                    "total": 2

                }

                $('#tt').datagrid('loadData',data);

            })                        

            //value：字段值；row：行记录数据；index: 行索引

            function formatPrice(value,row,index) {

                if(value>=20){

                    return '<span style="color:blue;">' + value + '</span>';

                }

            }

        </script>

    </head>

    <body>

        <table id="tt" title="studentInfo" class="easyui-datagrid" style="width:300px;height:250px">

            <thead>

                <tr>

                    <th field="stuName" width="80">学生姓名</th>

                    <th field="stuAge" width="80" formatter="formatPrice">学生年龄</th>

                </tr>

            </thead>

        </table>

    </body>

</html>

2.通过JS创建数据表格时使用formatter

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">

        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">

        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>

        <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

        <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                var data = {

                    "rows": [{

                        "stuName": "李斯",

                        "stuAge": 23

                    }, {

                        "stuName": "白起",

                        "stuAge": 25

                    }],

                    "total": 2

                }

                $("#tt").datagrid({

                    columns: [

                        [{

                                field: 'stuName',

                                title: '学生姓名',

                                width: 80

                            },

                            {

                                field: 'stuAge',

                                title: '学生年龄',

                                width: 80,

                                formatter: function(value, row, index) {

                                    if(value >= 20) {

                                        return '<span style="color:blue;">' + value + '</span>';

                                    }

                                }

                            }

                        ]

                    ]

                }).datagrid('loadData', data);

            })

        </script>

    </head>

    <body>

        <table id="tt" title="studentInfo" style="width:300px;height:250px"></table>

    </body>

</html>

EasyUI表格DataGrid格式化formatter用法的更多相关文章

  1. easyui之datagrid之formatter(后台传递常量自动转换值)

    1,datagrid之formatter formatter格式化函数有三个参数: value:字段值(一般为后台传递给前台的值): row:当前行数据: index:当前行索引. return值是显 ...

  2. EasyUI中datagrid的基本用法

    EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图

  3. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

  4. EasyUI表格DataGrid获取数据的方式

       第一种方式:直接返回JSON数据 package com.easyuijson.util; import java.text.SimpleDateFormat; import net.sf.js ...

  5. easyUI中 datagrid 格式化日期

    $('#List').datagrid({ url: '@Url.Action("GetList")', width:SetGridWidthSub(10), methord: ' ...

  6. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  7. EasyUI 的DataGrid中DateTime的格式化问题

    想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图) 在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们 ...

  8. easyUI的datagrid表格的使用

    实现easyUI表格的里面数据的增删改查功能.SQL使用Oracle和mybatis. 话不多说,直接上代码. 首先是前段部分的. var session = GetSession(); var pa ...

  9. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. Thinkphp5.1 模板路径报错

    版本:5.1.24   ,windows环境 报错: 模板文件不存在:template\index\default\index\index.html 1.报错原因:linux/windows   对大 ...

  2. UEditor在asp.netMVC4中的使用，包括上传功能，粘贴表格不显示边框问题

    网页编程中在线编辑器的使用还是很重要的,最近研究了一下百度出的UEditor编辑器,把它结合到刚学的asp.netMVC+EF中,同时实现上传资料(包括图片,视频等)功能,下面就以一个最简单的新闻管理 ...

  3. Nginx 配置参数详解

    #定义Nginx运行的用户和用户组 user www www;   #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8;   #全局错误日志定义类型,[ debu ...

  4. 【目录】Docker 基本操作

    1 容器基本操作 : https://www.cnblogs.com/defineconst/p/9990611.html 2 容器启动退出 : https://www.cnblogs.com/def ...

  5. 异常处理与MiniDump 用于投放市场c++异常捕获

    最近一段时间,新上线的软件在外场偶尔会出现异常崩溃的情况.由于试用范围比较分散,很难一一前往现场定位问题.而传统的log日志方法,在崩溃的情况下,并不能比较准确的表示出问题位置,这使得软件调试进程缓慢 ...

  6. Spring的事务管理基础知识

    1.数据库事务基础知识     1)数据库事务有严格的定义,它必须同时满足4个特性:原子性(Atomic).一致性(Consistency).隔离性(Isolation)和持久性(Durability ...

  7. mybatis07--关联查询一对多

    案例   查询国家的同时,查询出国家下的省会信息! 01.使用单表的连接查询 创建对应的实体类 和数据库表 /** * *国家的实体类 */ public class Country { privat ...

  8. 【Java线程安全】 — ThreadLocal

    [用法] 首先明确,ThreadLocal是用空间换时间来解决线程安全问题的,方法是各个线程拥有自己的变量副本. 既然如此,那么是涉及线程安全,必然有一个共享变量,我给大家声明一个: public c ...

  9. python argparse sys.argv

    python argparse sys.argv class WeiLearningArgumentParser(argparse.ArgumentParser): def __init__(self ...

  10. linux中的cd

    cd命令 实例 hling@hling:~$ cd /home/hling/桌面/huanghling@hling:~/桌面/huang$ cd ..hling@hling:~/桌面$ cd ..hl ...