在本章中,我们将讨论jQuery插件与web2py集成的示例。这些插件有助于使表单和表格对用户更具交互性和友好性,从而提高了应用程序的可用性。
我们将学习以下内容:
- 如何使用交互式添加选项按钮改善多选下拉菜单,
- 如何用滑块替换输入字段,以及
- 如何使用jqGrid和WebGrid显示表格数据。
尽管web2py是服务器端开发组件,但欢迎使用的脚手架应用程序包括基本jQuery库。这个脚手架的web2py应用程序“欢迎”包括一个名为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' ):
作者:terry,如若转载,请注明出处:https://www.web176.com/web2py/863.html