kzerg

浏览: 25798 次
性别:
来自: 成都

最近访客更多访客>>

suncong1024

daiwenzh5

xyzhao888

qq752011193

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

easyUI使用参考04-树,布局,数据表

博客分类：

参考

javascript easyui

12... Tree（树）... 33

13... Layout（布局）... 38

14... Datagrid（数据表）... 39

1 Tree（树）

1.1 实例

1.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

<p>Create from HTML markup</p>

<li><span>Folder</span>

<ul>

<li><span>Sub Folder 1</span>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

<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>

</body>

</html>

1.2 参数

选项名	类型	描述	默认值
url	字符串	一个网址retrive远程数据。	null
animate	布尔	当节点展开或折叠是否显示动画效果。	false
checkbox	布尔	是否带复选框	False

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>

<title>jQuery EasyUI</title>

$(function(){

var p = $('body').layout('panel','west').panel({

onCollapse:function(){

alert('collapse');

}

});

setTimeout(function(){

$('body').layout('collapse','east');

},0);

});

</script>

</head>

<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>

</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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

</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: 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

3.4 事件

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

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.

分享到：

javascript笔记 | easyUI使用参考03-分页,窗口,面板,标签

2012-03-29 15:31
浏览 2885
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyUI使用参考04-树,布局,数据表

1 Tree（树）

1.1 实例

1.2 参数

1.3 事件

1.4 方法

2 Layout（布局）

2.1 实例

2.2 参数

2.3 方法

3 Datagrid（数据表）

3.1 实例

3.2 参数

3.3 Column参数

3.4 事件

3.5 方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyUI使用参考04-树,布局,数据表

1 Tree（树）

2 Layout（布局）

3 Datagrid（数据表）

3.3 Column参数

评论

发表评论

相关推荐

easyUI使用参考03-分页,窗口,面板,标签

easyUI使用参考02-对话框,提示框,数字框,验证框

easyUI使用参考01-可折叠标签,日期框,组合框

最近访客更多访客>>