Web2py - 添加Ajax效果

Web2py添加Ajax效果 - 从简介，Python语言，框架概述，核心，视图，数据库抽象层，表单和验证器，电子邮件和SMS，访问控制，服务，添加AJAX效果，组件，部署，安全性开始学习Web2py。

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

特别是，我们将学习

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

虽然web2py是服务器端开发组件，但 welcome 脚手架应用程序包括基础 jQuery 库.这个脚手架web2py应用程序"welcome"包含一个名为 views/web2py_ajax.html 的文件.

视图的内容如下 :

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

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

为此，用户应该下载插件 jquery.muliselect.js 从 http://abeautifulsite.net/2008/04/jquery-multiselect，并将相应的文件放入 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'}} 之后放置以下内容:

这将有助于为给定表单设置 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)

可以使用以下视图 : 尝试此操作;

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

输出的屏幕截图如下 :

controller view

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

Sr.No.	活动&用法
1	onchange 元素更改时运行
	onsubmit 提交表单时运行
3	onselect 选择元素时运行
4	onblur 在元素失去焦点时运行
5	onfocus 在元素获得焦点时运行

JQuery和Ajax-jqGrid

jqGrid是一个基于Ajax的JavaScript控件，它基于jQuery构建，提供表示和操作表格数据的解决方案. 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'):