来自MySQL sql查询的kendo-ui网格日期格式

时间:2013-10-03 16:59:04

标签: php mysql datetime kendo-ui kendo-grid

我在这里查看了类似的查询,但没有一个完整地回答我的问题,或者以我能理解的方式回答。

我从代表日期时间的MySQL数据库中检索字符串值,即“03 Oct,2013 05:30:45 PM”在数据库中表示为“20131003173045”。此值显示在Kendo网格的“上次登录”列中作为日期。这都包含在使用MVC框架的面向PHP的网页中。

之前我在SQL查询中应用了日期格式,将字符串从“20131003173045”更改为“2013年10月3日05:30:45”,但这会在KendoGrid中显示为字符串,这意味着11月日期会出现在十月日期之前,四月日期首先出现等等。这可以理解为不是所需的功能,特别是在尝试按此列排序时。

呈现KendoGrid的页面的示例代码:

<div class="div1">
    <div>
        <table id="listGrid"></table>
    </div>
</div>

<script>
    $(function() {
        $("#grid").kendoGrid({
            scrollable: false,
            groupable: false,
            sortable: {
                mode: "multiple"
            },
            resizable: true,
            pageable: true,
            dataSource:
            {
                transport:
                {
                    read:  {
                        url: "<?= $site_url ?>Settings/Users/List",
                        dataType: "json"
                    },
                    parameterMap: function (model, operation) {
                        if (operation == "read") {
                            return model;
                        }                            
                        else if(model) {
                            return { "json" : kendo.stringify(model) };
                        }
                        else
                            return "";
                    }                    
                },
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                sort: { field: "LastLogin", dir: "desc" },
                serverGrouping: true,
                serverAggregates: false,
                schema: {
                  total: "total",
                  data: "data",
                  groups: "groups"
                }
            },

            toolbar: [ { title: "", template:'<a class="k-button k-button-icontext k-grid-add" href="<?= $site_url ?>Settings/Users/Add/">Add New User</a>' }],
            columns: [
                //{field: "Id", width: "40px"},
                {field: "UserName", title: "Alias", width: "160px"},
                {field: "ForeName", title: "Forename", width: "100px"},
                {field: "SurName", title: "Surname", width: "160px"},
                {field: "Initials", width: "80px"},
                {field: "CrmId", title: "CRM ID", width: "100px"},
                {field: "Dept", title: "Department", width: "100px"},
                {field: "Position"},
                // Below is the field in question
                {field: "LastLogin", title: "Last Login", width: "160px"}, 
                {field: "BlockedStatus", title: "Status", width: "90px"},
                { title: "", template:'<a class="k-button k-button-icontext k-grid-edit" href="<?= $site_url ?>Settings/Users/Update/#: Id #">Edit</a>' }
            ]
        });
    });
</script>

我查看了kendo.parseDate和kendo.toString,并将两者结合起来,但似乎无法正常工作;我得到“null”或“20131003173045”,或者页面没有加载。

我无法更改数据库数据,我只能将其格式化为SQL查询的一部分,这是我最初所做的。

我需要将整个“20131003173045”字符串变为“2013年10月3日05:30:45”,并且仍按正确的时间顺序排序 - 我该怎么做,如果是kendo.parseDate和kendo.toString是正确的工具,我做错了什么?

1 个答案:

答案 0 :(得分:0)

我建议实现一个schema.parse函数,将MySQL格式转换为Date对象,然后使用columns.format进行格式化。

架构将是:

schema  : {
    data  : "data",
    total : "total",
    groups: "groups",
    parse : function (d) {
        $.each(d.data, function (idx, elem) {
            elem.LastLogin = kendo.parseDate(elem.LastLogin, "yyyyMMddHHmmss");
        });
        return d;
    }
}

现在,用于打印日期的列定义将定义您想要的format

{field: "LastLogin", title: "Last Login", width: "160px", format: "{0:dd MMM, yyyy hh:mm:sstt}" }},