easyui datagrid 部分参数整理
来源:互联网 发布:河北快三数据遗漏 编辑:程序博客网 时间:2024/06/05 09:40
数据表格属性(DataGrid Properties)
属性继承控制面板,以下是数据表格独有的属性。1)数组,每个工具选项和链接按钮相同。
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>
通过数组定义工具栏:
$('#dg').datagrid({nullstripedboolean设置为true将交替显示行背景。falsemethodstring请求远程数据的方法类型。postnowrapboolean设置为true,当数据长度超出列宽时将会自动截取。trueidFieldstring表明该列是一个唯一列。nullurlstring一个用以从远程站点请求数据的超链接地址。nullloadMsgstring当从远程站点载入数据时,显示的一条快捷信息。Processing, please wait …paginationboolean设置true将在数据表格底部显示分页工具栏。falserownumbersboolean设置为true将显示行数。falsesingleSelectboolean设置为true将只允许选择一行。falsecheckOnSelectboolean如果为true,该复选框被选中/取消选中,当用户点击某一行上。如果为false,该复选框仅检查/取消选中,当用户点击完全的复选框。toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }]});
此属性是1.3版本。trueselectOnCheckboolean如果设置为true,单击一个复选框,将始终选择行。如果为false,不会选择行选中该复选框。
此属性是1.3版本。truepagePositionstring
'top','bottom','both'。
此属性是可自1.3版本。bottompageNumbernumber当设置分页属性时,初始化分页码。1pageSizenumber当设置分页属性时,初始化每页记录数。10pageListarray当设置分页属性时,初始化每页记录数列表。[10,20,30,40,50]queryParamsobject当请求远程数据时,发送的额外参数。
示例:
$('#dg').datagrid({{}sortNamestring当数据表格初始化时以哪一列来排序。nullsortOrderstring定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。ascremoteSortboolean定义是否通过远程服务器对数据排序。trueshowFooterboolean定义是否显示行底(如果是做统计表格,这里可以显示总计等)。falserowStylerfunction返回样式,如:'background:red',function有2个参数:queryParams: { name: 'easyui', subject: 'datagrid' }});
index:行索引,从0开始.
row:对应于该行记录的对象。
示例:
$('#dg').datagrid({rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; } }});
param:
参数对象传递到远程服务器。
success(data):
回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。json loaderloadFilterfunction返回过滤的数据显示。该函数需要一个参数'data',表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。
示例:
// 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 Properties)
数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。
示例:columns:[[
-
{field: ID' ,rowspan:2,width:80,sortable:true}, -
{field: ID' ,rowspan:2,width:80,sortable:true}, -
{title: Details' ,colspan:4} - ],[
-
{field: Price' ,width:80,align:'right',sortable:true}, -
{field: Cost' ,width:80,align:'right',sortable:true}, -
{field: -
{field: - ]]
value:字段的值。
rowData:行数据。
rowIndex:行索引。
示例:
$('#dg').datagrid({undefinedstylerfunction单元格样式函数,返回样式字符串装饰表格如'background:red',function有3个参数: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:行索引。
示例:
$('#dg').datagrid({undefinedsorterfunctionT自定义字段排序函数,有2个参数:columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'background-color:#ffee00;color:red;'; } } } ]]});
a:该列的第一个值。
b:该列的第二个值。
示例:
$('#dg').datagrid({undefinededitorstring,object表明编辑类型。如果属性是字符串类型表示编辑类型,如果是对象则包含2个参数: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
事件(Events)
事件继承控制面板,以下是数据表格独有的属性。rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。onDblClickRowrowIndex, rowData当用户双击一行时触发,参数如下:
rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。onClickCellrowIndex, field, value当用户点击单元格时触发。onDblClickCellrowIndex, field, value当用户双击单元格时触发。
示例:
// when double click a cell, begin editing and make the editor get focus$('#dg').datagrid({onSortColumnsort, order当用户对列排序时触发,参数如下: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当数据表格的列标题被鼠标右键单击时触发。onRowContextMenue, rowIndex, rowData当一行被鼠标右键单击时触发。
方法(Methods)
示例:
var opts = $('#dg').datagrid('getColumnFields');getColumnOptionfield返回特定的列属性。resizeparam缩放和布局。loadparam载入并显示第一页的记录,如果传递了'param'参数,它将会覆盖查询参数属性的值。通过传递一些参数,通常做一个查询,这个方法可以被称为从服务器加载新数据。// get unfrozen columnsvar opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
$('#dg').datagrid('load',{reloadparam重载记录,跟'load'方法一样但是重载的是当前页的记录而非第一页。reloadFooterfooter重载行底记录。 示例:code: '01', name: 'name01'});
// update footer row values and then refreshvar 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',[loadingnone显示载入状态。loadednone隐藏载入状态。fitColumnsnone让列宽自动适应数据表格的宽度。fixColumnSizefield固定列尺寸。如果“field' 参数未指定,将所有列的大小固定。{name: 'name1', salary: 60000}, {name: 'name2', salary: 65000}]);
示例:
$('#dg').datagrid('fixColumnSize', 'name');fixRowHeightindex固定特定列的高度。如果“index' 参数未指定,将所有列的高度固定。autoSizeColumnfield自动调整列宽,以适应内容。此方法是1.3版本特有的。loadDatadata载入本地数据,旧记录将被移除。getDatanone返回已载入数据。getRowsnone返回当前页的记录。getFooterRowsnone返回行底记录。getRowIndexrow返回指定行的索引,row参数可以是行记录或者是一个id字段的值。getCheckednone返回所有行的复选框已被选中。此方法是1.3版本特有的。getSelectednone返回第一个被选择的行记录或null。getSelectionsnone返回所有被选择的行,当没有记录被选择时,将返回一个空数组。clearSelectionsnone取消所有的已选择项。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获取指定行的编辑器,每个编辑器有如下属性:// fix the 'name' column size$('#dg').datagrid('fixColumnSize'); // fix all columns size
actions:编辑器可以做的行为。
target:目标编辑器jQuery对象。
field:字段名。
type:编辑器类型。getEditoroptions获取特定的编辑器,options参数有2个属性:
index:行索引。
field:字段名。
示例:
// get the datebox editor and change its valuevar ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});$(ed.target).datebox('setValue', '5/4/2012');refreshRowindex刷新一行。validateRowindex校验指定的行,如果有效返回true。updateRowparam更新指定的行,param参数包含如下属性:
index:要更新的行索引。
row:新的行数据。
示例:
$('#dg').datagrid('updateRow',{appendRowrow添加一行。 新的行会被添加到最后一个位置:index: 2, row: { name: 'new name', note: 'new note message' }});
$('#dg').datagrid('appendRow',{insertRowparamname: 'new name', age: 30, note: 'some messages'});
插入一个新行,param参数包含如下属性:
index:要插入的行索引,如果没有定义则在最后面添加一个新行。
row:行数据。
index:要插入的行索引,如果没有定义则在最后面添加一个新行。
row:行数据。
示例:
// insert a new row at second row position$('#dg').datagrid('insertRow',{deleteRowindex删除一行。getChangestype获取从最后一次提交开始的被修改的所有行,type参数表明修改的类型,可选值:inserted,deleted,updated等 。当没有传递type参数时,返回所有被修改的行。acceptChangesnone提交所有修改的数据,提交后的数据将不能再修改或者回滚。rejectChangesnone回滚自创建以来或自上次调用AcceptChanges,所有的变化数据。mergeCellsoptions合并单元格,options参数包含如下属性:index: 1, // index start with 0 row: { name: 'new name', age: 30, note: 'some messages' }});
index:行索引。
field:字段名。
rowspan:整合单元格要跨的行数。
colspan:整合单元格要跨的列数。showColumnfield显示特定的列。hideColumnfield隐藏特定的列。
0 0
- easyui datagrid 部分参数整理
- easyui datagrid 部分参数整理
- easyui datagrid 部分参数
- easyui datagrid 部分参数
- easyui datagrid 部分参数
- easyui datagrid 部分参数说明
- easyui datagrid 部分参数说明
- easyui datagrid 部分参数说明API
- easyui中datagrid 部分参数说明
- easyui datagrid 参数详解
- jquery easyui datagrid改变参数
- Jquery-easyUI-datagrid参数之 queryParams
- easyui datagrid url mvc 参数动态
- jQuery EasyUI-DataGrid有参数查询
- easyui datagrid load 参数表单序列化
- easyui datagrid load 参数表单序列化
- easyui datagrid 动态修改查询参数
- Easyui Datagrid 根据参数设定样式
- 打开其他应用程序
- Pasha and Stick
- VS2013 更新EF模型时报错
- Xcode7创建pch文件
- c++ 算法 next_permutation
- easyui datagrid 部分参数整理
- Android应用打破65K方法数限制,让你的应用不再爆棚
- 一个Android Studio主题的网站
- 软件开发git与svn
- Two Bases
- asp.net IIS7 503错误
- CSS 知识小积累
- mysql数据库常用的时间函数
- Android 编程下 Touch 事件的分发和消费机制(下)