jQuery EasyUI DataGrid API 中文文档
扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults 。
依赖
- panel
- resizable
- linkbutton
- pagination
用法
1. <table id="tt"></table>
1. $('#tt').datagrid({
2. url:'datagrid_data.json',
3. columns:[[
4. {field:'code',title:'Code',width:100},
5. {field:'name',title:'Name',width:100},
6. {field:'price',title:'Price',width:100,align:'right'}
7. ]]
8. });
数据表格(DataGrid)的特性
其特性扩展自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'的样式,该函数需要两个参数: |
span> |
loadFilter |
function |
返回过滤的数据去显示。这个函数需要一个参数'data',表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有'total' 和 'rows'特性。 |
|
editors |
object |
定义编辑行时的editor 。 |
预定义的 editor |
view |
object |
定义datagrid的 view 。 |
默认的 view |
列(Column)的特性
DataGrid 的Column是一个数组对象,它的每个元素也是一个数组。数组元素的元素是一个配置对象,它定义了每个列的字段。
代码示例:
1. columns:[[
2. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
3. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
4. {title:'Item Details',colspan:4}
5. ],[
6. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
7. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
8. {field:'attr1',title:'Attribute',width:100},
9. {field:'status',title:'Status',width:60}
10.]]
名称 |
类型 |
说明 |
默认值 |
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 |
单元格的格式化函数,需要三个参数: |
undefined |
styler |
function |
单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如'background:red'。此函数需要三个参数: |
undefined |
sorter |
function |
自定义字段的排序函数,需要两个参数: |
undefined |
editor |
string,object |
指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 |
undefined |
编辑器(Editor)
用 $.fn.datagrid.defaults.editors重写了 defaults。
每个编辑器有下列行为:
名称 |
参数 |
说明 |
init |
container, options |
初始化编辑器并且返回目标对象。 |
destroy |
target |
如果必要就销毁编辑器。 |
getValue |
target |
从编辑器的文本返回值。 |
setValue |
target , value |
给编辑器设置值。 |
resize |
target , width |
如果必要就调整编辑器的尺寸。 |
例如,文本编辑器(text editor)像下面这样定义:
1. $.extend($.fn.datagrid.defaults.editors, {
2. text: {
3. init: function(container, options){
4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
5. return input;
6. },
7. getValue: function(target){
8. return $(target).val();
9. },
10. setValue: function(target, value){
11. $(target).val(value);
12. },
13. resize: function(target, width){
14. var input = $(target);
15. if ($.boxModel == true){
16. input.width(width - (input.outerWidth() - input.width()));
17. } else {
18. input.width(width);
19. }
20. }
21. }
22.});
数据表格视图(DataGrid View)
用 $.fn.datagrid.defaults.view重写了 defaults。
view 是一个对象,它告诉datagrid 如何呈现行。这个对象必须定义下列方法。
名称 |
参数 |
说明 |
render |
target, 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 |
当用户点击一行时触发,参数包括: |
onDblClickRow |
rowIndex, rowData |
当用户双击一行时触发,参数包括: |
onClickCell |
rowIndex, field, value |
当用户单击一个单元格时触发。 |
onDblClickCell |
rowIndex, field, value |
当用户双击一个单元格时触发。 |
onSortColumn |
sort, order |
当用户对一列进行排序时触发,参数包括: |
onResizeColumn |
field, width |
当用户调整列的尺寸时触发。 |
onSelect |
rowIndex, rowData |
当用户选中一行时触发,参数包括: |
onUnselect |
rowIndex, rowData |
当用户取消选择一行时触发,参数包括: |
onSelectAll |
rows |
当用户选中全部行时触发。 |
onUnselectAll |
rows |
当用户取消选中全部行时触发。 |
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑一行时触发,参数包括: |
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑一行时触发,参数包括: |
onCancelEdit |
rowIndex, 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 |
获取指定行的编辑器们。每个编辑器有下列特性: |
getEditor |
options |
获取指定的编辑器, options 参数包含两个特性: |
refreshRow |
index |
刷新一行。 |
validateRow |
index |
验证指定的行,有效时返回 true。 |
updateRow |
param |
更新指定的行, param 参数包含下列特性: |
appendRow |
row |
追加一个新行。 |
insertRow |
param |
插入一个新行, param 参数包括下列特性: |
deleteRow |
index |
删除一行。 |
getChanges |
type |
获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。 当type 参数没有分配时,返回所有改变的行。 |
acceptChanges |
none |
提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。 |
rejectChanges |
none |
回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。 |
mergeCells |
options |
把一些单元格合并为一个单元格,options参数包括下列特性: |
showColumn |
field |
显示指定的列。 |
hideColumn |
field |
隐藏指定的列。 |
jQuery EasyUI DataGrid API 中文文档的更多相关文章
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- jquery plug-in DataTable API中文文档参考
前言:最近在做一个WEB后台,无意中发现这个插件,试用了一下觉得不错,但网上关于它的资料大多不全,所以利用一些时间将其API文档翻了一下,发在园子里供大家参考.(p.s:个人E文水平很差,对着灵格斯翻 ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- jQuery EasyUI API 中文文档
http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
- jQuery API中文文档
jQuery API中文文档 http://www.css88.com/jqapi-1.9/category/events/event-handler-attachment/ jQuery UI AP ...
- Etherscan API 中文文档-智能合约
本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读. 智能合约(Contracts) 智能合约相关的 API,接口的参数说明请参考Ethers ...
- Web3.js API 中文文档
Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...
- 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
随机推荐
- OSAL
1. CC254x的软件基于OSAL架构 2. OSAL并非一个真的操作系统, 而只是让软件设立一个事件的执行方法(setup excution of events) 3. 每一个子系统都在OSAL的 ...
- mongo 学习笔记
mysql语句 : ' ,,),(,,) mongo语句: db.}}).limit() db."}) db.}}) 条件操作符1 mongodb中的条件操作符有: (>) 大于 ...
- android应用的数据应该保存到哪儿
王永超王永超嫖娼 做android app开发会涉及到不同数据的保存,比如数据缓存,客户登陆信息保存,客户状态的保存等等. 那针对这不同的数据我们应该保存在什么地方呢? 1.应用卸载也不会删除的数据 ...
- 使用radioGroup的时候,每个radioButton的状态选择器要使用 state_checked=""属性,不能使用selected
使用radioGroup的时候,每个radioButton的状态选择器要使用 state_checked=""属性,不能使用selected
- raw_input() 与 input()
这两个均是 python 的内建函数,通过读取控制台的输入与用户实现交互.但他们的功能不尽相同. >>> raw_input_A = raw_input("raw_inpu ...
- c#读取Excel的列名问题
在修改c#读取Excel的时候,遇到了一些小问题,总结下,希望别人不用再浪费时间 读取excel的时候,如果是空行就不读取? SELECT * FROM [DB_ESTATE$] where F2&l ...
- 【转】JS 和 java 交互
android中如何获得webView中的内容发表于 2011 年 06 月 13 日 由 admin本文概要:在程序中经常会用到webView来显示网页,但如果能够得到网页中的内容呢,本文将给你一个 ...
- Cimg代码初探
Cimg代码初探 程序设计最为激动人心的地方,在于丰富的并且容易被查阅到资料.比如对于图像处理,固然有Opencv等较为丰富.被广泛知晓的类库:也有其他很多具有一定特色的类库.在这段时间里面, ...
- centos 6.5源码编译安装subversion 1.8.10
一.简介 CentOS 6.5的yum源可以安装的SVN客户端版本太低了,1.6.11,所以需要升级到1.8.10,而官网有没有找到1.8.10的安装包,只能选择源码编译安装. 二.安装步骤 参考官网 ...
- thinkphp隐藏中url的index.php
在本地进行测试 1.修改apache配置文件将如下代码#去掉 #LoadModule rewrite_module modules/mod_rewrite.so 在index.php 目录下新建文 ...