jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记。
有没有说清楚的,或者翻译不正确的地方还请大家谅解指出。。
由于工作时间原因,每天翻译一点,最后会整理出一套帮助文档发布给大家,一起期待哈。。
还有。。。赞一下了哈~打字很累的。。(*^_^*)
DataGrid
继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults.
DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据。
DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识。它是轻量级的和功能丰富的。合并单元格,多列标题,冻结列和页脚是仅有的几个特点。
[依赖于]
- panel
- resizable
- linkbutton
- pagination
[使用实例]
在HTML标签中,从现有的元素创建表元素、定义列、行中的数据:
- <table class="easyui-datagrid">
- <thead>
- <tr>
- <th data-options="field:'code'">Code</th>
- <th data-options="field:'name'">Name</th>
- <th data-options="field:'price'">Price</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>001</td><td>name1</td><td>2323</td>
- </tr>
- <tr>
- <td>002</td><td>name2</td><td>4612</td>
- </tr>
- </tbody>
- </table>
通过<table>标签创建DataGrid,在table表格里嵌套<th>标签定义。
- <table class="easyui-datagrid" style="width:400px;height:250px"
- data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
- <thead>
- <tr>
- <th data-options="field:'code',width:100">Code</th>
- <th data-options="field:'name',width:100">Name</th>
- <th data-options="field:'price',width:100,align:'right'">Price</th>
- </tr>
- </thead>
- </table>
使用Javascript也可以创建DataGrid:
- <table id="dg"></table>
- $('#dg').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'}
- ]]
- });
使用一些参数查询数据:
- $('#dg').datagrid('load', {
- name: 'easyui',
- address: 'ho'
- });
改变数据到服务器后,更新之前的数据:
- $('#dg').datagrid('reload'); // 重新加载当前页的数据
[DataGrid 属性]
属性继承自 panel 面板,下面是从 panel 新增的属性列表:
名称 | 类型 |
描述 | 默认值 |
columns | array | DataGrid列的配置对象,更多详细请参见列属性。 | undefined |
frozenColumns | array | 相同列的属性,但是这些列会被冻结在左边。 | undefined |
fitColumns | boolean | 为“true”则自动 展开/收缩 列的大小,为了自动填充Grid的宽度,防止出现水平滚动条。 | false |
autoRowHeight | boolean | 定义是否基于行的内容设置行高,设置“false”可以提高加载性能。 | true |
toolbar | array,selector | DataGrid面板顶部的 ToolBar 工具条,可以设置的值如下: 1) 一个数组,每个options项是相同的LinkButton。 2) 一个 selector 选择器 指定 ToolBar 工具条。 使用<div>标签定义 ToolBar 工具条:
通过数组定义 ToolBar:
|
null |
striped | boolean | 设置“True”实现各行变色的功能。 | false |
method | string | 这个方法需要远程数据类型。 | post |
nowrap | boolean | 设置为“True”则将数据显示在一行内,设置为“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 |
checkOnSelect | boolean |
如果设置为“True”,当用户点击一行时 选中/取消选中 该复选框。 如果设置为“False”,当用户准确点击复选框时,选中/取消选中 该复选框。 |
true |
selectOnCheck | boolean |
如果设置为True,点击复选框将总会选择行。 如果设置为False,选中行将不会选中该复选框。 |
true |
pagePosition | string | 定义分页工具条的位置,有效值是:'top','bottom','both'。 这个属性在1.3版本后可用。 |
bottom |
pageNumber | number | 当设置分页的属性时,初始化页面数量。 | 1 |
pageSize | number | 当设置分页属性时,初始化页面大小。 | 10 |
pageList | array | 当设置分页属性时,初始化页面大小选择列表、 | [10,20,30,40,50] |
queryParams | object | 当请求远程数据时,附带发送额外的参数。
代码示例:
|
{} |
sortName | string | 定义哪些列可以被排序。 | null |
sortOrder | string | 定义列的排序方式,只能是升序“asc”或降序“desc”。 | asc |
remoteSort | boolean | 定义是否接受来自远程服务器的排序数据。 | true |
showHeader | boolean | 定义是否显示行的页眉。 | true |
showFooter | boolean | 定义是否显示行的页脚。 | false |
scrollbarSize | number | 滚动条的款(当是垂直滚动条时) 或者 高(当是水平滚动条的时候) | 18 |
rowStyler | function | 返回例如 'background:red' 一样的风格样式,这个方法带两个参数: rowIndex: 行的下标索引,从0开始 rowData: 符合记录数的行 代码示例:
|
|
loader | function |
定义如何从远程服务器加载数据,返回“false”可以终止这个请求。 这个函数需要以下参数: |
json loader |
loadFilter | function |
显示返回过滤后的数据。这个函数带一个参数 'data',它表示原始数据。 你可以将原始数据源更改为标准的数据格式。 这个函数必须返回一个包含“total”和“rows”属性的标准数据对象。 代码示例:
|
|
editors | object | 定义编辑行时的编辑器。 | predefined editors |
view | object | 定义DataGrid的View视图。 | default view |
[列属性]
DataGrid的列是一个数组对象,它的元素也是一个数组。元素的元素数组是一个配置对象,它定义了每一列的字段。
代码示例:
- 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”则显示一个复选框,该复选框有固定的宽度。 | undefined |
formatter | function | 单元格格式化的函数,带有三个参数: value: 字段值 rowData: 行数据记录 rowIndex: 行下标 代码示例:
|
undefined |
styler | function | 单元格样式函数,返回例如 'background:red' 一样的用户自定义的样式字符串。这个函数带有三个参数: value: 字段值 rowData: 行数据记录 rowIndex: 行下标 代码示例:
|
undefined |
sorter | function | 用来做局部排序的自定义字段的排序功能,带有两个参数: a: 第一个字段值 b: 第二个字段值 代码示例:
|
undefined |
editor | string,object | 显示编辑类型,当字符串指明了编辑类型,对象包含两个属性: type: string,编辑的类型,可以是的值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, 对应于编辑类型的编辑器选项。 |
undefined |
Editor
重写默认值 $.fn.datagrid.defaults.editors.
每个 editor 编辑器都有以下行为:
名称 | 参数 | 描述 |
init | container, options | 初始化 Editor 编辑器,并返回目标对象。 |
destroy | target | 如果有必要则摧毁 Editor 编辑器。 |
getValue | target | 从 Editor 编辑器获取数据值。 |
setValue | target , value | 设置 Editor 编辑器的数据值。 |
resize | target , width | 如果需要则调整 Editor 编辑器。 |
例如,在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.
该视图是一个对象,它会告诉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 | 视图Render前触发。 |
onAfterRender | target | 视图在Render后触发。 |
[事件]
这个时间继承自 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 | 当用户取消选中所有行时触发。 |
onCheck | rowIndex,rowData | 当用户勾选一行时触发,这些参数包括: rowIndex: 勾选的行下标,从0开始 rowData: 对应着勾选的行记录 这个事件在1.3版本后有效。 |
onUncheck | rowIndex,rowData | 当用户取消勾选一行时触发,这些参数包括: rowIndex: 取消选中的行下标,从0开始 rowData: 取消选中的行记录 这个事件在1.3版本后生效 |
onCheckAll | rows | 当用户勾选所有行时触发,这个事件在1.3版本后有效。 |
onUncheckAll | rows | 当用户取消勾选所有行时触发,这个事件在1.3版本后生效 |
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 | 返回paper页面对象。 |
getPanel | none | 返回panel面板对象、 |
getColumnFields | frozen | 返回列字段。如果冻结设置为true,则冻结列字段返回。 代码示例:
|
getColumnOption | field | 返回指定列的选项option设置。 |
resize | param | 做调整,做布局。 |
load | param |
加载并显示在第一页的行,如果‘param’指定了,那么它便会随着QueryParams属性取代。 通常通过传递一个参数做一个查询,这个方法可以成为从服务器加载新数据。
|
reload | param | 重新加载行,和“load”方法一样,但是停留在当前页面。 |
reloadFooter | footer | 重新加载页脚行,代码示例:
|
loading | none | 显示加载状态。 |
loaded | none | 隐藏加载状态。 |
fitColumns | none | 使列自动 展开/收缩 以适应网格的宽度。 |
fixColumnSize | field | 固定列的大下,如果‘field’参数没有被分配,则所有列大小都将是固定的。
代码示例:
|
fixRowHeight | index | 固定指定的行高,如果“index”参数没有分配,则所有行高都将是固定的。 |
autoSizeColumn | field | 调整列宽度以适应其内容,这个方法在1.3版本之后可用。 |
loadData | data | 加载本地数据,旧的行会被删除。 |
getData | none | 返回加载的数据。 |
getRows | none | 返回当前页的行。 |
getFooterRows | none | 返回页脚行。 |
getRowIndex | row | 返回指定行的索引,row行参数可以是一个行记录或一个id字段值。 |
getChecked | none | 返回复选框被选中的所有行,这个方法在1.3版本后可用。 |
getSelected | none | 返回第一个选定行的记录或null。 |
getSelections | none | 返回所有选定的行,当没有选中记录的时候,将返回一个空数组。 |
clearSelections | none | 清除所有的选择。 |
selectAll | none | 选择当前页面所有的行。 |
unselectAll | none | 取消选择当前页面的所有行。 |
selectRow | index | 选择一行,行下标从0开始。 |
selectRecord | idValue | 通过id值参数选中一行。 |
unselectRow | index | 取消选中行。 |
checkAll | none | 选中当前页面所有行,这个方法从1.3版本之后可用。 |
uncheckAll | none | 取消选中当前页所有行,这个方法从1.3版本之后可用。 |
checkRow | index | 选中一行,行下标从0开始,这个方法从1.3版本之后可用。 |
uncheckRow | index | 取消选中一行,行下标从0开始,该方法从1.3版本之后可用。 |
beginEdit | index | 开始编辑行。 |
endEdit | index | 结束编辑行。 |
cancelEdit | index | 取消编辑行 |
getEditors | index | 获取指定的行编辑器,每个编辑器具有以下属性: actions: 该编辑器可以做的action动作,和编辑器定义一样。 target: 目标编辑器的jQuery对象。 field: 字段名称。 type: 编辑器类型,例如'text','combobox','datebox', 等. |
getEditor | options | 获取指定的编辑器,该选项包含两个属性: index: 行下标索引 field: 字段名称 代码示例:
|
refreshRow | index | 刷新行。 |
validateRow | index | 验证指定的行,返回“true”时有效。 |
updateRow | param | 更新指定的行,该参数包含以下属性: index: 要更新的行下标索引。 row: 新行的数据。 代码示例:
|
appendRow | row | 拼接一个新行,这个新行将会被追加在最后的位置:
|
insertRow | param |
插入一个新行,该参数包含以下属性: 代码示例如下:
|
deleteRow | index | 删除一行。 |
getChanges | type |
获取自从上次提交后的产生更改的行。 这个类型参数指明哪些类型更改了行,可能的值如下:inserted,deleted,updated,等. 当类型参数没有指定时,返回所有更改的行。 |
acceptChanges | none | 提交所有的更改,从它被加载或者上次 acceptChanges 被调用。 |
rejectChanges | none | 回滚自其创建后所有更改的数据,或者从最近一次 acceptChanges 被调用。 |
mergeCells | options | 合并某个列为一个列,这个选项包含以下属性: index: 行下标 field: 字段名称 rowspan: 要合并的行数 colspan: 要合并的列数 |
showColumn | field | 显示指定的列。 |
hideColumn | field | 隐藏指定的列。 |
[原创汉化,欢迎转载学习,请注明出处:]
Q空间:http://778078163.qzone.qq.com
博客园:http://www.cnblogs.com/LonelyShadow
jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]的更多相关文章
- jQuery EasyUI API - Layout - Layout[原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- jQuery EasyUI API - Base - Draggable [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- jQuery EasyUI教程之datagrid应用(三)
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用(二)
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...
- jQuery EasyUI教程之datagrid应用(一)
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- [原创汉化]linux前端神器 WebStorm8 汉化
只汉化了linux版本 因为linux的工具没win多 不过汉化应该都通用的,自行尝试下. 汉化的不是很完全.有时间放出完全版本来.汉化是个体力活 转载随易,汉化不易,且转且注明 截图: http:/ ...
- [原创汉化] 价值990美元的顶级专业数据恢复软件O&O DiskRecovery 11(技术员版)汉化绿色版
百度没搜索到11有汉化版的,有空就把它汉化了,大部分借鉴的是以前汉化版的词条.另外,顺便做了个二合一的单文件版给有需要的朋友. 运行环境: 可用于 Windows 2000/XP/2003/Vista ...
随机推荐
- 最大流量dinci模板
我们知道.增广路径EK时间是在充电算法的O(n*m^2).找到最短增广路径的时间复杂度为O(m*n^2).这样的时间复杂度主要是寻找扩充道路. 这里也有一个演示Dinci算法,使用BFS层次结构图,然 ...
- 【Android开发经验】来,咱们自己写一个Android的IOC框架!
到眼下位置.afinal开发框架也是用了好几个月了,还记得第一次使用凝视完毕控件的初始化和事件绑定的时候,当时的心情是多么的兴奋- -代码居然能够这样写!然后随着不断的学习,也慢慢的对IOC框架和注解 ...
- 怎么在android的XML文件里加入凝视
android的XML文件凝视一般採用 <!--凝视内容 -->的方式进行 在XML中,形如 <Button /> 的表示方式,当中&quo ...
- git checkout 命令详解(转)
在日常的git操作中,git checkout——检出,是我们的常用命令.最为常用的两种情形是创建分支和切换分支. 在下面的命令中,使用了一些简写,在这里说明一下: git st # git stat ...
- Learning JavaScript(0)_Concepts
作用域,嵌套函数和闭包 <script type="text/javascript"> function foo(){ var a = 10; function bar ...
- 设计模式 - 迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释
迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 參考迭代器模式(ite ...
- Spark编译与部署
Spark入门实战系列--2.Spark编译与部署(上)--基础环境搭建 [注] 1.该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取: 2.S ...
- newlisp获得bash该命令的退出状态
newlisp exec你可以运行bash命令.但如何返回状态来运行它? 特别是,我需要监控hdfs dfs -test 结果返回.经过一番摸索,我发现了一个简单的答案: #!/usr/bin/new ...
- JavaEE(6) - JMS消息选择和查看
1. JMS消息的类型.消息头和消息属性 消息类型: StreamMessage MapMessage TextMessage ObjectMessage BytesMessage JMS消息中的消息 ...
- shell文字过滤程序(十一):paste命令
[版权声明:转载请保留源:blog.csdn.net/gentleliu.Mail:shallnew at 163 dot com] 由于可以从字面上可以看出.paste指挥和cut相反的命令.cut ...