jQuery EasyUI API 中文文档 - DataGrid数据表格


Posted in Javascript onNovember 17, 2011

扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。
依赖
panel
resizable
linkbutton
pagination
用法

<table id="tt"></table>

$('#tt').datagrid({ 
url:'datagrid_data.json', 
columns:[[ 
{field:'code',title:'Code',width:100}, 
{field:'name',title:'Name',width:100}, 
{field:'price',title:'Price',width:100,align:'right'} 
]] 
});

数据表格(DataGrid)的特性<?XML:NAMESPACE PREFIX = O />

其特性扩展自 panel,下列是为 datagrid 增加的特性。

名称 类型 说明 默认值
columns array datagrid 的 column 的配置对象,更多详细请参见 column 的特性。 null
frozenColumns array 和列的特性一样,但是这些列将被冻结在左边。 null
fitColumns boolean True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 false
striped boolean True 就把行条纹化。(即奇偶行使用不同背景色) false
method string 请求远程数据的 method 类型。 post
nowrap boolean True 就会把数据显示在一行里。 true
idField string 标识字段。 null
url string 从远程站点请求数据的 URL。 null
loadMsg string 当从远程站点加载数据时,显示的提示信息。 Processing, please wait …
pagination boolean True 就会在 datagrid 的底部显示分页栏。 false
rownumbers boolean True 就会显示行号的列。 false
singleSelect boolean True 就会只允许选中一行。 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
remoteSort boolean 定义是否从服务器给数据排序。 true
showFooter boolean 定义是否显示一行页脚。 false
rowStyler function 返回例如 'background:red' 的样式,该函数需要两个参数:rowIndex: 行的索引,从 0 开始。rowData: 此行相应的记录。  
loadFilter function 返回过滤的数据去显示。这个函数需要一个参数 'data' ,表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。  
editors object 定义编辑行时的 editor 。 预定义的 editor
view object 定义 datagrid 的 view 。 默认的 view
列(Column)的特性
DataGrid 的 Column 是一个数组对象,它的每个元素也是一个数组。数组元素的元素是一个配置对象,它定义了每个列的字段。
代码示例:
columns:[[ 
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, 
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, 
{title:'Item Details',colspan:4} 
],[ 
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, 
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, 
{field:'attr1',title:'Attribute',width:100}, 
{field:'status',title:'Status',width:60} 
]]

名称 类型 说明 默认值
title string 列的标题文字。 undefined
field string 列的字段名。 undefined
width number 列的宽度。 undefined
rowspan number 指一个单元格占据多少行。 undefined
colspan number 指一个单元格占据多少列。 undefined
align string 指如何对齐此列的数据,可以用 'left'、'right'、'center'。 undefined
sortable boolean True 就允许此列被排序。 undefined
resizable boolean True 就允许此列被调整尺寸。 undefined
hidden boolean True 就隐藏此列。 undefined
checkbox boolean True 就显示 checkbox。 undefined
formatter function 单元格的格式化函数,需要三个参数: value: 字段的值。rowData: 行的记录数据。rowIndex: 行的索引。 undefined
styler function 单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 'background:red' 。此函数需要三个参数:value: 字段的值。rowData: 行的记录数据。rowIndex: 行的索引。 undefined
sorter function 自定义字段的排序函数,需要两个参数:a: 第一个字段值。b: 第二个字段值。 undefined
editor string,object 指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: type:string,编辑类型,可能的类型是:  text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。options:对象,编辑类型对应的编辑器选项。 undefined
编辑器(Editor)

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为:

名称 参数 说明
init container, options 初始化编辑器并且返回目标对象。
destroy target 如果必要就销毁编辑器。
getValue target 从编辑器的文本返回值。
setValue target , value 给编辑器设置值。
resize target , width 如果必要就调整编辑器的尺寸。
例如,文本编辑器(text editor)像下面这样定义:
$.extend($.fn.datagrid.defaults.editors, { 
text: { 
init: function(container, options){ 
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); 
return input; 
}, 
getValue: function(target){ 
return $(target).val(); 
}, 
setValue: function(target, value){ 
$(target).val(value); 
}, 
resize: function(target, width){ 
var input = $(target); 
if ($.boxModel == true){ 
input.width(width - (input.outerWidth() - input.width())); 
} else { 
input.width(width); 
} 
} 
} 
});

数据表格视图(DataGrid View)
用 $.fn.datagrid.defaults.view 重写了 defaults。
view 是一个对象,它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。
名称 参数 说明
render target, container, frozen 当数据加载时调用。target:DOM 对象,datagrid 对象。container:行的容器。frozen:表示是否呈现冻结容器。
renderFooter target, container, frozen 这是呈现行脚选项的函数。
renderRow target, fields, frozen, rowIndex, rowData 这是选项的函数,将会被 render 函数调用。
refreshRow target, rowIndex 定义如何刷新指定的行。
onBeforeRender target, rows 视图被呈现前触发。
onAfterRender target 视图被呈现后触发。
事件

其事件扩展自 panel,下列是为 datagrid 增加的事件。

名称 参数 说明
onLoadSuccess data 当数据加载成功时触发。
onLoadError none 加载远程数据发生某些错误时触发。
onBeforeLoad param 发送加载数据的请求前触发,如果返回 false加载动作就会取消。
onClickRow rowIndex, rowData 当用户点击一行时触发,参数包括: rowIndex:被点击行的索引,从 0 开始。rowData:被点击行对应的记录。
onDblClickRow rowIndex, rowData 当用户双击一行时触发,参数包括: rowIndex:被双击行的索引,从 0 开始。rowData:被双击行对应的记录。
onClickCell rowIndex, field, value 当用户单击一个单元格时触发。
onDblClickCell rowIndex, field, value 当用户双击一个单元格时触发。
onSortColumn sort, order 当用户对一列进行排序时触发,参数包括: sort:排序的列的字段名order:排序的列的顺序
onResizeColumn field, width 当用户调整列的尺寸时触发。
onSelect rowIndex, rowData 当用户选中一行时触发,参数包括: rowIndex:选中行的索引,从 0 开始rowData:选中行对应的记录
onUnselect rowIndex, rowData 当用户取消选择一行时触发,参数包括: rowIndex:取消选中行的索引,从 0 开始rowData:取消选中行对应的记录
onSelectAll rows 当用户选中全部行时触发。
onUnselectAll rows 当用户取消选中全部行时触发。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录
onAfterEdit rowIndex, rowData, changes 当用户完成编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录changes:更改的字段/值对
onCancelEdit rowIndex, rowData 当用户取消编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录
onHeaderContextMenu e, field 当 datagrid 的头部被右键单击时触发。
onRowContextMenu e, rowIndex, rowData 当右键点击行时触发。

方法

名称 参数 说明
options none 返回 options 对象。
getPager none 返回 pager 对象。
getPanel none 返回 panel 对象。
getColumnFields frozen 返回列的字段,如果 frozen 设定为 true,冻结列的字段被返回。
getColumnOption field 返回指定列的选项。
resize param 调整尺寸和布局。
load param 加载并显示第一页的行,如果指定 param 参数,它将替换 queryParams 特性。
reload param 重新加载行,就像 load 方法一样,但是保持在当前页。
reloadFooter footer 重新加载脚部的行。
loading none 显示正在加载状态。
loaded none 隐藏正在加载状态。
fitColumns none 使列自动展开/折叠以适应 datagrid 的宽度。
fixColumnSize none 固定列的尺寸。
fixRowHeight index 固定指定行的高度。
loadData data 加载本地数据,旧的行会被移除。
getData none 返回加载的数据。
getRows none 返回当前页的行。
getFooterRows none 返回脚部的行。
getRowIndex row 返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。
getSelected none 返回第一个选中的行或者 null。
getSelections none 返回所有选中的行,当没有选中的记录时,将返回空数组。
clearSelections none 清除所有的选择。
selectAll none 选中当前页所有的行。
unselectAll none 取消选中当前页所有的行。
selectRow index 选中一行,行索引从 0 开始。
selectRecord idValue 通过 id 的值做参数选中一行。
unselectRow index 取消选中一行。
beginEdit index 开始对一行进行编辑。
endEdit index 结束对一行进行编辑。
cancelEdit index 取消对一行进行编辑。
getEditors index 获取指定行的编辑器们。每个编辑器有下列特性:actions:编辑器能做的动作们。target:目标编辑器的 jQuery 对象。field:字段名。type:编辑器的类型。
getEditor options 获取指定的编辑器, options 参数包含两个特性: index:行的索引。field:字段名。
refreshRow index 刷新一行。
validateRow index 验证指定的行,有效时返回 true。
updateRow param 更新指定的行, param 参数包含下列特性:index:更新行的索引。row:行的新数据。
appendRow row 追加一个新行。
insertRow param 插入一个新行, param 参数包括下列特性:index:插入进去的行的索引,如果没有定义,就追加此新行。row:行的数据。
deleteRow index 删除一行。
getChanges type 获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。 当 type 参数没有分配时,返回所有改变的行。
acceptChanges none 提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。
rejectChanges none 回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。
mergeCells options 把一些单元格合并为一个单元格,options 参数包括下列特性:index:列的索引。field:字段名。rowspan:合并跨越的行数。colspan:合并跨越的列数。
showColumn field 显示指定的列。
hideColumn field 隐藏指定的列。
Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
google地图的路线实现代码
Aug 20 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
JS实现简单的表格增删
Jan 16 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Jquery 获取checkbox的checked问题
Nov 16 #Javascript
JS 操作符整理[推荐收藏]
Nov 15 #Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 #Javascript
关于js datetime的那点事
Nov 15 #Javascript
基于jquery封装的一个js分页
Nov 15 #Javascript
js 利用className得到对象的实现代码
Nov 15 #Javascript
基于jquery的web页面日期格式化插件
Nov 15 #Javascript
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
JavaScript类库D
2010/10/24 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python编码最佳实践之总结
2016/02/14 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python字符串的修改方法实例
2019/12/19 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
银行纠风工作实施方案
2014/06/08 职场文书
2014年药房工作总结
2014/11/22 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS