jqGrid - "editable":"true" in der JSON-Antwort für grid-Spalten

Problem 1

Habe ich die Säulen-Modell als

{name:'fname',index:'fname', width:50, align:"center", resizable:false},
{name:'lname',index:'lname', width:50, align:"center", resizable:false},
{name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}

Wenn ich den jqGrid JSON-Antwort, um die Namen der Spalten, die jqGrid Datenzeilen sind leer, ohne Daten

{
    "rows":[
        {
            "id":"1",           
            "cell":{                
                "fname":"S",
                "lname":"K",
                "date":"11/11/2011"
            }
        }
    ],
    "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

Problem 2-ich habe versucht, hinzufügen "editierbar", innerhalb der Zelle definition (mit oder ohne den Namen der Spalten. Hier zeige ich die JSON Struktur mit den Spaltennamen.), jqGrid-Daten-Zeilen sind wieder leer

{
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": [
                    {
                        "date": "11/11/2011",
                        "editable": "true"
                    }
                ]
            }
        }
    ],
    "userdata": {
        "amount": 3220,
        "tax": 342,
        "total": 3564,
        "name": "Totals:"
    }
}

Die Zellen der Tabelle gezogen werden, aber jqGrid ist nicht Kommissionierung bis die JSON-Daten.

Was mache ich falsch?

jqGrid JSONReader

jQuery("#editjqGrid").jqGrid({
    url: "http://localhost/edit.json",
    datatype: "json",
    contentType: "application/x-javascript; charset=utf-8",
    colNames:['fname','lname', 'date'],
    colModel:[
        {name:'fname',index:'fname', width:50, align:"center", resizable:false},
        {name:'lname',index:'lname', width:50, align:"center", resizable:false},
        {name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}
    ],
    loadComplete: function (data) {     
        var item, i, l = data && data.rows.cell ? data.rows.cell.length : 0;
        for (i = 0; i < l; i++) {
            item = data.rows.cell[i];           
            if (item.editable === "false") {
                $("#" + item).addClass("not-editable-cell");
            }
        }
    }

});
jQuery("#editjqGrid").jqGrid('navGrid','#pager2',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});

UPDATE: Hinzufügen von inline-Optionen für die Bearbeitung einer bestimmten Zelle im JSON -

    {
        "rows": [
            {
                "id": "1",
                "cell": {
                    "fname": "S",
                    "lname": "K",
                    "date": {
                        "value": "11/11/2011",
                        "editable": "true",
                        "edittype":"input",
                        "editoptions":{
                             "size":"20",
                             "maxlength":"30"
                        }
                    }
                    "emptype":{
                        "editable":"true",
                        "edittype":"select",
                        "editoptions":{
                            "option":"Full Time",
                            "option":"Part Time",
                            "option":"Hourly"
                        }
                    }
                }
            }
        ],
        "userdata": {
            "amount": 3220,
            "tax": 342,
            "total": 3564,
            "name": "Totals:"
        }
    }

UPDATE 2: Nahm 'Zelle'

    {
        "rows": [
            {
                "id": "1",
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"input",
                    "editoptions":{
                        "size":"20",
                        "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "option":"Full Time",
                        "option":"Part Time",
                        "option":"Hourly"
                     }
                }
            }                
        ]
    }

UPDATE 3: wieder Hinzugefügt 'Zelle' und modifiziert die edittype und editoptions

       {
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"text",
                    "editoptions":{
                         "size":"20",
                         "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "value":"Full Time",
                        "value":"Part Time",
                        "value":"Hourly"
                    }
                }
            }
        }
    ]

loadComplete - 'nicht-editierbare-Zelle', die nicht arbeiten

loadComplete: function (data) {               
     var rowItem, x, l = data && data.rows ? data.rows.length : 0;           
     for (x = 0; x < l; x++) {  
    if (data.rows[x].cell.date.editable === "false") {
            $("#" + data.rows[x].id + "td[aria-describedby='editTimecard_date']").addClass("not-editable-cell");
    }
}

}

InformationsquelleAutor techlead | 2011-11-11
Schreibe einen Kommentar