Easy-UI案例使用总结
来源：互联网 发布：检测电脑硬件故障软件 编辑：程序博客网 时间：2024/05/16 17:31
Easy-UI
封装了前台逻辑以及显示的基于Jquery技术的前端框架.
Easy-UI特点
- EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p’).panel({…})）和html标记方式（如：class=”easyui-panel”）
- 支持HTML5（通过data-options属性）
Easy-UI常用组件
- Base
- Layout
- Menu and Button
- Form
- Window
- DataGrid and Tree
- Extension
语法
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。
事件
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
方法
调用方法的语法：$(‘selector’).plugin(‘method’, parameter);
解释：
selector 是jQery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
开发步骤
下载程序库并导入EasyUI的CSS和Javascript文件
<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-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>通过标记或Javascript定义EasyUI组件
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" iconCls="icon-save" collapsible="true"> The panel content </div>
案例（crm用户管理）
首页jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>客户关系管理系统</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script> $(function(){ var p = $('body').layout('panel','west').panel({ onCollapse:function(){ alert('collapse'); } }); }); function addTab(title,url){ //判断窗口是否已经打开,打开了就不再打开 if ($('#tt').tabs('exists',title)){ //已经打开不再打开 $('#tt').tabs('select',title) return ; } $('#tt').tabs('add',{ title:title, content:"<iframe src='"+url+"' style='width:100%;height:100%' />", closable:true, }); } </script></head><body class="easyui-layout"> <div region="north" border="false" style="height:75px;background:#B3DFDA;padding:10px"><h1>客户关系管理系统</h1></div> <div region="west" split="true" title="菜单" style="width:150px;"> <div id="aa" class="easyui-accordion" fit="true"> <div title="用户管理" iconCls="icon-pencil" style="overflow:auto;padding:10px;"> <a href="javascript:void(0)" onclick="addTab('用户列表','${pageContext.request.contextPath}/list.jsp')">用户列表</a> </div> <div title="客户管理" iconCls="icon-pencil" selected="true" collapsed="true"> <a href="javascript:void(0)" >客户列表</a> </div> <div title="联系人管理" iconCls="icon-pencil" style="padding:10px;"> <a href="javascript:void(0)" >联系人列表</a> </div> </div> </div> <div region="center" > <div id="tt" class="easyui-tabs" tools="#tab-tools" fit="true"> <div title="主界面" tools="#p-tools" style="padding:20px;" > <h2><font color="gray">欢迎您登陆!</font></h2> </div> </div> </div></body></html>用户列表jsp（crud）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户列表</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ $('#test').datagrid({ singleSelect:true, title:'用户列表', iconCls:'icon-save', nowrap: false, striped: true, collapsible:false, url:'${pageContext.request.contextPath}/UserAction_list',//加载表格后台数据 sortName: 'id',//指定排序列 sortOrder: 'asc',//升序 remoteSort: false, idField:'id', frozenColumns:[[ //配置冻结列 {field:'ck',checkbox:true}, //准备多选框列 {title:'id',field:'user_id',width:80,sortable:true}//主键列 ]], columns:[[ {field:'user_code',title:'登陆名',width:120}, {field:'user_name',title:'昵称',width:220,rowspan:2,sortable:false,}, ]], pagination:true,//是否分页 rownumbers:true,//是否显示行号 toolbar:[{ id:'btnadd', text:'添加用户', iconCls:'icon-add', handler:function(){ //清空表单 $('#ff').form('clear'); open1(); } },{ id:'btncut', text:'修改用户', iconCls:'icon-pencil', handler:function(){ //获得被选中的行并回显数据 getSelected(); } },{ id:'btnsave', text:'删除用户', iconCls:'icon-cancel', handler:function(){ //获得被选中的行 var selected = $('#test').datagrid('getSelected'); //未获得,提示 if (!selected){ alert("请选择一行再操作!"); return; }else { alert("请选中一行!"); } //发送ajax请求访问后台删除用户 //成功,刷新表单 $.post("${pageContext.request.contextPath}/UserAction_list", { user_id: selected.user_id }, function(data){ alert("操作成功!"); }); //刷新表单 $('#test').datagrid('reload'); } }] }); var p = $('#test').datagrid('getPager'); $(p).pagination({ onBeforeRefresh:function(){ alert('before refresh'); } }); }); function resize(){ $('#w').window({ title: 'New Title', width: 600, modal: true, shadow: false, closed: false, height: 300 }); } function open1(){ $('#w').window('open'); } function close1(){ $('#w').window('close'); } //指定表单是ajax提交 $('#ff').form({ url:'${pageContext.request.contextPath}/UserAction_regist', onSubmit:function(){return true}, success: function(data){ alert(data); //清空表单数据 $('#w').window('clear'); //关闭窗口 close1(); //刷新列表 $('#test').datagrid('reload'); } }); //提交表单 function submitForm() { $('#ff').submit(); } //获得被选中的行 function getSelected(){ var selected = $('#test').datagrid('getSelected'); if (selected){//如果选中 // alert(selected.user_id+":"+selected.user_name+":"+selected.user_code); //回显数据 $('#ff').form('load',{ user_id:selected.user_id, user_name:selected.user_name, user_code:selected.user_code, }); //显示窗口 open1(); }else { alert("请选中一行!"); } } </script></head><body> <table id="test" ></table> <div id="w" class="easyui-window" title="操作" closed="true" iconCls="icon-save" style="width:500px;height:200px;padding:5px;"> <form id="ff" method="post" novalidate> <div> <label for="user_code">登录名:</label> <input class="easyui-validatebox" type="text" name="user_code" required="true"></input> </div> <div> <label for="user_name">昵 称:</label> <input class="easyui-validatebox" type="text" name="user_name" required="true"></input> </div> <div> <label for="user_password">密 码:</label> <input class="easyui-validatebox" type="text" name="user_password" required="true"></input> </div> <div> <input type="button" onclick="submitForm()" value="提交" > </div> </form> </div></body></html>案例总结
首页
- layout
- 案例用了北，西，中间面板搭建整体框架。具体使用查API
- 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。
- accodion
1.案例用来做菜单栏使用，使用ajax方式跳转链接
2.分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的’href’属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
- tabs
1.案例中用tabs搭建主界面，点击菜单时，跳转至主界面，相同的链接，只跳转一次。
2.选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
用户列表
- datagride
1.用于展示用户列表
2.DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
添加用户
- window
1.在用户列表中点击添加时，弹出窗口。
2.窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
- form
1.用于显示添加客户的内容
2.form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
3.使普通表单成为ajax提交方式的表单。
$('#ff').form({ url:..., onSubmit: function(){ // do some check // return false to prevent submit; }, success:function(data){ alert(data) } }); // submit the form $('#ff').submit(); 修改用户
- 表格改为单选
在datagrid中找到checkbox，singleSelect属性改为true
获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
回显要修改的数据
from中找到 load方法
方法描述：读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
删除用户
- 获得选中行
调用datagrid中的getSelected方法 返回第一个被选中的行或如果没有选中的行则返回null。
发送ajax请求删除客户
删除后，刷新列表
调用datagrid中的reload方法。等同于’load’方法，但是它将保持在当前页。
0 0
- Easy-UI案例使用总结
- easy ui 使用总结
- jquery easy ui 使用总结
- easy ui 简单使用
- JQuery Easy UI 使用
- jQuery Easy UI 使用
- Easy-UI combobox使用
- Easy UI使用记录
- easy=ui 树形结构案例
- Spring + MyBatis + JQuery Easy UI 整合案例
- Easy-ui常见用法总结
- easy-Ui toolTip的使用
- jquery easy ui tabs使用
- jQuery Easy UI的使用
- Easy UI datagrid的使用
- easy UI简单使用介绍
- easy ui Tree 的使用
- Easy Image 使用总结
- Zabbix中文使用手册
- csu 1808 地铁 dijkstra变形+优先队列优化
- Balsamiq Mockups 3.5.7 for Windows / Mac 简体中文汉化 最佳原型设计工具之一
- 功能名称：在线聊天功能大升级-支持直播、腾讯云IM及诸多体验
- 动态修改UINavigationBar的背景色
- Easy-UI案例使用总结
- liferay实现model监听
- 业余时间：RecyclerView的封装
- 支付宝RAS密钥生成器SHAwithRSA1024_V1.0.bat运行失败、一闪关闭
- Vert.x入门实例
- Chapter.16 Templates And Generic Programming
- DOCTYPE元素详解
- 微信小程序--常用快捷键
- Android中View点击事件传递(二)
