jqGrid, cómo llenar la lista de selección de la consulta

Question

Obtuve una jqGrid básica trabajando en mi proyecto de fusión en frío. Uno de mis campos en jqGrid es un cuadro combinado. Actualmente, los valores de editoption están codificados como en el siguiente.

colModel : 
[ 
    { 
    name:'seqnum',index:'seqnum', width:100,resizable:true, 
    align:"left",sorttype:"text",editable:true,edittype:"select",editoptions: 
    { value:"1:one;2:two"},editrules:{required:true} 
    } 
] 

Estoy tratando de encontrar una forma de llenar el menú desplegable de una consulta/url.

Cualquier ayuda sería muy apreciada.

Gracias de antemano

Answer 1

crear una función que utiliza JSON para consultar la URL. Esta función debería devolver una cadena en el formato "1: uno; 2: dos".

Por ejemplo:

colModel : 
    [ 
     { 
     name:'seqnum',index:'seqnum', width:100,resizable:true, 
     align:"left",sorttype:"text",editable:true,edittype:"select",editoptions: 
     { value:getSequenceNumbers()},editrules:{required:true} 
     } 
    ] 

    function getSequenceNumbers(){ 
     $.getJSON("yourUrl", null, function(data) { 
      if (data != null) { 
       //construct string. 
       //(or the server could return a string directly) 
      } 
     }); 
    } 

supongo que se podría poner la función en línea, así, pero creo que sería más difícil de leer.

Answer 2

Use dataUrl ... (see the wiki here).

Actualmente dataUrl genera un GET pero si uno extrae el código de Github, el GET puede ser un cambio a un POST sin efectos secundarios aparentes.

Answer 3

La respuesta $ .getJSON/getSequenceNumbers() no funciona como se muestra. No hay forma de devolver datos de una devolución de llamada como el valor de retorno para getSequenceNumbers() porque la devolución de llamada es asincrónica. O necesita usar el método dataURL sugerido por Martin o configurar el jqGrid dentro de la devolución de llamada $ .getJSON.

$(document).ready(function() { 
$.getJSON("GetURL", function(data) { 
    setupGrid(data); 
}); 
}); 

function setupGrid(data) { 
... 
    colModel : 
    [ 
     { 
     name:'seqnum',index:'seqnum', width:100,resizable:true, 
     align:"left",sorttype:"text",editable:true,edittype:"select",editoptions: 
     { value:data},editrules:{required:true} 
     } 
    ] 

... 
} 

Answer 4

Vale la pena señalar que puede eludir el problema por completo si está utilizando un lenguaje de scripting del lado del servidor. Por ejemplo con PHP puede utilizar

{name:'myselectdata', index:'myselectdata', width:160, formatter:'select', editable:true, edittype:"select", cellsubmit:"clientArray", editoptions:{ <? echo getData() ?>} }, 

A continuación, sólo ajustar la función de PHP getData() más arriba de la página para devolver una cadena adecuado, por ejemplo

'value:"1:one;2:two"'; 

Tal vez no tan elegante o tan portátil como manejando todo en jQuery, pero conceptualmente más fácil, creo.

Answer 5

supongamos que en su ColModel tiene una columna así:

{name:'id_UDM', index:'id_UDM', width:150, editable:true, edittype:"select", editoptions:{dataUrl:'filename.php'}} 

primero debe declarar que es un elemento de selección con esto:

edittype:"select" 

Luego, en el parámetro editoptions añadir un dataUrl como este:

editoptions:{dataUrl:'filename.php'} 

El filename.php debe devolver un elemento "select" con sus opciones, he aquí un ejemplo:

<?php 
    include("connectionToMyDatabase.php"); 
    $query1 = "SELECT * FROM table WHERE 
    $result1 = mysql_query($query1); 
    $response ='<select>'; 
    while($row = mysql_fetch_array($result1)) { 
     $response .= '<option value="'.$row['value'].'">'.$row['name'].'</option>'; 
    } 
    $response .= '</select>'; 

    echo $response; 

mysql_close($db); 
?> 

Espero que esto ayude.

Answer 6

Sé que esta es una pregunta anterior, pero he encontrado el mismo problema.
Resuelvo esto mediante la combinación de dataUrl y ajaxSelectOptions.

colModel:[ 
    //class_id 
    $.extend(true, 
    { 
     name:'class_id' 
     ,index:'class_id' 
     ,edittype:'select' 
     ,formatter:'select' 
     ,editoptions: { dataUrl:"db.php?ajaxOp=getClassesOptions" } //to send dynamic parameter, combine with ajaxSelectOptions 
    } 
    ,{} 
    ) 

Tenga en cuenta que la cadena DataURL son estáticos, significa que no puede enviar diferentes parámetros cada vez que añadir/editar ocurre. ¡El código siguiente NO FUNCIONARÁ!

,editoptions: { dataUrl:"db.php?ajaxOp=getClassesOptions" + "&id="+selected_id } 

Para enviar parámetros como id, puede utilizar ajaxSelectOptions.

ajaxSelectOptions:  //use this for combination with dataUrl for formatter:select 
{  
    data: { 
     id: function() { 
      return selected_id; 
     } 
    } 
},  

La función que devuelve selected_id se ejecutará cada vez que se produzca la adición/edición. Espero que esto ayude !

Answer 7

He adaptado el código para searchoptions en lugar de editoptions. Sin embargo, estaba seleccionando automáticamente la primera opción y filtrando la lista, así que agregué lo siguiente para aliviar eso.

$response ='<select>'; 
$response .= '<option value=""></option>'; 
while($row = $stmt->fetch(PDO::FETCH_NUM)) { 
     $response .= '<option value="'.$row[0].'">'.$row[0].'</option>'; 
} 
$response .= '</select>'; 

echo $response;