zoukankan html css js c++ java

EasyUI学习-----表格DataGrid格式化formatter用法

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="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: '学生姓名',
                                 80
                            },
                            {
                                field: 'stuAge',
                                title: '学生年龄',
                                 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="300px;height:250px"></table>
    </body>

</html>

查看全文

相关阅读:
python 发送邮件 email
python 日志 logging
python 判断当前环境是什么系统 platform 模块
 pandas to_excel 添加颜色
 Pandas excel 双标题多级索引层次化索引 MultiIndex
windows10 安装 pyltp python3.6
Python的内存管理
 pandas 中 DataFramt 改变列的顺序
 元组
 基本语法

原文地址：https://www.cnblogs.com/fengfuwanliu/p/10489157.html