EasyUI组件使用

EasyUI组件使用

今日内容介绍

DataGrid组件管理数据

今日内容学习目标

DataGrid组件管理数据

DataGrid组件管理数据
1. 需求

今天我们要用EASYUI中的DataGrid组件对数据的显示进行管理

相关知识点
1. EasyUI介绍

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

EasyUI文件的导入

注意:文件的导入顺序: jquery文件要位于jquery.easyui.min.js文件的上方

帮助文档:参见JQuery EasyUI v1.3.5官方API中文版.exe

如何测试EasyUI安装成功?

在测试页面中demo01.html中引入EasyUI文件,复制帮助文档中linkbutton组件的案例代码

看到如下效果,表示EasyUI安装成功.

EasyUI运行原理以及组件使用的通用规律
1. EasyUI运行原理:

当浏览器是识别到案例中的案例代码后,easyui要通过识别a链接标签上不同的属性,例如

class的值,data-options属性中的不同的值,将标签a渲染为一个linkbutton组件.类似的

EasyUI通过识别HTML标签上不同的属性值来将各个不同的标签渲染为不同的组件.

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(){.....}

});

组件dialog

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

Html方式创建dialog组件((了解))

 <div class=”easyui-dialog”style=”width:400;height:200” title=”标题”data-options="iconCls:'icon-man',resizable:false,modal:true"><div>

JQ形式创建dialog组件

<div id="dd">Dialog Content.</div> $('#dd').dialog({   title: 'My Dialog',         width: 400,              height: 200,              closed: false,             href: '/day32/ServletDemo' , modal: true              });

组件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("确定");}},{},{}]

组件自身方法

$("#dd").window("open");//打开窗口

$("#dd").window("close");//关闭窗口

$("#dd").dialog("refresh","test02.html");

//重新刷新窗口,加载服务端的资源test02.html

组件DataGrid

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

HTML方式创建DataGrid

<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>name1</td><td>2323</td>  </tr>  <tr>  <td>002</td><td>name2</td><td>4612</td>  </tr>  </tbody>  </table> <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:'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>

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>

form组件
1. 创建一个简单的HTML表单。

构建一个包含id、action和method值的表单元素。

<form id="ff" method="post">  <div>  <label for="name">Name:</label>  <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />  </div>  <div>  <label for="email">Email:</label>  <input class="easyui-validatebox" 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)   }   });

测试用例

<button onclick="fn1()">加载数据</button><button onclick="fn2()">清空数据</button><button onclick="fn3()">提交数据</button><form id="fm">用户名:<input type="text" name="username"/><br/>密&nbsp;&nbsp;码:<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. 数据库实现

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;

HTML页面部分实现

<table id="dg" class="easyui-datagrid" 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="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addStu()">增加学员</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="uptStu()">修改学员</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="delStu()">删除学员</a></div><div id="dlg" class="easyui-dialog" 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="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveStu()">保存</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWin()">取消</a></div>

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");}

附件：

https://pan.baidu.com/s/161UdVsx87dTtwRzWONQFjg

EasyUI组件使用相关推荐

EasyUI学习总结(五)——EasyUI组件使用
EasyUI学习总结(五)--EasyUI组件使用一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程 ...
蓝色easyui组件美化easyui皮肤html后台系统模版设计
基于easyui最新1.10.x版本设计制作,可以与默认主题进行切换,只修改了css和部分图片,没有动过js,用法和easyui一样演示地址:easyui酷黑风格模板_easyui模版_easyui ...
Spring boot+Thymeleaf+easyui集成：js创建组件页面报错
开发工具:Ideal 使用场景:Demo 前提: 环境:Spring boot +Thymeleaf+easyui 引入thymeleaf模板引擎 1 <html lang=&qu ...
EasyUI的组件加载两次的问题
用Tabs打开会访问两次,新建一个空的Panel 然后在赋值. 不过这个Bug在最近的EasyUI解决了 $("#btn").click(function() {$("# ...
jquery easyUI第一篇【介绍、入门、使用常用的组件】
tags: web前端库什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件....我们在编写页面的时候,就可以直接使用这些组件...非 ...
EasyUI(1) 使用方法、引入、创建组件、LinkButton、panel、tree、Menu
第一步:点击去官网下载EasyUI 第二步:项目中导入easyui所需东西第三步:引入EasyUI <link rel="style ...
EasyUI——常见用法总结
1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写 ...
easyui js解析字符串_easyui的解析器Parser
平时使用easyui做框架开发时,都知道easyui的模块组件能通过属性方法或js方法来渲染,本质上是通过parser解析器来处理实现的,因为多数情况下都是自动触发完成整个页面的解析,所以没有感觉到它 ...
jQuery EasyUI API 中文文档 - Documentation 文档
每个easyui组件都有特性(property).方法(method)和事件(event),用户可以很容易地扩展它们. 特性特性在jQuery.fn.{plugin}.defaults里定义.例如, ...

EasyUI组件使用

EasyUI组件使用相关推荐

最新文章

热门文章