Javascript 在jsGrid中创建日期字段的正确方法

我是一个初学者，使用jsGrid制作日历网格，如下所示

我已经创建了如下标题字段：

var headerFields = [{ 
    name: "name",
    title: "", type: "text", 
    width: 60 
}];

for(var i = 1; i <= 31; i++){
    headerFields[i] = { 
        name: String(i), 
        title: String(i), 
        type: "text", 
        width: 20, 
        sorting: false, 
        inserting: false
     };
}

headerFields.push({ type: "control", width: 24, editButton: false });

除了所有的月份都有31天之外，我觉得这是一种非常不符合犹太教义的方式，因为如果我想在某一天引用一个单元格，它就像“item[17]”一样完成，这是非常模糊的，感觉它应该有另一层，比如“item.day（17）”，但我很难弄清楚如何应用它

---

有什么想法吗？

jsgrid日期字段的工作示例

var db = {

    loadData: function(filter) {
        return $.grep(this.users, function(user) {
            return (!filter.Name || user.Name.indexOf(filter.Name) > -1);
        });
    },

    insertItem: function(item) {
        this.users.push(item);
    },

    deleteItem: function(item) {
        var index = $.inArray(item, this.users);
        this.users.splice(index, 1);
    }

};

window.db = db;

db.users = [
    {
        "Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
        "Name": "Prescott Griffin",
        "RegisterDate": "2011-02-22T05:59:55-08:00"
    },
    {
        "Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
        "Name": "Amir Saunders",
        "RegisterDate": "2014-08-13T09:17:49-07:00"
    },
    {
        "Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
        "Name": "Derek Thornton",
        "RegisterDate": "2012-02-27T01:31:07-08:00"
    },
    {
        "Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
        "Name": "Fletcher Romero",
        "RegisterDate": "2010-06-25T15:49:54-07:00"
    },
    {
        "Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
        "Name": "Thaddeus Stein",
        "RegisterDate": "2013-11-10T07:29:41-08:00"
    }
];

var MyDateField = function (config) {
    jsGrid.Field.call(this, config);
};

MyDateField.prototype = new jsGrid.Field({

    sorter: function (date1, date2) {
        return new Date(date1) - new Date(date2);
    },

    itemTemplate: function (value) {
        return new Date(value).toDateString();
    },

    insertTemplate: function (value) {
        return this._insertPicker = $("<input class='date-picker'>").datetimepicker();
    },

    editTemplate: function (value) {
        return this._editPicker = $("<input class='date-picker'>").datetimepicker();
    },

    insertValue: function () {
        return this._insertPicker.data("DateTimePicker").useCurrent();
    },

    editValue: function () {
        return this._editPicker.data("DateTimePicker").useCurrent();
    }
});

jsGrid.fields.date = MyDateField;

$("#jsGrid").jsGrid({
    height: "90%",
    width: "100%",

    inserting: true,
    filtering: true,
    editing: true,
    paging: true,

    autoload: true,

    controller: db,

    fields: [
        { name: "Account", width: 150, align: "center" },
        { name: "Name", type: "text" },
        { name: "RegisterDate", type: "date", width: 100, align: "center" },
        { type: "control", editButton: false }
    ]
});

var db={
loadData:函数（过滤器）{
return$.grep（this.users，函数（user））{
返回（！filter.Name | | user.Name.indexOf（filter.Name）>-1）；
});
},
插入项：函数（项）{
此.users.push（项目）；
},
deleteItem：函数（项）{
var index=$.inArray（项，this.users）；
本.用户.拼接（索引，1）；
}
};
window.db=db；
db.users=[
{
“账户”：“D89FF524-1233-0CE7-C9E1-56EFF017A321”，
“姓名”：“普雷斯科特·格里芬”，
“注册日期”：“2011-02-22T05:59:55-08:00”
},
{
“账户”：“06FAAD9A-5114-08F6-D60C-961B2528B4F0”，
“姓名”：“阿米尔·桑德斯”，
“注册日期”：“2014-08-13T09:17:49-07:00”
},
{
“账户”：“EED7653D-7DD9-A722-64A8-36A55ECDBE77”，
“姓名”：“德里克·桑顿”，
“注册日期”：“2012-02-27T01:31:07-08:00”
},
{
“账户”：“2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6”，
“姓名”：“弗莱彻·罗梅罗”，
“注册日期”：“2010-06-25T15:49:54-07:00”
},
{
“账户”：“3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286”，
“姓名”：“Thaddeus Stein”，
“注册日期”：“2013-11-10T07:29:41-08:00”
}
];
var MyDateField=函数（配置）{
jsGrid.Field.call（this，config）；
};
MyDateField.prototype=新的jsGrid.Field({
分拣机：功能（日期1、日期2）{
返回新日期（日期1）-新日期（日期2）；
},
itemTemplate:函数（值）{
返回新日期（值）.toDateString（）；
},
insertTemplate:函数（值）{
返回此值。_insertPicker=$（“”）。datetimepicker（）；
},
editTemplate:函数（值）{
返回此值。_editPicker=$（“”）。datetimepicker（）；
},
insertValue:函数（）{
返回此值。_insertPicker.data（“DateTimePicker”）.useCurrent（）；
},
editValue:函数（）{
返回此值。_editPicker.data（“DateTimePicker”）.useCurrent（）；
}
});
jsGrid.fields.date=MyDateField；
$（“#jsGrid”）.jsGrid({
身高：“90%”，
宽度：“100%”，
插入：对，
过滤：对，
编辑:对,，
是的，
自动加载：对，
控制器：db，
字段：[
{名称：“帐户”，宽度：150，对齐：“中心”}，
{name:“name”，键入：“text”}，
{name:“RegisterDate”，类型：“date”，宽度：100，对齐：“center”}，
{类型：“控件”，编辑按钮：false}
]
});

---

参考资料：

如果您使用的是Moment，这对我很有用：

        var DateField = function (config) {
            jsGrid.Field.call(this, config);
        };

        DateField.prototype = new jsGrid.Field({
            sorter: function (date1, date2) {
                return moment(date1) - moment(date2);
            },
            itemTemplate: function (value) {
                return moment(value).locale('en').format('YYYY-MM-DD HH:mm:ss');
            },
        });

        jsGrid.fields.date = DateField;

---

我只是忽略了编辑和插入函数，因为我不需要它们。

不确定，问题很明显。您希望在何处以及为什么访问诸如

item.day（17）

之类的项目？例如，rowClick函数传递一个对象数组，其中包含“item”对象，该对象包含名称：title等所有字段。这基本上就是“name:ada，1:”，2:”，3:“…等”，它们在更新和插入时作为服务器请求变量发送。我意识到我可以将日期重命名为“day1，day2”，并通过selectedRow.item.day2访问它们，但不知何故，这仍然感觉不完整。。我希望我能在物品对象中把这些天放到他们自己的数组中，我想这是“正确”的方法hehOh抱歉，伙计，我没意识到你是tabalin，但是，是的，我有时必须循环每行的日期列，我根据它在网格中的开始和结束位置设置偏移量，然后循环遍历单元格索引，这似乎很笨拙。但我是个新手，我可能把事情搞得太复杂了，谢谢你的回答。

        var DateField = function (config) {
            jsGrid.Field.call(this, config);
        };

        DateField.prototype = new jsGrid.Field({
            sorter: function (date1, date2) {
                return moment(date1) - moment(date2);
            },
            itemTemplate: function (value) {
                return moment(value).locale('en').format('YYYY-MM-DD HH:mm:ss');
            },
        });

        jsGrid.fields.date = DateField;