Web-第十六天 EasyUI【悟空教程】

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帮帮(javahelp)

原文发表时间:2018-07-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Bug生活2048

微信小程序版博客——列表页相关问题汇总

首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过s...

1212
来自专栏java系列博客

IDEA全局护眼色

1953
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(一、基础功能篇)

http://www.cnblogs.com/constantince/p/4565261.html

932
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

6732
来自专栏大数据钻研

Meta标签的那些事

Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示...

2805
来自专栏闻道于事

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-/...

1.5K6
来自专栏鹅厂优文

小程序入坑指南 | 鹅厂优文

前段时间,手上刚好接手一个小程序的项目,心想之前自学过一段时间的小程序,终于有项目可以练练手了,可惜,万万没想到,加了两个周末的班结果却成了飞机稿...

1.6K11
来自专栏Seebug漏洞平台

Firefox - SVG cross domain cookie vulnerability

SVG - 通过 img 标签设置跨域 cookie 我最近有了解到,浏览器允许使用 meta 标签来设置 cookie 。我不确定我是不是忘了这一特性,或者之...

2946
来自专栏张戈的专栏

为WordPress开启Nginx缩略图功能,七牛从此陌路

张戈博客曾分享过不少关于云存储的一些经验技巧,对七牛感兴趣或者遇到相关问题的朋友可以看一看以前的相关文章: 七牛&又拍云 CDN 云存储节省 GET 次数的小...

4315
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大...

2249

扫码关注云+社区

领取腾讯云代金券