关于JqueryEasyUI的使用介绍
jqueryeasyui
1. 准备
2. 布局layout
3. 手风琴accordion
4. 菜单树tree
5. 数据表格datagrid
6. 内容页tabs
7. 表单
关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，下面我们就一步一步来创建.
1.准备
下载最新的easyui包，里面有个demo文件夹，我们在做的过程中可以参照里面的demo示例，使用easyui需要引用下面四个css和js：
<link href="css/default/easyui.css"rel="stylesheet" />
<link href="css/icon.css"rel="stylesheet" />
<scriptsrc="js/jquery.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
第一个easyui.css是基本的样式，我们在themes文件夹下会发现有几种皮肤，可以切换样式更换不同的控件风格。
第二个icon.css是图标样式，增加图标按照已有规则创建，下面两个js引用就不多说了。
2.布局layout
后台管理一般都是分为四个部分，上部是logo或标题，左部是菜单，下部是版权信息，右部是内容信息。在easyui中我们可以使用layout进行布局，在demo文件夹-layout文件夹下的basic.html，基本上是我们需要的效果，复制一下，粘贴到index.中,把高度和宽度修改一下（设置百分比）：
注意:class="easyui-layout"必须放在body标签里面否则不是全屏，通过上面截图可以看到north、south、west、east和center分别代表五个部分，我们不需要east导航可以直接删掉，简单修改下就是我们想要的效果.
3.手风琴accordion
west部分放入的是手风琴控件,位于demo文件夹中的accordion文件夹
粘贴过来之后 修改 accordion部分 新增data-options="fit:true"属性
作用:是手风琴控件填充west部分.
通过修改title属性值来实现显示标题文字
第三个p为树状菜单,在下一部分讲解
4. 菜单树tree
关于tree控件的用法有多种方式.本次讲解两种
第一种是使用ul标签.此方式就是手风琴中默认方式.通过在ul标签中添加类属性 class="easyui-tree"来使用easyui中tree菜单.在每个父级菜单中加入span标签实现子级关系.
第二种方式是使用json数据自动生成. 打开demo中tree文件夹找到lines.html,将代码复制到上个代码的下边.并把tree_date1.json复制到webroot目录下
url参数代表要请求的路径,返回值为json类型,method:提交方式,animate:是否显示动画,lines:是否显示指示线.
打开json文件,该文件用来控制显示的菜单栏,解析时需要用到额外的方法将数据打包成json格式的数据返回到前台,下面我们来找到文件夹根目录中的tree.java,将文件复制到项目中,这个类用来帮助我们更好打包json格式数据,感谢崔友情赞助.
下面开始写数据访问层,模拟数据库访问.
首先创建表 例:tree 列名: id,text,pid,attributes(pid代表父类id,attributes代表路径)
修改页面的url属性值为servlet名
最后说一下点击出现tab和使用js生成tree数据
<script>
$('ul').tree({
url : 'treeservlet',//路径
onclick : function(node) {//点击事件,触发增加tab方法
if ($('#tt').tree('isleaf', node.target)) {//判断是否是子节点
addpanel(node.text, node.attributes);
}
}
});
function addpanel(node, url) {//参数(节点文本,节点地址) 来自于json对象参数
if ($('#tt').tabs('exists', node)) {//检测如果当前tab页存在,则选中页面,而不打开新页面
$('#tt').tabs('select', node);
} else {//content代表一会要打开的页面
var content = '<iframe scrolling="no"frameborder="0" src="'
+ url + '"style="width:100%;height:100%" /><iframe>';
$('#tt').tabs('add', {
title : node,//tab页显示的标题
content : content,//tab页内容
closable : true//是否出现关闭按钮
});
}
}
</script>
#tt代表控制tab页的p,具体代码如下:
<p id="tt"class="easyui-tabs" data-options="tools:'#tab-tools'"
style="height:100%">
<p title="主页" style="overflow:hidden">
</p>
</p>
我们需要做的就是把开头两个p放到easyui布局中的center中,代码效果如下:
最后一步需要将table标签后增加两个p闭合.
5.数据表格datagrid
找到demo文件夹datagrid文件夹 base.html文件,并把datagrid_data1.json 粘贴到webroot中
(field:返回json的字段名) 给table标签加 id="dg"
默认布局没有分页导航栏,pagination="true"代表使用分页
<script>
$(function(){
$('#dg').datagrid({
url: 'dataservlet',
singleselect: true,
ctrlselect: true,
method: 'post',
loadmsg: 'loading......',
collapsible : true,//可折叠
pagination: true,
toolbar: [ {
text: '添加',
iconcls : 'icon-add',
handler: function() {
opendialog("add_dialog","add");
}
},'-', {
text: '修改',
iconcls: 'icon-edit',
handler: function() {
opendialog("add_dialog","edit");
}
},'-', {
text: '删除',
iconcls: 'icon-remove',
handler: function() {
delappinfo();
}
} ],
});
$('#dg').datagrid('getpager').pagination({//修改默认文字
beforepagetext : '第',//页数文本框前显示的汉字
afterpagetext: '页 共{pages} 页',//参数不可修改
displaymsg: '当前显示第 {from}-{to} 条记录 ， 共 {total} 条记录'
});
});
functiondelappinfo() {
//获取选中行信息 row.列名 实现获取信息
varrow = $('#dg').datagrid('getselected');
if(row) {
varrowindex = $('#dg').datagrid('getrowindex',
row);
$('#dg').datagrid('deleterow',rowindex);
}
$.ajax({//实现异步删除
});
}
</script>
6.内容页tabs
菜单tree创建好了，接下来就是center部分的内容页，我们选取的是demo文件夹-tabs文件夹下的tabstools.html，此示例有tools方便我们扩展，
7.表单
找到demo中form文件中的validateonsubmit.html,复制p内容
data-options="required:true,validtype:'email'"
required:代表是否允许为空
validtype:设置符合的验证类型
easyui本身自带多种验证类型,全是英文,文件夹中有一个validator.js文件,这个js文件里面是中文的一些验证,包含汉字,中文,邮政编码等很多验证,放在项目中的js文件夹中,可以配合easyui表单进行自定义提示.
页面中的submitform() 方法表示提交数据请求,使用的是easyui的提交方式,提交前会验证标签文字格式.
clearform()用于清空表单内容
修改时获取修改内容使用json方式显示,案例在load.html文件中