Web-第十六天 EasyUI【悟空教程】
今日内容介绍
DataGrid组件管理数据
今日内容学习目标
DataGrid组件管理数据
第1章 DataGrid组件管理数据
1.1 需求
今天我们要用EASYUI中的DataGrid组件对数据的显示进行管理
1.2 相关知识点
1.2.1 EasyUI介绍
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
1.2.2 EasyUI文件的导入
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
注意:文件的导入顺序: jquery文件要位于jquery.easyui.min.js文件的上方
帮助文档:参见JQuery EasyUI v1.3.5官方API中文版.exe
如何测试EasyUI安装成功?
在测试页面中demo01.html中引入EasyUI文件,复制帮助文档中linkbutton组件的案例代码
<a id="btn" href="#" data-options="iconCls:'icon-search'">easyui</a>
看到如下效果,表示EasyUI安装成功.
1.2.3 EasyUI运行原理以及组件使用的通用规律
1.2.3.1 EasyUI运行原理:
当浏览器是识别到案例中的案例代码后,easyui要通过识别a链接标签上不同的属性,例如
class的值,data-options属性中的不同的值,将标签a渲染为一个linkbutton组件.类似的
EasyUI通过识别HTML标签上不同的属性值来将各个不同的标签渲染为不同的组件.
1.2.3.2 EasyUI组件调用通用规律
通过我们研究帮助文档中linkbutton组件的使用方式,得出使用EasyUI组件的通用规律
*_HTML创建组件的通用格式:
<标签名 id="btn"
class="easyui-组件名称"
data-options="属性1:值1,属性2:值2">easyui</标签名>
*_JQ方式创建组件
<标签名 id="btn" href="#">easyui</标签名>
$('#btn').组件名称({
组件属性1:值1,
组件属性2:值2
});
PS:组件具有2种属性:HTML标签自身具有的属性和组件自身具有的属性,
用2种方式创建组件时属性的设置格式
*_组件上方法的调用:
$('#btn').组件名称('方法名称');
*_组件上事件的绑定
JQ本身支持的事件,可以用JQ的语法
$(“#btn”).JQ事件名(function(){
alert(“easyUI_linkbutton”);
});
组件自身支持的事件,可以用以下形式语法
$(“#btn”).组件名称({
title:”标题”,
事件名称1:function(){.....},
事件名称2:function(){.....}
});
1.3 组件dialog
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。
1.3.1 Html方式创建dialog组件((了解))
<div class=”easyui-dialog”
style=”width:400;height:200” title=”标题”
data-options="iconCls:'icon-man',resizable:false,modal:true"><div>
1.3.2 JQ形式创建dialog组件
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
href: '/day32/ServletDemo' ,
modal: true
});
1.3.3 组件dialog自身的属性
iconCls 窗口的图标
resizable 窗口是否可以调整大小
modal 窗口是否为模态窗口
title 窗口的标题
width 窗口的宽
height 窗口的高
closed 窗口是否是关闭的,
href 从URL读取远程数据并且显示到窗口
toolbar 设置对话框窗口顶部工具栏
[{iconCls:"icon-add", text:"增加车辆", handler:function(){alert("add Car");}},{},{}],
buttons 对话框窗口底部按钮
[{text:'确定', iconCls:'icon-ok', handler:function(){alert("确定");}},{},{}]
1.3.4 组件自身方法
$("#dd").window("open");//打开窗口
$("#dd").window("close");//关闭窗口
$("#dd").dialog("refresh","test02.html");
//重新刷新窗口,加载服务端的资源test02.html
1.4 组件DataGrid
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
1.4.1 HTML方式创建DataGrid
<table>
<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>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
<table style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
1.4.2 JQ方式创建DataGrid组件
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
<table class="easyui-datagrid" style="width:700px;height:250px"
data-options="url:'datagrid_data2.json',fitColumns:true,
singleSelect:true,pagination:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
1.5 form组件
1.5.1 创建一个简单的HTML表单。
构建一个包含id、action和method值的表单元素。
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" name="email" data-options="validType:'email'" />
</div>
</form>
使普通表单成为ajax提交方式的表单。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
1.5.2 测试用例
<button onclick="fn1()">加载数据</button>
<button onclick="fn2()">清空数据</button>
<button onclick="fn3()">提交数据</button>
<form id="fm">
用户名:<input type="text" name="username"/><br/>
密 码:<input type="text" name="userpass"/><br/>
</form>
function fn1(){
var obj={"username":"tom","userpass":"123"};
$("#fm").form("load",obj);
}
function fn2(){
$("#fm").form("clear");
}
function fn3(){
$('#fm').form('submit', {
url:"test.jsp",
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data);
if(data=="ok"){
alert("提交成功");
}else{
alert("提交失败");
}
}
});
}
服务端代码
String um=request.getParameter("username");
String up=request.getParameter("userpass");
if(null!=um&&null!=up&&um.length()>0&&up.length()>0){
if(um.equals("tom")&&up.equals("123")){
out.print("ok");
}else{
out.print("no");
}
}
1.6 案例实现
1.6.1 数据库实现
create database stu;
use stu;
create table stu(
stuId int primary key auto_increment,
stuNum int,
stuName varchar(30),
stuSex varchar(30),
stuAge int,
stuQQ varchar(30)
);
insert into stu values(null,1,"tom1","female",18,"12646123");
insert into stu values(null,2,"tom2","female",18,"12646123");
insert into stu values(null,3,"tom3","female",18,"12646123");
insert into stu values(null,4,"tom4","female",18,"12646123");
insert into stu values(null,5,"tom5","female",18,"12646123");
insert into stu values(null,6,"tom6","female",18,"12646123");
insert into stu values(null,7,"tom7","female",18,"12646123");
insert into stu values(null,8,"tom8","female",18,"12646123");
insert into stu values(null,9,"tom9","female",18,"12646123");
insert into stu values(null,10,"tom10","female",18,"12646123");
insert into stu values(null,11,"tom11","female",18,"12646123");
insert into stu values(null,12,"tom12","female",18,"12646123");
delete from stu where stuId='12';
update stu set stuNum=100,stuName='mary',stuSex='male',
stuAge=20,stuQQ='123456' where stuId=2;
1.6.2 HTML页面部分实现
<table id="dg" style="width:700px;height:auto"
data-options="url:'../stu?flag=getAllStu',fitColumns:true,singleSelect:true,pagination:true,toolbar:'#top'">
<thead>
<tr>
<th data-options="field:'stuNum',width:100">学号</th>
<th data-options="field:'stuName',width:100">姓名</th>
<th data-options="field:'stuSex',width:100">性别</th>
<th data-options="field:'stuAge',width:100">年龄</th>
<th data-options="field:'stuQQ',width:100">扣扣</th>
</tr>
</thead>
</table>
<div id="top">
<a href="#" data-options="iconCls:'icon-add'" onclick="addStu()">增加学员</a>
<a href="#" data-options="iconCls:'icon-edit'" onclick="uptStu()">修改学员</a>
<a href="#" data-options="iconCls:'icon-remove'" onclick="delStu()">删除学员</a>
</div>
<div id="dlg" style="width:220px;height:auto" data-options="buttons:'#btn',closed:true">
<form id="fm" method="post">
学号:<input type="text" name="stuNum"/><br/>
姓名:<input type="text" name="stuName"/><br/>
性别:<input type="text" name="stuSex"/><br/>
年龄:<input type="text" name="stuAge"/><br/>
扣扣:<input type="text" name="stuQQ"/><br/>
</form>
</div>
<div id="btn">
<a href="#" data-options="iconCls:'icon-save'" onclick="saveStu()">保存</a>
<a href="#" data-options="iconCls:'icon-cancel'" onclick="closeWin()">取消</a>
</div>
1.6.3 js代码实现
var url="";
function addStu(){
$("#fm").form("clear");
$("#dlg").dialog("open");
url="../stu?flag=addStu";
}
function uptStu(){
var obj=$("#dg").datagrid("getSelected");
if(obj!=null){
$("#dlg").dialog("open");
$("#fm").form("load",obj);
url="../stu?flag=uptStu&id="+obj.stuId;
}
}
function delStu(){
var obj=$("#dg").datagrid("getSelected");
//alert(obj);
//在火狐的控制台下打印对象的属性 ,在JS中所有的对象alert(obj);都是object
//console.log(obj);
if(obj!=null){
$.messager.confirm("删除确认","你真忍心删除吗?",function(dt){
if(dt==true){
$.post("../stu?flag=delStu",{id:obj.stuId},function(dt){
//alert(dt);
var oo=eval（"("+dt+")");
if(oo.result=="true"){
$("#dg").datagrid("reload");
}
});
}
});
}
}
function saveStu(){
$('#fm').form('submit', {
url:url,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(dt){
//alert(data);
var oo=eval（"("+dt+")");
if(oo.result=="true"){
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}
}
});
}
function closeWin(){
$("#dlg").dialog("close");
}
长按指纹，识别二维码，一键关注Java，大数据
长按指纹，识别二维码，一键关注Python
长按指纹，识别二维码，一键关注产品经理
