jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
EasyUI的使用有两种方式：
CSS样式： JS样式使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
EasyUI的布局使用 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'管理系统',split:true" style="height: 100px;"></div> <div data-options="region:'west',title:'菜单栏',split:true" style="width: 100px;"></div> <div data-options="region:'center',title:'数据区'" style="padding: 5px; background: #eee;"></div> </div> </body> </html>data-options="fit:true" ：填充整个页面
fit：boolean，如果设置为true，布局组件将自适应父容器，当使用‘body’标签创建布局的时候，整个页面会自动最大，默认值为false
title：布局面板标题文本
region：定义布局面板位置，可用的值有：north、west、center、south、east
split：为true时用户可以通过分隔栏改变面板大小，默认值时false
使用$.fn.accordion.defaults重写默认值对象。
分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
EasyUI分类使用 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" 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="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> </body> </html>面板属性：
selected：设置为true将展开面板
事件：onSelect(title,index)：在面板被选中的时候触发
使用$.fn.tabs.defaults重写默认值对象。
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
EasyUI选项卡使用 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ //判断选项卡是否存在 var flag = $("#tt").tabs("exists","客户管理"); if(flag){ //选项卡存在，选中 $("#tt").tabs("select","客户管理"); }else{ //选项卡不存在，创建 $("#tt").tabs('add',{ title:'客户管理', content:'客户管理', closable:true }); } }); }); </script> </head> <body> <a id="btn" href="#" class="easyui-linkbutton">按钮</a> <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"> <div title="数据区域" style="padding: 20px; display: none;"> 数据区域 </div> </div> </body> </html>扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
数据表格使用 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:'datagrid_data1.json', columns:[[ {field:'productid',title:'商品编号',width:100}, {field:'productname',title:'商品名称',width:100}, {field:'unitcost',title:'商品单价',width:100,align:'right'}, {field:'status',title:'商品状态',width:100,align:'right'}, {field:'attr1',title:'商品属性',width:100,align:'right'}, {field:'xxx',title:'操作',width:100,align:'left',formatter: function(value,row,index){ return "<a href='#'>修改</a>|<a href='#'>删除</a>" } } ]], striped:true, pagination:true }); }); </script> </head> <body> <table id="dg"></table> </body> </html> DataGrid属性striped：显示斑马线效果，默认为false
pagination：如果为true，则在DataGrid控件底部显示分页工具栏，默认为false，引入后为英文，显示中文需要引入
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>列属性
title：列标题文本
field：列字段名称
formatter：单元格formatter函数，带3个参数，value字段值、rowData行记录数、rowindex行索引
扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
EasyUI窗口使用 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $('#win').window({ width : 600, height : 400, modal : true }); }); </script> </head> <body> <div id="win"></div> </body> </html>案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./themes/icon.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.easyui.min.js"></script> <style type="text/css"> .menu{ text-decoration:none; } </style> <script type="text/javascript"> $(function(){ $(".menu").click(function(){ //获得超链接中的文本内容 var textContent = this.innerHTML; //获得请求路径 var url = this.href; //alert(url); //创建选项卡 createTabs(textContent,url); //让超链接不跳转 return false; }); }); function createTabs(textContent,url){ //判断选项卡是否存在 var flag = $("#data").tabs("exists",textContent); if(flag){ //选项卡存在，选中 $("#data").tabs("select",textContent); }else{ //选项卡不存在，创建 $("#data").tabs('add',{ title:textContent, content:createUrl(url), closable:true }); } } function createUrl(url){ return "<iframe src='"+url+"' style='border:0px;width:100%;height:95%;'></iframe>"; } </script> </head> <body> <div id="cc" class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',title:'管理系统',split:true" style="height: 150px;"></div> <div data-options="region:'west',title:'菜单栏',split:true" style="width: 200px;"> <div id="aa" class="easyui-accordion" data-options="fit:true"> <div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow: auto; padding: 10px;"> <a href="customer.html" class="menu">客户管理</a> </div> <div title="联系人管理" data-options="iconCls:'icon-reload'" style="padding: 10px;"> <a href="linkman.html" class="menu">联系人管理</a> </div> <div title="拜访记录管理" data-options="iconCls:'icon-reload'" style="padding: 10px;"> <a href="#" class="menu">拜访记录管理</a> </div> <div title="统计分析" data-options="iconCls:'icon-reload'" style="padding: 10px;"> <a href="#" class="menu">统计分析</a> </div> <div title="系统管理" data-options="iconCls:'icon-reload'"> <a href="#" class="menu">系统管理</a> </div> </div> </div> <div data-options="region:'center'" style="padding: 5px; background: #eee;"> <div id="data" class="easyui-tabs" data-options="fit:true"> <div title="数据区域" style="padding: 20px; display: none;"> 欢迎来到CRM管理系统 </div> </div> </div> </div> </body> </html>
