easyui datagrid 中序列化后的日期格式化

1、在easyui datagrid 中序列化后的日期显示为:/Date(1433377800000)/

2、格式化后的显示为: 2015-06-04 08:30:00

3、使用代码如下:

3.1、

    <script type="text/javascript">
        $(function () {
            $("#tdList").datagrid({
                url: "/Admin/Dictionary/Index",
                title: "数据字典列表",
                loadMsg: ‘正在加载信息...‘,
                width: "100%",
                idField: "Id",
                fitColumns: true,
                pagination: true,
                pageSize: 10,
                pageList: [10, 20, 35, 50],
                singleSelect: true,
                rownumbers: true,
                columns: [[
						{ field: ‘ck‘, checkbox: true, align: ‘left‘, width: 50 },
                        { field: ‘Name‘, title: ‘名称‘, width: 120 },
						{ field: ‘DisOrder‘, title: ‘字典类别‘, width: 80 },
                        { field: ‘Description‘, title: ‘备注‘, width: 120 },
                        {
                            field: ‘UpdateTime‘, title: ‘最后更新时间‘, width: 80, align: ‘right‘,
                            formatter: function (value, row, index) {
                                var datetime = Common.formatterDateTime(value);

                                return datetime;
                            }
                        }

                ]],
                toolbar: [{
                    id: ‘add‘,
                    text: ‘添加‘,
                    iconCls: ‘icon-add‘,
                    handler: add
                }],
                onLoadSuccess: function (data) {
                    if (!data.rows) {
                        var body = $(this).data().datagrid.dc.body2;
                        body.find(‘table tbody‘).append(‘<tr><td width="‘ + body.width() + ‘" style="height: 25px; text-align: center;">没有数据</td></tr>‘);
                    }
                }
            });
        });

        function add(){
            $("#add").dialog({
                title: "添加数据字典类别",
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                width: 400,
                height: 260,
                buttons: [{
                    text: "保存",
                    iconCls: "icon-add",
                    handler: function () {
                        $("#add form").submit();
                    }
                }, {
                    text: "取消",
                    iconCls: "icon-cancel",
                    handler: function () {
                        $("#add").dialog("close");
                    }
                }]
            });
        };

    </script>

3.2、引用Common.js文件,Common.js内容如下:

var Common = {
    /**
     * 格式化日期(不含时间)
     */
    formatterDate: function (date) {
        if (date == undefined) {
            return "";
        }
        /*json格式时间转js时间格式*/
        date = date.substr(1, date.length - 2);
        var obj = eval(‘(‘ + "{Date: new " + date + "}" + ‘)‘);
        var date = obj["Date"];
        if (date.getFullYear() < 1900) {
            return "";
        }

        var datetime = date.getFullYear()
                + "-"// "年"
                + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
                        + (date.getMonth() + 1))
                + "-"// "月"
                + (date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate());
        return datetime;
    },
    /**
     * 格式化日期(含时间"00:00:00")
     */
    formatterDate2: function (date) {
        if (date == undefined) {
            return "";
        }
        /*json格式时间转js时间格式*/
        date = date.substr(1, date.length - 2);
        var obj = eval(‘(‘ + "{Date: new " + date + "}" + ‘)‘);
        var date = obj["Date"];
        if (date.getFullYear() < 1900) {
            return "";
        }

        /*把日期格式化*/
        var datetime = date.getFullYear()
                + "-"// "年"
                + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
                        + (date.getMonth() + 1))
                + "-"// "月"
                + (date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate()) + " " + "00:00:00";
        return datetime;
    },
    /**
     * 格式化去日期(含时间)
     */
    formatterDateTime: function (date) {
        if (date == undefined) {
            return "";
        }
        /*json格式时间转js时间格式*/
        date = date.substr(1, date.length - 2);
        var obj = eval(‘(‘ + "{Date: new " + date + "}" + ‘)‘);
        var date = obj["Date"];
        if (date.getFullYear() < 1900) {
            return "";
        }

        var datetime = date.getFullYear()
                + "-"// "年"
                + ((date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : "0"
                        + (date.getMonth() + 1))
                + "-"// "月"
                + (date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate())
                + " "
                + (date.getHours() < 10 ? "0" + date.getHours() : date
                        .getHours())
                + ":"
                + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
                        .getMinutes())
                + ":"
                + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
                        .getSeconds());
        return datetime;
    }
};

  

时间: 2024-10-23 01:58:00

easyui datagrid 中序列化后的日期格式化的相关文章

EasyUI DataGrid 中字段 formatter 格式化不起作用

今天用 EasyUI datagrid 来做列表,要对一些数据进行格式化,推断某字段状态时,发现 formatter 格式化相应的函数不起作用. <table id="list_data" title="未审核报表" class="easyui-datagrid" style="width: auto;height:350px;" url="" toolbar="#toolbar"

EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid中设置编辑单元格,获取编辑单元格,编辑单元格的onchange事件处理,通过当前光标所在编辑单元格获取所在行. 1. 设置编辑单元格 在列定义中增加editor属性,参数为type,options eg: {title:'上级分配额度',field:'assigned_amount_temp',wi

easyui datagrid中datetime字段的显示和增删改查问题

datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借助于formatter来格式化时间格式 { title: '活动开始时间', field: 'BeginTime', width: 300, editor: { type: 'datetimebox', options: { required: true }, formatter: function

JQuery easyUi datagrid 中 editor 动态设置最大值最小值

前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性,设置可以输入的最大值和最小值,但是这个是固定的,如下: [html] view plain copy {field:'workRate',title:'<%/*填报*/%><bean:message key="task.wo

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用

easyui datagrid中关联combox

datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: 'combobox', options: { valueField: 'id', textField: '要显示的字段名', url: '/Sys/SearchCodeInFunctionModel', } } <th data-options="field:'fShipCom',width:1

在easyui datagrid中formatter数据后使用linkbutton

http://ntzrj513.blog.163.com/blog/static/2794561220139245411997/ formatter:function(value,rowData,rowIndex){ if(value==""||value==null){ return "未知"; return rowData.cname+"<a class='easyui-linkbutton' data-options=\"iconCl

easyui datagrid中 formatter的用法

1.基本用法 单元格formatter(格式化器)函数,带3个参数: value:字段值. row:行记录数据. index: 行索引. $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });

easyui datagrid中如何展示图片

1 .Demo 只写了关键的代码,其他的属性自行添加. 首先引入easyui的js必要文件,然后Demo如下 HTML部分: <div id='box'><div> js部分: $('#box').datagrid({ columns:[[ { field: 'imgurl', title: '图片', align:'center', formatter:function(value,row,index){   //关键:格式化,并返回一个img标签 return '<img