EasyUI表格DataGrid格式化formatter用法

时间：2023-02-21 19:43:05

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&lpar;后台传递常量自动转换值&rpar;

    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&lpar;数据表格&rpar;组件

    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. iOS coredata 数据库的加密（待研究）

    https://github.com/project-imas/encrypted-core-data 使用起来很方便,底层还是使用了SQLCipher,有时间要研究一下! 数据库的密码不能用固定字符 ...

  2. &lbrack;Beta&rsqb; postmortem

    设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决网站前端的数据处理以及获取问题,定义的很清楚,对于典型用户也比较清晰,因为主要只有一个用户,所以对于 ...

  3. ls常用参数

    ls常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 玩Linux的老司机们每天都要敲的命令,但是这个鸡蛋的命令还有很多中玩法哟~跟着我一起敲一遍吧!在这里我就列举几个常 ...

  4. 使用磁盘为Linux添加swap

    一．SWAP 说明 1.SWAP 概述 当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放 ...

  5. UVa 489 HangmanJudge --- 水题

    UVa 489 题目大意:计算机给定一个单词让你猜,你猜一个字母,若单词中存在你猜测的字母,则会显示出来,否则算出错, 你最多只能出错7次(第6次错还能继续猜,第7次错就算你失败),另注意猜一个已经猜 ...

  6. 20160408javaweb之JDBC ---PreparedStatement

    PreparedStatement 1.Sql注入:由于jdbc程序在执行的过程中sql语句在拼装时使用了由页面传入参数,如果用户恶意传入一些sql中的特殊关键字,会导致sql语句意义发生变化,这种攻 ...

  7. &lbrack;App&rsqb;Taste VS2015 &amp&semi;&amp&semi; Android Studio

    逆水飞 尝试进行各种Android开发工具的安装以及大致流程对比 几个疑惑的地方 1)根据SDK的描述,应该是一个新版本的推出就有对应的包里面包含多个文件那么对于:SDK Platform.APIs. ...

  8. Linux cpuinfo 详解

     在Linux系统中,如何详细了解CPU的信息呢? 当然是通过cat /proc/cpuinfo来检查了,但是比如几个物理CPU/几核/几线程,这些问题怎么确定呢? 经过查看,我的开发机器是1个物理C ...

  9. Jenkins slave image

    Add a new shell script configure_slave.sh as following: #!/bin/bash dnf -openjdk git wget openssh-se ...

  10. &lbrack;EXP&rsqb;Drupal &lt&semi; 8&period;5&period;11 &sol; &lt&semi; 8&period;6&period;10 - RESTful Web Services unserialize&lpar;&rpar; Remote Command Execution &lpar;Metasploit&rpar;

    ## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...

相关文章