Web2py - Aggiunta di effetti Ajax

In questo capitolo, discuteremo esempi di integrazione di jQuery plugin con web2py. Questi plugin aiutano a rendere i moduli e le tabelle più interattivi e amichevoli per l'utente, migliorando così l'usabilità della tua applicazione.

In particolare, impareremo

  • come migliorare il menu a discesa di selezione multipla con un pulsante di opzione di aggiunta interattiva,

  • come sostituire un campo di input con un dispositivo di scorrimento e

  • come visualizzare i dati tabulari utilizzando jqGrid e WebGrid.

Sebbene web2py sia un componente di sviluppo lato server, il welcome L'app per ponteggi include la base jQuerybiblioteca. Questa applicazione web2py di scaffolding "welcome" include un file chiamatoviews/web2py_ajax.html.

I contenuti della vista sono i seguenti:

<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()
}}

Il file consiste nell'implementazione di JavaScript e AJAX. web2py impedirà all'utente di utilizzare altre librerie AJAX come Prototype, ExtJS, perché si osserva sempre che è più facile implementare tali librerie.

Effetti JQuery

Il rendering predefinito di <select multiple = "true">..</select>è considerato non così intuitivo da usare, in particolare, quando è necessario selezionare opzioni non contigue. Questo non può essere definito come un difetto HTML, ma un design scadente della maggior parte dei browser. La presentazione della selezione multipla può essere sovrascritta utilizzando JavaScript. Questo può essere implementato utilizzando il plugin jQuery chiamatojquery.multiselect.js.

Per questo, un utente dovrebbe scaricare il plug-in jquery.muliselect.js a partire dal http://abeautifulsite.net/2008/04/jquery-multiselect, e posiziona i file corrispondenti in static/js/jquery.multiselect.js e static/css/jquery.multiselect.css.

Esempio

Il codice seguente dovrebbe essere aggiunto prima nella vista corrispondente {{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'))
}}

Posizionare quanto segue dopo {{extend 'layout.html'}} -

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

Questo aiuterà a dare stile multiselect per la forma data

Controller

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)

Questa azione può essere provata con la seguente 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}}

Lo screenshot dell'output è il seguente:

Alcuni degli eventi Jquery utili sono elencati nella tabella seguente:

Sr.No. Evento e utilizzo
1

onchange

da eseguire quando l'elemento cambia
2

onsubmit

da eseguire quando il modulo viene inviato
3

onselect

da eseguire quando l'elemento è selezionato
4

onblur

da eseguire quando l'elemento perde il focus
5

onfocus

da eseguire quando l'elemento diventa attivo

JQuery e Ajax-jqGrid

jqGrid è un controllo JavaScript abilitato per Ajax costruito su jQuery che fornisce una soluzione per rappresentare e manipolare dati tabulari. jqGrid è una soluzione lato client e carica i dati in modo dinamico tramite callback Ajax, fornendo così impaginazione, popup di ricerca, modifica in linea e così via.

jqGrid è integrato in PluginWiki, ma qui ne discutiamo come uno standalone per i programmi web2py che non usano il plugin. jqGrid merita un libro a parte, ma qui discuteremo solo le sue caratteristiche di base e l'integrazione più semplice.

La sintassi di jqGrid sarà la seguente:

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