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>

巴特西

EasyUI表格DataGrid格式化formatter用法

最新文章

热门文章