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

所以我是使用jsGrid制作日历网格的初学者，看起来像这样
http://i.stack.imgur.com/gU4V9.png

我已经这样创建了标题字段：

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

然后在jsGrid本身中将其初始化为：

$("#jsGrid").jsGrid({
    ...
    fields: headerFields,
    ...
 }

除了有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 }
    ]
});

参考：http://jsfiddle.net/tabalinas/L6wbmvfo/

关于javascript - 在jsGrid中创建日期字段的正确方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38850708/