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. 同步调用异步方法how-would-i-run-an-async-taskt-method-synchronously

    同步调用异步方法帮助类: public static class AsyncHelpers { /// <summary> /// Execute's an async Task<T ...

  2. adb logcat查看某个进程的输出日志

    adb logcat查看某个进程的输出日志 adb logcat 默认是没有这个功能的,我实现了一个小bash函数,添加到你$HOME/.bashrc 文件中: # 作用:能够通过进程名显示log # ...

  3. Python连接Mssql

    此篇使用的是Python3.6 下载pymssql包 打开网址http://www.lfd.uci.edu/~gohlke/pythonlibs/ 用pip安装whl文件.在cmd中输入 pip in ...

  4. python使用requests发送application/json报文数据

    def client_post_jsondata_requests(request_url,requestJSONdata): #功能说明:发送json请求报文到指定的地址并获取请求响应报文 #输入参 ...

  5. redis出现错误：NOAUTH Authentication required.

    出现认证问题,应该是设置了认证密码,输入密码既可以啦 注意密码是字符串形式! 127.0.0.1:6379> auth "yourpassword" 127.0.0.1:63 ...

  6. redis（四）--简单实现Redis缓存中的排序功能

    在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发的应 ...

  7. Phpstorm 2018及2017.3.2激活码（DataGrip WebStorm 激活码）

    PhpStrom的下载地址:https://www.jetbrains.com/phpstorm/ 2018适应 最新版PhpStorm 2018正式版改进了PHP 7支持,改进代码完成功能. 直接用 ...

  8. CKFinker 2.5.0.1 去demo标示

    演示版会在文件浏览界面显示演示消息,分别是左下角(文件夹框下面)和列表框上部 都是通过修改ckfinder.js来实现 右下角标示: 查找: {if(C.getItem(E).rd("\x7 ...

  9. linux_rename命令用法

    rename在man中的解释为: NAME rename - rename files SYNOPSIS rename [options] expression replacement file... ...

  10. iOS之关于Architectures设置及Build Active Architecture Only编译设置

    一,前言 最近在帮朋友解决极光报错的提示:“file was built for archive which is not the architecture being linked (i386)”时 ...