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

特别是，我们将学习

• 如何使用交互式添加选项按钮改善多选下拉菜单，

• 如何用滑块替换输入字段，以及

• 如何使用jqGrid和WebGrid显示表格数据。

尽管web2py是服务器端开发组件，但欢迎的脚手架应用程序包括基本的jQuery库。这个脚手架的web2py应用程序“欢迎”包括一个名为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效果

.. 的默认呈现方式被认为使用起来不太直观，特别是在需要选择非连续选项时。这不能被称为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’}}之后–

这将有助于为给定表单设置多选样式

控制者

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

输出的屏幕截图如下-

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

Sr.No.	Event & Usage
1	onchange to be run when the element changes
2	onsubmit to be run when the form is submitted
3	onselect to be run when the element is selected
4	onblur to be run when the element loses focus
5	onfocus to be run when the element gets focus

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'
):