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="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>

 

转载于:https://www.cnblogs.com/fengfuwanliu/p/10489157.html

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值