### Editable DataGrid（可编辑数据表格）

Extension > Editable DataGrid

扩展下载地址：http://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip (我发布的程序包整也有提供，在extension目录下)

#### 使用案例

##### 在HTML标签里面创建数据表格

1. <table id="tt" style="width:600px;height:200px"
2. title="Editable DataGrid"
3. singleSelect="true">
4. <thead>
5. <tr>
6. <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
7. <th field="productid" width="100" editor="text">Product ID</th>
8. <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
9. <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
10. <th field="attr1" width="150" editor="text">Attribute</th>
11. </tr>
12. </thead>
13. </table>

##### 创建编辑器

1. $('#tt').edatagrid({
2. url: 'datagrid_data.json',
3. saveUrl: ...,
4. updateUrl: ...,
5. destroyUrl: ...
6. });

现在你可以通过双击数据表格的行开始编辑操作。你也可以设置saveUrl,updateUrl,destroyUrl 属性来自动从客户端同步数据到服务器端。

####

#### 属性

可编辑表格控件的熟悉扩展自DataGrid(数据表格)，可编辑表格控件新增的属性如下：

属性名 | 属性值类型 | 描述 | 默认值
--- | --- | --- | ---
destroyMsg | object | 销毁行的时候显示的确认对话框消息。 |
    destroyMsg:{
    	norecord:{    // 在没有记录选择的时候执行
    		title:'Warning',
    		msg:'No record is selected.'
    	},
    	confirm:{       // 在选择一行的时候执行
    		title:'Confirm',
    		msg:'Are you sure you want to delete?'
    	}
    }
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时，则表示请求发生了错误。 代码示例： // 服务器端代码 echo json_encode(array( 'isError' => true, 'msg' => '请求发生了错误。' )); // 客户端代码 $('#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]);