EasyUI 数据网格
2016-08-01 19:56
211 查看
数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
(2)、通过 <table> 标记创建数据网格(datagrid)。嵌套的 <th> 标签定义表格中的列。
(3)、也可以使用 javascript 创建数据网格(datagrid)。
(4)、通过一些参数查询数据。
(5)、在向服务器改变数据之后,更新前台数据。
代码实例:
1、用法
(1)、从已有的表格元素创建数据网格(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>
(2)、通过 <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>
(3)、也可以使用 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'} ]] });
(4)、通过一些参数查询数据。
$('#dg').datagrid('load', { name: 'easyui', address: 'ho' });
(5)、在向服务器改变数据之后,更新前台数据。
$('#dg').datagrid('reload'); // reload the current page data
2、数据网格(DataGrid)属性
该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性。名称 | 类型 | 描述 | 默认值 |
columns | array | 数据网格(datagrid)的列(column)的配置对象,更多细节 请参见列(column)属性。 | undefined |
frozenColumns | array | 和列(column)属性一样,但是这些列将被冻结在左边。 | undefined |
fitColumns | boolean | 设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽 度并且防止水平滚动。 | false |
resizeHandle | string | 调整列的位置,可用的值有:'left'、'right'、'both'。当 设置为 'right' 时,用户可通过拖拽列头部的右边缘来调整 列。该属性自版本 1.3.2 起可用。 | right |
autoRowHeight | boolean | 定义是否设置基于该行内容的行高度。设置为 false,则可以 提高加载性能。 | true |
toolbar | array,selector | 数据网格(datagrid)面板的头部工具栏。可能的值: 1、数组,每个工具选项与链接按钮(linkbutton)一样。 2、选择器,只是工具栏。 | null |
striped | boolean | 设置为 true,则把行条纹化。(即奇偶行使用不同背景色) | false |
method | string | 请求远程数据的方法(method)类型。 | post |
nowrap | boolean | 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 | true |
idField | string | 指示哪个字段是标识字段。 | null |
url | string | 从远程站点请求数据的 URL。 | null |
data | array,object | 要加载的数据。该属性自版本 1.3.2 起可用。 | null |
loadMsg | string | 当从远程站点加载数据时,显示的提示消息。 | Processing, please wait … |
pagination | boolean | 设置为 true,则在数据网格(datagrid)底部显示分页工具栏。 | false |
rownumbers | boolean | 设置为 true,则显示带有行号的列。 | false |
singleSelect | boolean | 设置为 true,则只允许选中一行。 | false |
checkOnSelect | boolean | 如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。 如果设置为 false 时,只有当用户点击了复选框时,才会选中/取消 选中复选框。该属性自版本 1.3 起可用。 | true |
selectOnCheck | boolean | 如果设置为 true,点击复选框将会选中该行。如果设置为 false,选 中该行将不会选中复选框。该属性自版本 1.3 起可用。 | true |
pagePosition | string | 定义分页栏的位置。可用的值有:'top'、'bottom'、'both'。该属性 自版本 1.3 起可用。 | bottom |
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 |
multiSort | boolean | 定义是否启用多列排序。该属性自版本 1.3.4 起可用。 | false |
remoteSort | boolean | 定义是否从服务器排序数据。 | true |
showHeader | boolean | 定义是否显示行的头部。 | true |
showFooter | boolean | 定义是否显示行的底部。 | false |
scrollbarSize | number | 滚动条宽度(当滚动条是垂直的时候)或者滚动条的高度(当滚 动条是水平的时候)。 | 18 |
rowStyler | function | 返回例如 'background:red' 的样式。该函数需要两个参数: rowIndex:行的索引,从 0 开始。 rowData:该行相应的记录。 | |
loader | function | 定义如何从远程服务器加载数据。返回 false 则取消该动作。 该函数有下列参数: param:要传递到远程服务器的参数对象。 success(data):当检索数据成功时调用的回调函数。 error():当检索数据失败时调用的回调函数。 | json loader |
loadFilter | function | 返回要显示的过滤数据。该函数有一个参数 'data' ,表示 原始数据。 您可以把原始数据变成标准数据格式。该函数必须返回标 准数据对象,含有 'total' 和 'rows' 属性。 | |
editors | object | 定义编辑行时的编辑器。 | predefined editors |
view | object | 定义数据网格(datagrid)的视图。 | default view |
3、列(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 |
halign | string | 指示如何对齐该列的头部,可能的值:'left'、'right'、'center'。 如果没有分配值,则头部对齐方式将与通过 'align' 属性定义的数 据对齐方式一致。该属性自版本 1.3.2 起可用。 | undefined |
sortable | boolean | 设置为 true,则允许该列被排序。 | undefined |
order | string | 默认的排序顺序,只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。 | undefined |
resizable | boolean | 设置为 true,则允许该列可调整尺寸。 | undefined |
fixed | boolean | 设置为 true,则当 'fitColumns' 设置为 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 | 指示编辑类型。当是字符串(string)时则指编辑类型, 当是对象(object)时则包含两个属性: type:字符串,编辑类型,可能的类型:text、textarea、checkbox、numberbox、validatebox、datebox、 combobox、combotree。 options:对象,编辑类型对应的编辑器选项。 |
4、编辑器(Editor)
通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。每个编辑器有下列行为:名称 | 参数 | 描述 |
init | container, options | 初始化编辑器并且返回目标对象。 |
destroy | target | 如果必要就销毁编辑器。 |
getValue | target | 从编辑器的文本获取值。 |
setValue | target , value | 给编辑器设置值。 |
resize | target , width | 如果必要就调整编辑器的尺寸。 |
5、数据网格视图(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 | 视图被呈现后触发。 |
6、事件
该事件扩展自面板(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 | 当右键点击行时触发。 |
7、方法
名称 | 参数 | 描述 |
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 | field | 固定列的尺寸。如果 'field' 参数未设置,所有的列的尺寸将是固定的。 |
fixRowHeight | index | 固定指定行的高度。如果 'index' 参数未设置,所有的行的高度将是固定的。 |
freezeRow | index | 冻结指定的行,以便数据网格(datagrid)向下滚动时这些冻结行总是被显示在顶部。 该方法自版本 1.3.2 起可用。 |
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 | 清除所有的选择。 |
clearChecked | none | 清除所有勾选的行。该方法自版本 1.3.2 起可用。 |
scrollTo | index | 滚动到指定行。该方法自版本 1.3.3 起可用。 |
highlightRow | index | 高亮显示一行。该方法自版本 1.3.3 起可用。 |
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:编辑器能做的动作,与编辑器定义相同。 target:目标编辑器的 jQuery 对象。 field:字段名。 type:编辑器的类型,比如:'text'、'combobox'、'datebox',等等。 |
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 | 隐藏指定的列。 |
8、实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"/> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>数据表格的客户端分页</h2> <p>This sample shows how to implement client side pagination in DataGrid.</p> <div style="margin:20px 0;"></div> <!--pagination:设置为 true,则在数据网格(datagrid)底部显示分页工具栏。 pageSize:当设置了 pagination 属性时,初始化页面尺寸。 --> <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, pageSize:10"> <thead> <tr> <th field="inv" width="80">Inv No</th> <th field="date" width="100">Date</th> <th field="name" width="80">Name</th> <th field="amount" width="80" align="right">Amount</th> <th field="price" width="80" align="right">Price</th> <th field="cost" width="100" align="right">Cost</th> <th field="note" width="110">Note</th> </tr> </thead> </table> <script> (function($){ function pagerFilter(data){ if ($.isArray(data)){ // is array data = { total: data.length, rows: data } } var target = this; var dg = $(target); var state = dg.data('datagrid'); var opts = dg.datagrid('options'); if (!state.allRows){ state.allRows = (data.rows); } if (!opts.remoteSort && opts.sortName){ var names = opts.sortName.split(','); var orders = opts.sortOrder.split(','); state.allRows.sort(function(r1,r2){ var r = 0; for(var i=0; i<names.length; i++){ var sn = names[i]; var so = orders[i]; var col = $(target).datagrid('getColumnOption', sn); var sortFunc = col.sorter || function(a,b){ return a==b ? 0 : (a>b?1:-1); }; r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1); if (r != 0){ return r; } } return r; }); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = state.allRows.slice(start, end); return data; } var loadDataMethod = $.fn.datagrid.methods.loadData; var deleteRowMethod = $.fn.datagrid.methods.deleteRow; $.extend($.fn.datagrid.methods, { clientPaging: function(jq){ return jq.each(function(){ var dg = $(this); var state = dg.data('datagrid'); var opts = state.options; opts.loadFilter = pagerFilter; var onBeforeLoad = opts.onBeforeLoad; opts.onBeforeLoad = function(param){ state.allRows = null; return onBeforeLoad.call(this, param); } var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',state.allRows); } }); $(this).datagrid('loadData', state.data); if (opts.url){ $(this).datagrid('reload'); } }); }, loadData: function(jq, data){ jq.each(function(){ $(this).data('datagrid').allRows = null; }); return loadDataMethod.call($.fn.datagrid.methods, jq, data); }, deleteRow: function(jq, index){ return jq.each(function(){ var row = $(this).datagrid('getRows')[index]; deleteRowMethod.call($.fn.datagrid.methods, $(this), index); var state = $(this).data('datagrid'); if (state.options.loadFilter == pagerFilter){ for(var i=0; i<state.allRows.length; i++){ if (state.allRows[i] == row){ state.allRows.splice(i,1); break; } } $(this).datagrid('loadData', state.allRows); } }); }, getAllRows: function(jq){ return jq.data('datagrid').allRows; } }) })(jQuery); function getData(){ var rows = []; for(var i=1; i<=800; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return rows; } $(function(){ $('#dg').datagrid({data:getData()}).datagrid('clientPaging'); }); </script> </body> </html>
相关文章推荐
- easyui datagrid-filter数据网格过滤的汉化
- 关于EasyUI Datagrid 数据网格使用策略
- easyui 构建数据网格
- 关于EasyUI Datagrid 数据网格渲染数据过慢
- EasyUI Datagrid 数据网格
- easyui 数据网格取消滚动条的方法
- EasyUI 数据网格视图(DataGrid View)
- Easyui Datagrid 数据网格---我的使用
- EasyUI DataGrid 数据网格
- Easyui 数据网格详细视图(DataGrid DetailView)
- EasyUI-1.Datagrid 数据网格
- EasyUI Datagrid 数据网格
- Easyui中数据网格请求加载数据为空时,追加合并行显示暂无记录
- 在使用easyui数据网格过程中遇到的问题
- 关于easyui中datagrid数据网格与form表单的使用总结
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
- js循环生成多个easyui datagrid数据网格时,初始化表格
- easyui_Datagrid 数据网格 loadData
- easyUI数据网格 简写