在HTML标签里面创建数据表格
Item ID | Product ID | List Price | Unit Cost | Attribute |
---|
创建编辑器
$('#tt').iEdatagrid({ url: 'datagrid_data.json', saveUrl: ..., updateUrl: ..., destroyUrl: ... });
现在你可以通过双击数据表格的行开始编辑操作。你也可以设置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 |
reloadAfterSave | boolean | 保存成功之后重新加载表格数据 | false |
可编辑表格的事件扩展自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').iEdatagrid({ onError: function(index,row){ alert(row.msg); } }); |
可编辑表格的方法扩展自DataGrid(数据表格),可编辑表格新增或重写的方法如下:
方法名 | 参数 | 描述 |
---|---|---|
options | none | 返回属性对象。 |
enableEditing | none | 启用数据表格编辑。 |
disableEditing | none | 禁用数据表格编辑。 |
editRow | index | 编辑指定行。 |
addRow | none |
添加一个新的空行。 代码示例: // 追加一个空行 $('#dg').iEdatagrid('addRow'); // 在第一行追加一个空行 $('#dg').iEdatagrid('addRow',0); // 新增一个带默认值的行 $('#dg').iEdatagrid('addRow',{ index: 2, row:{ name:'name1', addr:'addr1' } }); |
saveRow | none | 保存编辑行并发送到服务器。 |
cancelRow | none | 取消编辑行。 |
destroyRow | none |
销毁当前选择的行。 代码示例: // 销毁所有选择的行 $('#dg').iEdatagrid('destroyRow'); // 销毁首行 $('#dg').iEdatagrid('destroyRow', 0); // 销毁指定的行 $('#dg').iEdatagrid('destroyRow', [3,4,5]); |