Web2py添加Ajax效果

在本章中，我们将讨论 jQuery 插件与 web2py 的集成示例。这些插件有助于使表单和表格对用户更加交互和友好，从而提高应用程序的可用性。

特别是，我们会学习

如何通过交互式添加选项按钮改进多选下拉菜单，
如何用滑块替换输入字段，以及
如何使用 jqGrid 和 WebGrid 显示表格数据。

虽然web2py是一个服务器端开发组件，但 受欢迎的 脚手架应用程序包含基本的 jQuery 库。这个脚手架web2py应用程序“welcome”包含一个名为 views / web2py_ajax.html 的文件。

该视图的内容如下 -

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

该文件包含JavaScript和AJAX实现的实现。web2py将阻止用户使用其他AJAX库，例如Prototype，ExtJS，因为总会发现它更容易实现这样的库。

JQuery效果

< select multiple =“true”> .. </ select> 的默认呈现被认为不太直观，特别是在需要选择非连续选项时。这不能称为HTML的缺点，而是大多数浏览器的糟糕设计。使用JavaScript可以覆盖多重选择的表示。这可以使用名为 jquery.multiselect.js的 jQuery插件来实现。

为此，用户应该从 http://abeautifulsite.net/2008/04/jquery-multiselect 下载插件 jquery.muliselect.js ，并将相应的文件放入 static / js / jquery.multiselect.js 和 static / css /jquery.multiselect.css 。

例

以下代码应在 {{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'))
}}

在 {{extend'layout.html'}} 之后放置以下内容：

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

这将有助于为给定表单设计多重选择

调节器

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)

这个动作可以用下面的视图来尝试

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

输出的屏幕截图如下所示

控制器视图

下表列出了一些有用的Jquery事件

序号	事件和用法
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'
):