jquery-easyui的Datagrid(数据表)的介绍
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属性时，初始化页码 |
1 |
|
pageSize |
number |
当设置pagination属性时，初始化每一页显示的数量 |
10 |
|
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 |
数字 |
当分页建立时设置记录的总数量 |
1 |
|
pageSize |
数字 |
每一页显示的数量 |
10 |
|
pageNumber |
数字 |
当分页建立时，显示的页数 |
1 |
|
pageList |
数组 |
用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变. |
[10,20,30,50] |
|
loading |
布尔 |
定义数据是否正在加载 |
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI Datagrid</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,
//事件调用的方式
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>
<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>
(2)效果图
浙公网安备 33010602011771号