`
kzerg
  • 浏览: 25794 次
  • 性别: 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.

 

分享到:
评论

相关推荐

    easyui-crud-demo

    总结,"easyui-crud-demo" 是一个实用的教程,它演示了如何利用jQuery EasyUI构建一个完整的CRUD应用,涵盖了前端与后端的交互、数据的展示和操作,对于学习EasyUI和PHP Web开发具有很高的参考价值。通过深入理解...

    easyUI离线文档1.3-1.4全部包含

    - **1.3.5**: 这个版本的离线文档增加了简体中文API文档,可能会涵盖更多组件的更新和优化,比如表单验证、数据网格、布局等。 - **1.3.6**: 这是1.3系列的最后一个版本,可能会有更多改进和增强,例如性能提升、...

    网页制作帮助文档集 jquery-easyui-api-chm-document

    jQuery 1.2.6 API帮助手册是学习和使用jQuery核心库的重要参考资料。尽管jQuery已经发展到更高的版本,但1.2.6仍然是许多项目中的稳定选择。该手册涵盖了选择器、遍历、操作DOM元素、事件处理、Ajax、效果等内容,是...

    easyUI-API- 中文版

    这个“easyUI-API-中文版”压缩包包含了全面的 EasyUI 中文帮助文档,是开发者在使用 EasyUI 进行前端开发时的重要参考资料。 EasyUI 的核心特性包括: 1. **组件丰富**:EasyUI 提供了诸如窗口(Window)、面板...

    jquery-easyui-1.2.5

    这个名为“jquery-easyui-1.2.5”的压缩包,包含了该版本的所有必要文件,对于学习和使用EasyUI具有重要的参考价值。 EasyUI 的核心理念在于减轻开发者的负担,通过预定义的CSS样式和JavaScript组件,开发者无需从...

    EasyUI效果参考

    - **官方文档**:EasyUI的官方文档提供了详尽的API和示例,是学习和使用EasyUI的重要参考。 - **社区和论坛**:开发者可以在EasyUI的社区和论坛中找到问题解答和示例代码,互相交流经验。 - **在线示例**:通过...

    jquery-easyui-1.3.4-api_官方英文原版.zip

    这份官方API文档详细解释了jQuery EasyUI 1.3.4中的每一个组件、属性、方法和事件,是开发过程中不可或缺的参考资料。通过深入学习和实践,开发者能够熟练掌握这个强大的框架,高效地构建用户界面。

    基于jquery-easyui的机电设备管理系统布局新范例

    在机电设备管理系统中,可能需要使用网格布局来组织各种设备信息,使数据呈现更加清晰有序;或者采用卡片布局,将每个设备作为一个独立的卡片展示,便于用户查看和管理。 在“机电设备管理系统布局新范例”中,可能...

    jquery-easyUI-1.3.4

    5. **API 文档**:压缩包中的"中文API"部分,应该是EasyUI的中文版使用手册,它详细介绍了每个组件的用法、参数设置以及事件处理,是开发者使用EasyUI时的重要参考资料。 6. **源码分析**:包含的"源码"部分,可以...

    jquery-easyui-1.2 版本

    jQuery EasyUI 是一个基于 jQuery 的开源框架,它提供了一系列轻量级、易于使用的组件,帮助开发者快速构建功能丰富的 Web 应用程序。在这一1.2版本中,我们重点关注的是其在数据展示和树形结构方面的应用,即 ...

    全套EasyUI示例源码

    EasyUI 是一款基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和布局功能,使得开发者能够快速构建出美观且响应式的 web 应用程序。"全套EasyUI示例源码"是一个包含三十多个组件的完整示例集合,可以帮助开发者...

    jquery-easyui-1.3.3v1

    例如,可能增加了新的布局选项、表单验证规则或者数据加载方式等。 3. **组件详解**: - **对话框(Dialog)**:用于弹出式窗口,可以用来显示信息、进行确认操作或提供更复杂的交互。 - **表格(Table)**:提供分页...

    jquery-easyui-1.3.3-api.rar

    总结来说,“jquery-easyui-1.3.3-api.rar”这个压缩包包含了完整的jQuery EasyUI 1.3.3版本的API文档,是学习和使用EasyUI开发Web应用的必备参考资料。通过深入理解和实践其中的API,开发者能够熟练掌握EasyUI,...

    jquer-easyui-1.6.6

    - **readme.txt**:包含基本的使用指南和注意事项,是初学者的重要参考。 - **plugins**:插件目录,扩展了EasyUI的功能,例如图表、日历等。 - **locale**:本地化文件夹,提供了多种语言的支持,便于国际化开发...

    jQuery.EasyUI-1.3.4-API

    3. **数据绑定**:EasyUI 支持数据绑定,比如在datagrid中,可以将数据源绑定到JSON或XML格式的数据,通过`url`属性指定数据接口,实现动态加载。 4. **事件处理**:所有组件都支持事件监听,如点击、关闭、加载等...

    EasyUI使用的demo

    这个名为"EasyUI使用的demo"的项目是为初学者准备的一个实例,它展示了EasyUI在实际应用中的基本用法,包括系统布局、数据操作以及窗口间通信等多个方面。 1. **整体布局**:EasyUI提供了多种布局模式,如`grid`、`...

    jquery-easyui-1.3.2 demo

    EasyUI 的核心在于其组件库,这些组件包括数据网格(datagrid)、下拉树(combotree)、日期选择器(datebox)、对话框(dialog)、菜单(menu)等,它们使得网页界面的构建变得直观而高效。在 "jquery-easyui-1.3.2...

    easyui+ssh(增删改模糊查询,导出数据)

    - **组件介绍**:包括布局、表格、表单、按钮、菜单、下拉框、树、对话框等,这些组件都有丰富的配置选项和API,便于定制。 - **模糊查询**:EasyUI的表格组件支持模糊查询,可以通过输入关键词在数据集中进行搜索...

    jquery-easyui中文详细说明文档

    **jQuery EasyUI 中文详细说明文档** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一套丰富的 UI 组件,帮助开发者快速构建功能...《jQuery EasyUI 中文详细说明文档》是学习和应用该框架的重要参考资料。

    jquery-easyui-1.3.4.rar

    3. `examples` 或 `demo` 文件夹:演示了EasyUI组件的使用,包括窗口(window)、表单(form)、面板(panel)、菜单(menu)、树形控件(tree)、表格(datagrid)等。 4. `docs` 文件夹:可能包含HTML格式的API...

Global site tag (gtag.js) - Google Analytics