EasyUI Datagrid 数据网格
来源:互联网 发布:公司优化是什么意思 编辑:程序博客网 时间:2024/04/29 06:18
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
依赖
- panel
- resizable
- linkbutton
- pagination
用法
从已有的表格元素创建数据网格(datagrid),在 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)。嵌套的 <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'); // reload the current page data
数据网格(DataGrid)属性
该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性。
该属性自版本 1.3.2 起可用。rightautoRowHeightboolean定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能。truetoolbararray,selector数据网格(datagrid)面板的头部工具栏。可能的值:
1、数组,每个工具选项与链接按钮(linkbutton)一样。
2、选择器,只是工具栏。
在 <div> 标签内定义工具栏:
通过数组定义工具栏:
- $('#dg').datagrid({
- toolbar: '#tb'
- });
- <div id="tb">
- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
- </div>
nullstripedboolean设置为 true,则把行条纹化。(即奇偶行使用不同背景色)falsemethodstring请求远程数据的方法(method)类型。postnowrapboolean设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。trueidFieldstring指示哪个字段是标识字段。nullurlstring从远程站点请求数据的 URL。nulldataarray,object要加载的数据。该属性自版本 1.3.2 起可用。
- $('#dg').datagrid({
- toolbar: [{
- iconCls: 'icon-edit',
- handler: function(){alert('edit')}
- },'-',{
- iconCls: 'icon-help',
- handler: function(){alert('help')}
- }]
- });
代码实例:
nullloadMsgstring当从远程站点加载数据时,显示的提示消息。Processing, please wait …paginationboolean设置为 true,则在数据网格(datagrid)底部显示分页工具栏。falserownumbersboolean设置为 true,则显示带有行号的列。falsesingleSelectboolean设置为 true,则只允许选中一行。falsecheckOnSelectboolean如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。如果设置为 false 时,只有当用户点击了复选框时,才会选中/取消选中复选框。
- $('#dg').datagrid({
- data: [
- {f1:'value11', f2:'value12'},
- {f1:'value21', f2:'value22'}
- ]
- });
该属性自版本 1.3 起可用。trueselectOnCheckboolean如果设置为 true,点击复选框将会选中该行。如果设置为 false,选中该行将不会选中复选框。
该属性自版本 1.3 起可用。truepagePositionstring定义分页栏的位置。可用的值有:'top'、'bottom'、'both'。
该属性自版本 1.3 起可用。bottompageNumbernumber当设置了 pagination 属性时,初始化页码。1pageSizenumber当设置了 pagination 属性时,初始化页面尺寸。10pageListarray当设置了 pagination 属性时,初始化页面尺寸的选择列表。[10,20,30,40,50]queryParamsobject当请求远程数据时,发送的额外参数。
代码实例:
{}sortNamestring定义可以排序的列。nullsortOrderstring定义列的排序顺序,只能用 'asc' 或 'desc'。ascmultiSortboolean定义是否启用多列排序。该属性自版本 1.3.4 起可用。falseremoteSortboolean定义是否从服务器排序数据。trueshowHeaderboolean定义是否显示行的头部。trueshowFooterboolean定义是否显示行的底部。falsescrollbarSizenumber滚动条宽度(当滚动条是垂直的时候)或者滚动条的高度(当滚动条是水平的时候)。18rowStylerfunction返回例如 'background:red' 的样式。该函数需要两个参数:
- $('#dg').datagrid({
- queryParams: {
- name: 'easyui',
- subject: 'datagrid'
- }
- });
rowIndex:行的索引,从 0 开始。
rowData:该行相应的记录。
代码实例:
loaderfunction定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
- $('#dg').datagrid({
- rowStyler: function(index,row){
- if (row.listprice>80){
- return 'background-color:#6293BB;color:#fff;'; // return inline style
- // the function can return predefined css class and inline style
- // return {class:'r1', style:{'color:#fff'}};
- }
- }
- });
param:要传递到远程服务器的参数对象。
success(data):当检索数据成功时调用的回调函数。
error():当检索数据失败时调用的回调函数。json loaderloadFilterfunction返回要显示的过滤数据。该函数有一个参数 'data' ,表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象,含有 'total' 和 'rows' 属性。
代码实例:
editorsobject定义编辑行时的编辑器。predefined editorsviewobject定义数据网格(datagrid)的视图。default view
- // removing 'd' object from asp.net web service json output
- $('#dg').datagrid({
- loadFilter: function(data){
- if (data.d){
- return data.d;
- } else {
- return data;
- }
- }
- });
列(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}
- ]]
value:字段的值。
rowData:行的记录数据。
rowIndex:行的索引。
代码实例:
undefinedstylerfunction单元格的样式函数,返回样式字符串来自定义该单元格的样式,例如 'background:red' 。该函数需要三个参数:
- $('#dg').datagrid({
- columns:[[
- {field:'userId',title:'User', width:80,
- formatter: function(value,row,index){
- if (row.user){
- return row.user.name;
- } else {
- return value;
- }
- }
- }
- ]]
- });
value:字段的值。
rowData:行的记录数据。
rowIndex:行的索引。
代码实例:
undefinedsorterfunction用于本地排序的自定义字段的排序函数,需要两个参数:
- $('#dg').datagrid({
- columns:[[
- {field:'listprice',title:'List Price', width:80, align:'right',
- styler: function(value,row,index){
- if (value < 20){
- return 'background-color:#ffee00;color:red;';
- // the function can return predefined css class and inline style
- // return {class:'c1',style:'color:red'}
- }
- }
- }
- ]]
- });
a:第一个字段值。
b:第二个字段值。
代码实例:
undefinededitorstring,object指示编辑类型。当是字符串(string)时则指编辑类型,当是对象(object)时则包含两个属性:
- $('#dg').datagrid({
- remoteSort: false,
- columns: [[
- {field:'date',title:'Date',width:80,sortable:true,align:'center',
- sorter:function(a,b){
- a = a.split('/');
- b = b.split('/');
- if (a[2] == b[2]){
- if (a[0] == b[0]){
- return (a[1]>b[1]?1:-1);
- } else {
- return (a[0]>b[0]?1:-1);
- }
- } else {
- return (a[2]>b[2]?1:-1);
- }
- }
- }
- ]]
- });
type:字符串,编辑类型,可能的类型:text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options:对象,编辑类型对应的编辑器选项。undefined
编辑器(Editor)
通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。
每个编辑器有下列行为:
例如,文本编辑器(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;
- },
- destroy: function(target){
- $(target).remove();
- },
- getValue: function(target){
- return $(target).val();
- },
- setValue: function(target, value){
- $(target).val(value);
- },
- resize: function(target, width){
- $(target)._outerWidth(width);
- }
- }
- });
数据网格视图(DataGrid View)
通过 $.fn.datagrid.defaults.view 重写默认的 defaults。
视图(view)是一个对象,它告诉数据网格(datagrid)如何呈现行。该对象必须定义下列函数:
target:DOM 对象,数据网格(datagrid)对象。
container:行的容器。
frozen:指示是否呈现冻结容器。renderFootertarget, container, frozen这是呈现行脚的选项函数。renderRowtarget, fields, frozen, rowIndex, rowData这是将会被 render 函数调用的选项函数。refreshRowtarget, rowIndex定义如何刷新指定的行。onBeforeRendertarget, rows视图被呈现前触发。onAfterRendertarget视图被呈现后触发。
事件
该事件扩展自面板(panel),下面是为数据网格(datagrid)添加的事件。
rowIndex:被点击行的索引,从 0 开始
rowData:被点击行对应的记录onDblClickRowrowIndex, rowData当用户双击一行时触发,参数包括:
rowIndex:被双击行的索引,从 0 开始
rowData:被双击行对应的记录onClickCellrowIndex, field, value当用户单击一个单元格时触发。onDblClickCellrowIndex, field, value当用户双击一个单元格时触发。
代码实例:
onSortColumnsort, order当用户对一列进行排序时触发,参数包括:
- // when double click a cell, begin editing and make the editor get focus
- $('#dg').datagrid({
- onDblClickCell: function(index,field,value){
- $(this).datagrid('beginEdit', index);
- var ed = $(this).datagrid('getEditor', {index:index,field:field});
- $(ed.target).focus();
- }
- });
sort:排序的列的字段名
order:排序的列的顺序onResizeColumnfield, width当用户调整列的尺寸时触发。onSelectrowIndex, rowData当用户选中一行时触发,参数包括:
rowIndex:选中行的索引,从 0 开始
rowData:选中行对应的记录onUnselectrowIndex, rowData当用户取消选中一行时触发,参数包括:
rowIndex:取消选中行的索引,从 0 开始
rowData:取消选中行对应的记录onSelectAllrows当用户选中全部行时触发。onUnselectAllrows当用户取消选中全部行时触发。onCheckrowIndex,rowData当用户勾选一行时触发,参数包括:
rowIndex:勾选行的索引,从 0 开始
rowData:勾选行对应的记录
该事件自版本 1.3 起可用。onUncheckrowIndex,rowData当用户取消勾选一行时触发,参数包括:
rowIndex:取消勾选行的索引,从 0 开始
rowData:取消勾选行对应的记录
该事件自版本 1.3 起可用。onCheckAllrows当用户勾选全部行时触发。该事件自版本 1.3 起可用。onUncheckAllrows当用户取消勾选全部行时触发。该事件自版本 1.3 起可用。onBeforeEditrowIndex, rowData当用户开始编辑一行时触发,参数包括:
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录onAfterEditrowIndex, rowData, changes当用户完成编辑一行时触发,参数包括:
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录
changes:更改的字段/值对onCancelEditrowIndex, rowData当用户取消编辑一行时触发,参数包括:
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录onHeaderContextMenue, field当数据网格(datagrid)的头部被右键单击时触发。onRowContextMenue, rowIndex, rowData当右键点击行时触发。
方法
代码实例:
getColumnOptionfield返回指定列的选项。resizeparam调整尺寸和布局。loadparam加载并显示第一页的行,如果指定 'param' 参数,它将替换 queryParams 属性。通常情况下,通过传递一些从参数进行查询,该方法被调用来从服务器加载新数据。
- var opts = $('#dg').datagrid('getColumnFields');// get unfrozen columns
- var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
reloadparam重新加载行,就像 load 方法一样,但是保持在当前页。reloadFooterfooter重新加载底部的行。代码实例:
- $('#dg').datagrid('load',{
- code: '01',
- name: 'name01'
- });
loadingnone显示正在加载状态。loadednone隐藏正在加载状态。fitColumnsnone使列自动展开/折叠以适应数据网格(datagrid)的宽度。fixColumnSizefield固定列的尺寸。如果 'field' 参数未设置,所有的列的尺寸将是固定的。
- // update footer row values and then refresh
- var rows = $('#dg').datagrid('getFooterRows');
- rows[0]['name'] = 'new name';
- rows[0]['salary'] = 60000;
- $('#dg').datagrid('reloadFooter');
- // update footer rows with new data
- $('#dg').datagrid('reloadFooter',[
- {name: 'name1', salary: 60000},
- {name: 'name2', salary: 65000}
- ]);
代码实例:
fixRowHeightindex固定指定行的高度。如果 'index' 参数未设置,所有的行的高度将是固定的。freezeRowindex冻结指定的行,以便数据网格(datagrid)向下滚动时这些冻结行总是被显示在顶部。该方法自版本 1.3.2 起可用。autoSizeColumnfield调整列的宽度以适应内容。该方法自版本 1.3 起可用。loadDatadata加载本地数据,旧的行会被移除。getDatanone返回加载的数据。getRowsnone返回当前页的行。getFooterRowsnone返回底部的行。getRowIndexrow返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。getCheckednone返回复选框选中的所有行。该方法自版本 1.3 起可用。getSelectednone返回第一个选中的行或者 null。getSelectionsnone返回所有选中的行,当没有选中的记录时,将返回空数组。clearSelectionsnone清除所有的选择。clearCheckednone清除所有勾选的行。该方法自版本 1.3.2 起可用。scrollToindex滚动到指定行。该方法自版本 1.3.3 起可用。highlightRowindex高亮显示一行。该方法自版本 1.3.3 起可用。selectAllnone选中当前页所有的行。unselectAllnone取消选中当前页所有的行。selectRowindex选中一行,行索引从 0 开始。selectRecordidValue通过传递 id 的值做参数选中一行。unselectRowindex取消选中一行。checkAllnone勾选当前页所有的行。该方法自版本 1.3 起可用。uncheckAllnone取消勾选当前页所有的行。该方法自版本 1.3 起可用。checkRowindex勾选一行,行索引从 0 开始。该方法自版本 1.3 起可用。uncheckRowindex取消勾选一行,行索引从 0 开始。该方法自版本 1.3 起可用。beginEditindex开始对一行进行编辑。endEditindex结束对一行进行编辑。cancelEditindex取消对一行进行编辑。getEditorsindex获取指定行的编辑器。每个编辑器有下列属性:
- $('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size
- $('#dg').datagrid('fixColumnSize'); // fix all columns size
actions:编辑器能做的动作,与编辑器定义相同。
target:目标编辑器的 jQuery 对象。
field:字段名。
type:编辑器的类型,比如:'text'、'combobox'、'datebox',等等。getEditoroptions获取指定的编辑器, options 参数包含两个属性:
index:行的索引。
field:字段名。
代码实例:
refreshRowindex刷新一行。validateRowindex验证指定的行,有效时返回 true。updateRowparam更新指定的行, param 参数包括下列属性:
- // get the datebox editor and change its value
- var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
- $(ed.target).datebox('setValue', '5/4/2012');
index:要更新的行的索引。
row:新的行数据。
代码实例:
appendRowrow追加一个新行。新的行将被添加在最后的位置:
- $('#dg').datagrid('updateRow',{
- index: 2,
- row: {
- name: 'new name',
- note: 'new note message'
- }
- });
insertRowparam插入一个新行, param 参数包括下列属性:
- $('#dg').datagrid('appendRow',{
- name: 'new name',
- age: 30,
- note: 'some messages'
- });
index:插入进去的行的索引,如果没有定义,就追加该新行。
row:行的数据。
代码实例:
deleteRowindex删除一行。getChangestype获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。当 type 参数没有分配时,返回所有改变的行。acceptChangesnone提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。rejectChangesnone回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。mergeCellsoptions把一些单元格合并为一个单元格,options 参数包括下列特性:
- // insert a new row at second row position
- $('#dg').datagrid('insertRow',{
- index: 1,// index start with 0
- row: {
- name: 'new name',
- age: 30,
- note: 'some messages'
- }
- });
index:列的索引。
field:字段名。
rowspan:合并跨越的行数。
colspan:合并跨越的列数。showColumnfield显示指定的列。hideColumnfield隐藏指定的列。
- EasyUI Datagrid 数据网格
- EasyUI Datagrid 数据网格
- EasyUI DataGrid 数据网格
- EasyUI-1.Datagrid 数据网格
- 关于EasyUI Datagrid 数据网格使用策略
- Easyui Datagrid 数据网格---我的使用
- EasyUI 数据网格视图(DataGrid View)
- 关于EasyUI Datagrid 数据网格渲染数据过慢
- jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)
- easyui datagrid-filter数据网格过滤的汉化
- Easyui 数据网格详细视图(DataGrid DetailView)
- EasyUI 数据网格
- easyUI数据网格 简写
- 关于easyui中datagrid数据网格与form表单的使用总结
- easyui中datagrid数据网格实现列表内容过长时显示省略号
- jQuery EasyUI 数据网格 - 创建子网格
- easyUI 数据表格-datagrid
- easyui datagrid 数据汇总
- Redis源码剖析--双端链表Sdlist
- zabbix API 请求
- ubuntu不能上外网
- HTTP协议
- 运维笔记22 (apache的基本配置,静态网页,动态cgi,论坛搭建,squid实现正向,反向代理,简易cdn加速)
- EasyUI Datagrid 数据网格
- JDK自带工具概览
- volatile 与 final 变量
- 面向对象(OO)分析与设计思考
- Lumberyard体验尝试
- Struts2 - 数据传输背后的机制
- 手势的识别
- git的基本使用流程
- JS中exec,match,replace,test方法对比