easyui---使用教程

一、概述

easyui ---->easy ui ====user interface
layui
vue.js
bootstrap

是一个非常好用的前端框架,一般使用在后台管理系统
http://www.jeasyui.com/

二、下载

http://www.jeasyui.com/download/index.php

1.目录说明

demo 例子
demo-moblie 移动端的案例
locale 本地化的js [国际化] i18n
plugins 插件
src 非插件的源代码
themes 主题
easyloader 封装的ajax的js
jquery.easyui.min.js easyui的核心 js
jquery.min.js jquery

因为easyui基于jquery那么在引入js的时候必须先引入jquery 再引入jqery.easyui.min.js

三、知识点

1.Panel
2.Layout
3.Tabs
4.LinkButton
5.SearchBox
6.Tree
7.ComboTree
8.DateBox、DateTimeBox、Calendar
9.TextBox、文本域
10.PasswordBox
11.RadioButton
12.CheckBox
13.ComboBox
14.FileBox
15.ValidateBox
16.Form
17.Dialog
18.Messager
19.DataGrid
可以展开的DataGrid

四、准备工作

1.创建项目

2.引入easyui的样式和js

五、Panel[面板]

1.使用HTML方式实现

相关样式
class: easyui-panel

<body><h2>基础面板</h2><div style="margin:20px 0 10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a></div><div id="p" class="easyui-panel" iconCls="icon-ok"width="50%" height="200px"  border="true" collapsible="true" minimizable="true" maximizable="true" closable="true"footer="#foo"  closed="false"  title="基本面板" style="padding:10px;">我是一个面板</div><div id="foo">我是脚</div><div id="p2" class="easyui-panel" iconCls="icon-ok"width="50%" height="200px"  border="true" collapsible="true" minimizable="true" maximizable="true" closable="true"footer="#foo2"  closed="false"   href="index.jsp"  method="post"title="面板加载其它页面" style="padding:10px;">fsadfdsafdsafdsafdsa</div><div id="foo2">我是脚</div></body><script type="text/javascript"></script>
</html>

2.使用HTML方式实现2

data-options:作用：对所有属性进行打包
3.使用JS实现

<body><h2>基础面板</h2><div id="p" class="easyui-panel"></div>    <div id="foo"></div><input type="button" value="关闭" id="btn1"><input type="button" value="打开" id="btn2"><input type="button" value="更新标题" id="btn3"><input type="button" value="清空内容" id="btn4"><input type="button" value="刷新" id="btn5"><input type="button" value="展开" id="btn6"><input type="button" value="收起" id="btn7"></body><script type="text/javascript">$("#btn1").click(function(){$('#p').panel("close");});$("#btn2").click(function(){$('#p').panel("open");});$("#btn3").click(function(){$('#p').panel("setTitle","我是新标题");});$("#btn4").click(function(){$('#p').panel("clear");});$("#btn5").click(function(){$('#p').panel("refresh");});$("#btn6").click(function(){$('#p').panel("expand");});$("#btn7").click(function(){$('#p').panel("collapse");});$('#p').panel({width:500,height:150,title:'My Panel',iconCls:'icon-save',border:true,collapsible:true,minimizable:true,maximizable:true,closable:true,footer:"#foo",closed:false,href:'index.jsp',method:'post',tools:[{iconCls:'icon-add',handler:function(){alert('new');}},{iconCls:'icon-save',handler:function(){alert('save');}}]}); </script>
</html>

4.相关属性

id="p2"     标记id
title=    "面板加载其它页面"     面板头上显示的文字
class="easyui-panel"     使用的样式
iconCls="icon-ok"      面板头文字左边的图标
width="50%"      宽度
height="200px"    高度
border="true"     是否显示边框  默认为true
collapsible="true"     是否显示展开和收起的按钮
minimizable="true"     是否显示最小化的按钮
maximizable="true"    是否显示最大化的按钮
closable="true"    是显示关闭的按钮
footer="#foo2"      面板的脚
closed="false"       是否默认关闭  默认为false
href="index.jsp"     面板内容的请求接口
method="post"    面板内容请求接口的请求方式

5.相关方法

 <input type="button" value="关闭" id="btn1"><input type="button" value="打开" id="btn2"><input type="button" value="更新标题" id="btn3"><input type="button" value="清空内容" id="btn4"><input type="button" value="刷新" id="btn5"><input type="button" value="展开" id="btn6"><input type="button" value="收起" id="btn7"></body><script type="text/javascript">$("#btn1").click(function(){$('#p').panel("close");});$("#btn2").click(function(){$('#p').panel("open");});$("#btn3").click(function(){$('#p').panel("setTitle","我是新标题");});$("#btn4").click(function(){$('#p').panel("clear");});$("#btn5").click(function(){$('#p').panel("refresh");});$("#btn6").click(function(){$('#p').panel("expand");});$("#btn7").click(function(){$('#p').panel("collapse");});

六、Layout【布局】

在easyui里面上下左右中
北南西东中
north south west east center
只用掌握html的使用方法
1.实现北南西东中

<body><div id="l" class="easyui-layout" data-options="withd:'100%',height:'100%'"><div class="easyui-panel" data-options="region:'north',split:true,title:'北',iconCls:'icon-search',height:'150px'">北</div><div class="easyui-panel" data-options="region:'south',split:true,title:'南',iconCls:'icon-ok',height:'80px'">南</div><div class="easyui-panel" data-options="region:'west',split:true,title:'西',iconCls:'icon-ok',width:'20%'">西</div><div class="easyui-panel" data-options="region:'east',split:true,title:'东',iconCls:'icon-ok',width:'20%'">东</div><div class="easyui-panel" data-options="region:'center',split:true,title:'中',iconCls:'icon-ok'">中</div></div>

2.相关样式
class=“easyui-layout”
3.相关属性【使用子元素里面】
region:‘north’
|–指定方位 north south west east center

split:true

4.使用DIV实现两个Panel水平排列

<body ><div class="easyui-layout" data-options="height:'300px'"><div class="easyui-panel" data-options="region:'center',split:true,title:'中',iconCls:'icon-ok'">中</div><div class="easyui-panel" data-options="region:'east',split:true,title:'东',iconCls:'icon-ok',width:'30%'"><div class="easyui-calendar" data-options="width:'100%',height:'100%',border:false"></div></div></div></body>

七、Tabs

  <body ><div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"><div data-options="title:'首页',iconCls:'icon-save',href:'index.jsp'">首页</div><div title="用户管理" iconCls="icon-search" data-options="closable:true">用户管理</div><div title="系统管理" iconCls="icon-ok">系统管理</div></div><div id="tab-tools"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="refreshCurrentTab()"></a></div></body><script type="text/javascript">function refreshCurrentTab(){var tab = $('#tt').tabs('getSelected');  // 得到选中的tabvar tabIndex = $('#tt').tabs('getTabIndex',tab);  // 得到选中的tab的index//刷新tab.panel('refresh', 'index.jsp');//更新tab里面的内容/**$('#tt').tabs('update', {tab: tab,//要更新的目标taboptions: {title: '更新后',href: 'index.jsp'  // the new content URL}});**/}</script>

八、LinkButton

1.相关代码

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a><a href="#" class="easyui-linkbutton">Text Button</a><hr><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a><a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-help'"> </a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'"></a><a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'"></a><hr><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'bottom'">Picture</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'left'">Shapes</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'right'">SmartArt</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>

2.相关属性
class=“easyui-linkbutton” 代表使用linkbutton的样式渲染
plain:true 是否显示边框
size:‘large’ 是否启用大图标
iconAlign:‘bottom’ 设置图标的所在位置 left top right bottom
s

九、SearchBox[熟悉]

1.相关代码

2.相关属性
searcher :点击右边的放大镜触发的事件
menu 设置输入框左边的下拉选项

十、Tree


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>06tree.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css"><script type="text/javascript" src="resources/easyui/jquery.min.js"></script><script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script></head><body ><div class="easyui-panel" style="padding:5px"><ul id="tt" class="easyui-tree" data-options="url:'json/tree.json',method:'get',animate:true,lines:true,checkbox:true,onDblClick: function(node){$(this).tree('beginEdit',node.target);},onAfterEdit:function(node){alert(node.text+'  '+node.id);}"></ul></div><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="getSelectedNodes()">得到选中节点</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="initTreeWithJs()">使用js初始化树</a><div class="easyui-panel" style="padding:5px"><div id="tt2" class="easyui-tree" ></div></div></body><script type="text/javascript">function getSelectedNodes(){var nodes1 = $('#tt').tree('getChecked'); // get checked nodesvar nodes2 = $('#tt').tree('getChecked', 'unchecked');   // get unchecked nodesvar nodes3 = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodesvar nodes4 = $('#tt').tree('getChecked', ['checked','indeterminate']);   // get checked and indeterminate nodescon(nodes1);alert("--------------");con(nodes2);alert("--------------");con(nodes3);alert("--------------");con(nodes4);alert("--------------");}function con(nodes){for(var i=0;i<nodes.length;i++){alert(nodes[i].text);}}function initTreeWithJs(){$("#tt2").tree({url:'json/tree.json',method:'get',animate:true,lines:true,checkbox:true,onDblClick: function(node){$(this).tree('beginEdit',node.target);},onAfterEdit:function(node){alert(node.text+'  '+node.id);}});}</script>
</html>

树的json格式

[{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend","iconCls":"icon-add"},{"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":"welcome.html"}]
}]

十一、ComboTree【下拉树】

<body ><div class="easyui-panel" style="padding:5px;width: 50%"><input id="cc" class="easyui-combotree" data-options="url:'json/tree.json',method:'get',label:'Select Node:',labelPosition:'top',multiple:true" style="width:100%"></div><a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a></body><script type="text/javascript">function getValue(){var val = $('#cc').combotree('getValue');alert(val);}function setValue(){$('#cc').combotree('setValue', '122');}function disable(){$('#cc').combotree('disable');}function enable(){$('#cc').combotree('enable');}</script>

相关属性

url:'json/tree.json',
method:'get',
label:'Select Node:', 设置下拉框的标记
labelPosition:'left', 设置标记文字的位置 top  left  默认为top
labelWidth:'20%',  设置标记文字的宽度
labelAlign:'right',  标记文字的对齐方式left center right  默认为left
multiple:true  是否启多选

十二、DateBox、DateTimeBox、Calendar

十三、TextBox、文本域

<div style="margin-bottom:20px"><input class="easyui-textbox" data-options="label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名',value:'admin',editable:true,readonly:false,required:true" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" data-options="label:'用户备注:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户备注',multiline:true" style="width:100%;height: 60px"></div>

相关属性
value 设置默认值
editable 设置是否可以编辑，但是可以得到焦点
readonly 设置是否只读，如果只读就不会得到焦点
disable 设置不可用
required 是否启用非空验证
multiline 是否启用多多输入

十四、PasswordBox

十五、RadioButton

在easyui的低版本里面是没有RadioButton

<div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">爱好:</label><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA" label="DOTA"><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" label="DNF"><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF" label="CF"><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL" label="LOL"></div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">爱好:</label><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA"><label style="margin-left: 10px">DOTA</label><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" ><label style="margin-left: 10px">DNF</label><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF"><label style="margin-left: 10px">CF</label><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL"><label style="margin-left: 10px">LOL</label></div>

十六、CheckBox

在easyui的低版本里面是没有checkBox

</div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">爱好:</label><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA" label="DOTA"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" label="DNF"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF" label="CF"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL" label="LOL"></div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">爱好:</label><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA"><label style="margin-left: 10px">DOTA</label><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" ><label style="margin-left: 10px">DNF</label><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF"><label style="margin-left: 10px">CF</label><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL"><label style="margin-left: 10px">LOL</label></div>

十七、ComboBox[下拉列表]

json
[
{“id”:1,“name”:“水瓶座”},
{“id”:2,“name”:“金牛座”},
{“id”:3,“name”:“双鱼座”},
{“id”:4,“name”:“狮子座”},
{“id”:5,“name”:“双子座”},
{“id”:6,“name”:“射手座”}
]

html

相关属性
valueField:‘id’ 当数据来源一json请求时把json里面的id属性值作为其option的value的值
textField:‘name’ 当数据来源一json请求时把json里面的name属性值作为其option的显示值

十八、FileBox[文件上传]

  <div style="margin-bottom:20px"><input class="easyui-filebox" data-options="label:'用户头像:',labelPosition:'left',labelAlign:'right',prompt:'请选择用户头像'" style="width:70%;"><a class="easyui-linkbutton" data-options="iconCls:'icon-add'">上传</a></div>

十九、ValidateBox

<body ><div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%"><form action=""><div style="margin-bottom:20px"><input class="easyui-textbox" data-options="required:true,validType:'length[6,10]',label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" data-options="required:true,validType:'email',label:'邮箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" data-options="required:true,validType:'url',label:'博客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" data-options="required:true,validType:'phone',label:'电话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-passwordbox" id="pwd1" data-options="required:true,label:'密码1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-passwordbox" validType="equals['#pwd1']" data-options="required:true,label:'密码2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'" style="width:100%;"></div></form></div></body><script type="text/javascript">$.extend($.fn.validatebox.defaults.rules, {equals: {validator: function(value,param){return value == $(param[0]).val();},message: '两次密码不一致.'},phone: {validator: function(value){var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;if(TEL_REGEXP.test(value)){return true;}return false;},message: '请输入有效的手机号.'}});</script>
</html>

自带的验证规则
required:true 非空验证
validType:‘length[6,10]’ 长度验证
validType:‘url’ 链接地址验证
validType:‘email’ 邮箱地址验证

自定义验证规则

二十、Form[表单]

1.相关代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>11form.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css"><script type="text/javascript" src="resources/easyui/jquery.min.js"></script><script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script></head><body ><div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%"><form action="" method="get" id="dataFrm"><div style="margin-bottom:20px"><input class="easyui-textbox" name="username" value="administrator" data-options="required:true,validType:'length[6,20]',label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="email" value="88888@qq.com" data-options="required:true,validType:'email',label:'邮箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="blog" value="http://laolei.vip" data-options="required:true,validType:'url',label:'博客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="phone" value="13411111111" data-options="required:true,validType:'phone',label:'电话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-passwordbox" name="pwd" id="pwd1" data-options="required:true,label:'密码1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'" style="width:100%;"></div><div style="margin-bottom:20px"><input class="easyui-passwordbox" name="pwd2" validType="equals['#pwd1']" data-options="required:true,label:'密码2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'" style="width:100%;"></div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">性别:</label><input class="easyui-radiobutton"  data-options="labelAlign:'right',labelWidth:50" name="sex" value="1" label="男"><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50" name="sex" value="0" label="女"></div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">爱好:</label><input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="DOTA" label="DOTA"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="DNF" label="DNF"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="CF" label="CF"><div style="display: inline-block;width: 30px"></div><input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="LOL" label="LOL"></div><div style="margin-bottom:20px"><select class="easyui-combobox" data-options="url:'json/combobox.json',method:'get',valueField:'id',textField:'name',label:'星座:',labelPosition:'left',labelAlign:'right'" style="width:100%;"></select></div><div style="margin-bottom:20px;text-align: center;" ><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">提交</a><a class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="javascript:$('#dataFrm').form('reset');">重置</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:$('#dataFrm').form('clear');">clear</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doLoad">装载</a></div></form></div></body><script type="text/javascript">$.extend($.fn.validatebox.defaults.rules, {equals: {validator: function(value,param){return value == $(param[0]).val();},message: '两次密码不一致.'},phone: {validator: function(value){var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;if(TEL_REGEXP.test(value)){return true;}return false;},message: '请输入有效的手机号.'}});//监听提交事件$("#doSubmit").click(function(){$.messager.progress();   // display the progress bar $('#dataFrm').form('submit', {url: 'index.jsp',method:'post',onSubmit: function(){var isValid = $(this).form('validate');//触发验证if (!isValid){$.messager.progress('close'); // hide progress bar while the form is invalid}return isValid;  // return false will stop the form submission},success: function(data){//提交成功之后的回调方法$.messager.progress('close'); // hide progress bar while submit successfully}});});//装载$("#doLoad").click(function(){var json={username:'zhangxiaoming',email:'99999@qq.com',blog:'http://laolei.tech',phone:'15333331113',pwd:'123456',pwd2:'123456',sex:1,hobby:["DOTA","LOL","CF"]};//$('#dataFrm').form("load",json);$('#dataFrm').form("load","json/user.json");});</script>
</html>

2.相关方法
1，submit
2，load
3，clear
4，reset

二十一、Dialog[弹出层]

1.使用HTML的实现方式[重点]

 <div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:'#dlg-tools',buttons:'#dlg-buttons'">我是弹出层里面的内容</div>  <div id="dlg-tools"><a class="easyui-linkbutton" data-options="iconCls:'icon-save'">修改</a><a class="easyui-linkbutton" data-options="iconCls:'icon-reload'">删除</a></div><div id="dlg-buttons" style="text-align:center;"><a class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a><a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a></div>

2.使用JS的实现方式[熟悉]

$("#dlg2").dialog({title:'添加用户',iconCls:'icon-add',closed:true, modal: true,collapsible:true,minimizable:true,maximizable:true,resizable:true,href:'11form.jsp',method:'get'//toolbar:'#dlg-tools',//buttons:'#dlg-buttons'});

二十二、Messager

<body><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开1alert</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开2confirm</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开3prompt</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开4progress</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开5show</a></body><script type="text/javascript">$("#btn1").click(function(){$.messager.alert('Warning','The warning message');});$("#btn2").click(function(){$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){if (r){alert('ok');}});});$("#btn3").click(function(){$.messager.prompt('Prompt', 'Please enter your name:', function(r){if (r){alert('Your name is:' + r);}});});$("#btn4").click(function(){$.messager.progress(); //打开进度条$.messager.progress("close");  //关闭进度条});$("#btn5").click(function(){$.messager.show({title:'My Title',msg:'Message will be closed after 5 seconds.',//timeout:5000,showType:'show'});});</script>

二十三、DataGrid【数据表格】

1.JSON格式
{
“total”:30,rows:[
{},{},{}
]
}
{“total”:28,“rows”:[
{“productid”:“FI-SW-01”,“productname”:“Koi”,“unitcost”:“10.00”,“status”:“1”,“listprice”:“36.50”,“attr1”:“Large”,“itemid”:“EST-1”},
{“productid”:“K9-DL-01”,“productname”:“Dalmation”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“18.50”,“attr1”:“Spotted Adult Female”,“itemid”:“EST-10”},
{“productid”:“RP-SN-01”,“productname”:“Rattlesnake”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“38.50”,“attr1”:“Venomless”,“itemid”:“EST-11”},
{“productid”:“RP-SN-01”,“productname”:“Rattlesnake”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“26.50”,“attr1”:“Rattleless”,“itemid”:“EST-12”},
{“productid”:“RP-LI-02”,“productname”:“Iguana”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“35.50”,“attr1”:“Green Adult”,“itemid”:“EST-13”},
{“productid”:“FL-DSH-01”,“productname”:“Manx”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“158.50”,“attr1”:“Tailless”,“itemid”:“EST-14”},
{“productid”:“FL-DSH-01”,“productname”:“Manx”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“83.50”,“attr1”:“With tail”,“itemid”:“EST-15”},
{“productid”:“FL-DLH-02”,“productname”:“Persian”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“23.50”,“attr1”:“Adult Female”,“itemid”:“EST-16”},
{“productid”:“FL-DLH-02”,“productname”:“Persian”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“89.50”,“attr1”:“Adult Male”,“itemid”:“EST-17”},
{“productid”:“AV-CB-01”,“productname”:“Amazon Parrot”,“unitcost”:“92.00”,“status”:“1”,“listprice”:“63.50”,“attr1”:“Adult Male”,“itemid”:“EST-18”}
]}
2.使用html实现

<body><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开1alert</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开2confirm</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开3prompt</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开4progress</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开5show</a><table class="easyui-datagrid" style="width:'100%';height:250px" data-options="title:'数据列表',iconCls:'icon-save',singleSelect:true,collapsible:true,url:'json/datagrid.json',method:'get',fitColumns:true,toolbar:'#tb',loadMsg:'数据正在努力加载中。。。',emptyMsg:'查无数据',pagination:true,rownumbers:true,pagePosition:'bottom',pageNumber:1,pageSize:10,pageList:[5,10,15,20,25]"><thead><tr><th data-options="field:'ck',checkbox:true"></th><th data-options="field:'itemid',width:80,title:'ID',width:100,align:'center',halign:'center'">ID</th><th data-options="field:'productid',width:100,hidden:true">Product</th><th data-options="field:'listprice',width:80,align:'right',sortable:true">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',formatter:statusFmt">Status</th></tr></thead></table><div id="tb"><a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a></div></body><script type="text/javascript">function statusFmt(value,row,index){return value==1?'男':'女';}$("#btn1").click(function(){});$("#btn2").click(function(){});$("#btn3").click(function(){});$("#btn4").click(function(){});$("#btn5").click(function(){});</script>
</html>

3.使用js实现[掌握]

  <body><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">刷新</a><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">得到选中行</a><table id="tb" style="width:'100%';height:250px" ></table><div id="toolbar"><a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a></div></body><script type="text/javascript">//加载表格数据$("#tb").datagrid({title:'数据列表',iconCls:'icon-save',singleSelect:true,collapsible:true,url:'json/datagrid.json',method:'get',fitColumns:true,toolbar:'#toolbar',loadMsg:'数据正在努力加载中。。。',emptyMsg:'查无数据',pagination:true,rownumbers:true,pagePosition:'bottom',pageNumber:1,pageSize:10,pageList:[5,10,15,20,25],columns:[[{field:'ck',checkbox:true},{field:'itemid',width:80,title:'Item ID',width:100,align:'center',halign:'center'},{field:'productid',width:100,hidden:true,title:'productid'},{field:'listprice',width:80,align:'right',sortable:true,title:'listprice'},{field:'unitcost',width:80,align:'right',title:'unitcost'},{field:'attr1',width:250,title:'attr1'},{field:'status',width:60,align:'center',title:'statu',formatter:function(value,row,index){return value==1?'男':'女';}}]],onDblClickRow:function(index,row){alert(row.itemid+"  "+row.status);},});function statusFmt(value,row,index){return value==1?'男':'女';}$("#btn1").click(function(){$("#tb").datagrid("reload");});$("#btn2").click(function(){var row=$("#tb").datagrid("getSelected");if(row){$.messager.show({title:"提示",msg:'选择中了'+row.productid});}else{$.messager.show({title:"提示",msg:'请选中操作行'});}});</script>
</html>

二十四、可以展开的DataGrid

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=&sort=asc

二十五、综合案例

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>14datagrid1.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/metro/easyui.css"><link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css"><script type="text/javascript" src="resources/easyui/jquery.min.js"></script><script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script></head><body><!-- 用户数据表格开始 --><table id="userTb" style="width:'100%';height:350px" ></table><div id="toolbar"><a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addUser">添加用户</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="updateUser">修改用户</a><a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="deleteUser">删除用户</a></div><!-- 用户数据表格结束 --><!-- 添加  修改的弹出层开始 --><div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,collapsible:true,minimizable:true,maximizable:true,resizable:true,buttons:'#dlg-buttons'"><form action="" method="get" id="dataFrm"><div style="margin-bottom:20px;margin-top: 20px;"><input class="easyui-textbox" name="userid"  data-options="required:true,label:'用户ID:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="username"  data-options="required:true,label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="money"  data-options="required:true,label:'存款:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:95%;"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="remark" data-options="required:true,label:'备注:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:95%;"></div><div style="margin-bottom:20px"><label class="textbox-label" style="text-align: right;">性别:</label><input class="easyui-radiobutton"  data-options="labelAlign:'right',labelWidth:50" name="sex" value="1" label="男" checked="checked"><div style="display: inline-block;width: 30px"></div><input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50" name="sex" value="0" label="女"></div></form></div>  <div id="dlg-buttons" style="text-align:center;"><a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">保存</a><a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a></div><!-- 添加  修改的弹出层结束 --></body><script type="text/javascript">//加载表格数据$("#userTb").datagrid({title:'用户列表',iconCls:'icon-save',singleSelect:true,collapsible:true,url:'json/datagrid_user.json',method:'get',fitColumns:true,toolbar:'#toolbar',loadMsg:'数据正在努力加载中。。。',emptyMsg:'查无数据',pagination:true,rownumbers:true,pagePosition:'bottom',pageNumber:1,pageSize:10,pageList:[5,10,15,20,25],columns:[[{field:'userid',width:80,title:'用户编号',width:100,align:'center',halign:'center'},{field:'username',width:100,hidden:true,title:'用户姓名'},{field:'sex',width:60,align:'center',title:'用户性别',formatter:function(value,row,index){return value==1?'男':'女';}},{field:'money',width:80,align:'right',sortable:true,title:'存款'},{field:'remark',width:80,align:'right',title:'用户备注'}]],onDblClickRow:function(index,row){alert(row.userid+"  "+row.remark);}});var url;//打开添加页面$("#addUser").click(function(){$("#dlg").dialog("open").dialog("setTitle","添加用户");//清空form里面的数据$("#dataFrm").form("clear");url="user/addUser.action";});//打开修改页面$("#updateUser").click(function(){var row=$("#userTb").datagrid("getSelected");if(row){$("#dlg").dialog("open").dialog("setTitle","修改用户");//装载数据$("#dataFrm").form("load",row);url="user/updateUser.action";}else{$.messager.show({title:"提示",msg:'请选中操作行'});}});//保存$("#doSubmit").click(function(){$.messager.progress();  // 显示进度条$('#dataFrm').form('submit', {url: url,method:'post',onSubmit: function(){var isValid = $(this).form('validate');//触发验证if (!isValid){$.messager.progress('close');   // 验证失败后关闭进度条}return isValid;   // 返回验证状态},success: function(data){//提交成功之后的回调方法$.messager.progress('close'); //关闭进度条//刷新表格$("#userTb").datagrid("reload");}});});$("#deleteUser").click(function(){var row=$("#userTb").datagrid("getSelected");if(row){$.messager.confirm('提示','你确定要删除+'+row.username+'吗?',function(r){if (r){alert('ok  删除');//刷新表格$("#userTb").datagrid("reload");}});}else{$.messager.show({title:"提示",msg:'请选中操作行'});}});</script>
</html>