2016-08-09 1 views
0

So bin ich ein Anfänger jsGrid mit einem Kalender Raster zu machen, die wie dieser http://i.stack.imgur.com/gU4V9.pngRichtiger Weg Datumsfelder in jsGrid schaffen

sieht ich die Header-Felder als solche erstellt haben:

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

Und dann ist das in der jsGrid selbst als solche initialisiert:

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

Abgesehen von allen Monaten mit 31 Tagen ich so das Gefühl, ein sehr nicht ist koscherer Weg dies zu tun, denn wenn ich eine Zelle an einem bestimmten Tag referenzieren möchte, ist es wie "item [17]", was so zweideutig ist, dass es sich anfühlt, als müsste es eine andere Ebene wie "item.day (17)" haben Es fällt mir schwer, herauszufinden, wie ich das anwenden kann.

Irgendwelche Gedanken?

+0

Nicht sicher ist das Problem klar. Wo und warum willst du auf einen Gegenstand wie 'item.day (17)' zugreifen? – tabalin

+0

Zum Beispiel übergibt die rowClick-Funktion ein Objekt-Array, das das Objekt "item" enthält, das alle Felder als name: title enthält. Das ist im Grunde nur 'Name: ada, 1: "", 2: "", 3: "" usw. ", und diese werden beim Aktualisieren und Einfügen als Serveranforderungsvariable gesendet. Ich weiß, dass ich die Tage in etwas wie "Tag1, Tag2" umbenennen kann, und auf sie durch selectedRow.item.day2 zugreifen kann, aber das fühlt sich irgendwie immer noch unvollständig an. Ich hatte gehofft, dass ich die Tage in ihrem eigenen Array im Item-Objekt bekommen könnte Ich dachte, das wäre der "richtige" Weg, es zu tun. Heh – Eirgunn

+0

Oh, tut mir leid, Mann, habe nicht gemerkt, dass du der Tabalin warst, aber ja, ich muss manchmal die Datumsspalten pro Zeile durchlaufen und es scheint klobig, dass ich bin Festlegen eines Offsets basierend auf dem Anfang und dem Ende im Raster und dann durch einfaches Durchlaufen der cellIndexes. Aber ich bin ziemlich neu und ich übertreibe wahrscheinlich Dinge, danke für die Antwort. – Eirgunn

Antwort

0

Arbeitsbeispiel jsgrid Datumsfeld

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

refference: http://jsfiddle.net/tabalinas/L6wbmvfo/

Verwandte Themen