一,Jquery.treeview:
见名之意,就是将页面的数据以树的形式展现出来。和上篇博客中的dhtmlXtree不同的是,它是将html文件中的数据进行显示,而html文件主要是用UL和li进行嵌套数据。看一下html如何存储数据:
<ul id="browser" class="filetree">
<li class="folder"><span class="folder">流程管理引擎系统</span>
<ul>
<li class="closed"><span class="folder">故障管理</span>
<ul>
<li><span class="file"><a href="troubleTicket/index.html" target="workareaFrame">故障单维护</a></span></li>
<li><span class="file"><a href="troubleTicket/approving.html" target="workareaFrame">待审故障单</a></span></li>
<li><span class="file"><a href="troubleTicket/approved.html" target="workareaFrame">已审故障单</a></span></li>
<li><span class="file"><a href="troubleTicket/archive.html" target="workareaFrame">归档故障单</a></span></li>
</ul>
</li>
</ul>
</li>
</ul>
页面中也如Jquery.treeview的js代码和对应的css文件,然后进行这样简单Jquery代码的操作就可以实现了:
$(document).ready(function(){
$("#browser").treeview();
});
这样就实现了将数据以树的形式展示了。当然如果我们需要将数据库中的动态数据用这种方法进行显示的话,我们需要在后台利用字符串进行拼接成这个格式的html文件,然后进行获取显示即可,其实和dhtmlxTree的使用方法还是非常类似的,只不过实现的方式不同。
二,Jquery.form
这个Jquery插件是为了解决Ajax获取页面数据麻烦而提供的。常规我们通过Form进行表单的提交,然后将需要提交的数据提供name的属性,就可以通过struts2等MVC流程框架进行获取,这样就不需要我们进行手动获取了。而Jquery.form正是弥补Ajax异步通讯的不足的。这里在我的前边博客中写到过JQuery中Ajax的操作
三,jquery.pagination
这个是用来辅助我们进行分
页的Jquery插件,可以提供类似于百度查询的分页信息,看这张图,感觉还是非常实用的。
看一下如何使用吧,首先还是引入相关的js代码,然后在网页中对应的位置写入显示分页信息的div块: <divid="Pagination"></div>,然后就是我们的js代码的编写了:
//在页面中生成分页栏
$("#Pagination").pagination(result.totalsize, {
callback:pageQuery,// 回调方法分页查询的函数,上边的result.totalsize,为总共的页数
items_per_page:pageSize, // 每页显示数据条数
prev_text : "上一页",
next_text : "下一页",
link_to : "javascript:void(0)",//提供一个可以点击的按钮
current_page :pageIndex //当前页码索引
});
当然这是最简单的分页信息的查询,更多的信息还是模仿插件提供的例子进行编写即可。
四,jquery.autocomplete
这个是用来根据数据库的信息进行自动补全的插件。看看百度等很多浏览器,当我们输入我们想要的查询的信息时,随着输入字符的不断增加,提示的信息也在不断的变化着,这个插件也就可以帮助我们实现这样的功能。
实现原理:是通过将输入的字符传入后台进行(前)模糊匹配查询,将查询出来的数据进行提示,然后完成自动补全功能。当然后台查询出来的数据我们需要进行一定格式的转换,可以模仿插件中的例子,这里看一下前台的js代码的处理吧:
//指定根据输入内容进行模糊查询的action路径
$("#orgCode").autocomplete( "/org/loadOrgByCode.action", {
cellSeparator: "|",//根据此进行拆分
lineSeparator: "\n",
minChars: 2,//至少输入两个字符才会进行自动匹配
maxItemsToShow: 10,//一页最多显示10条数据
formatItem: function(row) {//提示的格式
//alert(row[0] + ", " + row[1] + "," + row[2] + ", " + row[3]);
return "代码->" + row[0] + " 名称->" + row[1] + " 类型->" + row[2];
},
onItemSelect: function(li) {//将提示的内容补全到文本框中
$("#orgName").val(li.extra[0]);
$("#orgType").val(li.extra[1]);
$("#orgId").val(li.extra[2]);
}
});
五,jquery.ui
这是一个非常强大的Jquery插件,它能够实现很多特效功能例如自动补全,就像上边的Jquery.autocomplete,tabs选项卡风格的功能,日历的功能……这里简单看一下选项卡和日历的实现。
1,选项卡,首先在页面中提供这样的html代码,
<div id="tabs">
<ul>
<li><a href="#tabs-1">用户信息</a></li>
<li><a href="#tabs-2">许可信息</a></li>
</ul>
<div id="tabs-1" style="background:#FFFFFF" >
</div>
<div id="tabs-2" style="background:#FFFFFF">
</div>
</div>
引入相关的js代码后,在script标签编写很简单的代码就可以实现了:
$(function(){
$('#tabs').tabs();
});
2,日历控件的简单使用,当单机某个文本框时,弹出日历来供我们来选择,还是非常不错的:
var cfg = {
"dateFormat" : "yy-mm-dd",//日期的格式
changeMonth: true,
changeYear: true,
showSecond: true,
timeFormat: 'hh:mm:ss'
}
$("#expireTime").datetimepicker(cfg);//设定指定的文本框单击出来日历控件