Options
DataGrid Properties
Override default with $.fn.datagrid.defaults.
Name
Type
Description
Default
title |
string |
The datagrid panel title text. |
null |
iconCls |
string |
A CSS class that will provide a background image to be used as the header icon. |
null |
border |
boolean |
True to show datagrid panel border. |
true |
width |
number |
The width of datagrid width. |
auto |
height |
number |
The height of datagrid height. |
auto |
columns |
array |
The datagrid columns config object, see column properties for more details. |
null |
frozenColumns |
array |
Same as the columns property, but the these columns will be frozen on left. |
null |
striped |
boolean |
True to stripe the rows. |
false |
method |
string |
The method type to request remote data. |
post |
nowrap |
boolean |
True to display data in one line. |
true |
idField |
string |
Indicate which field is an identity field. |
null |
url |
string |
A URL to request data from remote site. |
null |
loadMsg |
string |
When loading data from remote site, show a prompt message. |
Processing, please wait … |
pagination |
boolean |
True to show a pagination toolbar on datagrid bottom. |
false |
rownumbers |
boolean |
True to show a row number column. |
false |
singleSelect |
boolean |
True to allow selecting only one row. |
false |
fit |
boolean |
True to set size to fit it's parent container. |
false |
pageNumber |
number |
When set pagination property, initialize the page number. |
1 |
pageSize |
number |
When set pagination property, initialize the page size. |
10 |
pageList |
array |
When set pagination property, initialize the page size selecting list. |
[10,20,30,40,50] |
queryParams |
object |
When request remote data, sending additional parameters also. |
{} |
sortName |
string |
Defines which column can be sorted. |
null |
sortOrder |
string |
Defines the column sort order, can only be 'asc' or 'desc'. |
asc |
|
Column Properties
The DataGrid Columns is an array object, which element is an array too.
The element of element array is a config object, which defines every column field.
code example:
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}
]]
Name
Type
Description
Default
title |
string |
The column title text. |
undefined |
field |
string |
The column field name. |
undefined |
width |
number |
The width of column. |
undefined |
rowspan |
number |
Indicate how many rows a cell should take up. |
undefined |
colspan |
number |
Indicate how many columns a cell should take up. |
undefined |
align |
string |
Indicate how to align the column data. 'left','right','center' can be used. |
undefined |
sortable |
boolean |
True to allow the column can be sorted. |
undefined |
checkbox |
boolean |
True to show a checkbox. |
undefined |
|
Events
Name
Parameters
Description
onLoadSuccess |
none |
Fires when remote data is loaded successfully. |
onLoadError |
none |
Fires when some error occur to load remote data. |
onClickRow |
rowIndex, rowData |
Fires when user click a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row |
onDblClickRow |
rowIndex, rowData |
Fires when user dblclick a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row |
onSortColumn |
sort, order |
Fires when user sort a column, the parameters contains: sort: the sort column field name order: the sort column order |
onSelect |
rowIndex, rowData |
Fires when user select a row, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row |
onUnselect |
rowIndex, rowData |
Fires when user unselect a row, the parameters contains: rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row |
|
Methods
Name
Parameter
Description
options |
none |
Return the options object. |
resize |
none |
Do resize and do layout. |
reload |
none |
Reload the rows. |
fixColumnSize |
none |
fix columns size. |
loadData |
param |
Load local data, the old rows will be removed. |
getSelected |
none |
Return the first selected row record or null. |
getSelections |
none |
Return all selected rows, when no record selected, am empty array will return. |
clearSelections |
none |
Clear all selections. |
selectRow |
index |
Select a row, the row index start with 0. |
selectRecord |
idValue |
Select a row by passing id value parameter. |
unselectRow |
index |
Unselect a row. |
分享到:
相关推荐
首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它可能包含了 Datagrid 的基本概念、用法、属性、方法和事件等信息。Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和...
在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...
2. **读取(Read)**:前面已经提到了读取数据,主要是通过设置`url`属性从后端获取数据并填充到Datagrid中。 3. **更新(Update)**:当用户修改了表格中的数据,点击“保存”时,我们可以获取选中行的数据,然后...
在DataGrid的`columns`配置中,通过`editor`属性指定某一列使用combobox,并设置其`options`,如`url`、`valueField`和`textField`等。 2. **多级联动原理** 多级联动的核心在于监听`onSelect`事件。当用户在第一...
3. 进行事件处理:主DataGrid的ItemDataBound事件是一个关键的事件,可以在其中获取到内部DataGrid需要的数据,并对其进行绑定。 4. 处理分页和排序:嵌套的DataGrid可能需要独立的分页和排序功能,这需要在事件处理...
可以通过设置 Datagrid 的列宽属性为百分比值,或者使用特定的事件来调整列宽。例如: ```javascript $('#myDatagrid').datagrid({ fitColumns: true }); ``` 设置 `fitColumns` 为 `true` 可以让 Datagrid 的列宽...
2. **JavaScript 配置**:初始化 DataGrid,并设置其属性,如列定义、数据源等。 ```javascript $(function () { $('#dg').datagrid({ url: 'servletURL', // 后台 Servlet 的 URL,用于获取数据 columns: [[ // ...
- **监听事件**:首先,我们需要为Datagrid的每一行添加`mouseover`和`mouseout`事件监听器。 - **获取行数据**:在`mouseover`事件触发时,我们可以获取当前行的数据,这通常通过`$(this).data()`或`$(this)....
jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...
EasyUI 是一个基于 jQuery 的 UI 插件集合体,它提供了丰富的用户界面组件,包括 DataGrid,这是一个用于展示数据的表格组件。DataGrid 具有众多可配置的属性,可以帮助开发者构建功能强大的数据展示和管理界面。这...
6. 要禁用checkbox,可以通过jQuery选择器选中该行的checkbox元素,并设置其'disabled'属性为'true'。 示例代码如下: ```javascript // 假设dgObj是已经初始化的datagrid对象 onLoadSuccess:function(data){ // ...
jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...
JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富的功能,如数据分页、排序、过滤等,极大地提高了开发效率。本文将深入探讨JeasyUI DataGrid的使用方法、特性以及常见问题的解决方案。 1. **...
### JQuery Easy-UI DataGrid性能调优 #### 概述 在使用JQuery Easy-UI DataGrid组件的过程中,用户可能会遇到一系列与性能相关的问题。这些问题不仅会影响用户体验,还可能导致应用程序响应速度下降。本文旨在...
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如datagrid,用于创建数据展示表格。本话题主要关注如何在EasyUI的datagrid中实现行的动态操作,包括上移...
### JQuery-easyui的datagrid中文文档解析 #### 核心概念与功能介绍 JQuery-easyui中的`datagrid`组件是一种强大的数据展示工具,它能够高效地处理和展示大量数据,支持分页、排序、搜索等多种功能。此文档旨在...
总的来说,解决jQuery EasyUI datagrid连续发送两次请求问题的关键在于正确配置和使用datagrid的加载逻辑,避免在事件处理函数中进行额外的数据请求。同时,合理使用datagrid的各种功能选项,避免因为布局和显示设置...
在jQuery EasyUI中,可以通过设置datagrid的属性如`header`或使用特定的CSS样式来实现这一功能。 3. **弹出框(Popup Dialog)**: 在Web应用中,弹出框常用于显示详细信息或进行用户交互。EasyUI提供了dialog组件,...
JQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的组件,主要用于创建功能丰富的数据表格。在使用 DataGrid 进行编程时,有以下几个关键知识点: 1. **数据提取与显示**: DataGrid 通过 `url` 属性从...