easyui的使用

合集下载

jQuery EasyUI中文帮助手册

描述预定义模块。预定义多语言。
默认值
easyui 根目录,必须以'/'结 base（很目录） string（字符串）
尾。
theme（主题名称）
'themes'目录中的主题的 string（字符串）
名称。
css（层叠样式表）
boolean（布尔型）
定义是否在加载模块的同时加载 css 文件。
Page
afterPageText（输入框之后的文本）
string（字符串）
在输入框之后显示的符号。
of {pages}
displayMsg（显示信息）
string（字符串）
在插件右上方显示分页信息。
Displaying {from} to {to} of {total} items
事件
名称
e
在拖动过程中触发，当不能再拖动时返回 false。
onStopDrag
e
当拖动停止时触发。
方法
名称参数
描述
options none
返回属性对象。
proxy none 如果替代元素被设置，返回将被用于拖动的替代元素。
enable none
允许拖动。
disable none
禁止拖动。
4、拖动至容器(droppable)
使用$.fn.droppable.defaults 重载默认值。
使用方法
1. <div id="dd" style="width:100px;height:100px;"></div>
1. $('#dd').droppable({

easyui datadgrid内容输入完成后自动换下一行

easyui datadgrid内容输入完成后自动换下一行EasyUI是一个基于jQuery的开源UI框架，提供了丰富的交互组件和可自定义的主题。

其中的DataGrid组件是常用的数据表格组件，用于展示和处理大量的表格数据。

在DataGrid中，我们可以通过点击单元格来编辑其中的内容，当输入完成后，可以通过一些配置使其自动换行到下一行。

下面是一些参考内容，帮助你完成这个功能。

1. 使用editor属性DataGrid中的每个列可以通过设置editor属性指定编辑方式。

对于需要输入换行内容的列，你可以使用textarea作为输入框，将它的rows属性设置为大于1的值（比如3），这样输入内容时就会自动换行到下一行。

示例代码：```{field: 'content',title: '内容',width: 200,editor: {type: 'textarea',options: {rows: 3}}}2. 使用结束编辑事件DataGrid提供了一些事件，可以用来监听编辑行为。

可以通过监听onAfterEdit事件，并在事件回调函数中处理自动换行逻辑。

首先，获取当前编辑的单元格，然后判断其内容是否超过一定长度，如果超过就自动换行到下一行。

示例代码：```$('#dg').datagrid({onAfterEdit: function(index, row, changes) {var content = row.content;var maxLength = 20;if (content.length > maxLength) {var rowIndex = $(this).datagrid('getRowIndex', row);$(this).datagrid('endEdit', rowIndex);$(this).datagrid('beginEdit', rowIndex + 1);}}});```3. 使用自定义编辑器如果以上方法不能满足需求，还可以使用自定义编辑器来实现自动换行。

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍初识Jquery EasyUI看了⼀些博主⽤其开发出来的项⽬，页⾯很炫，感觉功能挺强⼤，效果也挺不错，最近⼀直想系统学习⼀套前台控件，于是在⽹上找了⼀些参考⽰例。

写了⼀些基本的增删改查功能，算是对该控件的基本⼊门。

后续有时间继续深⼊学习。

先看⼀下运⾏后的页⾯1、列表展⽰2、新增页⾯3、修改页⾯把jquery easyui下载好之后，⼀般引⽤下页⼏个⽂件复制代码代码如下:<link href="/Resources/easyui/css/default.css" rel="stylesheet" type="text/css" /><link href="/Resources/easyui/js/themes/default/easyui.css" rel="stylesheet"type="text/css" />//页⾯图标样式<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/Resources/easyui/js/jquery-1.7.2.min.js" type="text/javascript"></script>//jquery easyui主要的js<script src="/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>⾸先是列表展⽰数据复制代码代码如下:<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"url="/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"fitcolumns="true" singleselect="true"><thead><tr><th field="AccountCode" width="50">编号</th><th field="AccountName" width="50">卡名</th><th field="AccountPwd" width="50">密码</th><th field="CreateTime" width="50">创建时间</th><th field="CreateName" width="50">创建⼈</th></tr></thead></table>jquery easyui是⽤datagrid对数据进⾏展⽰的，所以class要选择easyui-datagrid；url是本列表的⼀个json格式的数据来源toobar后⾯跟着的"#toobar"是列表的⼀个⼯具栏，本⽰例在列表上显⽰的是添加，修改，删除功能按钮对数据进⾏操作。

easyui (reading 'options')

easyui (reading 'options')
EasyUI是一款基于jQuery的UI组件库，包含了众多的前端UI组件，提供了丰富的UI控件的选项，方便开发人员进行快速的开发和实现。

下面我们来详细了解EasyUI中的控件选项：
1.属性(options)
EasyUI中大多数控件都支持options属性，该属性包含了组件的设置选项，可以实现组件的样式、布局等各方面的控制。

举个例子，在使用datagrid组件时，我们可以通过设置'columns'属性来控制表格中的列数、列名、列宽等。

2.方法(methods)
EasyUI组件具有多种可调用的方法，主要用于控制组件的行为。

例如在使用treegrid组件时，我们可以使用方法'collapseAll'来将树形结构全部收起，方便进行信息的查看。

3.事件(events)
EasyUI组件可以使用事件来响应用户的交互行为，例如在使用calendar组件时，我们可以使用onSelect事件来响应用户选择日期的行为。

4.扩展(extend)
EasyUI组件可以使用拓展来丰富控件的功能，例如在使用linkbutton
组件时，我们可以使用扩展属性iconCls来为按钮添加图标，增加视觉效果。

5.主题(theme)
EasyUI提供了多种配色主题用于美化页面，可以根据实际需求选择合适的主题进行使用。

要想在使用EasyUI中更加熟练掌握控件选项，需要对各个控件的设置选项有一个详细的了解。

同时，在实际使用过程中，也需要通过查看文档中提供的示例代码，深入理解控件的使用方法和属性选项。

easyui中文使用手册

esayUi使用手册
首先感谢作者的翻译, 免费给大家参考使用。

但鉴于是在网络,没有联网的时候查阅不便,本人将内容截图下来,以便供大家离线使用。

基本
一语法解析
二简单载入器
三一般拖动
四拖动至容器
五缩放
六分页
七搜索框
八进度条
布局管理器一控制面板
二选项卡
三可伸缩面板
四布局面板
菜单和按钮一菜单
二链接按钮
三菜单按钮
三分隔按钮
表单
一表单
二表单验证
三自定义组合框
四可装载组合框
四组合树
四组合表格
五数字验证框
五日期组合框
六日期时间组合框
七日历
八调节器
九数字调节器
十时间调节器
窗口
一窗口
二对话窗口
三消息窗口
数据表格和树形菜单一数据表格
二属性表格
三树形菜单
三树形表格。

EasyUI组件使用

Easyui组件使用一、EasyUI组件的简单介绍easyUI提供了很多组件让我们使用，如下图所示：使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解EasyUI组件的使用二、EasyUI组件的使用2.1、创建测试的JavaWeb项目2.2、编写测试代码编写一个用户登录页面Login1.html，用于输入用户名和密码进行登录，使用JQuery的ajax方法异步提交表单Login1.html的代码如下：1<!DOCTYPE html>2<html>3<head>4<title>EasyUI组件使用范例</title>5<meta http-equiv="content-type" content="text/html; charset=UTF-8">67<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>89<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>1011<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 1213<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/> 1415<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>16<script type="text/javascript" src="js/Utils.js"></script>17<script type="text/javascript">18$(function(){19//(g_contextPath);20//(g_basePath);21//页面加载完成之后创建登录的dialog22$('#loginAndRegisterForm').dialog({23title: '用户登录',24width: 240,25height: 150,26closable: false,//设置dialog不允许被关闭27cache: false,28modal: true,29buttons:[30{31text:'登录',32iconCls: 'icon-ok',33width:70,34height:30,35handler:function(){36//(g_contextPath+'/servlet/LoginHandleServlet'); 37//(g_basePath+'/servlet/LoginHandleServlet');38//($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=12339loginHandle();//处理用户登录40}41},42{43text:'重置',44iconCls: 'icon-ok',45width:70,46height:30,47handler:function(){48doReset('loginForm');49}50}51]5253});5455/*重置form表单*/56function doReset(formId){57$(':input','#'+formId)58 .not(':button, :submit, :reset, :hidden')59 .val('')60 .removeAttr('checked')61 .removeAttr('selected');62}6364/*处理用户登录*/65function loginHandle(){66$.ajax({67//url:g_contextPath+'/servlet/LoginHandleServlet',68url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址69/*data:{70//data表示要提交到服务器端的数据，通常的写法71"userName":$("#userName").val(),72"userPwd":$("#userPwd").val()73},*/74//data表示要提交到服务器端的数据，更加简洁的写法75data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串76cahe:false,77/*78用dataType来指明服务器端返回的数据格式是一个json字符串，客户端接收到返回的json字符串之后，79Jquery会自动把这个json字符串转换成一个Json对象80*/81dataType:'json',82success:function(r){83//此时的r已经是经过Jquery处理过之后的Json对象了84//(r.msg);85if(r && r.success){86//调用dialog的close方法关闭dialog87$('#loginAndRegisterForm').dialog('close');88$.messager.show({89title:'消息',90msg:r.msg91});92//登录成功后跳转到系统首页93//window.location.replace(g_basePath+'/index.jsp');94//window.location.href = g_basePath+'/index.jsp';95}else{96$.messager.alert('消息',r.msg);97}98}99});100}101});102</script>103104</head>105106<body>107孤傲苍狼108<div id="loginAndRegisterForm">109<form method="post" id="loginForm">110<table>111<tr>112<th style="text-align:left;">113用户名：114</th>115<td>116117<input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/>118</td>119</tr>120<tr>121<th style="text-align:left;">122密码：123</th>124<td>125<input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/>126</td>127</tr>128</table>129</form>130</div>131</body>132</html>Login1.html中用到了一个Utils.js，Utils.js中有两个方法：getBasePath和getContextPath，分别用于获取Web应用的basePath和contextPath，获取Web应用的basePath和contextPath的目的就是为了在提交form表单到指定的Sevlet中进行处理时拼凑出处理请求的Servlet的绝对路径例如：url:g_contextPath+'/servlet/LoginHandleServlet'url:g_basePath+'/servlet/LoginHandleServlet'这样无论Servlet如何映射url-pattern，都可以正确找到该ServletUtils.js代码如下：1//立即执行的js2 (function() {3//获取contextPath4var contextPath = getContextPath();5//获取basePath6var basePath = getBasePath();7//将获取到contextPath和basePath分别赋值给window对象的g_contextPath属性和g_basePath属性8window.g_contextPath = contextPath;9window.g_basePath = basePath;10 })();1112/**13* @author 孤傲苍狼14* 获得项目根路径，等价于jsp页面中15* <%16String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 17%>18* 使用方法：getBasePath();19* @returns 项目的根路径20*21*/22function getBasePath() {23var curWwwPath = window.document.location.href;24var pathName = window.document.location.pathname;25var pos = curWwwPath.indexOf(pathName);26var localhostPath = curWwwPath.substring(0, pos);27var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);28return (localhostPath + projectName);29 }3031/**32* @author 孤傲苍狼33* 获取Web应用的contextPath，等价于jsp页面中34* <%35String path = request.getContextPath();36%>37* 使用方法:getContextPath();38* @returns /项目名称(/EasyUIStudy_20141104)39*/40function getContextPath() {41return window.document.location.pathname.substring(0,window.document.location.pathname.indexOf('\/', 1));42 };处理用户登录请求的Servlet的LoginHandleServlet代码如下：1package me.gacl.web.controller;23import java.io.IOException;45import javax.servlet.ServletException;6import javax.servlet.http.HttpServlet;7import javax.servlet.http.HttpServletRequest;8import javax.servlet.http.HttpServletResponse;910import com.alibaba.fastjson.JSON;1112import me.gacl.custom.model.Json;1314public class LoginHandleServlet extends HttpServlet {1516public void doGet(HttpServletRequest request, HttpServletResponse response)17throws ServletException, IOException {18//服务器端使用UTF-8编码将响应内容输出到客户端19response.setCharacterEncoding("UTF-8");20//通知客户端浏览器以UTF-8编码显示内容，避免产生中文乱码问题21response.setHeader("content-type", "text/html;charset=UTF-8");22String userName = request.getParameter("userName");23String userPwd = request.getParameter("userPwd");24Json json = new Json();25if (userName.equals("gacl") && userPwd.equals("123")) {26json.setMsg("登录成功");27json.setSuccess(true);28}else {29json.setMsg("用户名或密码错误，登录失败！");30json.setSuccess(false);31}32//使用alibaba(阿里巴巴)的fastJson工具类将Json对象转换成一个json字符串33String jsonStr = JSON.toJSONString(json);34//将json字符串作为响应内容输出到客户端浏览器。

easyui的modaldialog用法

文章标题：深入探讨easyui的modaldialog用法在Web开发中，easyui框架作为一款优秀的前端UI解决方案，提供了丰富的组件和插件，为开发人员提供了便利的工具。

其中，modaldialog作为其中一个重要的组件，其用法和功能非常值得深入探讨和学习。

今天，我们将从简单的使用方式到深入的参数解析，全面地探讨easyui的modaldialog用法，并共享一些个人的理解和观点。

1. 什么是modaldialog让我们来了解什么是modaldialog。

在easyui框架中，modaldialog 是一个模态对话框组件，用于在当前页面上打开一个模态对话框，阻止用户对父窗口的操作，直到对话框被关闭。

通过modaldialog，开发人员可以方便地实现弹出对话框来进行信息输入、编辑或展示。

2. 基本用法在使用modaldialog时，首先需要引入easyui框架的相关文件，并按照文档的要求初始化相关参数和样式。

接下来，通过简单的JavaScript代码，即可调用modaldialog组件，并传入相应的参数，如对话框标题、宽度、高度等。

再在对话框中添加需要显示的内容，比如表单、文本等。

例如：```javascript$('#dlg').dialog({title: 'My Dialog',width: 400,height: 200,closed: false,cache: false,modal: true});```在以上示例中，我们通过选择对话框的id，并使用dialog方法进行初始化和设置参数。

通过这样简单的调用，就可以在页面上弹出一个模态对话框，供用户进行操作。

3. 深入参数解析除了基本用法外，modaldialog还提供了许多丰富的参数和方法，以满足不同场景的需求。

通过设置参数buttons，可以显示自定义的按钮，以便用户进行交互操作；通过设置参数href，可以从指定的URL加载远程内容到对话框中，并实现与后端的数据交互；通过设置参数onClose，可以在对话框关闭之前触发自定义的事件。

jquery-easyui中文详细说明文档完整

Jquery easyui 使用说明1. Layout 布局 (1)1.1. 样图 (1)1.2. 示例代码 (2)2. tabs面板 (3)2.1. 样图 (3)2.2. 示例代码 (3)3. jQuery EasyUI 提示框(Messager)用法 (5)3.1. 样图 (5)3.2. 示例代码 (5)4. 分页(Pagination)用法 (6)4.1. 样图 (7)4.2. 示例代码 (7)5. jQuery EasyUI 对话框(Dialog)用法 (8)5.1. 示例图片 (8)5.2. 示例代码 (8)6. jQuery EasyUI 窗口(Window)用法 (9)6.1. 样图 (10)6.2. 示例代码 (10)7. jQuery EasyUI 验证框(V alidateBox)用法 (11)7.1. 样图 (11)7.2. 示例代码 (11)8. jQuery EasyUI 数字框(NumberBox)用法 (13)8.1. 样图 (13)8.2. 示例代码 (13)9. DataGrid (13)yout 布局1.1. 样图UsageMarkup在div 里面加载布局的方法:class="easyui-layout"布局面板必需要有一个'center' 面板.1.2. 示例代码<div id="cc" style="width:600px;height:400px;" class="easyui-layout"><div region="north" title="North Title" split="true" style="height:100px;"></div><div region="south" title="South Title" split="true" style="height:100px;"></div><div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div><div region="west" split="true" title="West" style="width:100px;"></div><div region="center" title="center title" style="padding:5px;background:#eee;"></div></div>jQuery$('#cc').layout(options);DependenciespanelresizableOptionsLayout Panel Options所有属性都是放在<div/>标签里面null标题名字，当写了名字后将会产生折叠图标false booleanTrue时,面板间将产生一个拖动条可改变面板间大小在面板头部显示图标的CSSnull 将在布局面板中产生一个图标如：icon="icon-reload"fit="true" 自动改变大小Methods2.tabs面板2.1. 样图2.2. 示例代码在<div/>标签里使用方法class="easyui-tabs"UsageMarkup<div id="tt" style="width:500px;height:250px;" class="easyui-tabs"><div title="Tab1" style="padding:20px;display:none;">tab1</div><div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> tab2</div><div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> tab3</div></div>jQueryTo create a tabs container$('#tt').tabs(options);To add a tab panel:$('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true});DependenciesnoneOptionsTabs ContainerOverride defaults with $.fn.tabs.defaults.PropertiesEvents方法标签面板属性3.jQuery EasyUI 提示框(Messager)用法jQuery EasyUI 提示框(Messager)不仅重写了window默认的alert,confirm和prompt，而且还增加一些在页面右下角显示的提示框。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.easyui是建立在使用jquery基础上的一款ui插件，能简便的开发界面美观的ui，非常适
用，因此有以下几点需要注意
首先，在需要使用easyui的界面上你需要最先导入jquery库
<script type="text/javascript" src="js/easyui/jquery-1.8.0.min.js"></script>
然后你需要注意的是使用easyui，必须导入对应的easyui的js文件
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
针对easyui的使用，由于是国外开发，因此基本语言是英文，你需要引入相应的文件夹
中的语言js来修改成你需要的语言。

例如中文
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
针对你要使用easyui相应的功能以及相关插件，你需要引入相应的样式以及可能使用的图标样式文件，这里有如下两个样式文件：
（1）js相关效果的样式文件
<link rel="stylesheet" type="text/css"href="js/easyui/themes/my-ui/easyui.css"> （1）js相关效果样式中需要的图标文件
<link rel="stylesheet" type="text/css"href="js/easyui/themes/icon.css">
Easyui现在开始就可以正常使用了，具体问题参见API。