easy ui java_JQuery Easy Ui dataGrid 数据表格

数据表格 - DataGrid

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

数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰富的。单元格合并，多列标题，冻结列和页脚是其功能只是一小部分。

依赖组件(Dependencies)

使用方法(Usage Example)

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

Code

Name

Price

001name12323002name24612

CodeNamePrice

001name12323002name24612

通过

data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

Code

Name

Price

data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

CodeNamePrice

使用JavaScript创建数据表格。

$('#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'}

]]

});

$('#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'}

]]

});

查询数据填充数据表格。

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

name:'easyui',

address:'ho'

});

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

name: 'easyui',

address: 'ho'

});

数据更改与服务器交互，刷新当前数据。

$('#dg').datagrid('reload');// reload the current page data

$('#dg').datagrid('reload');// reload the current page data

数据表格属性(DataGrid Properties)

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

名称类型描述默认值

columns

array

数据表格列配置对象，查看列属性以获取更多细节。

undefined

frozenColumns

array

跟列属性一样，但是这些列固定在左边，不会滚动。

undefined

fitColumns

boolean

设置为true将自动使列适应表格宽度以防止出现水平滚动。

false

autoRowHeight

boolean

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

true

toolbar

array,selector

数据表格顶部面板的工具栏。可能的值：

1)数组，每个工具选项和链接按钮相同。

2)选择显示的工具栏。

在一个

的标签定义工具栏:

$('#dg').datagrid({

toolbar: '#tb'

});

通过数组定义工具栏:

$('#dg').datagrid({

toolbar: [{

iconCls: 'icon-edit',

handler: function(){alert('edit')}

},'-',{

iconCls: 'icon-help',

handler: function(){alert('help')}

}]

});

null

striped

boolean

设置为true将交替显示行背景。

false

method

string

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

post

nowrap

boolean

设置为true，当数据长度超出列宽时将会自动截取。

true

idField

string

表明该列是一个唯一列。

null

url

string

一个用以从远程站点请求数据的超链接地址。

null

loadMsg

string

当从远程站点载入数据时，显示的一条快捷信息。

Processing, please wait …

pagination

boolean

设置true将在数据表格底部显示分页工具栏。

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

当设置分页属性时，初始化分页码。

1

pageSize

number

当设置分页属性时，初始化每页记录数。

10

pageList

array

当设置分页属性时，初始化每页记录数列表。

[10,20,30,40,50]

queryParams

object

当请求远程数据时，发送的额外参数。

示例:

$('#dg').datagrid({

queryParams: {

name: 'easyui',

subject: 'datagrid'

}

});

{}

sortName

string

当数据表格初始化时以哪一列来排序。

null

sortOrder

string

定义排序顺序，可以是'asc'或者'desc'(正序或者倒序)。

asc

remoteSort

boolea