Cargando Flexigrid para jQuery con cadena JSON

Question

Estoy intentando cargar Flexigrid utilizando una cadena JSON devuelta por un servicio WCF.

Mi servicio tiene un método public string GetContacts(string CustomerID) y devuelve una cadena JSON.

Esa cadena JSON se crea a partir de un objeto List utilizando la clase System.Web.Script.Serialization.JavaScriptSerializer. Por lo tanto, mi objetivo es unir la cadena JSON a mi Flexigrid como objetos. Convierto el resultado del servicio web en objetos usando

var customer = eval("("+result+")"); 

El resultado es la cadena JSON que se devuelve del servicio. ¿Hay alguna manera de vincular los objetos del cliente con Flexigrid?

Answer 1

Flexigrid requiere un formato JSON como sigue en

EDITAR Gracias a EAMann para la actualización del formato.

total: (no of rec) 
page : (page no) 
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] }, 
     {cell: [ (col1 value) , (col2 value) ,.. ] }] 

con el fin de enlazar los datos a la red prefiero el envío de los datos a través del cable y después de formatearlo en el cliente, pero eso es sólo yo aquí está un ejemplo

function formatCustomerResults(Customers){ 

    var rows = Array(); 

    for (i = 0; i < Customers.length; i++) { 
     var item = Customers[i]; 

      //Do something here with the link 
     var link = "alert('opening item " + item.DealGuid + "');" 

     rows.push({ cell: [item.DealId, 
          item.Created, 
          item.CurrentStatus, 
          item.LastNote, 
          '<a href="javascript:void(0);" onclick="' + link + '" >view</a>'] 
    }); 
    } 

    return { 
     total: Customers.length, 
     page: 1, 
     rows: rows 
    }; 


}` 

y entonces todo lo que necesidad es

$("#FlexTable").flexAddData(formatCustomerResults(eval(data))); 

ps este último es la sintaxis de jQuery

Answer 2

Asegúrese de que usted tiene la dataT Opción ype establecida en json. respuesta

$('#gridContainer').flexigrid({ singleSelect: true, showToggleBtn: false, dataType: 'json' });

Answer 3

de almog.ori es casi perfecta. De hecho, así es como había construido cosas antes de intentar buscar la solución. Una excepción, sin embargo.

objeto JSON debe ser:

total: (no of rec), 
page : (page no), 
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] }, 
     {cell: [ (col1 value) , (col2 value) ,.. ] }] 

Si se descuida el formato de matriz del elemento rows, que va a terminar asfixia Flexigrid y lanzando todo tipo de errores. Pero he verificado que esto funciona impecablemente siempre que recuerde qué partes del script toman objetos JSON y qué partes toman arrays de objetos JSON.

Answer 4

Asegúrese también de que está utilizando el método HTTP correcta, por defecto es POST

utilizar Get:

$("#gridContainer").flexigrid({ 
    url: '/json/files.json', 
    method: 'GET', 
    dataType: 'json', 

...

Answer 5

Este es un mensaje más antiguo, pero pensé que agregaría otra forma de utilizar el excelente script proporcionado por almog.ori.

El OP dijo que sus datos estaban siendo devueltos por un servicio WCF. Si marca el estilo de cuerpo de contrato de operación como desnudo, puede usar la propiedad preProceso para agregar su función formatCustomerResults (u otra función) para cargar inicialmente la grilla.

De esta manera:

$("#gridContainer").flexigrid({ 
url: '/YourService.svc/..', 
method: 'GET', 
dataType: 'json', 
preProcess: formatCustomerResults, 
... 
}); 
function formatCustomerResults(data){ 
... 

Esperamos que esto ayude a alguien.

Answer 6

solución de preProceso por nameEqualsPNamePrubeGoldberg funciona perfecto.

Así es como se ve mi función personalizada para preProcess.

var rows = Array(); 
$.each(data.rows,function(i,row){ 
    rows.push({id:row.val1, cell:[row.val2,row.val3]}); 
}); 

return { 
     total:data.total, 
     page:data.page, 
     rows:rows 
}; 

Answer 7

total de tratar de hacer su primer elemento en la cadena JSON que como este.

`{"total" : 2,"page":1,"rows":[ {"cell" : ["226 CLAVEN LN", "312"]},{"cell" : ["1377 FAIRFAX PIKE","280"]}]}` 

Answer 8

creo que el último código flex rompió la solución usando preproceso.

 addData: function (data) { //parse data 

      if (p.dataType == 'json') { 
       data = $.extend({rows: [], page: 0, total: 0}, data); 
      } 
      if (p.preProcess) { 
       data = p.preProcess(data); 
      } 

Debe voltearlo para que el preProceso sea anterior al tipo JSON. De lo contrario, la función enumerada como respuesta no funciona correctamente.

Answer 9

que se recomienda seguir esta muestra para analizar su código JSON y hacer peticiones al servidor:

Paso 1: análisis sintáctico utilizando una función

function parsedForm(json) 
{ 
var h = ""; 

if (json.post.val1) 
    h += "<b>Value 1</b>: " + json.post.val1 + "<br />"; 

h += "<b>Value 2</b>: " + json.post.val2 + "<br />"; 
h += "<b>Value 3</b>: " + json.post.val3 + "<br />"; 

if (json.post.val4) 
    h += "<b>Value 4</b>: " + json.post.val4 + "<br />"; 

$('#fdata').empty().html(h); 
$('.formdata').slideDown(); 

return json; 
} 

Paso 2: El código de la vista Flexigrid

$("#flex1").flexigrid({ 
    url: 'post2.php', 
    dataType: 'json', 
    colModel : [ 
     {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, 
     {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, 
     {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, 
     {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, 
     {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} 
     ], 
    searchitems : [ 
     {display: 'ISO', name : 'iso'}, 
     {display: 'Name', name : 'name', isdefault: true} 
     ], 
    sortname: "iso", 
    sortorder: "asc", 
    usepager: true, 
    title: 'Countries', 
    useRp: true, 
    rp: 15, 
    showTableToggleBtn: true, 
    width: 700, 
    onSubmit: addFormData, 
    preProcess: parsedForm, 
    height: 200 
}); 

Paso 3: Additonally, puede validar o serializar los datos para solicitar el servidor

function addFormData(){ 
    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from 
    var dt = $('#sform').serializeArray(); 
    $("#flex1").flexOptions({params: dt}); 
    return true; 
} 


$('#sform').submit(function(){ 
    $('#flex1').flexOptions({newp: 1}).flexReload(); 
    return false; 
}); 

¡Espero que ayude!

Answer 10

Es viejo, lo sé ... Pero aquí es un ejemplo de JSON que funciona:

{ 
    "total": 5, 
    "page": "1", 
    "rows": [ 
     {"cell": [1, "asd", "dsa", "2013-07-30"]}, 
     {"cell": [2, "asd", "dsa", "2013-07-30"]}, 
     {"cell": [3, "asd", "dsa", "2013-07-30"]}, 
     {"cell": [4, "asd", "dsa", "2013-07-30"]}, 
     {"cell": [5, "asd", "dsa", "2013-07-30"]} 
    ] 
} 

(5 resultados en total, primera página (que no están basados ​​en cero); 5 líneas de datos , cada uno con {ID, "asd", "dsa", "una fecha"})