Web2py - Ajax Efektleri Ekleme

Bu bölümde, entegrasyon örneklerini tartışacağız. jQuery ile eklentiler web2py. Bu eklentiler, formları ve tabloları kullanıcı için daha etkileşimli ve kullanıcı dostu hale getirmeye yardımcı olur, böylece uygulamanızın kullanılabilirliğini artırır.

Özellikle öğreneceğiz

etkileşimli ekleme seçeneği düğmesiyle çoklu seçim açılır menüsünün nasıl iyileştirileceği,
bir giriş alanı kaydırıcıyla nasıl değiştirilir ve
tablo verileri nasıl görüntülenir jqGrid ve WebGrid.

Web2py bir sunucu tarafı geliştirme bileşeni olmasına rağmen, welcome iskele uygulaması tabanı içerir jQuerykütüphane. Bu iskele web2py uygulaması "karşılama" adlı bir dosya içerirviews/web2py_ajax.html.

Görünümün içeriği aşağıdaki gibidir -

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

Dosya, JavaScript ve AJAX uygulamasının uygulanmasından oluşur. web2py, kullanıcının Prototype, ExtJS gibi diğer AJAX kitaplıklarını kullanmasını engeller, çünkü bu tür kitaplıkları uygulamanın daha kolay olduğu her zaman gözlemlenir.

JQuery Etkileri

Varsayılan render <select multiple = "true">..</select>Özellikle bitişik olmayan seçeneklerin seçilmesi gerektiğinde, kullanımının o kadar sezgisel olmadığı düşünülmektedir. Bu bir HTML eksikliği olarak adlandırılamaz, ancak çoğu tarayıcı için kötü bir tasarımdır. Çoklu seçimin sunumunun üzerine JavaScript kullanılarak yazılabilir. Bu, adı verilen jQuery eklentisi kullanılarak uygulanabilir.jquery.multiselect.js.

Bunun için bir kullanıcı eklentiyi indirmelidir jquery.muliselect.js itibaren http://abeautifulsite.net/2008/04/jquery-multiselect, ve ilgili dosyaları içine yerleştirin static/js/jquery.multiselect.js ve static/css/jquery.multiselect.css.

Misal

Aşağıdaki kod önce ilgili görünüme eklenmelidir {{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'))
}}

Aşağıdakileri sonrasına yerleştirin {{extend 'layout.html'}} -

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

Bu modaya yardımcı olacak multiselect verilen form için

Kontrolör

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)

Bu eylem aşağıdaki görünümle denenebilir -

{{
   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}}

Çıktının ekran görüntüsü aşağıdaki gibidir -

Yararlı Jquery olaylarından bazıları aşağıdaki tabloda listelenmiştir -

Sr.No.	Etkinlik ve Kullanım
1	onchange eleman değiştiğinde çalıştırılacak
2	onsubmit form gönderildiğinde çalıştırılacak
3	onselect eleman seçildiğinde çalıştırılacak
4	onblur öğe odağı kaybettiğinde çalıştırılacak
5	onfocus öğe odaklandığında çalıştırılacak

JQuery ve Ajax-jqGrid

jqGrid, tablo şeklindeki verileri temsil etmek ve işlemek için bir çözüm sağlayan, jQuery üzerine kurulmuş, Ajax özellikli bir JavaScript denetimidir. jqGrid bir istemci tarafı çözümdür ve verileri Ajax geri aramaları aracılığıyla dinamik olarak yükler, böylece sayfalandırma, arama açılır penceresi, satır içi düzenleme vb. sağlar.

jqGrid, PluginWiki'ye entegre edilmiştir, ancak burada, eklentiyi kullanmayan web2py programları için bağımsız olarak tartışıyoruz. jqGrid kendine ait bir kitabı hak ediyor ancak burada sadece temel özelliklerini ve en basit entegrasyonunu tartışacağız.

JqGrid'in sözdizimi aşağıdaki gibi olacaktır -

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