顶部广告位

DataGrid(数据表格)

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

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

依赖关系

panel

resizable

linkbutton

pagination

示例

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

<table class="easyui-datagrid">   
      <thead>   
          <tr>   
              <th data-options="field:'code'">编码</th>   
              <th data-options="field:'name'">名称</th>   
              <th data-options="field:'price'">价格</th>   
          </tr>   
      </thead>   
      <tbody>   
          <tr>   
              <td>001</td><td>name1</td><td>2323</td>   
          </tr>   
          <tr>   
              <td>002</td><td>name2</td><td>4612</td>   
          </tr>   
      </tbody>   
  </table>

通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"   

          data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
      <thead>   
          <tr>   
              <th data-options="field:'code',width:100">编码</th>   
              <th data-options="field:'name',width:100">名称</th>   
              <th data-options="field:'price',width:100,align:'right'">价格</th>   
          </tr>   
      </thead>   
  </table>

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

<table id="dg"></table>

$('#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('reload');    // 重新载入当前页面数据

事件

事件名 参数 描述
onLoadSuccess data 在数据加载成功的时候触发。
onLoadError none 在载入远程数据产生错误的时候触发。
onBeforeLoad param 在载入请求数据数据之前触发,如果返回false可终止载入数据操作。
onClickRow rowIndex, rowData 在用户点击一行的时候触发,参数包括:
rowIndex:点击的行的索引值,该索引值从0开始。
rowData:对应于点击行的记录。
onDblClickRow rowIndex, rowData 在用户双击一行的时候触发,参数包括:
rowIndex:点击的行的索引值,该索引值从0开始。
rowData:对应于点击行的记录。
onClickCell rowIndex, field, value 在用户点击一个单元格的时候触发。
onDblClickCell rowIndex, field, value 在用户双击一个单元格的时候触发。

代码示例:

// 在双击一个单元格的时候开始编辑并生成编辑器,然后定位到编辑器的输入框上
$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});
onBeforeSortColumn sort, order 在用户排序一个列之前触发,返回false可以取消排序。(该事件自1.3.6版开始可用)
onSortColumn sort, order 在用户排序一列的时候触发,参数包括:
sort:排序列字段名称。
order:排序列的顺序(ASC或DESC)
onResizeColumn field, width 在用户调整列大小的时候触发。
onSelect rowIndex, rowData 在用户选择一行的时候触发,参数包括:
rowIndex:选择的行的索引值,索引从0开始。
rowData:对应于所选行的记录。
onUnselect rowIndex, rowData 在用户取消选择一行的时候触发,参数包括:
rowIndex:选择的行的索引值,索引从0开始。
rowData:对应于取消选择行的记录。
onSelectAll rows 在用户选择所有行的时候触发。
onUnselectAll rows 在用户取消选择所有行的时候触发。
onCheck rowIndex,rowData 在用户勾选一行的时候触发,参数包括:
rowIndex:选中的行索引,索引从0开始。
rowData:对应于所选行的记录。
(该事件自1.3版开始可用)
onUncheck rowIndex,rowData 在用户取消勾选一行的时候触发,参数包括:
rowIndex:选中的行索引,索引从0开始。
rowData:对应于取消勾选行的记录。
(该事件自1.3版开始可用)
onCheckAll rows 在用户勾选所有行的时候触发。(该事件自1.3版开始可用)
onUncheckAll rows 在用户取消勾选所有行的时候触发。(该事件自1.3版开始可用)
onBeforeEdit rowIndex, rowData 在用户开始编辑一行的时候触发,参数包括:
rowIndex:编辑行的索引,索引从0开始。
rowData:对应于编辑行的记录。
onBeginEdit rowIndex, rowData 在一行进入编辑模式的时候触发。(该事件自1.3.6版开始可用)
onEndEdit rowIndex, rowData, changes 在完成编辑但编辑器还没有销毁之前触发。(该事件自1.3.6版开始可用)
onAfterEdit rowIndex, rowData, changes 在用户完成编辑一行的时候触发,参数包括:
rowIndex:编辑行的索引,索引从0开始。
rowData:对应于完成编辑的行的记录。
changes:更改后的字段(键)/值对。
onCancelEdit rowIndex, rowData 在用户取消编辑一行的时候触发,参数包括:
rowIndex:编辑行的索引,索引从0开始。
rowData:对应于编辑行的记录。
onHeaderContextMenu e, field 在鼠标右击DataGrid表格头的时候触发。
onRowContextMenu e, rowIndex, rowData 在鼠标右击一行记录的时候触发。

方法

方法名 参数 描述
options none 返回属性对象。
getPager none 返回页面对象。
getPanel none 返回面板对象。
getColumnFields frozen 返回列字段。如果设置了frozen属性为true,将返回固定列的字段名。
代码示例:
var opts = $('#dg').datagrid('getColumnFields');               // 获取解冻列
var opts = $('#dg').datagrid('getColumnFields', true);       // 获取冻结列
getColumnOption field 返回指定列属性。
resize param 做调整和布局。
load param 加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。
$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});
reload param 重载行。等同于'load'方法,但是它将保持在当前页。
reloadFooter footer 重载页脚行。代码示例:
// 更新页脚行的值并刷新
var rows = $('#dg').datagrid('getFooterRows'); rows[0]['name'] = 'new name'; rows[0]['salary'] = 60000; $('#dg').datagrid('reloadFooter'); // 更新页脚行并载入新数据
$('#dg').datagrid('reloadFooter',[ {name: 'name1', salary: 60000}, {name: 'name2', salary: 65000} ]);
loading none 显示载入状态。
loaded none 隐藏载入状态。
fitColumns none 使列自动展开/收缩到合适的DataGrid宽度。
fixColumnSize field 固定列大小。如果'field'参数未配置,所有列大小将都是固定的。

代码示例:

$('#dg').datagrid('fixColumnSize', 'name');        // 固定'name'列大小
$('#dg').datagrid('fixColumnSize');                    // 固定所有列大小
fixRowHeight index 固定指定列高度。如果'index'参数未配置,所有行高度都是固定的。
freezeRow index 冻结指定行,当DataGrid表格向下滚动的时候始终保持被冻结的行显示在顶部。(该方法自1.3.2版开始可用)
autoSizeColumn field 自动调整列宽度以适应内容。(该方法自1.3版开始可用)
loadData data 加载本地数据,旧的行将被移除。
getData none 返回加载完毕后的数据。
getRows none 返回当前页的所有行。
getFooterRows none 返回页脚行。
getRowIndex row 返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。
getChecked none 在复选框呗选中的时候返回所有行。(该方法自1.3版开始可用)
getSelected none 返回第一个被选中的行或如果没有选中的行则返回null。
getSelections none 返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。
clearSelections none 清除所有选择的行。
clearChecked none 清除所有勾选的行。(该方法自1.3.2版开始可用)
scrollTo index 滚动到指定的行。(该方法自1.3.3版开始可用)
highlightRow index 高亮一行。(该方法自1.3.3版开始可用)
selectAll none 选择当前页中所有的行。
unselectAll none 取消选择所有当前页中所有的行。
selectRow index 选择一行,行索引从0开始。
selectRecord idValue 通过ID值参数选择一行。
unselectRow index 取消选择一行。
checkAll none 勾选当前页中的所有行。(该方法自1.3版开始可用)
uncheckAll none 取消勾选当前页中的所有行。(该方法自1.3版开始可用)
checkRow index 勾选一行,行索引从0开始。(该方法自1.3版开始可用)
uncheckRow index 取消勾选一行,行索引从0开始。(该方法自1.3版开始可用)
beginEdit index 开始编辑行。
endEdit index 结束编辑行。
cancelEdit index 取消编辑行。
getEditors index 获取指定行的编辑器。每个编辑器都有以下属性:
actions:编辑器可以执行的动作,同编辑器定义。
target:目标编辑器的jQuery对象。
field:字段名称。
type:编辑器类型,比如:'text','combobox','datebox'等。
getEditor options 获取指定编辑器,options包含2个属性:
index:行索引。
field:字段名称。

代码示例:

// 获取日期输入框编辑器并更改它的值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
refreshRow index 刷新行。
validateRow index 验证指定的行,当验证有效的时候返回true。
updateRow param 更新指定行,参数包含下列属性:
index:执行更新操作的行索引。
row:更新行的新数据。

代码示例:

$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: '新名称',
		note: '新消息'
	}
});
appendRow row 追加一个新行。新行将被添加到最后的位置。
$('#dg').datagrid('appendRow',{
	name: '新名称',
	age: 30,
	note: '新消息'
});
insertRow param

插入一个新行,参数包括一下属性:
index:要插入的行索引,如果该索引值未定义,则追加新行。
row:行数据。

代码示例:

// 在第二行的位置插入一个新行
$('#dg').datagrid('insertRow',{
	index: 1,	// 索引从0开始
	row: {
		name: '新名称',
		age: 30,
		note: '新消息'
	}
});
deleteRow index 删除行。
getChanges type 从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行,可以使用的值有:inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。
acceptChanges none 提交所有从加载或者上一次调用acceptChanges函数后更改的数据。
rejectChanges none 回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。
mergeCells options 合并单元格,options包含以下属性:
index:行索引。
field:字段名称。
rowspan:合并的行数。
colspan:合并的列数。
showColumn field 显示指定的列。
hideColumn field 隐藏指定的列。
sort param

排序datagrid表格。(该方法自1.3.6版开始可用)

代码示例:

$('#dg').datagrid('sort', 'itemid');    // 排序一个列
$('#dg').datagrid('sort', {	        // 指定了排序顺序的列
	sortName: 'productid',
	sortOrder: 'desc'
});

鄂ICP备16023636号 © 2017 菜鸟程序员