Tema: Pluggin de Grid (Usando PHP, jQuery, AJAX)
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 18/12/2011, 23:48
Avatar de ghidalgoram
ghidalgoram
 
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 446
Antigüedad: 16 años, 2 meses
Puntos: 7
Sonrisa Respuesta: Pluggin de Grid (Usando PHP, jQuery, AJAX)
Cita:
Iniciado por SirDuque Ver Mensaje
Podes crear el array en PHP, enviarlo en JSON por Jquery, tiene el mismo formato.
Suerte!
Gracias SirDuque por responder. Nunca he trabajado con JSON y tengo muy poca experiencia con jQuery.

Lo que hago es trabajar siempre con PHP y AJAX. Te agradezco si tu ó alguien me puede guiar con este ejemplo. Cuando se descarga el código fuente, solo contiene dos archivos.

Uno tipo html y que se llama "datagrid10_demo.html" y otro llamado "datagrid_data.json". Este es el código que contienen:





Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4.  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.  
  7.     <meta name="keywords" content="jquery,ui,easy,easyui,web">
  8.  
  9.     <meta name="description" content="easyui help you build your web page easily!">
  10.  
  11.     <title>CheckBox select on DataGrid - jQuery EasyUI Demo</title>
  12.  
  13.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
  14.  
  15.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
  16.  
  17.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
  18.  
  19.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  20.  
  21.     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  22.  
  23. </head>
  24.  
  25. <body>
  26.  
  27.     <h2>CheckBox select on DataGrid</h2>
  28.  
  29.     <div class="demo-info" style="margin-bottom:10px">
  30.  
  31.         <div class="demo-tip icon-tip">&nbsp;</div>
  32.  
  33.         <div>Click on header checkbox to select or unselect all selections.</div>
  34.  
  35.     </div>
  36.  
  37.     
  38.  
  39.     <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:700px;height:250px"
  40.  
  41.             url="data/datagrid_data.json"
  42.  
  43.             idField="itemid" pagination="true"
  44.  
  45.             iconCls="icon-save">
  46.  
  47.         <thead>
  48.  
  49.             <tr>
  50.                 <th field=""> </th>
  51.                 <th field="ck" checkbox="true"></th>
  52.  
  53.                 <th field="itemid" width="80">Item ID</th>
  54.  
  55.                 <th field="productid" width="120">Product ID</th>
  56.  
  57.                 <th field="listprice" width="80" align="right">List Price</th>
  58.  
  59.                 <th field="unitcost" width="80" align="right">Unit Cost</th>
  60.  
  61.                 <th field="attr1" width="200">Attribute</th>
  62.  
  63.                 <th field="status" width="60" align="center">Stauts</th>
  64.  
  65.             </tr>
  66.  
  67.         </thead>
  68.  
  69.     </table>
  70.  
  71. </body>
  72.  
  73. </html>

Y el archivo JSON tiene el mismo código que presenté al inicio del Post:

Código Javascript: 
Ver original
  1. {"total":28,"rows":[
  2.     {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
  3.     {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
  4.     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
  5.     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
  6.     {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
  7.     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
  8.     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
  9.     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
  10.     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
  11.     {"productid":"aaaaa","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
  12. ]}

Como decía al principio, los datos que mostraré están en una base de datos MySQL. El plugin se ve muy útil y deseo poder aprovecharlo y creo q muchos de la comunidad les ayudaría.
__________________
Loading...