版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiao__jia__jia/article/details/85316508
Jquery-Easyui
1 介绍
一套基于jquery的后台管理系统的前端ui框架
组成:
Jquery
Js控件
Css样式
下载完打开可以看到
demo是案例演示
locale是语言包
plugins是插件包
src是源码包
themes是主题包
easyloader.js：修改源码需要用到它
jquery.easyui.min.js是jquery和easyui的结合包
来看看demo里的布局 full.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
</html>页面效果：
项目时可以只引入locale, plugins, themes, jquery.easyui.min.js, jquery.min.js我之间项目就已经有了，无需再引入。
2 使用
| 1 功能列表 手风琴 accordion 树控件 TreeMenu
2 选项卡 tabs 选项卡的内容加载方式： 1 href属性加载，加载的返回页面中不包含html的head中的内容 2通过ajax异步加载html，加载head的 3通过ajax加载head中的内容，注意jquery的覆盖问题 |
手风琴和树控件的演示代码在accordion的basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Accordion - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Accordion</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click on panel header to show its content.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-accordion" style="width:500px;height:300px;">
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
</div>
<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
<ul class="easyui-tree">
<li>
<span>Foods</span>
<ul>
<li>
<span>Fruits</span>
<ul>
<li>apple</li>
<li>orange</li>
</ul>
</li>
<li>
<span>Vegetables</span>
<ul>
<li>tomato</li>
<li>carrot</li>
<li>cabbage</li>
<li>potato</li>
<li>lettuce</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>效果图：
选项卡tabs 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click tab strip to swap tab panel content.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
</body>
</html>
效果图
选项卡tabs的用途可以用在点击左侧菜单栏，添加新的页面。
注意事项有很多。
1、href属性加载，加载的返回页面中不包含html的head中的内容，所以惯性把js的内容放在<body></body>里.
2、通过ajax异步加载html，能加载到head的内容，但是，很严重的问题是会出现query的覆盖，造成页面效果出不来，报错。
3、把很多页面集合在一个页面需要考虑设计好id不要出现重复了。
参考例子
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>硅谷商城</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:180px;padding:10px;">
<div class="easyui-accordion" style="width:160px;">
<div title="About" data-options="iconCls:'icon-ok'" >
<ul>
<li><a href="javascript:add_tab('goto_spu.do','商品信息管理')">商品信息管理</a></li>
<li><a href="javascript:add_tab('goto_attr.do','商品属性管理')" >商品属性管理</a></li>
<li><a href="javascript:add_tab('goto_sku.do','商品库存单元管理')" >商品库存单元管理</a></li>
</ul>
</div>
<div title="About" data-options="iconCls:'icon-ok'">
<ul>
<li>商品缓存管理</li>
</ul>
</div>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'">
<div id="tt" class="easyui-tabs" >
</div>
</div>
</body>
<script type="text/javascript">
function add_tab(url,title){
// add a new tab panel
var b = $('#tt').tabs('exists',title);
if(!b){
$('#tt').tabs('add',{
title:title,
href:url,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}else{
$('#tt').tabs('select',title);
}
}
function add_tab2(url,title){
// add a new tab panel
var b = $('#tt').tabs('exists',title);
if(!b){
$.post(url,function(data){
$('#tt').tabs('add',{
title:title,
content:data,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
});
}else{
$('#tt').tabs('select',title);
}
}
</script>
</html>spu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>硅谷商城</title>
</head>
<body>
spu商品信息管理
<hr>
一级：<select id="class_1_select" onchange="get_class_2(this.value);"><option>请选择</option></select>
二级：<select id="class_2_select"><option>请选择</option></select>
品牌：<select id="tm_select"><option>请选择</option></select><br>
查询<br>
<a href="javascript:goto_spu_add();">添加</a><br>
删除<br>
编辑<br>
<script type="text/javascript">
$(function (){
$.getJSON("js/json/class_1.js",function(data){
$(data).each(function(i,json){
$("#class_1_select").append("<option value="+json.id+">"+json.flmch1+"</option>");
});
});
});
function get_class_2(class_1_id){
$.getJSON("js/json/class_2_"+class_1_id+".js",function(data){
$("#class_2_select").empty();
$(data).each(function(i,json){
$("#class_2_select").append("<option value="+json.id+">"+json.flmch2+"</option>");
});
});
get_tm(class_1_id);
}
function get_tm(class_1_id){
$.getJSON("js/json/tm_class_1_"+class_1_id+".js",function(data){
$("#tm_select").empty();
$(data).each(function(i,json){
$("#tm_select").append("<option value="+json.id+">"+json.ppmch+"</option>");
});
});
}
function goto_spu_add(){
var class_1_id = $("#class_1_select").val();
var class_2_id = $("#class_2_select").val();
var tm_id = $("#tm_select").val();
window.location.href="goto_spu_add.do?flbh1="+class_1_id+"&flbh2="+class_2_id+"&pp_id="+tm_id;
}
</script>
</body>
</html>
页面效果图
表格 datagrid
data-options扩展属性选择，扩展自panel(面板)
singleSelect:true, //单选
collapsible:true, //折叠
url:'datagrid_data1.json', //请求数据
method:'get' //请求方法
basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The DataGrid is created from markup, no JavaScript code needed.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
效果图:
动态刷新表格设计：
涉及到
formatter 函数：单元格formatter（格式化器）函数，带3个参数：value:字段值；rowData:行记录数据。rowindex：行索引。
combobox 下拉输入框，能够有一个很好的下拉样式，解决下拉选项过多，不好看。
例子：通过分类拉取选择远程获取表格数据，对属性值和创建时间进行格式化处理
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>硅谷商城</title>
</head>
<body>
<div class="easyui-layout" data-options="fit:true" style="height:500px">
<div data-options="region:'north',split:true" style="height:50px">
<div style="margin-top:10px;margin-left:10px">
一级：<select data-options="width:200" class="easyui-combobox" id="attr_class_1_select" onchange="get_attr_class_2(this.value);"><option>请选择</option></select>
二级：<select data-options="width:200" class="easyui-combobox" id="attr_class_2_select" onchange="get_attr_list_json(this.value)"><option>请选择</option></select>
<a href="javascript:goto_attr_add()">添加</a><br>
</div>
</div>
<!-- <div data-options="region:'west',split:true" style="width:100px">
查询<br>
删除<br>
编辑<br>
</div>
-->
<div data-options="region:'center'">
<div id="attrListInner" class="easyui-datagrid"></div>
</div>
</div>
<script type="text/javascript">
$(function (){
/* $.getJSON("js/json/class_1.js",function(data){
$(data).each(function(i,json){
$("#attr_class_1_select").append("<option value="+json.id+">"+json.flmch1+"</option>");
});
}); */
$('#attr_class_1_select').combobox({
url:'js/json/class_1.js',
valueField:'id',
textField:'flmch1',
width:200,
onChange:function get_attr_class_2(){
// 获取当前的下拉列表被选中的id
var class_1_id = $(this).combobox("getValue");
$('#attr_class_2_select').combobox({
url:"js/json/class_2_"+class_1_id+".js",
valueField:'id',
textField:'flmch2',
onChange:function (){
var flbh2 = $(this).combobox("getValue");
get_attr_list_json(flbh2);
},
width:200
});
}
});
});
function get_attr_class_2(class_1_id){
$.getJSON("js/json/class_2_"+class_1_id+".js",function(data){
$("#attr_class_2_select").empty();
$(data).each(function(i,json){
$("#attr_class_2_select").append("<option value="+json.id+">"+json.flmch2+"</option>");
});
});
}
function goto_attr_add(){
var class_2_id = $("#attr_class_2_select").combobox("getValue");//$("#attr_class_2_select").val();
//window.location.href="goto_attr_add.do?flbh2="+class_2_id;
add_tab("goto_attr_add.do?flbh2="+class_2_id,"添加属性");
}
function get_attr_list(flbh2){
// 异步查询
$.post("get_attr_list.do",{flbh2:flbh2},function(data){
$("#attrListInner").html(data);
});
}
function get_attr_list_json(flbh2){
// 异步查询
$('#attrListInner').datagrid({
url:'get_attr_list_json.do',
queryParams: {
flbh2: flbh2
},
columns:[[
{field:'id',title:'id',width:100},
{field:'shxm_mch',title:'属性名',width:100},
{field:'list_value',title:'属性值',width:300,
formatter: function(value,row,index){
var str = "";
// 处理字段值的代码
$(value).each(function(i,json){
str = str + json.shxzh+json.shxzh_mch + " ";
});
return str;
}
},
{field:'chjshj',title:'创建时间',width:300,
formatter: function(value,row,index){
var d = new Date(value);
var str = d.toLocaleString();
return str;
}
}
]]
});
}
</script>
</body>
</html>
效果图：
3 嵌套布局nestedlayout
demo代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Nested Layout</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The layout region panel contains another layout or other components.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',iconCls:'icon-ok'" title="Center">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true,border:false" style="height:50px"></div>
<div data-options="region:'west',split:true,border:false" style="width:100px"></div>
<div data-options="region:'center',border:false"></div>
</div>
</div>
</div>
</body>
</html>
效果：
布局layout->选项卡tabs->布局layout
内部布局和放置内部布局的控件中都需要设置边框的适应问题
页面内部跳转代码
function goto_attr_add(){
var class_2_id = $("#attr_class_2_select").combobox("getValue");//$("#attr_class_2_select").val();
//window.location.href="goto_attr_add.do?flbh2="+class_2_id;
add_tab("goto_attr_add.do?flbh2="+class_2_id,"添加属性");
}效果
当提交数据时会出现重定向跳转问题
没添加tabs前的页面跳转
添加完后的页面跳转
最后：关于EasyUI的使用，详情请参考 jquery easyui api 中文文档，学习的第一手资料。