Extension > Editable DataGrid
扩展下载地址:http://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip (我发布的程序包整也有提供,在extension目录下)
现在你可以通过双击数据表格的行开始编辑操作。你也可以设置saveUrl,updateUrl,destroyUrl 属性来自动从客户端同步数据到服务器端。
可编辑表格控件的熟悉扩展自DataGrid(数据表格),可编辑表格控件新增的属性如下:
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| destroyMsg | object | 销毁行的时候显示的确认对话框消息。 | destroyMsg:{
norecord:{ // 在没有记录选择的时候执行
title:'Warning',
msg:'No record is selected.'
},
confirm:{ // 在选择一行的时候执行 |
| autoSave | boolean | 设置为true时,在点击表格外部的时候自动保存编辑的行。 | false |
| url | string | 通过URL向服务器检索数据。 | null |
| saveUrl | string | 通过URL保存数据到服务器并返回添加的行。 | null |
| updateUrl | string | 通过URL更新数据到服务器并返回更新的行。 | null |
| destroyUrl | string | 通过URL将'id'参数发送到服务器以销毁行。 | null |
| tree | selector | 树选择器指示相对应的树控件。 | null |
| treeUrl | string | 通过URL检索树控件数据。 | null |
| treeDndUrl | string | 通过URL处理拖拽操作。 | null |
| treeTextField | string | 定义树的文本字段名称。 | name |
| treeParentField | string | 定义树的父节点字段名。 | parentId |
可编辑表格的事件扩展自DataGrid(数据表格),可编辑表格新增的事件如下:
| 事件名 | 参数 | 描述 |
|---|---|---|
| onAdd | index,row | 在添加新行的时候触发。 |
| onEdit | index,row | 在编辑一行数据的时候触发。 |
| onBeforeSave | index | 在保存一行记录之前触发,返回false可以取消保存操作。 |
| onSave | index,row | 在保存一行记录时触发。 |
| onDestroy | index,row | 在销毁一样记录时触发。 |
| onError | index,row |
在服务器返回错误的时候触发。服务器端将返回一个包含”isError”属性的json字符串,当该参数等于true时,则表示请求发生了错误。 代码示例: $('#dg').edatagrid({ onError: function(index,row){ alert(row.msg); } }); |
可编辑表格的方法扩展自DataGrid(数据表格),可编辑表格新增或重写的方法如下:
| 方法名 | 参数 | 描述 |
|---|---|---|
| options | none | 返回属性对象。 |
| enableEditing | none | 启用数据表格编辑。 |
| disableEditing | none | 禁用数据表格编辑。 |
| editRow | index | 编辑指定行。 |
| addRow | none | 添加一个新的空行。 代码示例: // 追加一个空行
$('#dg').edatagrid('addRow');
// 在第一行追加一个空行
$('#dg').edatagrid('addRow',0);
// 新增一个带默认值的行
$('#dg').edatagrid('addRow',{
index: 2,
row:{
name:'name1',
addr:'addr1'
}
}); |
| saveRow | none | 保存编辑行并发送到服务器。 |
| cancelRow | none | 取消编辑行。 |
| destroyRow | none | 销毁当前选择的行。 代码示例: // 销毁所有选择的行
$('#dg').edatagrid('destroyRow');
// 销毁首行
$('#dg').edatagrid('destroyRow', 0);
// 销毁指定的行
$('#dg').edatagrid('destroyRow', [3,4,5]); |