❮ Jeasyui Datagrid Datagrid21 Plugins Dt Tree ❯

jQuery EasyUI Extension - Editable DataGrid

Usage

Create a DataGrid in HTML Tags

<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 on 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

This property extends from DataGrid, and the following properties are added for Editable DataGrid (edatagrid).

Name	Type	Description	Default Value
destroyMsg	object	The confirmation dialog message to display when destroying a row.	destroyMsg:{<br> norecord:{ // when no record is selected<br> title:'Warning',<br> msg:'No record is selected.'<br> },<br> confirm:{ // when selecting a row<br> title:'Confirm',<br> msg:'Are you sure you want to delete?'<br> }<br>}
autoSave	boolean	Set to true to automatically save the edited 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 destroy the row on the server.	null
tree	selector	The tree selector for 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	The name of the tree's text field.	name
treeParentField	string	The name of the tree's parent node field.	parentId

Events

This event extends from DataGrid, and the following events are added for Editable DataGrid (edatagrid).

Name	Parameters	Description
onAdd	index, row	Triggered when a new row is added.
onEdit	index, row	Triggered when a row is edited.
onBeforeSave	index	Triggered before a row is saved, returning false cancels the save action.
onSave	index, row	Triggered when a row is saved.
onDestroy	index, row	Triggered when a row is destroyed.
onError	index, row	Triggered when a server error occurs. <br>The server should return a row with the 'isError' attribute set to true, indicating an error. Example code: //server side code<br>echo json_encode(array(<br> 'isError' => true,<br> 'msg' => 'error message.'<br>)); //client side code<br>$('#dg').edatagrid({<br> onError: function(index,row){<br> alert(row.msg);<br> }<br>});

Methods

This method extends from DataGrid, and the following methods are added or overridden for 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 at the specified row index. <br>If the index parameter is not specified, appends a new row at the last position. Example code: // append an empty row<br>$('#dg').edatagrid('addRow');<br>// append an empty row as the first row<br>$('#dg').edatagrid('addRow',0);<br>// insert a row with default values<br>$('#dg').edatagrid('addRow',{<br> index: 2,<br> row:{<br> name:'name1',<br> addr:'addr1'<br> }<br>});
saveRow	none	Saves the edited row, posting to the server.
cancelRow	none	Cancels the edited row.
destroyRow	index	Destroys the currently selected row. <br>If the index parameter is not specified, destroys all selected rows. Example code: // destroy all the selected rows<br>$('#dg').edatagrid('destroyRow');<br>// destroy the first row<br>$('#dg').edatagrid('destroyRow', 0);<br>// destroy the specified rows<br>$('#dg').edatagrid('destroyRow', [3,4,5]);

Download jQuery EasyUI Example

jquery-easyui-edatagrid.zip

❮ Jeasyui Datagrid Datagrid21 Plugins Dt Tree ❯