一、 EasyUI入门
1. EasyUI的概念
- 概念： jQuery的插件集合【主要用于页面展示、加载数据】
- 目标：就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面
- 好处：开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。
- 官方网站：http://www.jeasyui.com/
2. EasyUI-hello
-
2.1 .EasyUI框架项目结构
- 目录截图
- 子目录说明
- demo :web案例
- demo-mobile:移动端案例
- locale:本地化（汉化包）
- plugins:easyui所有插件
- src:插件的源码，如果买了商业授权就有全部源码
- themes：主题（皮肤），存放css,img
- changlog.txt:升级日志
- == easyloader.js:==内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；
- jquery.easyui.min.js:所有插件集的压缩文件
- jquery.min.js : easyui当前版本兼容的jquery库
- 目录截图
-
2.2.搭建easyui环境
- web项目加入easyui的项目文件夹
- 建议创建webapp的项目文件名，同maven标准命名
最好不要携带easyui的版本号，升级的时候修改就不是很方便了
-
2.3.导入5个文件
- EasyUI的核心样式文件
- EasyUI的图标支持
- jQuery文件
- EasyUI的核心js文件
- EasyUI的国际化语言包
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
- EasyUI组件创建方式
- 使用HTML标签
- 标签上必须写class属性，值为 easyui-插件名称
- 可以使用自定义属性【初始化时需要解析】
- 可以使用data-options【属性较少的时候使用】
<body>
<!--
使用HTML标签创建组件：
class="easyui-插件名称"
title表示标题
iconCls表示图标的class属性值
collapsible是否显示折叠按钮，默认是false
minimizable是否显示最小化按钮，默认是false
maximizable是否显示最大化按钮，默认是false
closable是否显示关闭按钮，默认是false
fit表示是否填充父级元素的空间,默认是false
1）直接将属性当做HTML标签的属性直接填写
属性名称="属性值"
2）data-options="JSON格式的字符串"【推荐】
data-options="title:'',iconCls:'icon-edit',tools:[{}]"
区别：data-options支持json格式的数组，而直接写标签属性的方式不支持json格式的数组
<div class="easyui-panel" style="height: 300px;" data-options="title:'面板',iconCls:'icon-edit',closable:true,collapsible:true,tools:[{text:'XXX',iconCls:'icon-add',handler:function(){alert('XXX');}},{text:'YYY',iconCls:'icon-edit',handler:function(){alert('YYY');}}]"></div>
-->
<div class="easyui-panel" title="面板" iconCls="icon-add" style="height: 300px;" fit="true"
closable="true" maximizable="true" minimizable="true" collapsible="true" ></div>
</body>
- 使用JS代码
- 写id属性
- $("#id属性值").插件名称({ … });【属性较多时使用】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>_03easyui【使用js代码创建组件】</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
//使用js代码来创建组件【推荐：效率更高，如果使用HTML标签创建要先解析成json对象再创建】
$('#panel').panel({
title: '面板',
iconCls: 'icon-remove',
closable: true,
collapsible: true,
tools: [{
iconCls: 'icon-add',
handler: function() {
alert('XXX');
}
}, {
iconCls: 'icon-edit',
handler: function() {
alert('YYY');
}
}]
});
});
</script>
</head>
<body>
<!--
使用JS代码创建组件：
class="easyui-插件名称"
title表示标题
iconCls表示图标的class属性值
collapsible是否显示折叠按钮，默认是false
minimizable是否显示最小化按钮，默认是false
maximizable是否显示最大化按钮，默认是false
closable是否显示关闭按钮，默认是false
fit表示是否填充父级元素的空间,默认是false
-->
<div id="panel" style="height: 300px;"></div>
</body>
</html>
- 对比
- 创建组件的原理： 解析标签的属性或者data-options的值，或者json对象
- 两种方式都可以用，根据实际情况选择使用哪种方式
- 创建组件的原理： 解析标签的属性或者data-options的值，或者json对象
3.常用组件
- LinkButton
- 一般采用HTML标签方式创建
- 常用属性
iconCls图标类型
plain:true简约风格
<body>
<!--
linkbutton
1）class="easyui-linkbutton"
2）data-options=""
text:'百度一下' 会被a标签之间的文本内容所覆盖
plain 为true表示简洁效果【没有边框】
iconCls表示按钮的图标，值是icon-xxx[其实是icon.css文件中的class属性值名称]
可以自己扩展小图标 https://www.easyicon.net/ https://icomoon.io/
-->
<a id="btn" href="javascript:alert(111);" class="easyui-linkbutton" data-options="iconCls:'icon-add2',plain:true">搜索</a>
</body>
- Panel
- 一般采用HTML方式创建
- 常用属性
- title面板标题
- iconCls图标类型
- closable:true显示关闭按钮
- collapsable:true显示折叠按钮
- fit:true填充父级容器
- tools
- json数组
- ID选择器引用一个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>panel面板</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//修改panel组件的属性默认值：
//$.fn.panel.defaults.closable = true;
$(function(){
$("#loginPanel").panel({
title:'修改后的标题',
iconCls:'icon-ok',
//tools:'#tt',
style:{left:500,top:200},cls:'mypanel'
// tools:[{
// iconCls:'icon-add',
// handler:function(){
// alert("添加按钮");
// }
// },{
// iconCls:'icon-edit',
// handler:function(){
// alert("编辑按钮");
// }
// }]
});
//修改内存中的JSON对象的属性值
//$("#loginPanel").panel("setTitle","哈哈哈");
//修改HTML标签的属性值【修改之后没用】
$("#loginPanel").attr("title", "呵呵呵");
console.debug($.fn.panel.defaults);
});
</script>
<style type="text/css">
.mypanel{
/*left top right bottom四个值都可以定位元素的位置，但是不能直接使用，必须配合position来使用*/
position: absolute;
}
</style>
</head>
<body>
<div class="easyui-panel" id="loginPanel" title='登录' data-options="" style="width: 400px;height: 200px;">
<input type="text" name="username" placeholder="用户名" />
</div>
<div id="tt">
<a href="" class="icon-add"></a>
<a href="" class="icon-edit"></a>
</div>
</body>
</html>
- Tree
- 一般采用JS方式创建
- 常用属性
url远程加载json数据
method请求方式GET或者POST
animate:true动画
checkbox:true显示多选框【全选和取消全选功能】
queryParams远程加载json数据时传入的请求参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>树形菜单</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
/*
1）使用html标签，ul里面放li元素
li元素放span元素，再放ul【子菜单】
2）使用data属性【JSON数组】
3）使用url属性，访问远程的服务器地址，得到JSON数组
需求：给所有菜单绑定点击事件，判断如果是子菜单就弹出一句话，如果是父级菜单就不管
*/
$(function() {
$("#tt").tree({
url:"http://localhost/tree/tree.json",
// data: [{
// "id": 1,
// "text": "组织机构",
// "iconCls": "icon-save",
// "children": [{
// "id": 11,
// "text": "部门管理",
// "iconCls": "icon-ok",
// "url": "department.action"
// }, {
// "id": 12,
// "text": "员工管理",
// "iconCls": "icon-ok",
// "url": "employee.action"
// }, {
// "id": 13,
// "text": "员工管理222",
// "iconCls": "icon-ok",
// "url": "employee.action"
// }]
// },
// {
// "id": 2,
// "text": "系统管理",
// "iconCls": "icon-save",
// "children": [{
// "id": 13,
// "text": "权限管理",
// "iconCls": "icon-ok",
// "url": "permission.action"
// }, {
// "id": 14,
// "text": "角色管理",
// "iconCls": "icon-ok",
// "url": "role.action"
// }]
// }],
//事件属性
onClick: function(node) {
//如果node对象的children不为null并且数组长度大于0，就表示当前菜单是父级菜单，反之就是最终子菜单
if(!node.children || node.children.length == 0){
//链接一个地址，打开一个页面，利用Tab标签页
alert(node.text);
}else{
//如果是父级菜单，当前是展开状态就把它收起来，如果是收起状态就把它展开
if(node.state == "open"){
$("#tt").tree("collapse", node.target);
}else{
$("#tt").tree("expand", node.target);
}
}
}
});
});
</script>
</head>
<body>
<ul id="tt"></ul>
</body>
</html>
- Menu
使用HTML创建
给document绑定一个contextmenu事件
阻止事件传播
打开右键菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>树形菜单</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
/*
*/
$(function() {
//contextmenu : 右键菜单(上下文菜单)
$(document).on('contextmenu', function(event){
//event 事件对象: 描述了事件发生时所有的信息,包含事件名,事件源,触发事件的坐标.
event.preventDefault();//阻止浏览器默认事件
$("#mm").menu("show",{
left: event.pageX,
top: event.pageY
});
});
});
</script>
</head>
<body>
<!--
创建了一个被隐藏的菜单. 菜单需要我们通过js调用显示.
-->
<div id="mm" class="easyui-menu" style="width: 120px;">
<div onclick="javascript:alert('new')">New</div>
<div>
<span>Open</span>
<div style="width: 150px;">
<div>
<span>M1</span>
<div style="width: 120px;">
<div>sub1</div>
<div>sub2</div>
<div>sub3</div>
</div>
</div>
<div>
<span>M2</span>
<div style="width: 120px;">
<div>sub1</div>
<div>sub2</div>
<div>sub3</div>
</div>
</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div data-options="iconCls:'icon-print',disabled:true">Print</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
</body>
</html>
4.组件三要素
- 属性
- 标签的自定义属性：只支持简单的属性值
<div class="easyui-panel" title="面板标题" closed="true"></div>
title,closed都是自定义属性;
- data-options：支持函数与json数组
使用html5中规范data属性. data-options
<div class="easyui-panel" data-options="title:'面板标题',closed:true"></div>
- json对象
使用js创建的时候通过json对象传入
$("#p1").panel({
title:"标题",
closed:false
});
<body>
<div id="p1" class="easyui-panel" title="我的面板" closed="false"> p1 </div>
<a class="easyui-linkbutton" id="changeTitle">修改面板标题</a>
</body>
- 方法
- 插件初始化：$("#id属性值").插件名称({ … });
$('selector').plugin(); //没有传递参数
$('selector').plugin({}); //传递json参数
- 调用方法： $("#id属性值").插件名称(“方法名称”,…);
$('selector').plugin('method', [parameter]);
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
-
总结
如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.- 扩展插件的方法
-
事件：添加与添加属性的语法相似，直接写在初始化的json对象之内
5.可以自己扩展小图标
- 地址：https://www.easyicon.net/ https://icomoon.io/
- 下载小图标16x16
- 放到easyui文件夹下面的themes/icons/之下
- 在easyui/themes/icon.css文件中添加样式规则【不能与已有的样式重名】
6.绑定事件的抽取
- window.methods=｛｝
- 标签上写data-method属性、data-type属性指定事件类型名称【默认click】
- 绑定事件
二、EasyUI综合案例
一部分：
datagrid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数据表格</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
//datagrid推荐使用js代码方式创建
$("#dg").datagrid({
url:'datagrid_data.json', //远程加载数据的url地址
frozenColumns:[[{field:"aaa",checkbox:true}]],//在表格最左侧显示多选框
striped:true, //斑马线效果
columns:[[ //表格中有哪些列，二维数组
/*
每一个列用一个JSON对象表示
通过field属性值去JSON数据中取值
title表示表头的名称
width表示列的宽度
align表示列的值居中居左居右显示，默认居左
hidden 为true的时候表示隐藏当前列
formatter 表示格式化工具【函数对象】
*/
{field:"id",title:"编号",width:'10%',align:'center',hidden:true},
{field:"name",title:"姓名"},
{field:"gender",title:"性别",formatter:function(value,row,index){
//value 表示当前行当前列的值
//row 表示当前行，是一个JSON对象
//index 表示当前行在整个表格中的索引
if(value == 1){
return "<b style='color:red;'>男</b>";
}else{
return "女";
}
}},
{field:"age",title:"年龄"}
]],
loadMsg:'不要慌，马上就来......', //加载数据的时候显示的提示消息
pagination:true, //是否显示分页工具栏
rownumbers:true //是否显示行号
});
});
</script>
</head>
<!--
-->
<body>
<!-- <table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">编码</th>
<th data-options="field:'name'">名称</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>名称1</td>
<td>2323</td>
</tr>
<tr>
<td>002</td>
<td>名称2</td>
<td>4612</td>
</tr>
</tbody>
</table> -->
<!--
这里我们写了一个json文件，通过url属性直接访问，但是今后在项目中往往都需要访问Controller中的一个方法，得到一堆JSON数据
-->
<!-- <table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'id',width:100">编号</th>
<th data-options="field:'name',width:100">姓名</th>
<th data-options="field:'gender',width:100,align:'right'">性别</th>
<th data-options="field:'age',width:100,align:'right'">年龄</th>
</tr>
</thead>
</table> -->
<table id="dg"></table>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$("#tt").tree({
data: [{
"id": 1,
"text": "组织机构",
"iconCls": "icon-save",
"children": [{
"id": 11,
"text": "部门管理",
"iconCls": "icon-ok",
"url": "https://www.baidu.com"
}, {
"id": 12,
"text": "员工管理",
"iconCls": "icon-ok",
"url": "https://www.jd.com"
}, {
"id": 13,
"text": "学员管理",
"iconCls": "icon-ok",
"url": "student.html"
}]
},
{
"id": 2,
"text": "系统管理",
"iconCls": "icon-save",
"children": [{
"id": 13,
"text": "权限管理",
"iconCls": "icon-ok",
"url": "http://www.youku.com"
}, {
"id": 14,
"text": "角色管理",
"iconCls": "icon-ok",
"url": "https://v.qq.com"
}]
}],
//事件属性 匿名函数
onClick: function(node) {
//如果node对象的children不为null并且数组长度大于0，就表示当前菜单是父级菜单，反之就是最终子菜单
if(!node.children || node.children.length == 0){
//链接一个地址，打开一个页面，利用Tab标签页
addTab(node.text, node.url);
}else{
//如果是父级菜单，当前是展开状态就把它收起来，如果是收起状态就把它展开
if(node.state == "open"){
$("#tt").tree("collapse", node.target);
}else{
$("#tt").tree("expand", node.target);
}
}
}
});
});
/*添加Tab标签页*/
function addTab(title, url){
var exists = $("#tabs").tabs("exists", title);
if(exists){
//如果该Tab标签页存在，就选中它，并且刷新它
$("#tabs").tabs("select", title);
//获取选中的面板对象[如果id选择器错误，将会报一个很难查找的错误]
var tab = $('#tabs').tabs('getSelected');
//刷新它
$('#tabs').tabs('update', {
tab: tab,
options: {}
});
}else{
//如果该Tab标签页不存在，就添加
$("#tabs").tabs("add",{
title: title,
selected:true, //添加当前Tab标签页之后立即选中当前标签页
closable:true, //显示关闭按钮
content:'<iframe src="'+url+'" scrolling="auto" frameborder="0" framespacing="0" width="100%" height="600px"></iframe>'
});
}
}
</script>
</head>
<!--
class="easyui-layout" 表示布局【边界布局 东邪西毒南帝北丐中神通】
内部每一个div表示一个区域，region就是区域的意思
split 分割线【是否允许拖动分割线来改变尺寸】
需求：左侧的树形菜单的最终极子菜单被点击后应该打开一个新页面，但是我们想要在一个Tab标签页中打开新页面
1）在树形菜单的点击事件内部修改代码，去添加Tab标签页
2）首先要先了解Tab标签页怎么用？
在一个父级元素div上添加class="easyui-tabs" ，然后在其内部添加多个小div
3）了解Tab标签页如何添加【利用JS代码动态添加】？
4）如果当前点击的子菜单对应的Tab标签页已经存在，那就不添加了，就直接选中它，刷新它的页面内容
-->
<body class="easyui-layout">
<div data-options="region:'north',split:false" style="height:100px;"></div>
<div data-options="region:'west',title:'系统菜单',split:false" style="width:200px;">
<ul id="tt"></ul>
</div>
<div class="easyui-tabs" id="tabs" data-options="region:'center'" style="">
<div title="欢迎" style="padding:20px;display:none;">
<b>欢迎你</b>
</div>
</div>
</body>
</html>
student.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学员列表</title>
<!--导入easyui的核心样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--导入easyui的核心图标样式文件-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<!--导入jQuery核心js文件-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--导入jQuery easyui核心js文件-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--导入jQuery easyui的核心语言包文件-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- jQuery的插件 -->
<script type="text/javascript" src="easyui/jquery.jdirk.js"></script>
<script type="text/javascript">
$(function() {
//datagrid推荐使用js代码方式创建
$("#dg").datagrid({
url:'/studentServlet', //远程加载数据的url地址
frozenColumns:[[{field:"aaa",checkbox:true}]],//在表格最左侧显示多选框
striped:true, //斑马线效果
toolbar:'#toolbar', //工具栏
queryParams:{
pageNo:1,
pageSize:10
},
columns:[[ //表格中有哪些列，二维数组
/*
每一个列用一个JSON对象表示
通过field属性值去JSON数据中取值
title表示表头的名称
width表示列的宽度
align表示列的值居中居左居右显示，默认居左
hidden 为true的时候表示隐藏当前列
formatter 表示格式化工具【函数对象】
*/
{field:"id",title:"编号",width:'5%',align:'center'},
{field:"name",title:"姓名",width:'10%'},
{field:"gender",title:"性别",width:'5%',formatter:function(value,row,index){
//value 表示当前行当前列的值
//row 表示当前行，是一个JSON对象
//index 表示当前行在整个表格中的索引
if(value == 1){
return "<b style='color:red;'>男</b>";
}else{
return "女";
}
}},
{field:"education",title:"学历",width:'10%',formatter:function(value,row,index){
if(value == 1){
return "初中";
}else if(value == 2){
return "高中";
}else if(value == 3){
return "大钻";
}else if(value == 4){
return "奔课";
}else if(value == 5){
return "研究僧";
}else if(value == 6){
return "叫兽";
}
}},
{field:"phone",title:"手机号",width:'10%'},
{field:"email",title:"邮箱",width:'15%'},
{field:"birthDayStr",title:"生日",width:'15%'},
{field:"address",title:"家庭住址",width:'25%'}
]],
loadMsg:'不要慌，马上就来......', //加载数据的时候显示的提示消息
pagination:true, //是否显示分页工具栏
rownumbers:true //是否显示行号
});
//翻页功能
var pager = $("#dg").datagrid("getPager");//得到当前表格的分页工具栏对象
pager.pagination({
onSelectPage : function(pageNumber, pageSize){
//自己使用jQuery发送一个请求
$.post("/studentServlet",{
pageNo:pageNumber,
pageSize:pageSize
},function(data){
//改变datagrid的queryParams属性，就可以自动重新发送请求去加载数据
//data就代表了后端返回的那个Map集合
$("#dg").datagrid("loadData",{
rows:data.rows,
total:data.total
});
},"json");
}
});
//页面加载的时候隐藏window窗口
$("#win").window("close");
});
function openWin(){
//点击新增按钮，弹出一个窗口
$("#win").window("open");
//重置表单
$("#ffff").form("reset");
}
//添加或者修改学生
function saveStudent(){
var obj = $("#ffff").serializeObject();
//学生id的那个隐藏输入框有值，就表示修改
var url = "/addStudent";
if(obj.id && obj.id > 0){
url = "/editStudent";
}
$.post(url,obj,function(data){
//提示一下
$.messager.alert('消息',data.msg,"info");
//刷新表格的数据[自动发送请求去加载数据]
$.post("/studentServlet",{
pageNo:1,
pageSize:10
},function(data){
//改变datagrid的queryParams属性，就可以自动重新发送请求去加载数据
//data就代表了后端返回的那个Map集合
$("#dg").datagrid("loadData",{
rows:data.rows,
total:data.total
});
},"json");
//关闭window窗口
$("#win").window("close");
},"json");
}
//删除学生
function deleteStudent() {
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
//获取到选中的那些行，返回一个数组
var rows = $("#dg").datagrid("getSelections");
if(rows.length == 0){
$.messager.alert('错误','请选择你要删除的数据！！',"error");
return;
}
//拼接学员id的字符串，以逗号隔开
var stuids = [];
for (var i=0;i<rows.length;i++){
stuids.push(rows[i].id);
}
//发送请求
$.post("/deleteStudent",{stuids:stuids.join(",")},function (data) {
//提示一下
$.messager.alert('消息',data.msg,"info");
//刷新表格的数据[自动发送请求去加载数据]
$.post("/studentServlet",{
pageNo:1,
pageSize:10
},function(data){
//改变datagrid的queryParams属性，就可以自动重新发送请求去加载数据
//data就代表了后端返回的那个Map集合
$("#dg").datagrid("loadData",{
rows:data.rows,
total:data.total
});
},"json");
},"json");
}
});
}
//编辑学生【通过id去查询一个学生对象，进行表单回填】
function findOneById() {
//获取到选中的那些行，返回一个数组
var rows = $("#dg").datagrid("getSelections");
if(rows.length == 0){
$.messager.alert('错误','请选择你要编辑的数据！！',"error");
return;
}
if(rows.length > 1){
$.messager.alert('错误','对不起，只能选中一行修改！！',"error");
return;
}
//获取到选中的那一行的id
var id = rows[0].id;
//发送请求
$.getJSON("/findOneById?id="+id,function(data) {
//点击编辑按钮，要打开窗口
$("#win").window("open");
//修改窗口的标题
$("#win").window("setTitle", "修改学生信息");
//重置表单
$("#ffff").form("reset");
//表单回填【要求表单输入框的name属性值必须与对象的属性名称保持一致】
$("#ffff").form("load", data);
//手动回填生日
$("#birthDay").val(data.birthDayStr);
});
}
</script>
<style type="text/css">
.form-div{
width: 200px;
height: 30px;
margin: auto;
}
.form-div .in{
width: 200px;
height: 20px;
border:1px solid olive;
}
</style>
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
<!--
点击新增按钮，弹出一个窗口【div】，内部放一个表单，让用户填入一些数据，然后提交----》添加到数据库的student表中
1）先做删除【选中一行或者多行，删除数据】
datagrid如何获取到你选中了哪些行？
如何获取选中的行的id？
拼接学员id的字符串，以逗号隔开
String sql = "delete from student where id in(......)"
只能使用字符串拼接，不能使用?占位符
@Override
public void delete(String ids) {
String sql = "delete from student where id in("+ids+")";
//Ctrl + Alt + T
try {
qr.update(sql);
} catch (SQLException e) {
e.printStackTrace();
}
}
2）在做修改
1）只能修改一行，选中一行数据，获取到id，通过id到Servlet中去查询 findOneById
返回JSON数据，然后表单回填
2）提交修改数据
注意：
隐藏的文本框，填写id
其他的与新增一样
-->
<a href="javascript:openWin();" class="easyui-linkbutton" data-options="iconCls:'icon-add2',plain:true">新增</a>
<a href="javascript:deleteStudent();" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
<a href="javascript:findOneById();" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
</div>
<div id="win" class="easyui-window" title="新增学员信息" style="width:300px;height:300px"
data-options="iconCls:'icon-add',modal:true,collapsible:false,minimizable:false,maximizable:false">
<form id="ffff">
<input type="hidden" name="id" id="studentID" />
<div class="form-div" style="margin-top:10px;">
<input type="text" class="in" name="name" placeholder="姓名" />
</div>
<div class="form-div">
<input type="radio" checked name="gender" value="1" />男
<input type="radio" name="gender" value="2" />女
</div>
<div class="form-div">
<select name="education" class="in">
<option value="0">请选择学历</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大专</option>
<option value="4">本科</option>
<option value="5">研究生</option>
<option value="6">叫兽</option>
</select>
</div>
<div class="form-div">
<input type="text" class="in" name="phone" placeholder="手机号" />
</div>
<div class="form-div">
<input type="text" class="in" name="email" placeholder="邮箱" />
</div>
<div class="form-div">
<input type="text" class="in" name="birthDay" id="birthDay" placeholder="生日" />
</div>
<div class="form-div">
<input type="text" class="in" name="address" placeholder="家庭住址" />
</div>
<div class="form-div">
<a href="javascript:saveStudent();" class="easyui-linkbutton" data-options="iconCls:'icon-add2'">确认提交</a>
</div>
</form>
</div>
</body>
</html>
学习：
怎样才能学会easyui
先看官方案例
http://localhost:8888/demo/main/index.php
如果没有找看官方文档jQuery EasyUI 1.5 版 API 中文版.exe
如果还搞不定，才百度
扫一扫
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
