Web2py-adding-ajax-effects

Web2py-Ajaxエフェクトの追加

この章では、 jQuery プラグインと web2py の統合の例を説明します。 これらのプラグインは、フォームとテーブルをよりインタラクティブで使いやすいものにし、アプリケーションの使いやすさを向上させるのに役立ちます。

特に、学習します

• インタラクティブな追加オプションボタンを使用して複数選択のドロップダウンを改善する方法、
• 入力フィールドをスライダーで置き換える方法、および
• jqGrid および WebGrid を使用して表形式データを表示する方法。

web2pyはサーバー側の開発コンポーネントですが、 welcome scaffoldingアプリにはベースの jQuery ライブラリが含まれています。 このscaffolding web2pyアプリケーション「ようこそ」には、 views/web2py_ajaxl というファイルが含まれています。

ビューの内容は次のとおりです-

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

Copy

このファイルは、JavaScriptの実装とAJAX実装で構成されています。 web2pyは、PrototypeやExtJSなどの他のAJAXライブラリを使用できないようにします。これは、このようなライブラリを実装する方が簡単であることが常に観察されるためです。

JQueryエフェクト

*<select multiple = "true"> .. </select>* のデフォルトのレンダリングは、特に連続していないオプションを選択する必要がある場合、あまり直感的ではないと見なされます。 これはHTMLの欠点とは言えませんが、ほとんどのブラウザーの設計が貧弱です。 JavaScriptを使用して、複数選択の表示を上書きできます。 これは、 *jquery.multiselect.js* というjQueryプラグインを使用して実装できます。

Copy

このため、ユーザーは jquery.muliselect.js を* http：//abeautifulsite.net/2008/04/jquery-multiselect*からダウンロードし、対応するファイルを static/js/jquery.multiselectに配置する必要があります。 js および static/css/jquery.multiselect.css 。

例

次のコードは、対応するビューの \ {\ {extend ‘layoutl’}} の前に追加する必要があります

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

Copy

*\ {\ {extend 'layoutl'}}* の後に以下を配置します-

Copy

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

Copy

これは、指定されたフォームの multiselect のスタイル設定に役立ちます

コントローラ

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)

Copy

このアクションは、次のビューで試すことができます-

{{
   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 'layoutl}}
<script>
   jQuery(document).ready(function(){jQuery('[multiple]'). multiSelect();});
</script>
{{= form}}

Copy

出力のスクリーンショットは次のとおりです-

コントローラービュー

便利なJqueryイベントのいくつかは、次の表に記載されています-

Sr.No.	Event & Usage
1	onchange 要素が変更されたときに実行される
2	onsubmit フォームが送信されたときに実行される
3	onselect 要素が選択されたときに実行される
4	onblur 要素がフォーカスを失ったときに実行される
5	onfocus 要素がフォーカスを取得したときに実行される

JQueryおよびAjax-jqGrid

jqGridは、jQueryに基づいて構築されたAjax対応のJavaScriptコントロールであり、表形式のデータを表現および操作するためのソリューションを提供します。 jqGrid はクライアント側のソリューションであり、Ajaxコールバックを通じてデータを動的にロードするため、ページネーション、検索ポップアップ、インライン編集などが提供されます。

jqGridはPluginWikiに統合されていますが、ここでは、プラグインを使用しないweb2pyプログラムのスタンドアロンとして説明します。 jqGridは独自の本に値しますが、ここでは基本的な機能と最も単純な統合についてのみ説明します。

jqGridの構文は次のようになります-

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

Copy