easyui开发注意事项
- 格式:docx
- 大小:368.06 KB
- 文档页数:7
easyui datagrid onbeforecelledit 【easyui datagrid onbeforecelledit】:解析与应用引言:在现如今的互联网时代,数据的处理与展示显得尤为重要。
随着Web应用的快速发展,前端技术也逐渐成为开发人员必须掌握的重要技能之一。
其中,easyui datagrid作为一种常用的前端控件,拥有强大的数据表格展示和编辑功能,为开发人员提供了极大的便利。
而其中的onbeforecelledit事件,则是easyui datagrid中一个关键的触发事件,在数据编辑之前执行一系列操作,以满足各种需求。
本文将深入解析easyui datagrid中的onbeforecelledit事件,包括其定义与应用、功能实现的步骤以及相关注意事项,帮助读者更好地理解和应用此事件。
一、onbeforecelledit事件的定义与应用1.1 onbeforecelledit事件的定义easyui datagrid是使用jquery和jquery-easyui框架构建的一种高度灵活、可扩展性极强的数据表格展示和编辑控件。
而onbeforecelledit事件作为datagrid的一个属性,用于在单元格编辑之前执行一系列的操作。
这些操作包括但不限于验证用户的输入、修改单元格的样式、设置单元格的输入限制等等。
1.2 onbeforecelledit事件的应用场景以一个物流管理系统为例,前端界面需要展示大量的货物信息,并提供修改和删除功能。
当用户试图修改货物的属性时,如名称、价格、数量等,需要对输入的数据进行校验。
此时,onbeforecelledit事件就可以派上用场。
我们可以通过onbeforecelledit事件来检查用户输入的数据是否合法,并在不满足条件的情况下提示用户。
同时,还可以在事件处理函数中操作datagrid的样式和行为,实现个性化的交互效果。
二、onbeforecelledit事件的功能实现步骤2.1 绑定onbeforecelledit事件首先,需要在datagrid的初始化代码中绑定onbeforecelledit事件。
JQueryEasyUi(Tree树)详解(转)第⼀讲:JQuery Easy Ui到底是什么呢?⾸先咱们知道JQuery是对Java Script的封装,是⼀个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
JQuery ui是在jQuery的基础上,利⽤jQuery的扩展性,设计的插件。
那么JQuery Easy Ui到底是什么呢?我的理解就是⽐JQuery ui更强⼤,同样都是实现绚丽的多功能效果!jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。
当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合,包括功能强⼤的 datagrid(数据⽹格)、treegrid(树形表格)、 panel(⾯板)、combo(下拉组合)等等。
⽤户可以组合使⽤这些组件,也可以单独使⽤其中⼀个。
其实就这么简单,对某个事物的定义,个⼈感觉没有什么固定的答案,只是那种答案更⽅便你的记忆,你记住的,它存在你深深的脑海⾥的,便是答案!JQuery Easy Ui插件列表如下:分类插件Base(基础)Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框Layout(布局)Panel ⾯板Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局Menu(菜单)与 Button(按钮)Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮Form(表单)Form 表单Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块Window 窗⼝Window(窗⼝)Window 窗⼝Dialog 对话框Messager 消息框DataGrid(数据⽹格)与Tree(树)Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树Treegrid 树形⽹格但是今天咱们只针对Tree(树)连接数据进⾏讲解!下⾯是它的⼀些基本的属性:id: 绑定到节点的标识值;text:显⽰⽂本;iconCls: 显⽰icon的css样式;checked: 节点是否选中;state: 节点状态, 'open' 或者 'closed';attributes: 绑定到节点的⾃定义属性;target: ⽬标 DOM 对象;children: ⼀个节点数组,定义⼀些⼦节点。
esayUI前端开发:企业中java工程师,大多不擅于HTML+CSS 网页布局设计,门户网站(由前端工程师设计),企业内部应用软件(java工程师,选择前端UI框架ExtJS 、Flex 、Easy UI )---------------------- Easy UI 学习成本非常低easyui 最新版本1.3.4,bos开发使用1.3.2版本ExtJS 2.x 免费,3.x 开始收费Easy ui 1.2.3版本开始收费问题:为什么你不用ExtJS ?easy ui 学习成本低,很容易在项目中集成使用,ExtJS 学习成本高昂EasyUI+tutorial.CHM 官方demo例子jQuery_EasyUI.doc demo例子EasyUI-API+1.3.2.chm 中文apijquery.EasyUI-1.3.1+API.chm 英文apijquery-easyui-1.3.2.zip 框架开发包目录结构分析demo 示例locale 国际化信息文件(默认英文提示信息)plugins 框架功能js文件src 源码themes 主题样式自带5套主题,icons 图标文件easyloader.js 核心加载器(加载plugins 功能js)jquery-1.8.0.min.js jquery开发js文件jquery.easyui.min.js easy ui 框架功能js合集jquery.easyui.min.js == easyloader.js + plugins/*1.如何在页面中使用easy ui ?引入四个文件<!-- 引入easy ui --><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>2、学习使用easy ui 布局功能layout 布局控件使用将body、div 分成东西南北中,五个部分<body class="easyui-layout"><!-- 布局,将body分为东西南北中五个部分 --><div region="north"style="height: 100px" title="北部面板">北部</div><div data-options="region:'south',title:'南部面板'"style="height:100px">南部</div><div data-options="region:'west',title:'西部面板'"style="width: 100px">西部</div><div data-options="region:'east',title:'东部面板'"style="width: 100px">东部</div><div data-options="region:'center',title:'中部面板'">中部</div></body>注意,只有center区域的必须的3、可折叠菜单accordion 布局<!-- 使用可折叠菜单 --><!-- 如果子div占满父容器 fit=true --><div class="easyui-accordion"data-options="fit:true"><!-- 折叠菜单都要提供 title --><div data-options="title:'基本菜单'">aa</div><div data-options="title:'系统菜单'">bb</div></div>通过iconCls:'icon-help' 指定图标(必须引入icon.css文件)4、选项卡布局tabs 布局closable为true , 选项卡可以被关闭<!-- 使用选项卡布局 --><!-- 每个选项卡必须提供 title --><div class="easyui-tabs"data-options="fit:true"><div data-options="title:'选项卡一'">选项卡一</div><div data-options="title:'选项卡二',closable:true">选项卡二</div><div data-options="title:'选项卡三'">选项卡三</div> </div>ztree主页菜单栏树形菜单生成树形结构菜单,通常使用js 类库制作的bos 菜单树,使用ztree 制作的1、zTree 是一个依靠jQuery 实现的多功能“树插件”。
一、概述easyui messager 是一种常用的前端控件,用于在网页中显示通知、警告和提示信息。
在使用该控件时,开发者可以选择使用阻塞方式来显示消息,也可以选择非阻塞方式来显示消息。
本文将重点讨论easyui messager 的阻塞方式,包括其使用方法、特点和适用场景。
二、阻塞方式的特点1. 阻塞方式是指在显示消息的阻止用户对页面的其他操作,直到用户关闭消息框为止。
2. 阻塞方式能够确保用户及时看到重要的提示信息,并且避免用户在未处理消息的情况下进行其他操作,从而提高用户体验和信息传达的效果。
3. 在使用阻塞方式时,开发者可以设置消息弹出框的样式、位置和持续时间,以满足特定的需求和页面布局。
三、使用方法在easyui 中使用阻塞方式显示消息,一般需要按照以下步骤进行操作:1. 引入 easyui 的相关资源文件,并确保页面已经加载了相应的JavaScript 文件。
2. 使用 JavaScript 代码调用 messager 控件的 show 方法,并设置消息的内容、标题、图标、显示方式等参数。
3. 设置消息框的样式和位置,可以通过设置 CSS 样式或调用相应的方法来实现。
4. 可以对消息框的关闭事件进行监听,以便在消息框关闭时进行后续的操作或逻辑处理。
四、适用场景阻塞方式适用于以下场景:1. 当用户进行重要操作时,需要给予用户及时的反馈或提示信息,确保用户的操作不会出现错误或意外。
2. 当需要用户确认某些操作时,可以通过阻塞方式显示确认框,等待用户的选择结果。
3. 当系统发生错误或异常时,需要向用户显示错误信息,并阻止用户进行其他操作,直到问题得到解决或处理。
五、注意事项在使用 easyui messager 的阻塞方式时,开发者需要注意以下事项:1. 合理使用阻塞方式,不要滥用。
过多的阻塞消息框会影响用户体验,造成用户的不便和不满。
2. 考虑用户的操作习惯和心理需求,合理设置消息框的样式、内容和显示时间,以尽量减少用户的等待和干扰。
easyui面试题1. 什么是easyui?easyui是一个基于jQuery的开源UI框架,提供了一系列易于使用的扩展插件,使得前端开发更加简单高效。
它包含了丰富的UI组件和强大的交互特性,可以帮助开发者快速构建出漂亮、交互丰富的Web应用程序。
2. easyui主要有哪些特性?- 简单易用:easyui提供了丰富的简洁的API接口,使用简单明了,开发者能够快速上手。
- 丰富的UI组件:easyui提供了大量的UI组件,包括表格、表单、弹窗、菜单等,满足了各种常见的前端交互需求。
- 兼容性强:easyui兼容多种浏览器,并且适配了移动端,方便在不同平台下使用。
- 定制性强:easyui提供了丰富的主题和样式的选择,开发者可以根据项目需求进行定制。
- 数据操作方便:easyui提供了丰富的数据操作组件,如数据表格和树形控件,方便对数据进行增删改查操作。
3. easyui中常用的组件有哪些?- Datagrid(数据表格):用于展示数据,并支持排序、筛选、分页等功能。
- Form(表单):用于快速构建表单,包括输入框、下拉框、日期选择器等表单元素。
- Dialog(对话框):用于弹窗提示或交互,可以定制化对话框的样式和功能。
- Tree(树形控件):用于展示树形结构的数据,支持展开收起和节点选择等操作。
- Panel(面板):用于布局和组织页面,可以包含其他组件,并允许自定义样式和布局。
- Tabs(选项卡):用于实现多个内容页面在同一界面内切换显示。
4. 如何使用easyui?使用easyui首先需要引入jQuery和easyui的相关资源文件,如js和css文件。
然后按照文档提供的API,进行组件的初始化和相关配置,即可使用easyui提供的各种组件和功能。
例如,使用datagrid组件展示数据,可以通过如下代码实现:```html<script src="jquery.min.js"></script><script src="jquery.easyui.min.js"></script><link rel="stylesheet" href="themes/easyui.css"><table id="datagrid"></table><script>$(function(){$('#datagrid').datagrid({url: 'data.json',columns:[[{field:'id',title:'ID',width:100},{field:'name',title:'Name',width:100},{field:'email',title:'Email',width:100}]]});});</script>```5. easyui的优缺点是什么?优点:- 简单易用,学习曲线低,开发效率高。
easyui中removefilterrule的用法EasyUI是一个基于jQuery的开源UI框架,提供了丰富的界面组件和易于使用的API,有助于开发者快速构建优雅的Web界面。
其中的removeFilterRule是EasyUI中一个非常重要的方法,用于移除过滤规则。
本文将详细介绍EasyUI的removeFilterRule的用法,一步一步回答您的问题。
为了更好地理解removeFilterRule的用法,我们需要先了解一些基本概念。
在EasyUI中,常用的组件之一是datagrid,即数据表格。
datagrid 提供了强大的数据展示和操作功能,允许用户对表格进行排序、过滤、分页等操作。
在进行过滤操作时,会使用到过滤规则。
过滤规则是一个包含字段名称、比较符和值的对象,用于定义过滤条件。
而removeFilterRule方法,则是用于移除datagrid中的特定规则的方法。
该方法的用法非常简单,只需提供要移除的规则的字段名称即可。
下面将一步一步详细介绍removeFilterRule的用法。
1. 确定datagrid的ID或者选择器首先,需要确定要操作的datagrid的ID或者选择器。
例如,如果要操作ID为"dg"的datagrid,可以使用以下代码获取其datagrid对象:var dg = ('#dg');2. 获取当前的过滤规则使用datagrid的getFilterRules方法可以获取当前datagrid中已经设置的过滤规则。
该方法没有参数,返回值为一个包含过滤规则的数组。
可以使用以下代码获取当前的过滤规则:var filterRules = dg.datagrid('getFilterRules');3. 根据字段名称移除规则根据要移除的规则的字段名称,可以使用removeFilterRule方法移除特定的规则。
该方法的参数为要移除的规则的字段名称。
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"是列表的⼀个⼯具栏,本⽰例在列表上显⽰的是添加,修改,删除功能按钮对数据进⾏操作。
目录1Accordion(可折叠标签) (3)1.1实例 (3)1.2参数 (4)2DateBox(日期框) (4)2.1实例 (4)2.2参数 (7)2.3事件 (7)2.4方法 (7)3ComboBox(组合框) (7)3.1实例 (7)3.2参数 (9)3.3事件 (10)3.4方法 (10)4Dialog(对话框) (10)4.1实例 (10)4.2参数 (12)4.3事件 (13)4.4方法 (13)5Messager(提示框) (13)5.1实例 (13)5.2方法 (16)5.3扩展 (17)6NumberBox(数字框) (17)6.1实例 (17)6.2参数 (18)7ValidateBox(验证框) (18)7.1实例 (18)7.2参数 (20)7.3方法 (20)7.4扩展 (20)8Pagination(分页) (21)8.1实例 (21)8.2参数 (22)8.3事件 (23)9Window(窗口) (23)9.1实例 (23)9.2参数 (26)9.3事件 (26)9.4方法 (26)10Panel(面板) (26)10.1实例 (26)10.2参数 (28)10.3事件 (29)10.4方法 (29)11Tabs(标签) (30)11.1实例 (30)11.2参数 (32)11.3事件 (32)11.4方法 (33)11.5标签面板属性 (33)12Tree(树) (33)12.1实例 (33)12.2参数 (36)12.3事件 (37)12.4方法 (37)13Layout(布局) (38)13.1实例 (38)13.2参数 (39)13.3方法 (39)14Datagrid(数据表) (39)14.1实例 (40)14.2参数 (43)14.3Column参数 (44)14.4事件 (45)14.5方法 (46)1Accordion(可折叠标签)1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">,并且将js代码全部去掉,效果图是一样的。
EASYUI框架说明技术框架概述jQuery EasyUI framework help you build your web page easily.∙easyui is a collection of user-interface plugin based on jQuery.∙easyui provides essential functionality for building modem, interactive, javascript applications.∙using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.∙complete framework for HTML5 web page.∙easyui save your time and scales while developing your products.∙easyui is very easy but powerful.EASYUI具备两种方式为我们的界面提供支持:1.使用HTML的原生标签来声明控件:<div class="easyui-dialog" style="width:400px;height:200px"data-options="title:'MyDialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"> dialog content.</div>2.用JS脚本来创建控件:<input id="cc" style="width:200px" />$('#cc').combobox({url: ...,required: true,valueField: 'id',textField: 'text'});参考文档1)jquery.EasyUI-1.3.1 API.chm整合DWREASYUI默认采用URL加载JSON数据,通过改写每个控件的LOADER方法,实现DWR方法的调用。
easyui datagrid onloadsuccess事件-回复EasyUI是一款基于jQuery的开源框架,提供了丰富的易用的UI组件,广泛应用于Web应用程序的开发中。
其中,DataGrid是EasyUI中最常用的组件之一。
在DataGrid中,onLoadSuccess事件是一个非常重要的事件,它在DataGrid数据加载成功后触发。
本文将以onLoadSuccess 事件为主题,详细介绍它的作用、使用方法以及相关的注意事项。
一、onLoadSuccess事件的作用:onLoadSuccess事件在DataGrid数据加载成功后触发,它提供了一个处理数据加载成功后的回调函数,可以在此函数中对加载到的数据进行统一的处理。
一般情况下,我们可以通过该事件来完成以下操作:1. 数据格式化:可以对数据进行格式化,如将日期格式化为指定的格式、将数字格式化为货币格式等,以便数据在DataGrid中展示更加直观、友好。
2. 数据筛选:可以根据特定的条件对数据进行筛选,只显示满足条件的数据,隐藏或删除不符合条件的数据。
3. 数据分析:可以对数据进行分析、汇总和计算,生成统计报表或图表,以便更好地展示数据以及分析数据间的关系。
4. 数据操作:可以对数据进行增、删、改的操作,如通过DataGrid提供的编辑、删除等功能来操作数据。
二、如何使用onLoadSuccess事件:在使用EasyUI的DataGrid组件时,我们可以通过以下的步骤来使用onLoadSuccess事件:步骤1:定义DataGrid组件首先,我们需要在HTML页面中定义一个DataGrid组件,并为其指定一个唯一的id,以便进行后续的操作。
可以通过以下的代码来定义一个简单的DataGrid组件:html<table id="datagrid"></table>步骤2:初始化DataGrid组件然后,我们需要在页面的JavaScript代码中初始化DataGrid组件,指定其一些基本的属性,如列定义、分页属性等。
文章标题:深入探讨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,可以在对话框关闭之前触发自定义的事件。
eaysUI简介:easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
本次用到的插件:jquery-easyui-1.4主要引用:<link rel="stylesheet"type="text/css"href="<%=path%>/js/themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="<%=path%>/js/themes/icon.css"><link rel="stylesheet"type="text/css"href="<%=path%>/js/demo.css"><script type="text/javascript"src="<%=path%>/js/jquery.min.js"></script><script type="text/javascript"src="<%=path%>/js/jquery.easyui.min.js"></script><script type="text/javascript"src="<%=path%>/js/locale/easyui-lang-zh_CN.js"></script>一、layout (布局)A) layout (布局)1.<body class="easyui-layout">2.<div data-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>3.<div data-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>4.<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>5.<div data-options="region:'west',title:'West',split:’true’style="width:100px;"></div>6.<div data-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>7.</body>split:为true时用户可以通过分割栏改变面板大小。
1概述本文档内容包括easyui的引入和easyui的使用实践,编写该文档的目的,其一是为了下次再使用easyui的时候,有章可循,提高开发效率;其次记录使用过程中遇到的一些关键的问题,供自己和其他的同学参考。
2EasyUI的引入说明Jquery库引用EasyUI中自带了Jquery的库,版本是V2.0.0,请注意该版本不一定适用于你的项目场景,关于JqueryV2.0.0对IE浏览器的支持也是每一个开发人员需要注意的。
Jquery V2.0.0支持IE9+。
最新的不一定是最好的,有时候,请果断更换你的jquery版本。
还有一点注意的是,项目中通常不会只有一个地方使用jqeury,使用easy ui 时,使用项目中统一的jquey版本库,也不失为一种好的方案。
关于easyui包目录结构调整说明通常从jquery-easyui官网中下载下来的包,是一个相当完整的包:其目录结构如下:其中:demo目录是easyui使用示例;locale目录是国际化支持;src目录是部分easyui插件的源码;plugins目录是easyui使用的插件;themes目录包含多套easyui可使用的主题。
通常在项目中使用的话,demo目录、src目录可以不用,locale可以去除没用的js库,主题如果只使用默认的主题,也可以去除不用的主题。
项目中,清理后的easyui目录结构参考如下:其中extends目录是项目中,基于easyui框架做的一些扩展。
使用easyui需要引用的js和css这次项目中主要为了使用easyui的datagrid控件,才引入了easyui框架。
由于不同的模块都会使用的easyui,所以把easyui相关的js和css统一放到了editInclude.jsp页面中,editInclude.jsp页面的内容如下:<%@ page contentType="text/html; charset=gbk" language="java" %><%String webContext = request.getContextPath();%><link rel="stylesheet" type="text/css"href="<%=webContext %>/js/jquery-easyui/themes/gray/easyui.css"><link rel="stylesheet" type="text/css"href="<%=webContext %>/js/jquery-easyui/themes/icon.css"><script type="text/javascript"src="<%=webContext %>/js/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript"src="<%=webContext %>/js/jquery-easyui/jquery.easyui.min.js"></script ><script type="text/javascript"src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js">< /script><script type="text/javascript"src="<%=webContext %>/js/jquery-easyui/extends/easyui.formatter.js">< /script><script type="text/javascript"src="<%=webContext %>/js/jquery-easyui/extends/easyui.edit.js"></scri pt>Js和css文件说明:easyui.css是easyui框架的主样式;icon.css是easyui中用到的图标的样式;jquery-1.7.2.min.js是easyui使用的基础;jquery.easyui.min.js是easyui的核心javascript库;easyui-lang-zh_CN.js是easyui对中文的国际化支持;easyui.formatter.js和easyui.edit.js是项目中使用到的两个扩展js库。
jQuery EasyUI中文帮助手册目录jQuery EasyUI中文帮助手册 (1)API版本:1.2.4 ........................................................... 错误!未定义书签。
1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (27)布局面板 (27)3. 菜单和按钮 (30)3.1 菜单 (30)菜单 (30)3.2 链接按钮 (33)链接按钮 (33)3.3 菜单按钮 (34)菜单按钮 (34)3.4 分隔按钮 (35)分隔按钮 (35)4. 表单 (36)4.1 表单 (36)表单 (36)4.2 表单验证 (38)表单验证 (38)4.3 自定义组合框 (40)自定义组合框 (40)4.4 可装载组合框 (42)可装载组合框 (42)4.5 组合树 (45)组合树 (45)4.6 组合表格 (46)组合表格 (46)4.7 数字验证框 (48)数字验证框 (48)4.8 日期组合框 (49)日期组合框 (49)4.9 日期时间组合框 (51)日期时间组合框 (51)4.10 日历 (53)日历 (53)4.11 调节器 (54)调节器 (54)4.12 数字调节器 (56)数字调节器 (56)4.13 时间调节器 (57)时间调节器 (57)5. 窗口 (58)5.1 窗口 (58)窗口 (58)5.2 对话窗口 (60)对话窗口 (60)5.3 消息窗口 (61)消息窗口 (61)6. 数据表格和树形菜单 (63)6.1 数据表格 (63)数据表格 (63)6.2 属性表格 (73)属性表格 (73)6.3 树形菜单 (74)树形菜单 (74)6.4 树形表格 (80)树形表格 (80)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称 类型描述默认值modules (模块) object (对象) 预定义模块。
标题:深入理解EasyUI中的onbeforeload参数随着互联网技术的不断发展,前端开发框架已成为网页开发中不可或缺的重要组成部分。
在众多前端开发框架中,EasyUI因其简洁易用、功能强大而备受开发者青睐。
在EasyUI中,onbeforeload参数是常用的一个参数,本文旨在对onbeforeload参数进行深入的理解和解析。
一、什么是onbeforeload参数在EasyUI中,onbeforeload参数是datagrid组件的一个事件,它在数据加载之前触发。
具体来说,当datagrid需要载入远程数据之前,会触发该事件,开发者可以在该事件中对数据进行进一步处理、过滤或者拦截请求。
二、onbeforeload参数的用法1. 设置onbeforeload参数在使用datagrid组件时,开发者可以通过设置onbeforeload参数来自定义数据加载前的处理逻辑。
一般情况下,可以通过以下方式来设置onbeforeload参数:$('#datagrid').datagrid({url: 'getData.php',onBeforeLoad: function(param){// 自定义处理逻辑}});通过以上代码,我们可以将onbeforeload参数设置为一个匿名函数,该函数接受一个param参数,参数包含了datagrid加载数据时的请求参数。
2. 在onbeforeload事件中进行数据处理在onbeforeload事件中,我们可以对请求参数进行进一步的处理,也可以根据业务需求对请求进行拦截或者过滤。
我们可以根据条件动态的设置请求参数,或者在特定条件下取消数据加载请求。
三、onbeforeload参数的实际应用1. 数据过滤在实际开发中,我们经常会遇到需要对数据进行过滤的情况。
通过使用onbeforeload参数,我们可以在数据加载前对请求参数进行处理,从而实现对数据的过滤,只加载符合特定条件的数据。
Easyui笔记Form组件:1.Form1.1 创建表单创建一个简单的HTML表单:<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();提交动作:// call 'submit' method of form plugin to submit the form$('#ff').form('submit', {url:...,onSubmit: function(){// do some check// return false to prevent submit;},success:function(data){alert(data)}});提交额外的参数:$('#ff').form('submit', {url:...,onSubmit: function(param){param.p1 = 'value1';param.p2 = 'value2';}});1.2 处理表单的提交提交一个ajax表单很简单。
EasyUI SwitchButton 是一个用于创建开关按钮的jQuery插件,它可以方便地在"开"和"关"两种状态之间切换。
以下是一些基本的用法:
1. HTML结构:
html代码:
在这个例子中,我们创建了一个SwitchButton,当开关打开时,文本显示为"是",关闭时显示为"否"。
2. 初始化SwitchButton:
javascript代码:
这段JavaScript代码会在页面加载完成后初始化SwitchButton。
3. 设置默认值:
如果你想要SwitchButton在页面加载时就处于打开或关闭状态,可以通过checked属性来设置:
html代码:
或者在JavaScript中设置:
javascript代码:
要取消选中,可以使用uncheck方法:
javascript代码:
4. 禁用和启用SwitchButton:
javascript代码:
5. 获取当前状态:
javascript代码:
6. 事件处理:
你可以绑定onChange事件来处理开关状态的变化:
javascript代码:
以上就是EasyUI SwitchButton的一些基本用法,根据具体需求,你还可以配置更多的选项和事件。
如果没有J2EE支持的话,需要加上;第二步.修改配置文件[1].代码生成器配置文件:resources/configuration/database.properties(数据库连接)resources/configuration/source_path.properties(代码生成路径配置[2].框架配置文件: resources/config.properties (数据库连接)注意:hibernate.hbm2ddl.auto=create默认情况下该属性为create,项目启动的时候,项目会自动创建基础表,所以不需要数据库脚本;如果不想每次项目启动创建表,则将该属性可改为none[3]. 配置项目的Sou rce目录[com.alibaba.druid.filter.stat.StatFilter]merge sql error, dbType mysql, sql :alter table TAUTH drop foreign key FK4BE8BFC70E6FF6Ecom.alibaba.druid.sql.parser.ParserException: error FOREIGN第五步:登陆系统,用户账号:admin/admin第五步.代码生成器工具类(生成器如何使用,请参照《第四章: 生成器使用规则》)com.test.CodeUtil(单表模型)com.test.CodeOneToMainUtil(一对多父子模型)常见部署问题:说明:如果你不是使用my elipse,切换eclipse的时候,可能会出现一些问题;问题汇总:[1].WEB目录不是:WebRoot[2].项目Class设置不是:WebRoot/WEB-INF/classes[3].创建的表没有字段[obid][create_dt][org.hibernate.SQL]alter table TAUTH drop foreign key FK4BE8BFC70E6FF6E[com.alibaba.druid.filter.stat.StatFilter]merge sql error, dbType mysql, sql :alter table TAUTH drop foreign key FK4BE8BFC70E6FF6Ecom.alibaba.druid.sql.parser.ParserException: error FOREIGN[4].项目启动时候报错:这个错误忽略没关系config.properties配置文件中hibernate.hbm2ddl.auto=create在表没有初始化成功的时候,此参数不能改为:none[5].关于Table 'easyssh.tauth' doesn't exist 问题解决在导入项目到myeclipse,一定要把resources勾选,一般平时做项目配置文件在src或WEB-INF下,习惯成自然,导致几次部署都有问题,现在解决了。
easyui checkbox用法-回复EasyUI是一款流行的前端UI框架,致力于简化开发人员在构建网站和应用程序中的用户界面的工作。
其中的Checkbox组件是常用的表单元素之一,用于多选或全选的功能。
本文将深入介绍EasyUI Checkbox的用法,从基本用法到高级用法,以及常见问题的解决方法。
一、基本用法1. 引入EasyUI库和样式文件:在页面中引入EasyUI库和样式文件,确保库文件正确加载。
html<link rel="stylesheet" type="text/css" href="easyui.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script>2. 创建HTML结构:使用HTML创建Checkbox的结构。
html<input id="checkbox1" type="checkbox" value="1">选项1<input id="checkbox2" type="checkbox" value="2">选项2<input id="checkbox3" type="checkbox" value="3">选项33. 初始化Checkbox组件:通过调用EasyUI Checkbox的初始化方法,将HTML元素转换成EasyUI Checkbox组件。
一、引起easyui datagrid 发送两次请求的原因及解决方法
问题相关代码1:
出现问题的原因是:
设置pageNumber: 0所致,如果不设置pageNumber,pageNumber的默认值为1
至于为什么发送两次,应该是easyui的bug,
大家可以设置pageNumber为非1 的数试一下,只要是非1的数字都会发送两次。
Easyui关于pageNumber取值的源码
问题的解决方法:
所有的easyui datagrid初始化的时候都不要设置pageNumber,使用系统默认值即可
问题相关代码2:
出现问题的原因是:
在datagrid数据网格加载完成之后,又重新修改配置项加载导致。
之所以修改配置项是为了解决数据化网格列随页面自适应的问题,而数据化网格列随页面自适应的问题,可以不使用此方法,具体使用方法详见(问题2)
问题的解决方法:
在数据网格加载完成之后不要再用如上的方法修改配置项
二、Easyui datagrid width实现自适应的问题
解决方法:
设置fitColumns:true,并设置列宽为width:100这种形式实现;
就不需要调用setDatagridFitCoulms()了
当设置fitColumns:true时,列宽设置的width就相当于所占table的比例,
注意:这里的宽度不能设置小于1的数值。
Datagrid width的写法及表示详见补充1
具体fitColumns与width,以及固定列等结合的测试,大家有空可以自己测试一下
三、输入查询条件查询,发送两次请求的问题及解决方法
施工数据采集系统,在datagrid为非1的页码数据页时,并在查询区域输入查询条件查询,发送两次请求的问题及解决方法
出现问题的代码块:
出现问题的原因:
在修改datagrid参数之后调用的是reload方法,查阅官方文档知:
注意:
Load:加载并显示第一页,如果指定了'param',它将替换queryParams属性。
Reload:重新加载。
但保留在当前页面上,与当前页面的信息相关。
由上可知:
使用load重新加载时,总是从第一页开始,load的时候可以修改参数的值,所以项目中的查询方法的字段中设置pageNumber:1无任何意义。
使用reload重新加载时,始终是与当前页的信息相关的,也即page == 当前pageNumber,所以,这时修改queryParams.pageNumber是不起作用的,结合问题1中,pageNumber为非1数字都会发送两次请求,这也就是为什么在非第一页的时候查询会发送两次请求的原因。
问题的解决方法:
在查询方法中调用datagrid的load方法,而非reload方法
四、查询区域查询条件输入内容允许存在空格
比如管段号为M 01 等。
common.js已添加公共方法queryDatagrid(queryformID,datagridID),
大家只需要更新调用即可
五、datagrid单元格内容展示不全的问题
这个已修改easyui的源码,大家无需一个个处理,
具体修改内容,有兴趣的可以查看源码修改部分。
同时也解决了common里面datagrid定义的默认执行的onloadSuccess
被单个页面的onloadSuccess覆盖的问题。
(在源码拓展一个方法)
六、Easyui combo组合类自适应对不齐问题
Combo系列的宽度设置
width:”auto”默认值
width:”100%”占父元素的百分比
Combo系列的宽度设置width:”100%”这样设置之后在窗口变大的时候没有问题,但是在窗口变小的时候宽度会回不去(不会随窗口缩小而缩小),
如果想让其随窗口缩小而缩小,就需在resize的方法中设置宽度,
此时输出的宽度是“100%”,如果再设置“100%”显然不起作用,
故这是宽度只能是固定值
查询区域:
现在项目中的代码对不齐是因为combo组合框的父元素有个padding-right:3px;
除去这个就对齐了,Common已删除
综上所述,给combo系列设置宽度为“100%”,不适合项目需求,
故还用原始方法,调用setComboObjWidth()能解决
新增修改页面
调用第二组封装的方法s etComboObj ReferenceInput(),给combo组合找个参照,该方法common.js中已添加,大家只需使用即可
补充1:datagrid常规width的写法及表示意思
datagrid常规width的写法及表示意思
1)带引号:width:”100”表示固定宽度多少px
width:"10%" 表示宽度所占百分比
注意:带引号时设置fitColumns,fitColumns不会影响width的展示
意思是:如果使用width:“100”,无论你怎么设置fitColumns,
设置宽度的列的宽度都是100px
如果使用width:“10%”,无论你怎么设置fitColumns,
设置宽度的列的宽度都是占表格总宽度的10%
这也是为什么设置fitColumns:true 不会使表格列宽自适应的根本2)不带引号:
width:100
当fitColumns:false(默认值时)表示固定宽度多少px
当fitColumns:true 表示所占比例
注意:
当fitColumns:true表示所占比时,尽量不要用小于10的数据,否则,无法实现自适应,而且还会导致表头和表身对不齐的问题。