Kendo ui 使用JSON和数据库从数据源填充网格。如何使parse:工作并创建一个新字段？

我正在使用javascript和剑道ui。 我有一个网格，并用 本地数据源 即：

然后创建一个网格：

// 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/数据库 因此，当我尝试将“date6”字段添加到“model:…fields:…”部分时 它抱怨Json/数据库中不存在“date6”字段

如果“model…”中没有“date6”字段，我就无法使用parse:代码来剥离 Sec和Ms

是否有其他方式填写“日期6” 不使用“parse:”，因此我不必将“date6”添加到“model:…fields:…”

---

部分？

您不必在

模型中定义
date6
，它应该可以很好地工作。问题是，您在
schema
中定义了
parse
，而当它应该在内部时，它实际上没有被调用

您的数据源定义应为：

    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;
        }
      }
    });

在这里检查它是否运行


$（文档）.ready（函数（）{
var dsDataSource=new kendo.data.DataSource({
数据：
[
{ // 1
标题：“星球大战：新希望”，
日期5：新日期（2001,8,8,21,46,0,0），//9/8/2001 09:46:00.000 PM
},
{ // 2
标题：“星球大战：帝国反击”，
日期5：新日期（2004,10,9,6,33,0,0），//11/9/2004 06:33:00.000 AM
},
{ // 3
标题：“星球大战：绝地归来”，
日期5：新日期（“2004/11/09 12:00 AM”），//11/9/2004 12:00:00.000 AM
},
{ // 4
标题：“星球大战：幽灵的威胁”，
日期5：新日期（2008,0,10,4,20,0,0），//1/10/2008 04:20:00.000 AM
},
{ // 5
标题：“星球大战：西斯的复仇”，
日期5：新日期（“2004/11/09 06:30 AM”），//11/9/2004 06:30:00.000 AM
}
],
模式：
{
型号：
{
id:“myGridID”，
领域：
{
标题：{type:“string”}，
date5:{type:“date”}，
date6:{type:“date”}，//字段不在上面的数据中
////但在下面的中生成
////解析：
}
},
//在中设置数据
//日期6至日期5 yyyy、MM、dd、HH、MM和剥离秒和毫秒
//这将使过滤器工作
//这将更改“数据”而不是“表示”，因此过滤器将工作
解析：函数（d）{
$。每个（d，函数（idx，元素）{
元素日期6=
新日期(
elem.date5.getFullYear（），//20yy
elem.date5.getMonth（），//一月到十二月的MM 00-11
elem.date5.getDate（），//dd 00-31
elem.date5.getHours（），//HH 00-23
elem.date5.getMinutes（）//mm 00-59
////第0节
////Ms 0
);
});
返回d；
}
}
});
$（“#网格”）.kendoGrid({
数据源：dsDataSource，
栏目：[
{字段：“标题”，标题：“标题”，宽度：“270px”}，
{字段：“date5”，标题：“d5”，宽度：“230px”，可过滤：false，格式：{0:MM/dd/yyyy hh:MM tt}，
{
//绑定到日期6（四舍五入），但显示日期5
字段：“date6”，
标题：“Date5DateTime（没有D6数据使用D5）”，
宽度：“330px”，
模板：“#：剑道.toString（日期5，'yyyy-MM-dd HH:MM:ss.fff'）#”
}
]
})
});


    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;
        }
      }
    });