datagrid(数据表格)QueryEasyUI中文帮助手册

数据表格

继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值。

创新互联专业提供四川联通机房服务器托管服务,为用户提供五星数据中心、电信、双线接入解决方案,用户可自行在线购买四川联通机房服务器托管服务,并享受7*24小时金牌售后服务。

依赖关系
  • 控制面板

  • 缩放

  • 链接按钮

  • 分页

使用方法
  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. });  

数据表格属性

属性继承控制面板,以下是数据表格独有的属性。

名称类型描述默认值
columns(列)array(数组)数据表格列配置对象,查看列属性以获取更多细节。null
frozenColumns(固定列)array(数组)跟列属性一样,但是这些列固定在左边,不会滚动。null
fitColumns(自适应列宽)boolean(布尔型)设置为true将自动使列适应表格宽度以防止出现水平滚动。false
striped(显示条纹)boolean(布尔型)设置为true将交替显示行背景。false
method(方法)string(字符串)请求远程数据的方法类型。post
nowrap(截取)boolean(布尔型)设置为true,当数据长度超出列宽时将会自动截取。true
idField(id字段)string(字符串)表明该列是一个唯一列。null
url(超链接)string(字符串)一个用以从远程站点请求数据的超链接地址。null
loadMsg(载入时信息)string(字符串)当从远程站点载入数据时,显示的一条快捷信息。Processing, please wait …
pagination(分页)boolean(布尔型)设置true将在数据表格底部显示分页工具栏。false
rownumbers(行数)boolean(布尔型)设置为true将显示行数。false
singleSelect(单选模式)boolean(布尔型)设置为true将只允许选择一行。false
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
showFooter(显示行底)boolean(布尔型)定义是否显示行底(如果是做统计表格,这里可以显示总计等)。false
rowStyler(行样式)function(函数)返回样式,如:'red',function有2个参数:
index:行索引,从0开始.
row:对应于该行记录的对象。

loadFilter(载入过滤器)function(函数)返回用以显示的已过滤数据,function有一个参数'data'表示原始数据,你可以将原始数据改变为规范的数据格式,该函数必须返回包含 'total'和'rows'属性的标准数据对象。
editors(编辑模式)object(对象)定义当编辑一行时的编辑模式。predefined editors
view(视图)object(对象)定义数据表格的视图。default view
列属性

数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。

示例代码:

  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将显示复选框。undefined
formatter(格式化)function(函数)格式化单元格函数,有3个参数:
value:字段的值。
rowData:行数据。
rowIndex:行索引。
undefined
styler(样式)function(函数)单元格样式函数,返回样式字符串装饰表格如'red',function有3个参数:
value:字段值。
rowData:行数据。
rowIndex:行索引。
undefined
sorter(排序器)function(函数)T自定义字段排序函数,有2个参数:
a:该列的第一个值。
b:该列的第二个值。
undefined
editor(编辑器)string,object(字符串,对象)表明编辑类型。如果属性是字符串类型表示编辑类型,如果是对象则包含2个参数:
type:字符串,编辑类型,可选值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options:对象,对象于编辑类型的编辑器属性。
undefined
编辑器

使用$.fn.datagrid.defaults.editors重载默认值。

每个编辑器都有以下方法:

名称参数描述
initcontainer, options初始化编辑器并返回目标对象。
destroytarget销毁编辑器。
getValuetarget获取编辑框的值。
setValuetarget , value设置编辑框的值。
resizetarget , width调整编辑器

例如,如下代码将定义一个文本编辑器:

  1. $.extend($.fn.datagrid.defaults.editors, {  

  2.    text: {  

  3.        init: function(container, options){  

  4. var 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. });  

数据表格视图

使用$.fn.datagrid.defaults.view重载默认值。

视图是一个告诉数据表格如何呈现行记录的对象,对象必须定义以下方法:

名称参数描述
rendertarget, container, frozen当数据载入时调用。
target: DOM对象,数据网格对象。
container: 行记录容器。
frozen: 是否呈现固定容器。
renderFootertarget, container, frozen这是一个可选函数用以展现行底。
renderRowtarget, fields, frozen, rowIndex, rowData这是一个可选函数,它可以被render函数调用。
refreshRowtarget, rowIndex定义如何刷新指定的行。
onBeforeRendertarget, rows在视图被呈现之前触发。
onAfterRendertarget在视图被程序之后触发。
事件

事件继承控制面板,以下是数据表格独有的属性。

名称参数描述
onLoadSuccessdata当数据载入成功时触发。
onLoadErrornone当载入远程数据发生错误时触发。
onBeforeLoadparam在请求载入数据之前触发,如果返回false将取消载入。
onClickRowrowIndex, rowData当用户点击行时触发,参数如下:
rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。
onDblClickRowrowIndex, rowData当用户双击一行时触发,参数如下:
rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。
onClickCellrowIndex, field, value当用户点击单元格时触发。
onDblClickCellrowIndex, field, value当用户双击单元格时触发。
onSortColumnsort, order当用户对列排序时触发,参数如下:
sort:排序字段名称。
order:排序顺序。
onResizeColumnfield, width当用户调整列宽时触发。
onSelectrowIndex, rowData当用户选择一行是触发,参数如下:
rowIndex:被选择的行索引,从0开始。
rowData:对应于被选择行的记录。
onUnselectrowIndex, rowData当用户取消选择一行时触发,参数如下:
rowIndex:被取消选择的行索引,从0开始。
rowData:对应于被取消选择行的记录。
onSelectAllrows当用户选择所有行时触发。
onUnselectAllrows当用户取消选择所有行时触发。
onBeforeEditrowIndex, rowData当用户开始编辑一行时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。
onAfterEditrowIndex, rowData, changes当用户编辑完成时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。
changes:被改变的字段内容,对应方式为字段:值。
onCancelEditrowIndex, rowData当用户取消编辑行时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。
onHeaderContextMenue, field当数据表格的列标题被鼠标右键单击时触发。
onRowContextMenue, rowIndex, rowData当一行被鼠标右键单击时触发。
方法
名称参数描述
optionsnone返回属性对象。
getPagernone返回页面对象。
getPanelnone返回控制面板对象。
getColumnFieldsfrozen返回列字段,如果设置了frozen属性为true,将返回固定列的字段名。
getColumnOptionfield返回特定的列属性。
resizeparam缩放和布局。
loadparam载入并显示第一页的记录,如果传递了'param'参数,它将会覆盖查询参数属性的值。
reloadparam重载记录,跟'load'方法一样但是重载的是当前页的记录而非第一页。
reloadFooterfooter重载行底记录。
loadingnone显示载入状态。
loadednone隐藏载入状态。
fitColumnsnone让列宽自动适应数据表格的宽度。
fixColumnSizenone固定列尺寸。
fixRowHeightindex固定特定列的高度。
loadDatadata载入本地数据,旧记录将被移除。
getDatanone返回已载入数据。
getRowsnone返回当前页的记录。
getFooterRowsnone返回行底记录。
getRowIndexrow返回指定行的索引,row参数可以是行记录或者是一个id字段的值。
getSelectednone返回第一个被选择的行记录或null。
getSelectionsnone返回所有被选择的行,当没有记录被选择时,将返回一个空数组。
clearSelectionsnone取消所有的已选择项。
selectAllnone全选。
unselectAllnone取消全选。
selectRowindex选择一行,行索引从0开始。
selectRecordidValue通过传递id参数来选择一行。
unselectRowindex取消选择一行。
beginEditindex开始编辑一行。
endEditindex结束编辑。
cancelEditindex取消编辑。
getEditorsindex获取指定行的编辑器,每个编辑器有如下属性:
actions:编辑器可以做的行为。
target:目标编辑器jQuery对象。
field:字段名。
type:编辑器类型。
getEditoroptions获取特定的编辑器,options参数有2个属性:
index:行索引。
field:字段名。
refreshRowindex刷新一行。
validateRowindex校验指定的行,如果有效返回true。
updateRowparam更新指定的行,param参数包含如下属性:
index:要更新的行索引。
row:新的行数据。
appendRowrow添加一行。
insertRowparam插入一个新行,param参数包含如下属性:
index:要插入的行索引,如果没有定义则在最后面添加一个新行。
row:行数据。
deleteRowindex删除一行。
getChangestype获取从最后一次提交开始的被修改的所有行,type参数表明修改的类型,可选值:inserted,deleted,updated等 。当没有传递type参数时,返回所有被修改的行。
acceptChangesnone提交所有修改的数据,提交后的数据将不能再修改或者回滚。
rejectChangesnone回滚所有被删除的行。
mergeCellsoptions合并单元格,options参数包含如下属性:
index:行索引。
field:字段名。
rowspan:整合单元格要跨的行数。
colspan:整合单元格要跨的列数。
showColumnfield显示特定的列。
hideColumnfield隐藏特定的列。

jQuery EasyUI下载:http://www.jeasyui.com/download/index.php

详细内容: http://www.jeasyui.com/documentation/index.php

附件下载

附件:http://down.51cto.com/data/2362864

新闻名称:datagrid(数据表格)QueryEasyUI中文帮助手册
当前链接:http://scyanting.com/article/pjedcs.html