JQuery EasyUI入门
2017-01-06 20:25
417 查看
JQuery EasyUI入门
@(JavaScript)[jQuery, EasyUI, 入门]JQuery EasyUI入门
基本概述
案例
Layout布局
Accordion手风琴
Tab选项卡
同一选项卡只能打开一个
messager消息框
menubutton菜单按钮
datagrid数据表格
数据表格的基本使用
json内容
html文件
带编辑功能的数据表格
json内容
html文件
跨行跨列的数据表格
json内容
html文件
datagrid处理复杂json数据
datagrid使用load方法
combobox下拉列表框
json内容
html文件
combotree下拉树
基本概述
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。[align=right]——参考《百度百科》[/align]
官网：Jquery EasyUI官网、Jquery EasyUI中文网
PS：可以到官网或者中文网完整的学习easyUI的组件，以下是一些自己写的小案例。
案例
Layout(布局)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout测试</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 分为五个区域 -->
<div style="height: 100px;" data-options="region:'north'">北部区域</div>
<div style="width: 200px;" data-options="region:'west'">西部区域</div>
<div style="" data-options="region:'center'">中心区域</div>
<div style="width: 100px;" data-options="region:'east'">东部区域</div>
<div style="height: 50px;" data-options="region:'south'">南部区域</div>
</body>
</html>Accordion(手风琴)
<div style="" data-options="region:'center'"> <div class="easyui-tabs" data-options="fit:true"> <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div> <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div> </div> </div>
Tab(选项卡)
<div style="" data-options="region:'center'"> <div class="easyui-tabs" data-options="fit:true"> <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div> <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div> </div> </div>
同一选项卡只能打开一个
<div style="width: 200px;" data-options="region:'west'">
<div class="easyui-accordion" data-options="fit:true">
<div data-options="iconCls:'icon-save'" title="系统菜单">
<a id="btn" class="easyui-linkbutton">按钮</a>
</div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
</div>
</div>
<div style="" data-options="region:'center'">
<div id="et" class="easyui-tabs" data-options="fit:true">
<div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#btn").click(function() {
var isExists = $("#et").tabs("exists", "标题");
if(isExists) {
$("#et").tabs("select","标题");
} else {
$("#et").tabs("add", {
title:"标题",
closable:true,
iconCls:"icon-save",
content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"
});
}
});
});
</script>messager(消息框)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Messager的使用</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
// $.messager.alert("标题", "一条消息", "info");
/* $.messager.confirm("标题", "确认消息？", function(val) {
alert(val);
}); */
/* $.messager.prompt("标题", "请输入", function(message) {
alert(message);
}); */
// $.messager.progress();
$.messager.show({
title:'标题',
msg:'这是一条消息，五秒后会消失',
timeout:5000,
showType:'slide',
showSpeed:1000
});
});
</script>
</head>
<body>
</body>
</html>menubutton(菜单按钮)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MenuButton的使用</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<a id="mb" class="easyui-menubutton" data-options="iconCls:'icon-help', menu:'#menudiv'">功能菜单</a>
<div id="menudiv">
<div data-options="iconCls:'icon-save'">保存</div>
<div data-options="iconCls:'icon-edit'">修改</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
</div>
</body>
</html>datagrid(数据表格)
数据表格的基本使用
json内容{
"total": 100,
"rows":[
{"id":"001","name":"王五","price":31232,"age":20},
{"id":"002","name":"赵六","price":32132,"age":20}
]
}html文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$("#dg").datagrid({
url:'datagrid_data.json',
columns:[[
{field:"id",title:"编号",checkbox:true},
{field:"name",title:"姓名"},
{field:"price",title:"价格"},
{field:"age",title:"年龄"}
]],
rownumbers:true,
toolbar: [
{text:'编辑',
iconCls: 'icon-edit',
handler: function(){
alert('edit');
}
},
{text:'帮助',
iconCls: 'icon-help',
handler: function(){
alert('help');
}}
],
pagination:true,
pageList:[10,30,50]
});
});
</script>
</head>
<body>
<!-- 1.将页面中静态HTML代码渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>123</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>321</td>
</tr>
</tbody>
</table>
<hr/>
<!-- 2.发送ajax请求获取动态json数据动态创建datagrid -->
<table class="easyui-datagrid" data-options="url:'datagrid_data.json'">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
</table>
<hr/>
<!-- 3.调用easyUI提供的API动态创建datagrid -->
<table id="dg"></table>
</body>
</html>带编辑功能的数据表格
json内容{
"total": 100,
"rows":[
{"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},
{"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},
{"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},
{"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},
{"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}
]
}html文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——编辑功能</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
// 全局变量
// 选中行索引
var editIndex;
$(function() {
$("#dg").datagrid({
url:'datagrid_data.json',
columns:[[
{field:"id",title:"编号",checkbox:true,width:100},
{field:"name",title:"姓名",editor:{type:'validatebox',options:{required:true}},width:100},
{field:"price",title:"价格",editor:{type:'numberbox',options:{precision:2,required:true}},width:100},
{field:"age",title:"年龄",editor:{type:'numberbox',options:{precision:0,required:true}},width:100},
{field:"birthday",title:"生日",editor:{type:'datebox',options:{required:true}},width:100},
]],
striped : true, // 斑马线
rownumbers:true, // 行号
toolbar: [
{text:'添加',
iconCls: 'icon-add',
handler: function(){
// 如果选中行，第二次点击则保存并添加新的一行
if(editIndex != undefined) {
$("#dg").datagrid("endEdit", editIndex);
}
if(editIndex == undefined){
// 清除所有选择
$("#dg").datagrid("clearSelections");
$('#dg').datagrid('insertRow',{
index: 0,
row: {}
});
editIndex = 0;
$("#dg").datagrid("beginEdit", editIndex);
}
}},
{text:'编辑',
iconCls: 'icon-edit',
handler: function(){
// 如果选中行，第二次点击则保存
if(editIndex != undefined) {
$("#dg").datagrid("endEdit", editIndex);
} else {
var rows = $("#dg").datagrid('getSelections');
// 获取选中行
if(rows.length != 1) {
$.messager.alert("提示消息","请选择单行!!!");
} else {
editIndex = $("#dg").datagrid("getRowIndex", rows[0]);
$("#dg").datagrid("beginEdit", editIndex);
}
}
}},
{text:'删除',
iconCls: 'icon-remove',
handler: function(){
var rows = $("#dg").datagrid('getSelections');
// 删除选中行
for(var i = 0; i < rows.length; i++) {
$("#dg").datagrid('deleteRow',$("#dg").datagrid("getRowIndex", rows[i]));
}
}},
{text:'保存',
iconCls: 'icon-save',
handler: function(){
if(editIndex != undefined) {
$("#dg").datagrid("endEdit", editIndex);
}
}},
{text:'取消',
iconCls: 'icon-cancel',
handler: function(){
if(editIndex != undefined) {
// 取消编辑
$("#dg").datagrid("cancelEdit", editIndex);
// 获取编辑行的id，如果是undefined，证明未定义，可以删除
if($('#dg').datagrid('getRows')[editIndex].id == undefined){
$("#dg").datagrid('deleteRow',editIndex);
}
editIndex = undefined;
}
}}
],
pagination:true,
pageList:[5,10,30,50],
onAfterEdit : function(rowIndex, rowData, changes){
console.info(rowData);
editIndex = undefined;
},
onDblClickRow: function(rowIndex, rowData, changes) {
console.info(rowIndex);
if(editIndex == undefined) {
$('#dg').datagrid('beginEdit',rowIndex);
editIndex = rowIndex;
}
}
});
});
</script>
</head>
<body>
<!-- 3.调用easyUI提供的API动态创建datagrid -->
<table id="dg"></table>
</body>
</html>跨行跨列的数据表格
json内容{
"total": 100,
"rows":[
{"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},
{"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},
{"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},
{"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},
{"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}
]
}html文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——标题跨行跨列</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
// 全局变量
// 选中行索引
var editIndex;
$(function() {
$("#dg").datagrid({
url:'datagrid_data.json',
columns:[[
{
field:"id",
title:"编号",
checkbox:true,
width:100,
rowspan:2
},{
field:"name",
title:"姓名",
editor:{type:'validatebox',options:{required:true}},
width:100,
rowspan:2
},{
field:"price",
title:"价格",
editor:{type:'numberbox',options:{precision:2,required:true}},
width:100,
rowspan:2
},{
title:"其他信息",
colspan:2
}
],
[
{
field:"age",
title:"年龄",
editor:{type:'numberbox',options:{precision:0,required:true}},
width:100
},{
field:"birthday",
title:"生日",
editor:{type:'datebox',options:{required:true}},
width:100
}
]],
striped : true, // 斑马线
rownumbers:true // 行号
});
});
</script>
</head>
<body>
<!-- 3.调用easyUI提供的API动态创建datagrid -->
<table id="dg"></table>
</body>
</html>datagrid处理复杂json数据
{
field : 'noticebill.telephone',
title : '联系方式',
width : 100,
align : 'center',
formatter: function(value,row,index) {
return row.noticebill['telephone'];
}
}datagrid使用load方法
$(function(){
//提供一个工具方法，作用是将表单中所有的输入项和值转换为json数据
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
}
$("#btn").click(function(){
//调用上面提供的工具方法，将指定的表单输入项转为json数据，作为过滤条件
var p = $("searchForm").serializeJson() //{key:value,key:value}
console.info(p);
// 重新发送ajax，提供过滤条件
$("#grid").datagrid('load', p);
$("#searchForm").get(0).reset();// 重置查询表单
$("#searchWindow").window("close"); // 关闭窗口
});
});combobox(下拉列表框)
json内容
[
{"id":"001","text":"软件部"},
{"id":"002","text":"市场部"},
{"id":"003","text":"人事部"}
]html文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combobox的使用</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!-- 1. 将页面静态的html代码渲染为combobox样式 -->
<!--
<select id="cb" class="easyui-combobox" name="dept">
<option value="aa">研发部</option>
<option>市场部</option>
<option>人事部</option>
</select>
-->
<!-- 2. html标签发送ajax请求获取动态json数据创建combobox -->
<!--
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'combobox_data.json'" />
-->
<!-- 3. JavaScript发送ajax请求获取动态json数据创建combobox -->
<input id="cd" class="easyui-combobox" name="dept"/>
<script type="text/javascript">
$("#cd").combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
</script>
</body>
</html>combotree(下拉树)
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"iconCls":"icon-save",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"help.html",
"iconCls":"icon-help"
}]
}]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combotree的使用</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$("#ct2").combotree({
url:'combotree_data.json',
width:200,
required:true
});
});
</script>
</head>
<body>
<!-- 方式1：html标签 -->
<select id="ct1" name="ct1" class="easyui-combotree" style="width:200px;" data-options="url:'combotree_data.json',required:true"></select>
<hr/>
<!-- 方式2：JavaScript代码 -->
<input id="ct2" name="ct2">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码，即可快速实现直播弹幕功能
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- easyui------显示隐藏列功能
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解