个人中心
gpt4 book ai didi

javascript - 在 Kendo Grid 中过滤/排序 DateTime 列

转载 作者：行者123 更新时间：2023-11-30 10:17:15 25 4
gpt4 key购买 nike

我的 Kendo Grid 中有一个日期时间列。值如下所示:2014-04-11 12:43:41.720

在我的网格中，我更改了模板以仅将它们显示为短日期:04/11/2014

我不只是将数据发送到预先格式化的列的原因是因为我希望在排序时考虑时间。我现在的问题是，在过滤时，特别是在执行“等于”过滤时，如果我从日期选择器中选择 4/11/2014，它不会显示任何结果，因为时间默认为 12:00:00.00。

无论如何我可以根据文本而不是值进行过滤吗？或者我可以将预格式化的日期发送到网格并让排序使用不同的字段吗？

我专栏的 JS 片段:

columns: [
    { 
      field: "CREATEDATE",
      title: "Created",
      width: 78,
      template: '#= kendo.toString(kendo.parseDate(CREATEDATE, "yyyy-MM-dd"), "MM/dd/yyyy") #',
      filterable: true,
      attributes: { style: "text-align:center;" }
    }
]

最佳答案

Telerik 论坛有一个 example of this here下载。

为方便起见，我将粘贴他们创建的代码。该示例的下三分之一包含劫持内置 Kendo 过滤器操作所需的 javascript/jquery，并允许您提供自己的处理。

基本上，您必须使用您感兴趣的日期部分构建一个新的日期对象，即。日、月、年。

<html>
<head>
    <title>Dynamically change date format</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>

    <input id="dropDownList"></input>
    <br />
    <div id="grid"></div>

    <script>
        var sampleData = [
            { name: "John", date: new Date("October 13, 2012 11:13:00")},
            { name: "Lisa", date: new Date("March 18, 2012 07:13:00")},
            { name: "Jack", date: new Date("September 28, 2011 12:28:43")},
            { name: "Maria", date: new Date("May 28, 2012 11:13:00")},
            { name: "Steven", date: new Date("May 31, 2012 07:13:00")},
            { name: "Bob", date: new Date("September 02, 2012 12:28:43")}
        ];

        var flag = 1;

        function formatDate(date) {
            switch(flag)
            {
                case 1:
                    return kendo.toString(date, "g");
                case 2:
                    return kendo.toString(date, "d");
                case 3:
                    return kendo.toString(date, "Y");
                default:
                    return kendo.toString(date, "F");
            }
        }

        $("#dropDownList").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Weekly", value: "1" },
                { text: "Monthly", value: "2" },
                { text: "Yearly", value: "3" }
            ],
            index: 0,
            change: function(e) {
                flag = parseInt(this.value());
                console.log(flag);
                $("#grid").data("kendoGrid").refresh();
            }
        });

        $("#grid").kendoGrid({
            dataSource: {
                data: sampleData,
                schema: {
                    model: {
                        fields: {
                            name: { type: "string" },
                            date: { type: "date" }
                        }
                    }
                }
            },
            columns: [
                { field: "name", title: "Name" },
                { field: "date", title: "Date" , template: "#= formatDate(date) #"}
            ],
            filterable: true
        });

        $(document).ready(function() {
            $("th[data-title=Date]")
                .data("kendoFilterMenu")
                    .form.find("button[type=submit]")
                        .click(function(e) {
                            //gets filter type
                            var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
                            //if filter is "Is equal to"
                            if(filterType == "eq") {
                                e.preventDefault();
                                //gets the datePicker input date
                                var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();
                                //create a filter
                                $("#grid").data("kendoGrid").dataSource.filter({
                                    field: "date",
                                    //create custom filter operator
                                    operator: function(fieldDate) {

                                        var parsedSelectedDate = kendo.parseDate(selectedDate);
                                        //parse the field date in order to ignore the time
                                        var parsedFieldDate = new Date(fieldDate.getFullYear(),  fieldDate.getMonth(), fieldDate.getDate());
                                        var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());

                                        return result;

                                    },
                                    value: selectedDate
                                });
                                //close filter window
                                $("th[data-title=Date]").data("kendoFilterMenu").popup.close();
                            }
                            console.log("filter"); 
                        });
        });
    </script>
</body>
</html>

关于javascript - 在 Kendo Grid 中过滤/排序 DateTime 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23141300/

25 4 0
文章推荐： java - 仅当相似项目不在列表中时才将项目添加到 ArrayList
文章推荐： java - 使用 Java 修改 XML 文件
文章推荐： javascript - Mootools Fx.Slide 和 CSS 样式？
文章推荐： javascript - php脚本执行倒计时
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com