2016-12-08 2 views
0

Ich versuche, jsGrid in meinem MVC-Projekt zu verwenden, da der Client Inline-Bearbeitung und Filterung möchte. Allerdings kann ich nicht meine JSON-Quelle in die Tabelle laden. Meine js die Tabelle sieht aus wie so zu laden:jsGrid wird JSON-Daten nicht rendern

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

      filtering: true, 
      inserting: true, 
      editing: true, 
      sorting: true, 
      paging: true, 
      autoload: true, 

      pageSize: 10, 
      pageButtonCount: 5, 

      deleteConfirm: "Do you really want to delete client?", 

      controller: { 
       loadData: function (filter) { 
        return $.ajax({ 
         type: "GET", 
         url: "RICInstrumentCode/GetData", 
         data: filter, 
         dataType: "json" 
        }); 
       }, 

       insertItem: function (item) { 
        return $.ajax({ 
         type: "CREATE", 
         url: "/api/RICInsrumentCodeTable", 
         data: item, 
         dataType: "json" 
        }); 
       }, 

       updateItem: function (item) { 
        return $.ajax({ 
         type: "UPDATE", 
         url: "/api/RICInsrumentCodeTable/" + item.ID, 
         data: item, 
         dataType: "json" 
        }); 
       }, 

       deleteItem: $.noop 

       //deleteItem: function (item) { 
       // return $.ajax({ 
       //  type: "DELETE", 
       //  url: "/api/data/" + item.ID, 
       //  dataType: "json" 
       // }); 
       //} 
      }, 

      fields: [ 
       { name: "Code", type: "text", title: "RIC Instrument Code", width: 150 }, 
       { name: "Descr", type: "text", title:"RIC Instrument Code Description", width: 200 }, 
       { name: "RICInstrumentGroupId", type: "select", title: "RIC Instrument Group", items: countries, valueField: "Id", textField: "Name" }, 
       { name: "Active", type: "checkbox", title: "Is Active", sorting: true }, 
       { type: "control" } 
      ] 
     }); 

    }); 

Die loaddata ist, was ich gearbeitet habe.

und die JSON die aus get Daten zurückgegeben sieht so aus:

[{"Id":1,"Code":"test1","Descr":"first code test","RICInstrumentGroupId":2,"Active":true},{"Id":2,"Code":"APP","Descr":"Apples and bananas","RICInstrumentGroupId":4,"Active":true},{"Id":3,"Code":"1","Descr":"1","RICInstrumentGroupId":1,"Active":true},{"Id":4,"Code":"3","Descr":"3","RICInstrumentGroupId":3,"Active":false}] 

Bisher habe ich bestätigt, dass die Ajax feuert, änderte sich die Rückkehr meine Array-Titel, und dafür gesorgt, denen der Ruf entsprechen ist in gültigem JSON, was kann ich noch tun?

Ich kann nicht für das Leben von mir herausfinden, warum das nicht funktioniert. Jede Hilfe würde sehr geschätzt werden. Danke im fortgeschrittenen, Jaidon Rymer

+0

irgendwelche Konsolenfehler? – madalinivascu

+0

Keineswegs, was macht es schwer zu reparieren – jjr2000

+0

ist das Ajax-Triggering? – madalinivascu

Antwort

1

ich dumm wurde, Das Bit, das die Tischhöhe setzt zu 100% in einem div wurde eingestellt, die keine Höhe hatte, war dies verursacht die Tabelle Körper, um mit einer Höhe von 0px zu rendern, die Höheneigenschaft zu ändern, um es automatisch zu reparieren, weil die Daten dort entlang lang waren.

Danke für den Rat aber!

+0

Vielen Dank !! Ich hatte das genaue Problem, wurde verrückt !! – Francis

0

Ich weiß nicht, ob es erforderlich ist, aber wenn ich auf Demo-Beispiele (OData Service) schaue. Die Grid-Funktion loadData sieht etwas anders aus als Ihre.

loadData: function() { 
    var d = $.Deferred(); 

    $.ajax({ 
     url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products", 
     dataType: "json" 
    }).done(function(response) { 
     d.resolve(response.value); 
    }); 

    return d.promise(); 
} 

ist akzeptieren Versprechen eher als Ajax-Funktion. so meine, dass das Problem sein

Demo hier: http://js-grid.com/demos/