- 浏览: 25794 次
- 性别:
- 来自: 成都
最新评论
1.1.1 代码 <!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>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(){ $('#tt1').tree({ animate:true, onClick:function(node){ alert('you click '+node.text); } }); $('#tt2').tree({ checkbox: true, url: 'tree_data.json', onClick:function(node){ alert('you click '+node.text); } }); }); function reload(){ $('#tt2').tree('reload'); } function getChecked(){ var nodes = $('#tt2').tree('getChecked'); var s = ''; for(var i=0; i<nodes.length; i++){ if (s != '') s += ','; s += nodes[i].text; } alert(s); } function getSelected(){ var node = $('#tt2').tree('getSelected'); alert(node.text); } function collapse(){ var node = $('#tt2').tree('getSelected'); $('#tt2').tree('collapse',node.target); } function expand(){ var node = $('#tt2').tree('getSelected'); $('#tt2').tree('expand',node.target); } function append(){ var node = $('#tt2').tree('getSelected'); $('#tt2').tree('append',{ parent: node.target, data:[{ text:'new1' },{ text:'new2', state:'closed', children:[{ text:'subnew1' },{ text:'subnew2' }] }] }); } function remove(){ var node = $('#tt2').tree('getSelected'); $('#tt2').tree('remove', node.target); } function isLeaf(){ var node = $('#tt2').tree('getSelected'); var b = $('#tt2').tree('isLeaf', node.target); alert(b) } </script> </head> <body> <h1>Tree</h1> <p>Create from HTML markup</p> <ul id="tt1" class="easyui-tree"> <li><span>Folder</span> <ul> <li><span>Sub Folder 1</span> <ul> <li><span><a href="#">File 11</a></span></li> <li><span>File 12</span></li> <li><span>File 13</span></li> </ul> </li> <li><span>File 2</span></li> <li><span>File 3</span></li> </ul> </li> <li><span>File21</span></li> </ul> <hr></hr> <p>Create from JSON data</p> <div style="margin: 10px;"><a href="#" onclick="reload()">reload</a> <a href="#" onclick="getChecked()">getChecked</a> <a href="#" onclick="getSelected()">getSelected</a> <a href="#" onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a> <a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a> <a href="#" onclick="isLeaf()">isLeaf</a></div> <ul id="tt2"></ul> </body> </html>
选项名 类型 描述 默认值 url 字符串 一个网址retrive远程数据。 null animate 布尔 当节点展开或折叠是否显示动画效果。 false checkbox 布尔 是否带复选框 False
1 Tree(树)
1.1 实例
1.2 参数
1.3 事件
事件名 |
参数 |
描述 |
onClick |
node |
用户点击一个节点时触发。,该节点参数包含以下属性: id:节点ID text:节点的文本 attributes:节点自定义属性 target:点击DOM对象的目标 |
onDblClick |
node |
用户双击一个节点时触发,参数同onclick事件 |
onLoadSuccess |
arguments |
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数 |
onLoadError |
arguments |
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数 |
1.4 方法
方法名 |
参数 |
描述 |
options |
none |
返回树的所有参数对象 |
loadData |
data |
加载树的数据 |
reload |
none |
重新加载树的数据 |
getRoot |
none |
返回树的root节点 |
getRoots |
none |
返回树的所有root节点 |
getParent |
target |
返回某个节点的父节点 |
getChildren |
target |
返回某个节点的孩子节点 |
getChecked |
none |
获取被勾选的节点 |
getSelected |
none |
获取选中的节点,并返回它,如果没有节点选择返回null。 |
isLeaf |
target |
判断某个节点是否叶子节点 |
select |
target |
选择一个节点,目标参数表明该节点的DOM对象。 |
collapse |
target |
折叠节点,目标参数表明该节点的DOM对象。 |
expand |
target |
展开一个节点,目标参数表明该节点的DOM对象。 |
collapseAll |
none |
折叠所有节点 |
expandAll |
none |
展开所有节点 |
append |
param |
一些子节点追加到父节点。参数有两个属性: parent: DOM对象,父节点追加。 data:数组,节点数据。 |
toggle |
target |
绑定某个节点的展开或者折叠状态,使之不能再改变。 |
remove |
target |
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。 |
update |
param |
更新指定的节点,参数param包含如下属性: Target:目标节点; id,text,iconCls,checked,etc. |
2 Layout(布局)
2.1 实例
此例最外层写在了body上,也可以写在某个div上。
2.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">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
2.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称 |
类型 |
描述 |
默认值 |
title |
字符串 |
布局面板的标题文本 |
null |
region |
字符串 |
定义布局面板的位置,该值是下列之一: north, south, east, west, center. |
|
border |
布尔 |
如果为ture则显示布局面板的边框 |
true |
split |
布尔 |
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小 |
false |
icon |
字符串 |
在面板头部显示图标的CSS |
null |
href |
字符串 |
从远程地址加载数据的URL |
null |
2.3 方法
方法名 |
参数 |
描述 |
panel |
region |
返回某个方位的面板,参数region取值可以是:north,south,east,west,center |
collapse |
region |
收缩某个方位的面板,参数region取值可以是:north,south,east,west |
expand |
region |
展开某个方位的面板,参数region取值可以是:north,south,east,west |
|
|
|
3 Datagrid(数据表)
3.1 实例
3.1.1 代码
<!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>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>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
3.2 参数
Name |
Type |
Description |
Default |
title |
字符串 |
标题文字 |
null |
iconCls |
字符串 |
一个css类,将提供一个背景图片作为标题图标 |
null |
border |
布尔 |
是否显示面板的边界。 |
true |
width |
数字 |
表格的宽度 |
auto |
height |
数字 |
表格的高度 |
auto |
columns |
数组 |
表格的列的配置对象,详见下面column属性介绍。 |
null |
frozenColumns |
数组 |
与columns属性相通,但这些列将固定在左侧,不得变动。 |
null |
striped |
布尔 |
是否显示斑马线 |
false |
method |
字符串 |
远程数据的获取类型,可取值为post或get |
post |
nowrap |
布尔 |
是否在一行显示数据 |
true |
idField |
字符串 |
指定哪些字段时标识字段 |
null |
url |
字符串 |
从远程请求数据的地址 |
null |
loadMsg |
字符串 |
当远程加载数据时,现实的等待信息提示 |
Processing, please wait … |
pagination |
布尔 |
是否显示底部分页工具栏 |
false |
rownumbers |
布尔 |
是否显示行号列 |
false |
singleSelect |
布尔 |
是否允许只选择一行 |
false |
fit |
布尔 |
是否允许表格自动缩放,以适应父容器 |
false |
pageNumber |
数字 |
初始化页码 |
1 |
pageSize |
数字 |
初始化页面大小 |
10 |
pageList |
数组 |
初始化页面大小选择清单 |
[10,20,30,40,50] |
queryParams |
对象 |
当请求远程数据时,发送的额外的参数 |
{} |
sortName |
字符串 |
定义哪一列可以排序 |
null |
sortOrder |
字符串 |
定义列排序的方式,递增(asc)或递减(desc) |
asc |
editors |
对象 |
定义当编辑某行数据时的编辑器 |
predefined editors |
3.3 Column参数
Name |
Type |
Description |
Default |
title |
字符串 |
列标题文字 |
undefined |
field |
字符串 |
列字段名称 |
undefined |
width |
数字 |
列宽度 |
undefined |
rowspan |
数字 |
该列占几行单元格 |
undefined |
colspan |
数字 |
该列占几列单元格 |
undefined |
align |
字符串 |
数据对其方式,可选值有left,right,center |
undefined |
sortable |
布尔 |
是否允许该列排序 |
undefined |
checkbox |
布尔 |
是否显示选择框 |
undefined |
formatter |
函数 |
包含三个参数: value: the field value. rowData: the row record data rowIndex: the row index. |
undefined |
editor |
string,object |
Indicate the edit type. When string indicates the edit type, when object contains two properties: |
undefined |
3.4 事件
Name |
Parameters |
Description |
onLoadSuccess |
data |
远程数据加载成功时触发 |
onLoadError |
none |
远程数据加载失败时触发 |
onBeforeLoad |
data |
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出 |
onClickRow |
rowIndex, rowData |
当用户点击某行时触发, the parameters contains: |
onDblClickRow |
rowIndex, rowData |
当用户双击某行时触发, the parameters contains: |
onSortColumn |
sort, order |
当用户排序某列时触发, the parameters contains: |
onSelect |
rowIndex, rowData |
当用户选择某行时触发, the parameters contains: |
onUnselect |
rowIndex, rowData |
当用户取消选择某行时触发, the parameters contains: |
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑某行时触发, the parameters contains: |
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑某行时触发, the parameters contains: |
onCancelEdit |
rowIndex, rowData |
当用户退出编辑某行时触发, the parameters contains: |
3.5 方法
Name |
Parameter |
Description |
options |
none |
返回所有参数的对象 |
getPager |
none |
返回分页对象 |
resize |
none |
调整表格大小 |
reload |
param |
重新加载行 |
fixColumnSize |
none |
固定列的大小 |
loadData |
param |
加载本地数据,旧行将被删除 |
getData |
none |
返回已加载的数据 |
getRows |
none |
返回当前页的行数 |
getSelected |
none |
返回第一次选择的行记录 |
getSelections |
none |
返回所有选定行,如果没选择记录,则返回空数组 |
clearSelections |
none |
取消所有选择 |
selectAll |
none |
选择当前页所有行 |
selectRow |
index |
选择某行,行索引以0开始 |
selectRecord |
idValue |
通过id值选择一行 |
unselectRow |
index |
取消选择某行 |
beginEdit |
index |
开始编辑某行 |
endEdit |
index |
结束编辑某行 |
cancelEdit |
index |
退出编辑某行 |
refreshRow |
index |
刷新一行的数据 |
appendRow |
row |
添加新行 |
deleteRow |
index |
删除一行 |
getChanges |
type |
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows. |
acceptChanges |
none |
Commits all the changes data since it was loaded or since the last time acceptChanges was called. |
rejectChanges |
none |
Rolls back all the changes data since it was created, or since the last time acceptChanges was called. |
相关推荐
总结,"easyui-crud-demo" 是一个实用的教程,它演示了如何利用jQuery EasyUI构建一个完整的CRUD应用,涵盖了前端与后端的交互、数据的展示和操作,对于学习EasyUI和PHP Web开发具有很高的参考价值。通过深入理解...
- **1.3.5**: 这个版本的离线文档增加了简体中文API文档,可能会涵盖更多组件的更新和优化,比如表单验证、数据网格、布局等。 - **1.3.6**: 这是1.3系列的最后一个版本,可能会有更多改进和增强,例如性能提升、...
jQuery 1.2.6 API帮助手册是学习和使用jQuery核心库的重要参考资料。尽管jQuery已经发展到更高的版本,但1.2.6仍然是许多项目中的稳定选择。该手册涵盖了选择器、遍历、操作DOM元素、事件处理、Ajax、效果等内容,是...
这个“easyUI-API-中文版”压缩包包含了全面的 EasyUI 中文帮助文档,是开发者在使用 EasyUI 进行前端开发时的重要参考资料。 EasyUI 的核心特性包括: 1. **组件丰富**:EasyUI 提供了诸如窗口(Window)、面板...
这个名为“jquery-easyui-1.2.5”的压缩包,包含了该版本的所有必要文件,对于学习和使用EasyUI具有重要的参考价值。 EasyUI 的核心理念在于减轻开发者的负担,通过预定义的CSS样式和JavaScript组件,开发者无需从...
- **官方文档**:EasyUI的官方文档提供了详尽的API和示例,是学习和使用EasyUI的重要参考。 - **社区和论坛**:开发者可以在EasyUI的社区和论坛中找到问题解答和示例代码,互相交流经验。 - **在线示例**:通过...
这份官方API文档详细解释了jQuery EasyUI 1.3.4中的每一个组件、属性、方法和事件,是开发过程中不可或缺的参考资料。通过深入学习和实践,开发者能够熟练掌握这个强大的框架,高效地构建用户界面。
在机电设备管理系统中,可能需要使用网格布局来组织各种设备信息,使数据呈现更加清晰有序;或者采用卡片布局,将每个设备作为一个独立的卡片展示,便于用户查看和管理。 在“机电设备管理系统布局新范例”中,可能...
5. **API 文档**:压缩包中的"中文API"部分,应该是EasyUI的中文版使用手册,它详细介绍了每个组件的用法、参数设置以及事件处理,是开发者使用EasyUI时的重要参考资料。 6. **源码分析**:包含的"源码"部分,可以...
jQuery EasyUI 是一个基于 jQuery 的开源框架,它提供了一系列轻量级、易于使用的组件,帮助开发者快速构建功能丰富的 Web 应用程序。在这一1.2版本中,我们重点关注的是其在数据展示和树形结构方面的应用,即 ...
EasyUI 是一款基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和布局功能,使得开发者能够快速构建出美观且响应式的 web 应用程序。"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合,可以帮助开发者...
例如,可能增加了新的布局选项、表单验证规则或者数据加载方式等。 3. **组件详解**: - **对话框(Dialog)**:用于弹出式窗口,可以用来显示信息、进行确认操作或提供更复杂的交互。 - **表格(Table)**:提供分页...
总结来说,“jquery-easyui-1.3.3-api.rar”这个压缩包包含了完整的jQuery EasyUI 1.3.3版本的API文档,是学习和使用EasyUI开发Web应用的必备参考资料。通过深入理解和实践其中的API,开发者能够熟练掌握EasyUI,...
- **readme.txt**:包含基本的使用指南和注意事项,是初学者的重要参考。 - **plugins**:插件目录,扩展了EasyUI的功能,例如图表、日历等。 - **locale**:本地化文件夹,提供了多种语言的支持,便于国际化开发...
3. **数据绑定**:EasyUI 支持数据绑定,比如在datagrid中,可以将数据源绑定到JSON或XML格式的数据,通过`url`属性指定数据接口,实现动态加载。 4. **事件处理**:所有组件都支持事件监听,如点击、关闭、加载等...
这个名为"EasyUI使用的demo"的项目是为初学者准备的一个实例,它展示了EasyUI在实际应用中的基本用法,包括系统布局、数据操作以及窗口间通信等多个方面。 1. **整体布局**:EasyUI提供了多种布局模式,如`grid`、`...
EasyUI 的核心在于其组件库,这些组件包括数据网格(datagrid)、下拉树(combotree)、日期选择器(datebox)、对话框(dialog)、菜单(menu)等,它们使得网页界面的构建变得直观而高效。在 "jquery-easyui-1.3.2...
- **组件介绍**:包括布局、表格、表单、按钮、菜单、下拉框、树、对话框等,这些组件都有丰富的配置选项和API,便于定制。 - **模糊查询**:EasyUI的表格组件支持模糊查询,可以通过输入关键词在数据集中进行搜索...
**jQuery EasyUI 中文详细说明文档** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一套丰富的 UI 组件,帮助开发者快速构建功能...《jQuery EasyUI 中文详细说明文档》是学习和应用该框架的重要参考资料。
3. `examples` 或 `demo` 文件夹:演示了EasyUI组件的使用,包括窗口(window)、表单(form)、面板(panel)、菜单(menu)、树形控件(tree)、表格(datagrid)等。 4. `docs` 文件夹:可能包含HTML格式的API...