JQuery EasyUI入门
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标签。
——参考《百度百科》
官网：Jquery EasyUI官网、Jquery EasyUI中文网
PS：可以到官网或者中文网完整的学习easyUI的组件，以下是一些自己写的小案例。
案例
Layout(布局)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<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="系统菜单">内容1div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2div>
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="系统菜单">内容1div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2div>
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="业务菜单">内容2div>
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="系统菜单">内容1div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2div>
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:""
});
}
});
});
script>messager(消息框)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<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"%>
<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"%>
<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>
<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>001td>
<td>张三td>
<td>123td>
tr>
<tr>
<td>002td>
<td>李四td>
<td>321td>
tr>
tbody>
table>
<hr/>
<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/>
<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"%>
<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>
<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"%>
<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>
<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"%>
<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>
<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"%>
<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>
<select id="ct1" name="ct1" class="easyui-combotree" style="width:200px;" data-options="url:'combotree_data.json',required:true">select>
<hr/>
<input id="ct2" name="ct2">
body>
html>