欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于JqueryEasyUI的使用介绍

程序员文章站 2022-09-04 18:05:33
jqueryeasyui 1.       准备 2.       布局layout 3.   &nbs...

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文件中