1、EasyUI 是前端框架，封装大量 css和封装大量 JS
2、使用前端框架时，给标签定义class 属性，就会有样式和脚本功能了
3、data-options 属性是定义 easyui 属性的，如果 easyui 提供的属性和 html 标签属性相同,这个属性可以不写在 data-options 中
4、如果效果是静态的建议使用纯 html 标签方式，如果效果是动态建议使用 html 结合 js 方式
5、easyui 中所有脚本功能语法:
如果该效果(组件)是 abc,控制 abc 的语法
$(“jquery 选择器获取到 abc”).abc({ 属性名:值, 事件:function([参数]){} })
6、如果该效果(组件)是 abc,控制 abc 方法的语法
$(“jquery 选择器获取到 abc”).abc(“方法名”);//调用方法 $(“jquery 选择器获取到 abc”).abc(“方法名”,”参数”);//调用方法
7、EasyUI 适用于后台管理界面,不适用于前台项目页面
8、优点:处理服务器传递过来的 json数据能力比较强，只要服务器传回固定格式的json数据，几乎不用写代码，效果就会呈现出来
注：能复制绝对不手写，html为弱规范，就算写错一个字母也不会报错
easyUI项目案例详解
一、登陆界面（login.jsp）
1、Panel（面板） 通过纯 html 标签方式创建面板
<div id="p" class="easyui-panel" title="登录" style="400px;height:200px;padding:10px;background:#fafafa;" data-options="iconCls:'myicon-login'"> <form action="login" method="post" id="login_form"> <table width="225" align="center"> <tr> <td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">用户管理系统</td> </tr> <tr style="height:40px;"> <td>登录名</td> <td><input type="text" name="username"/> </td> </tr> <tr style="height:40px;"> <td> 密码 </td> <td><input type="password" name="password"/> </td> </tr> <tr> <td colspan="2" align="right"> <a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a> </td> </tr> </table> </form> </div>
2、LinkButton（按钮）
$(function(){ $("#btn").click(function(){ alert('easyui'); }); });
3、Form（表单）
$('#ff').form('submit', {
url:...,
onSubmit: function(){
},
success:function(data){
alert(data)
}
});
4、Messager（消息窗口）
$.messager.alert('警告','警告消息');
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
alert('确认删除');
}
});
二、主界面（main.jsp）
1、Layout（布局）
<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div> <div data-options="region:'west',title:'West',split:true" style="100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>
2、Tree（树） 通过html 结合 js 方式创建树
<ul id="tt"></ul>
$('#tt').tree({
url:'tree_data.json'
});
树控件数据格式化
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
点击树节点
$('#tt').tree({
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
3、Tabs（选项卡）
<div id="tt" class="easyui-tabs" style="500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
//如果此标题在选项卡中不存在，则新增选项卡，否则选中此标题对应的选项卡 if($("#tt").tabs("getTab",title)==null){ $('#tt').tabs('add',{ title: '新选项卡面板', //是否选中选项卡 selected: true, //是否可以关闭 closable:true, href：…… }); }else{ $("#tt").tabs("select",title); }
三、角色页面（role.jsp）
1、DataGrid（数据表格）
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',100},
{field:'name',title:'Name',100},
{field:'price',title:'Price',100,align:'right'}
]]
});
数据表格控件数据格式化，分页时需要具备以下属性：
rows：当前页显示的数据
total：表中总个数
toolbar（定义工具栏）
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}]
});
2、Dialog（对话框窗口）
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
400,
height: 200,
closed: false,
cache: false,
href: '……',
modal: true
});
四、角色编辑页面（role_edit.jsp）
1、Form（表单）
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
2、Messager（消息窗口）
$.messager.show({ title:'我的消息', msg:'消息将在5秒后关闭。', timeout:5000, showType:'slide' });