jQuery EasyUI applications - creating a deployment line detail CRUD application edit form

When switching data grid view (datagrid view) to 'detailview', the user can expand the line to display the details of some of the rows in the row below. This feature allows you to prevent the breakdown line panel (panel) in the edit form (form) to provide some suitable layout (layout). In this tutorial, we use the data grid (datagrid) components to reduce the edit form (form) of the space occupied.

Step 1: Define the HTML tag data grid (DataGrid)

<Table id = "dg" title = "My Users" style = "width: 550px; height: 250px"
		url = "get_users.php"
		toolbar = "# toolbar"
		fitColumns = "true" singleSelect = "true">
	<Thead>
		<Tr>
			<Th field = "firstname" width = "50"> First Name </ th>
			<Th field = "lastname" width = "50"> Last Name </ th>
			<Th field = "phone" width = "50"> Phone </ th>
			<Th field = "email" width = "50"> Email </ th>
		</ Tr>
	</ Thead>
</ Table>
<Div id = "toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()"> New </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()"> Destroy </a>
</ Div>

Step 2: Data Grid (DataGrid) Applications Detail view

$ ( '# Dg'). Datagrid ({
	view: detailview,
	detailFormatter: function (index, row) {
		return '<div class = "ddv"> </ div>';
	},
	onExpandRow: function (index, row) {
		var ddv = $ (this) .datagrid ( 'getRowDetail', index) .find ( 'div.ddv');
		ddv.panel ({
			border: false,
			cache: true,
			href: 'show_form.php index =?' + index,
			onLoad: function () {
				$ ( '# Dg') datagrid ( 'fixDetailRowHeight', index).;
				$ ( '# Dg') datagrid ( 'selectRow', index).;
				$ ( '# Dg') datagrid ( 'getRowDetail', index) .find ( 'form') form ( 'load', row)/en;
			}
		});
		$ ( '# Dg') datagrid ( 'fixDetailRowHeight', index).;
	}
});

In order for the data grid (DataGrid) Application details view in html page header introduced 'datagrid-detailview.js' files.

We use 'detailFormatter' function to generate line detail content. In this case, we return to a place for the edit form (form) empty <div>. When the user clicks on the line expand button ( '+'), 'onExpandRow' event will be triggered, we will load the edit form by ajax (form). Call 'getRowDetail' method to get the container line detail, so we can find the line detail panel (panel). Details of the row created Panel (panel), load the edit form (form) from 'show_form.php' return.

Step 3: Create edit form (Form)

Edit form (form) is loaded from the server.

<Form method = "post">
	<Table class = "dv-table" style = "width: 100%; background: #fafafa; padding: 5px; margin-top: 5px;">
		<Tr>
			<Td> First Name </ td>
			<Td> <input name = "firstname" class = "easyui-validatebox" required = "true"> </ input> </ td>
			<Td> Last Name </ td>
			<Td> <input name = "lastname" class = "easyui-validatebox" required = "true"> </ input> </ td>
		</ Tr>
		<Tr>
			<Td> Phone </ td>
			<Td> <input name = "phone"> </ input> </ td>
			<Td> Email </ td>
			<Td> <input name = "email" class = "easyui-validatebox" validType = "email"> </ input> </ td>
		</ Tr>
	</ Table>
	<Div style = "padding: 5px 0; text-align: right; padding-right: 30px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(&lt;?php echo $_REQUEST['index'];?&gt;)"> Save </a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(&lt;?php echo $_REQUEST['index'];?&gt;)"> Cancel </a>
	</ Div>
</ Form>

Step 4: Save or Cancel edit

Call 'saveItem' function to save a user or invoke 'cancelItem' function to cancel editing.

function saveItem (index) {
	var row = $ ( '# dg') datagrid ( 'getRows') [index].;
	var url = row.isNewRecord 'save_user.php': 'update_user.php id =?' + row.id;?
	$ ( '# Dg'). Datagrid ( 'getRowDetail', index) .find ( 'form'). Form ( 'submit', {
		url: url,
		onSubmit: function () {
			return $ (this) .form ( 'validate');
		},
		success: function (data) {
			data = eval ( '(' + data + ')');
			data.isNewRecord = false;
			$ ( '# Dg') datagrid ( 'collapseRow', index).;
			$ ( '# Dg'). Datagrid ( 'updateRow', {
				index: index,
				row: data
			});
		}
	});
}

Which decided to return a URL, and then look for the form (form) object and call 'submit' method to submit the form (form) data. When the data has been successfully saved, folded and update the rows of data.

function cancelItem (index) {
	var row = $ ( '# dg') datagrid ( 'getRows') [index].;
	if (row.isNewRecord) {
		. $ ( '# Dg') datagrid ( 'deleteRow', index);
	} Else {
		$ ( '# Dg') datagrid ( 'collapseRow', index).;
	}
}

When you cancel the edit action, if the line is a new line and has not been saved, delete the row, otherwise the fold line.

Download jQuery EasyUI examples

jeasyui-app-crud3.zip