jQuery EasyUI Extension - Editable DataGrid

jQuery EasyUI Extensions

Usage

Create a DataGrid in an HTML tag.

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

Make the DataGrid editable.

$('#tt').edatagrid({
    url: 'datagrid_data.json',
    saveUrl: ...,
    updateUrl: ...,
    destroyUrl: ...
});

Now you can double-click a DataGrid row to start editing. You can also set the saveUrl, updateUrl, and destroyUrl properties to automatically synchronize data between the client and server.

Properties

The properties extend from DataGrid. The following properties are added for the Editable DataGrid (edatagrid).

Name Type Description Default
destroyMsg object The confirmation dialog message to display when destroying a row. 
destroyMsg:{
    norecord:{    // when no record is selected
        title:'Warning',
        msg:'No record is selected.'
    },
    confirm:{    // when select a row
        title:'Confirm',
        msg:'Are you sure you want to delete?'
    }
}
autoSave boolean Set to true to automatically save the editing row when clicking outside the DataGrid. false
url string A URL to retrieve data from the server. null
saveUrl string A URL to save data to the server and return the added row. null
updateUrl string A URL to update data on the server and return the updated row. null
destroyUrl string A URL to send the 'id' parameter to the server to destroy the row. null
tree selector The tree selector to display the corresponding tree component. null
treeUrl string A URL to retrieve tree data. null
treeDndUrl string A URL to handle drag-and-drop operations. null
treeTextField string Defines the name of the tree's text field. name
treeParentField string Defines the name of the tree's parent node field. parentId

Events

The events extend from DataGrid. The following events are added for the Editable DataGrid (edatagrid).

Name Parameters Description
onAdd index, row Fires when a new row is added.
onEdit index, row Fires when a row is edited.
onBeforeSave index Fires before a row is saved. Return false to cancel the save action.
onSave index, row Fires when a row is saved.
onDestroy index, row Fires when a row is destroyed.
onError index, row Fires when a server error occurs. The server should return a row with an 'isError' property set to true to indicate an error.

Code Example:

//server side code
echo json_encode(array(
    'isError' => true,
    'msg' => 'error message.'
));
//client side code
$('#dg').edatagrid({
    onError: function(index,row){
        alert(row.msg);
    }
});

Methods

The methods extend from DataGrid. The following methods are added or overridden for the Editable DataGrid (edatagrid).

Name Parameters Description
options none Returns the options object.
enableEditing none Enables DataGrid editing.
disableEditing none Disables DataGrid editing.
editRow index Edits the specified row.
addRow index Adds a new row to the specified row index. If the index parameter is not specified, a new row is appended to the end.
saveRow none Saves the editing row and posts it to the server.
cancelRow none Cancels the editing row.
destroyRow index Destroys the currently selected row. If the index parameter is not specified, all selected rows are destroyed.

Code Examples:

// append an empty row
$('#dg').edatagrid('addRow');

// append an empty row as first row
$('#dg').edatagrid('addRow',0);

// insert a row with default values
$('#dg').edatagrid('addRow',{
    index: 2,
    row:{
        name:'name1',
        addr:'addr1'
    }
});
// destroy all the selected rows
$('#dg').edatagrid('destroyRow');

// destroy the first row
$('#dg').edatagrid('destroyRow', 0);

// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);

Download jQuery EasyUI Example

jquery-easyui-edatagrid.zip