datagrid传参_DataGrid（数据表格）

DataGrid(数据表格)

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

编码

名称

价格

001名称12323

002名称24612

通过

编码

名称

价格

此外，也允许使用Javascript去创建DataGrid控件。

$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'code',title:'代码',width:100},

{field:'name',title:'名称',width:100},

{field:'price',title:'价格',width:100,align:'right'}

]]

});

使用一些参数查询数据。

$('#dg').datagrid('load', {

name: 'easyui',

address: 'ho'

});

改变的数据保存到服务器之后，刷新当前数据。

$('#dg').datagrid('reload'); // 重新载入当前页面数据

该属性扩展自panel(面板)，下面是DataGrid控件添加的属性。

属性名

属性值类型

描述

默认值

columns

array

DataGrid列配置对象，详见列属性说明中更多的细节。

undefined

frozenColumns

array

同列属性，但是这些列将会被冻结在左侧。

undefined

fitColumns

boolean

真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。

false

resizeHandle

string

调整列的位置，可用的值有：'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列，等等。(该属性自1.3.2版开始可用)

right

autoRowHeight

boolean

定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。

true

toolbar

array,selector

顶部工具栏的DataGrid面板。可能的值：

1) 一个数组，每个工具属性都和linkbutton一样。

2) 选择器指定的工具栏。

在

标签上定义工具栏：

$('#dg').datagrid({

toolbar: '#tb'

});

通过数组定义工具栏：

$('#dg').datagrid({

toolbar: [{

iconCls: 'icon-edit',

handler: function(){alert('编辑按钮')}

},'-',{

iconCls: 'icon-help',

handler: function(){alert('帮助按钮')}

}]

});

null

striped

boolean

是否显示斑马线效果。

false

method

string

该方法类型请求远程数据。

post

nowrap

boolean

如果为true，则在同一行中显示数据。设置为true可以提高加载性能。

true

idField

string

指明哪一个字段是标识字段。

null

url

string

一个URL从远程站点请求数据。

null

data

array,object

数据加载(该属性自1.3.2版开始可用)

代码示例：

$('#dg').datagrid({

data: [

{f1:'value11', f2:'value12'},

{f1:'value21', f2:'value22'}

]

});

null

loadMsg

string

在从远程站点加载数据的时候显示提示消息。

Processing, please wait …

pagination

boolean

如果为true，则在DataGrid控件底部显示分页工具栏。

false

rownumbers

boolean

如果为true，则显示一个行号列。

false

singleSelect

boolean

如果为true，则只允许选择一行。

false

ctrlSelect

boolean

在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。(该属性自1.3.6版开始可用)

false

checkOnSelect

boolean

如果为true，当用户点击行的时候该复选框就会被选中或取消选中。

如果为false，当用户仅在点击该复选框的时候才会被选中或取消。

(该属性自1.3版开始可用)

true

selectOnCheck

boolean

如果为true，单击复选框将永远选择行。

如果为false，选择行将不选中复选框。

(该属性自1.3版开始可用)

true

scrollOnSelect

boolean

如果为true，在选择行的时候将自动定位到行所在的位置。(该属性自1.5.2版开始可用)

true

pagePosition

string

定义分页工具栏的位置。可用的值有：'top','bottom','both'。

(该属性自1.3版开始可用)

true

pageNumber

number

在设置分页属性的时候初始化页码。

1

pageSize

number

在设置分页属性的时候初始化页面大小。

10

pageList

array

在设置分页属性的时候初始化页面大小选择列表。

[10,20,30,40,50]

queryParams

object

在请求远程数据的时候发送额外的参数。

代码示例：

$('#dg').datagrid({

queryParams: {

name: 'easyui',

subject: 'datagrid'

}

});

{}

sortName

string

定义哪些列可以进行排序。

null

sortOrd