使用JSON和数据库从dataSource填充的网格。如何进行解析：工作并创建一个新领域？

Question

我使用的是javascript和kendo ui。 我有一个网格并填充它 本地数据源 即：

var dsDataSource = new kendo.data.DataSource({
    data:
    [
        { // 1
        title: "Star Wars: A New Hope",
        date5: new Date(2001,8,8,21,46,0,0),    // 9/8/2001 09:46:00.000 PM
        },
        { // 2
        title: "Star Wars: The Empire Strikes Back",
        date5: new Date(2004,10,9,6,33,0,0),    // 11/9/2004 06:33:00.000 AM
        },
        { // 3
        title: "Star Wars: Return of the Jedi",
        date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
        },
        { // 4
        title: "Star Wars: The Phantom Menace",
        date5: new Date(2008,0,10,4,20,0,0),    // 1/10/2008 04:20:00.000 AM
        },
        { // 5
        title: "Star Wars: Revenge of the Sith",
        date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
        }
    ],
    schema:
    {
        model:
        {
            id: "myGridID",
            fields:
            {
                title: { type: "string"  },
                date5: { type: "date"    },
                date6: { type: "date"    }, // Field not in data: above
                //                          // but generated below in 
                //                          // parse:
            }
        },
    },
    // Set the data in 
    // date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
    // This will make the filter work
    // This changes the "data" instead of the "presentation" so the filter will work
    parse: function(d) {
        $.each(d, function(idx, elem) {
            elem.date6  = 
                new Date(
                    elem.date5.getFullYear(), // 20yy
                    elem.date5.getMonth(),    // MM 00 - 11 for jan to dec
                    elem.date5.getDate(),     // dd 00 - 31
                    elem.date5.getHours(),    // HH 00 - 23
                    elem.date5.getMinutes()   // mm 00 - 59
                    //                        // Sec 0
                    //                        // Ms  0
                );
        });
        return d;
    }

});

然后我创建一个网格：

// Createe a Kendo grid in DIV
$("#grid").kendoGrid({
    dataSource: dsDataSource,
    ...
    columns: [
        { field: "title", title: "Title"         , width: "270px" },
        { field: "date5", title: "D 5"           , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}", },
        {
            // Bind to date6 (rounded), but display date5
            field: "date6",
            title: "Date5DateTime (no D6 data uses D5)",
            width: "330px",
            template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #",
            filterable: { ui: DateTimeFilter },
            ...

        }
    ],
    ...

我让它工作，现在正将它集成到我们的生产应用程序中。

我遇到的问题是生产应用程序使用Json / database 所以当我尝试添加＆＃34; date6＆＃34;字段进入＆＃34;模型：...字段：...＆＃34;部分 它抱怨＆＃34; date6＆＃34;字段不存在于Json /数据库中。

没有＆＃34; date6＆＃34; ＆＃34;模型中的字段...＆＃34;我无法使用解析：代码剥离 Sec和Ms。

还有其他方法可以填写＆＃34; date6＆＃34; 不使用＆＃34;解析：＆＃34;所以我不必添加＆＃34; date6＆＃34;到＆＃34;模型：...字段：...＆＃34; 部？

Answer 1

您无需在date6中定义model，它应该可以很好地运行。问题是你在parse中定义schema时应该在里面然后它实际上不会被调用。

您的dataSource定义应为：

    var dsDataSource = new kendo.data.DataSource({
      data:
      [
        { // 1
          title: "Star Wars: A New Hope",
          date5: new Date(2001,8,8,21,46,0,0),    // 9/8/2001 09:46:00.000 PM
        },
        { // 2
          title: "Star Wars: The Empire Strikes Back",
          date5: new Date(2004,10,9,6,33,0,0),    // 11/9/2004 06:33:00.000 AM
        },
        { // 3
          title: "Star Wars: Return of the Jedi",
          date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
        },
        { // 4
          title: "Star Wars: The Phantom Menace",
          date5: new Date(2008,0,10,4,20,0,0),    // 1/10/2008 04:20:00.000 AM
        },
        { // 5
          title: "Star Wars: Revenge of the Sith",
          date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
        }
      ],
      schema:
      {
        model:
        {
          id: "myGridID",
          fields:
          {
            title: { type: "string"  },
            date5: { type: "date"    },
            date6: { type: "date"    }, // Field not in data: above
            //                          // but generated below in 
            //                          // parse:
          }
        },
        // Set the data in 
        // date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
        // This will make the filter work
        // This changes the "data" instead of the "presentation" so the filter will work
        parse: function(d) {
          $.each(d, function(idx, elem) {
            elem.date6  = 
              new Date(
              elem.date5.getFullYear(), // 20yy
              elem.date5.getMonth(),    // MM 00 - 11 for jan to dec
              elem.date5.getDate(),     // dd 00 - 31
              elem.date5.getHours(),    // HH 00 - 23
              elem.date5.getMinutes()   // mm 00 - 59
              //                        // Sec 0
              //                        // Ms  0
            );
          });
          return d;
        }
      }
    });

并在此处查看

$(document).ready(function() {
  var dsDataSource = new kendo.data.DataSource({
    data:
    [
      { // 1
        title: "Star Wars: A New Hope",
        date5: new Date(2001,8,8,21,46,0,0),    // 9/8/2001 09:46:00.000 PM
      },
      { // 2
        title: "Star Wars: The Empire Strikes Back",
        date5: new Date(2004,10,9,6,33,0,0),    // 11/9/2004 06:33:00.000 AM
      },
      { // 3
        title: "Star Wars: Return of the Jedi",
        date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
      },
      { // 4
        title: "Star Wars: The Phantom Menace",
        date5: new Date(2008,0,10,4,20,0,0),    // 1/10/2008 04:20:00.000 AM
      },
      { // 5
        title: "Star Wars: Revenge of the Sith",
        date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
      }
    ],
    schema:
    {
      model:
      {
        id: "myGridID",
        fields:
        {
          title: { type: "string"  },
          date5: { type: "date"    },
          date6: { type: "date"    }, // Field not in data: above
          //                          // but generated below in 
          //                          // parse:
        }
      },
      // Set the data in 
      // date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
      // This will make the filter work
      // This changes the "data" instead of the "presentation" so the filter will work
      parse: function(d) {
        $.each(d, function(idx, elem) {
          elem.date6  = 
            new Date(
            elem.date5.getFullYear(), // 20yy
            elem.date5.getMonth(),    // MM 00 - 11 for jan to dec
            elem.date5.getDate(),     // dd 00 - 31
            elem.date5.getHours(),    // HH 00 - 23
            elem.date5.getMinutes()   // mm 00 - 59
            //                        // Sec 0
            //                        // Ms  0
          );
        });
        return d;
      }
    }

  });

  $("#grid").kendoGrid({
    dataSource: dsDataSource,
    columns: [
      { field: "title", title: "Title"         , width: "270px" },
      { field: "date5", title: "D 5"           , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}" },
      {
        // Bind to date6 (rounded), but display date5
        field: "date6",
        title: "Date5DateTime (no D6 data uses D5)",
        width: "330px",
        template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #"
      }
    ]
  })
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div id="grid"></div>