EasyUI 之datagrid 使用[转]

EasyUI 之datagrid 使用

来自：http://ycx211314.blog.163.com/blog/static/101670862011229105845754/

可选的参数

DataGrid 属性

覆写了 $.fn.datagrid.defaults.

参数名 类型 描述 默认值

title

string

Datagrid面板的标题

null

iconCls

string

在面板上通过一个CSS类显示16x16图标。

null

border

boolean

设置面板是否具有边框

true

width

number

datagrid面板的宽度

auto

height

number

datagrid面板的高度

auto

columns

array

DataGrid列配置对象

null

frozenColumns

array

冻结的列，被现实在左边

null

striped

boolean

设置是否让单元格显示条纹。默认false。

false

method

string

通过该方法类型请求远程数据。默认post。

post

nowrap

boolean

是否包裹数据，默认为包裹数据显示在一行

true

idField

string

标识字段，或者说主键字段

null

url

string

请求数据的URL.

null

loadMsg

string

加载数据时显示的信息

Processing, please wait …

pagination

boolean

是否显示分页工具栏

false

rownumbers

boolean

是否显示行号

false

singleSelect

boolean

是否单选

false

fit

boolean

是否自动适应父容器

false

pageNumber

number

分页初始化行号

1

pageSize

number

初始化分页大小

10

pageList

array

分页大小选择列

[10,20,30,40,50]

queryParams

object

请求数据时额外发送的参数

{}

sortName

string

排序列

null

sortOrder

string

升序还是降序 'asc' 或者 'desc'.

asc

Column 属性

DataGrid Columns 是一个数组对象, 数组里的对象也是一个数组，数组里的每一个小对象就是一个列字段，例如：

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	文本对齐方式，同align属性.	undefined
sortable	boolean	是否可以被排序.	undefined
checkbox	boolean	是否具有多选框	undefined

Events（事件）

NameParametersDescription

onLoadSuccess	none	调用远程数据成功是激活
onLoadError	none	装载错误时激活
onClickRow	rowIndex, rowData	点击一行时激活，参数包括： rowIndex:点击的行数，从0开始 rowData: 当前行的数据
onDblClickRow	rowIndex, rowData	双击一行是触发，参数包括: rowIndex:点击的行数，从0开始 rowData: 当前行的数据
onSortColumn	sort, order	对一列进行排序时激活,参数包括: sort:排序字段名称 order: 排序规则，升序，降序
onSelect	rowIndex, rowData	选中一行时激活，参数有: rowIndex:选中的行数 rowData: 数据
onUnselect	rowIndex, rowData	取消选中时激活，参数： rowIndex:选中的行数 rowData: 数据

Methods（方法）

NameParameterDescription

options	none	返回所有属性
resize	none	重置大小布局
reload	none	重新加载数据
fixColumnSize	none	调整列的大小
loadData	param	装载数据，以前的数据会被移除
getSelected	none	返回选中的行，没有则返回空
getSelections	none	返回所有的行，空则返回空数组
clearSelections	none	取消所有选中
selectRow	index	选中一行，参数为行号
selectRecord	idValue	根据主键查询出一条记录
unselectRow	index	取消选中一行