easyUI基础

来源：互联网发布：网络拓扑结构名词解释编辑：程序博客网时间：2024/06/07 02:07

easyUI基础

学会查阅文档，使用jQuery-EasyUI，构建自已的Web页面

学习地址！！！！！！http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid24.html

（1）网址：www.jeasyui.com，下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册

（2）什么是jQuery-EasyUI

参见<<什么是EasyUI.JPG>>

是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的

WEB[后台前端]JavaScript现成的组件库

注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，

中低版本浏览器会有不能正常执行的情况

（3）JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题

JS：基于浏览器对web页面中的节点进行操作，比较麻烦

jQuery：基于浏览器简化对web页面中的节点进行操作，做到了write less do more

AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式

JSON：简化自定义对象的创建与AJAX数据交换轻量级文本

EasyUI：快速基于现成的组件创建自已的web页面

组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree...

注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，

EasyUI只是众多前端WEB组件之一

（4）jQuery-EasyUI快速入门----可折叠功能的面板

第一步：创建一个js-day05这么一个web工程

第二步：在WebRoot目录下创建00-base.html

第三步：在WebRoot目录下创建js和themes目录，导入官方文件

参见<< jquery-easyui-1.3.6文件夹>>

第四步：在00-base.html 文件的<head>标签中引入如下文件

<linkrel="stylesheet"href="../themes/icon.css"type="text/css"></link>

<linkrel="stylesheet"href="../themes/default/easyui.css"type="text/css"></link>

<scripttype="text/javascript"src="../js/jquery.min.js"></script>

<scripttype="text/javascript"src="../js/jquery.easyui.min.js"></script>

第五步：在00-base.html 文件的<body>标签中创建如下<div>标签

<div

id="p"

class="easyui-panel"

style="width:500px;height:200px;padding:10px;"

title="我的面板"

iconCls="icon-save"

collapsible="true">

内容<br/>

</div>

（5）EasyUI组件

（01） layout布局

<divdata-options="fit:true"id="cc"class="easyui-layout"style="width:600px;height:400px;">

</div>

<scripttype="text/javascript">

//浏览器加载web页面时触发

$(function(){

//将北边面板折叠，字符串双引单引均可

$('#cc').layout('collapse','north');

//休息3秒

window.setTimeout(function(){

//将南边面板折叠，字符串双引单引均可

$('#cc').layout('collapse','south');

},"3000");

});

</script>

<bodyclass="easyui-layout">

<divdata-options="region:'north'"style="height:150px"></div>

</div>

</body>

（02）accordion分类

<divdata-options="border:true,animate:true,multiple:false,selected:-1"id="aa"class="easyui-accordion"style="width:300px;height:500px;">

内容1

</div>

内容2

</div>

内容3

</div>

<scripttype="text/javascript">

$(function(){

//增加一个面板

$("#aa").accordion("add",{

"title":"Title4",

"content":"内容4",

"selected":false,

"iconCls":"icon-search"

});

//休息3秒

window.setTimeout(function(){

//删除4号面板

$("#aa").accordion("remove",3);

//取消选择1号面板

$("#aa").accordion("unselect",0);

},"3000");

});

</script>

（3）linkbutton按钮

<aid="btn-add"class="easyui-linkbutton"data-options="iconCls:'icon-add'">

增加

</a>

<aid="btn-find"class="easyui-linkbutton"data-options="iconCls:'icon-search'">

查询

</a>

<aid="btn-update"class="easyui-linkbutton"data-options="iconCls:'icon-edit'">

修改

</a>

<aid="btn-delete"class="easyui-linkbutton"data-options="iconCls:'icon-remove'">

删除

</a>

<scripttype="text/javascript">

$("#btn-add").click(function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

$("#btn-add").dblclick(function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

//参数一：字符串类型的事件，多个事件之间通过空格分隔，事件名称符合jquery事件名写法

//参数二：处理函数

$("#btn-add").bind("click dblclick",function(){

//将该按失效

$("#btn-add").linkbutton("disable");

});

</script>

（04）tabs选项卡

<div

id="tt"

class="easyui-tabs"

style="width:500px;height:250px;"

data-options="plain:false,border:true,tools:[{

iconCls:'icon-add',

handler:function(){

alert('添加')

}

},{

iconCls:'icon-remove',

handler:function(){

alert('删除')

}

}],selected:-1">

tab1

</div>

tab2

</div>

tab3

</div>

<scripttype="text/javascript">

$(document).ready(function(){

$("#tt").tabs("add",{

"title":"Tab4",

"content":"tab4",

"selected":false,

"closable":true

});

</script>

<scripttype="text/javascript">

//定位四个按钮，同时添加单击事件

$("a").click(function(){

//获取按钮的文本

var tip = $(this).text();

//去空格

tip = $.trim(tip);

//如果是"增加部门"

if("增加部门" ==tip){

//是否已有相同的tabs选项卡打开

var flag= $("#tt").tabs("exists",tip);

//如果不存在相同的tabs选项卡打开

if(!flag){

//创建一个tabs选项卡

$("#tt").tabs("add",{

"title":tip,

"href":"${pageContext.request.contextPath}/addGroup.jsp",

"selected":true,

"closable":true

});

}

});

</script>

（05）pagination分页框

<!--

total：记录总数100

pageSize：每页显示多少条记录5

pageNumber：当前页号1

pageList:[5,10,15]表示可供选择中每页显示多少条记录，

注意：pageSize的值必须是pageList数组值之一

-->

<div

id="pp"

class="easyui-pagination"

data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'"

style="background:#efefef;border:1px solid #ccc;width:400px">

</div>

<scripttype="text/javascript">

$("#pp").pagination({

//pageNumber当前页号，例如1

//pageSize获取多少条记录，例如：5

//以上二个参数，需要谁，就接收谁，不一定二个都同时出现，参数名可以任意

"onSelectPage":function(pageNumber,pageSize){

alert(pageNumber +":"+ pageSize);

}

});

</script>

重要学习地址:http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid24.html

0 0