easyUI使用参考04-树,布局,数据表
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
?
?
事件名
参数
描述
onClick
node
用户点击一个节点时触发。，该节点参数包含以下属性：
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发，参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发，参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发，参数arguments类似jQuery.ajax.的error函数
?
方法名
参数
描述
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.
?
此例最外层写在了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 style="margin: 0cm 0cm 0pt;">?????? <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>
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置，该值是下列之一: north,?????? south,? east,?????? west, center.
?
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏，用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
?
方法名
参数
描述
panel
region
返回某个方位的面板，参数region取值可以是：north,south,east,west,center
collapse
region
收缩某个方位的面板，参数region取值可以是：north,south,east,west
expand
region
展开某个方位的面板，参数region取值可以是：north,south,east,west
?
?
?
?
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>
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
?
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:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
?
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去，加载数据前触发。如果返回false，加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
?
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.
?
