jqery-easyui-Datagrid(数据表)

来源：互联网发布：雷巴的冒险修改数据编辑：程序博客网时间：2024/05/21 09:22

jqery-easyui的Datagrid(数据表)的介绍

依赖的组件

resizable

linkbutton

pagination

DataGrid Options对象的属性

名称(Name)

类型(Type)

描述(Description)

默认值(Default)

Titile

string

Datagrid数据表的标题

null

iconCls

string

一个样式类提供作为数据表图标的背景图标

null

border

boolean

是否显示数据表边框,true-显示 false-不显示

true

width

number

设置Datagrid的宽度

auto

height

number

设置Datagrid的高度

auto

columns

array

配置Datagrid列属性的Object对象

null

frozenColumns

array

与columns属性一样，但是该属性设置的列会被冻结在Datagrid的左边

null

striped

boolean

是否显示斑马线

false

Method

string

远程数据的获取类型，可取值为post或get

post

nowrap

boolean

是否把数据显示在一行上，如果设置为false，当数据长度超过列长度时，超过的部分被截掉

true

idField

string

表明哪个字段是一个标识字段

null

url

string

从远程地址请求数据的url

null

loadMsg

string

当从远程站点加载数据时显示的提示消息

Processing, please wait …

pagination

boolean

设置是否有分页功能

false

rownumbers

number

是否显示行号列

false

singleSelect

number

设置是否可只选一行

false

fit

boolean

设置是否可以让表格自动缩放以适应父容器

false

pageNumber

number

当设置pagination属性时，初始化页码

pageSize

number

当设置pagination属性时，初始化每一页显示的数量

pageList

array

当设置pagination属性时，初始化每页可选的数据大小清单

[10,20,30,40,50]

queryParams

Object

当请求远程数据时，发送的额外的参数

{}

sortName

string

定义哪一列可以排序

null

sortOrder

string

定义列排序的方式，递增（asc）或递减（desc）

asc

Columns属性

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: 列字段对应的值

rowData: 行数据对象

rowIndex: 行索引

undefined

editor

string,object

指示编辑类型，有两个子属性，type和options；type可选的编辑框有:text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree；options指定一个对象，与编辑类型对应，数字框对应的options属性中有precision,表示小数点位数

undefined

事件

Name

Parameters

Description

onLoadSuccess

none

远程数据成功加载时触发

onLoadError

none

远程数据加载发生错误时触发

onClickRow

rowIndex,rowData

用户点击一行时触发，参数包括：

rowIndex:被点击行的索引，索引从0开始

rowData:被点击行对应的数据记录

onDblClickRow

rowIndex,rowData

用户双击一行时触发，参数同上

onSortColumn

sort,order

用户对一列进行排序时触发，参数包括：

sort:被排序的类字段名称

order:排序的命令，asc 或者 desc

onSelect

rowIndex,rowData

用户选择一行时触发

onUnselect

rowIndex,rowData

当用取消选择一行时触发

方法

Name

Parameters

Description

options

none

返回一个options对象

resize

none

调整表格大小和布局

reload

none

重新加载行

fixColumnSize

none

固定列的大小

loadData

param

加载本地数据，旧行将被删除

getSelected

none

返回被选中的第一行记录或者null

getSelections

none

返回所有被选中的行，当没有一条记录别选中时则返回一个空的数组对象

clearSelections

none

取消所有选中

selectRow

index

选择一行，行索引从0开始

selectRecord

idValue

通过行id值选择一行

unselectRow

index

取消选中某行

beginEdit

index

开始编辑某行

endEdit

index

结束编辑某行

cancelEdit

index

取消编辑某行

refreshRow

index

刷新一行的数据

appendRow

row

添加新行

deleteRow

index

删除一行

getChanges

type

自最后一次数据提交开始获取被改变的行，类型参数指示的是行的改变类型，可能的值是：inserted,deleted,updated等，当类型参数没有指定时将返回所有被改变的行

acceptChanges

none

自数据被加载或者最后一次调用acceptChanges的时间开始，提交所有的数据变化

rejectChanges

none

自所有数据被创建或者最后一次调用accepChanges方法开始回滚所有变化了的数据

注：示例中用到了分页，Datagrid依赖pagination(分页)组件，下面讲解以下pagination组件的属性和事件

Paginagion

Pagination属性

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

pageSize

数字

每一页显示的数量

pageNumber

数字

当分页建立时，显示的页数

pageList

数组

用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.

[10,20,30,50]

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类

handler: 当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

Of {pages}

displayMsg

字符串

显示一个页面的信息。

Displaying {from} {to} of {total} items 注：{param}是固定的参数设置，不能修改

Pagination事件

事件名

参数

描述

onSelectPage

pageNumber, pageSize

当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小

onBeforeRefresh

ageNumber, pageSize

刷新按钮被点击之前触发，如果返回false则取消刷新操作

onRefresh

ageNumber, pageSize

刷新以后触发

onChangePageSize

ageSize

改变页面大小时触发

1.实例

(1)代码

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

<html>

<head>

<title>EasyUI Datagrid</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,

//事件调用的方式

onLoadSuccess: function (){alert('load data successfully!');}

toolbar:[{ //设置工具条，该工具条中设置了三个功能按钮

text:'Add', //标题为’Add’的工具条按钮

iconCls:'icon-add',//工具条按钮显示的图标

handler:function(){//工具条按钮实现的功能函数

alert('add')

}

},{

text:'Cut', //标题为’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({ //设置分页功能栏

//分页功能可以通过Pagination的事件调用后台分页功能来实现

onBeforeRefresh:function(){

alert('before refresh');

}

});

}

});

function resize(){

$('#test').datagrid({

title: 'New Title',

striped: true,

width: 650,

queryParams:{

p:'param test',

name:'My Name'

}

});

}

//获取Datagrid Options对象属性的方式

function getGridProperty(){

//先获取Options对象，然后通过Options获取其属性

var optionsObj = $('#test').datagrid('options');

var queryParams = optionsObj.queryParams;

}

//以下为调用Datagrid的函数的自定义方法

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>

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

(2)效果图

点击查看原图