`
kzerg
  • 浏览: 25856 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

阅读更多

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>

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

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>

<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

字符串

远程数据的获取类型,可取值为postget

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.

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics