Web2py - Adición de efectos Ajax

En este capítulo, discutiremos ejemplos de integración de jQuery complementos con web2py. Estos complementos ayudan a que los formularios y tablas sean más interactivos y amigables para el usuario, mejorando así la usabilidad de su aplicación.

En particular, aprenderemos

cómo mejorar el menú desplegable de selección múltiple con un botón de opción de agregar interactivo,
cómo reemplazar un campo de entrada con un control deslizante, y
cómo mostrar datos tabulares usando jqGrid y WebGrid.

Aunque web2py es un componente de desarrollo del lado del servidor, el welcome La aplicación de andamios incluye la base. jQuerybiblioteca. Esta "bienvenida" de la aplicación web2py de andamios incluye un archivo llamadoviews/web2py_ajax.html.

El contenido de la vista es el siguiente:

<script type = "text/javascript"><!--

   // These variables are used by the web2py_ajax_init function in web2py_ajax.js 
      (which is loaded below).
		
   var w2p_ajax_confirm_message = "{{= T('Are you sure you want to delete this object?')}}";
   var w2p_ajax_disable_with_message = "{{= T('Working...')}}";
   var w2p_ajax_date_format = "{{= T('%Y-%m-%d')}}";
   var w2p_ajax_datetime_format = "{{= T('%Y-%m-%d %H:%M:%S')}}";
   
   var ajax_error_500 = '{{=T.M('An error occured, please [[reload %s]] the page') %
	
      URL(args = request.args, vars = request.get_vars) }}'
		
//--></script>

{{
   response.files.insert(0,URL('static','js/jquery.js'))
   response.files.insert(1,URL('static','css/calendar.css'))
   response.files.insert(2,URL('static','js/calendar.js'))
   response.files.insert(3,URL('static','js/web2py.js'))
   response.include_meta()
   response.include_files()
}}

El archivo consiste en la implementación de JavaScript y la implementación de AJAX. web2py evitará que el usuario utilice otras bibliotecas AJAX como Prototype, ExtJS, porque siempre se observa que es más fácil implementar dichas bibliotecas.

Efectos de JQuery

La representación predeterminada de <select multiple = "true">..</select>no se considera tan intuitivo de usar, en particular, cuando es necesario seleccionar opciones no contiguas. Esto no se puede llamar una deficiencia de HTML, sino un diseño deficiente de la mayoría de los navegadores. La presentación de la selección múltiple se puede sobrescribir usando JavaScript. Esto se puede implementar usando el complemento jQuery llamadojquery.multiselect.js.

Para esto, un usuario debe descargar el complemento jquery.muliselect.js desde http://abeautifulsite.net/2008/04/jquery-multiselect, y coloque los archivos correspondientes en static/js/jquery.multiselect.js y static/css/jquery.multiselect.css.

Ejemplo

El siguiente código debe agregarse en la vista correspondiente antes {{extend ‘layout.html’}}

{{
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/jquery-ui.js')
   
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css')
   
   response.files.append(URL('static','js/jquery.multiSelect.js'))
   response.files.append(URL('static','css/jquery.\multiSelect.css'))
}}

Coloque lo siguiente después {{extend 'layout.html'}} -

<script>
   jQuery(document).ready(function(){jQuery('[multiple]').multiSelect();});
</script>

Esto ayudará a estilizar multiselect para la forma dada

Controlador

def index():
   is_fruits = IS_IN_SET(['Apples','Oranges','Bananas','Kiwis','Lemons'], multiple = True)
   form = SQLFORM.factory(Field('fruits','list:string', requires = is_fruits))
   
   if form.accepts(request,session):response.flash = 'Yummy!'
return dict(form = form)

Esta acción se puede probar con la siguiente vista:

{{
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/jquery-ui.js')
   
   response.files.append('https://ajax.googleapis.com/ajax\
      /libs/jqueryui/1.8.9/themes/ui-darkness/jquery-ui.css')
   
   response.files.append(URL('static','js/jquery.multiSelect.js'))
   response.files.append(URL('static','css/jquery.\multiSelect.css'))
}}

{{extend 'layout.html}}
<script>
   jQuery(document).ready(function(){jQuery('[multiple]'). multiSelect();});
</script>
{{= form}}

La captura de pantalla de la salida es la siguiente:

Algunos de los eventos útiles de Jquery se enumeran en la siguiente tabla:

No Señor.	Evento y uso
1	onchange que se ejecutará cuando el elemento cambie
2	onsubmit que se ejecutará cuando se envíe el formulario
3	onselect que se ejecutará cuando se seleccione el elemento
4	onblur para ejecutarse cuando el elemento pierde el foco
5	onfocus que se ejecutará cuando el elemento se enfoque

JQuery y Ajax-jqGrid

jqGrid es un control JavaScript habilitado para Ajax construido sobre jQuery que proporciona una solución para representar y manipular datos tabulares. jqGrid es una solución del lado del cliente y carga datos dinámicamente a través de devoluciones de llamada Ajax, proporcionando así paginación, ventana emergente de búsqueda, edición en línea, etc.

jqGrid está integrado en PluginWiki, pero aquí lo discutimos como independiente para los programas web2py que no usan el complemento. jqGrid merece un libro propio, pero aquí solo discutiremos sus características básicas y la integración más simple.

La sintaxis de jqGrid será la siguiente:

def JQGRID(
   table, fieldname = None,
   fieldvalue = None, col_widths = [],
   colnames = [], _id = None, fields = [],
   col_width = 80, width = 700,
   height = 300, dbname = 'db'
):

↰ Previous page Next page ↱