When the switching data grid view (datagrid view) to 'detailview', the user can expand to show details of some line in the row below the row. This feature allows you to provide a suitable layout (layout) to prevent editing form in the detail lines panel (panel) of (form). In this tutorial, we use the data grid (DataGrid) components to reduce the edit form (form) the space occupied.
Step 1: HTML tags are defined in a data grid (the DataGrid)
url="get_users.php"
toolbar="#toolbar"
fitColumns="true" singleSelect="true">
| First Name | Last Name | Phone |
|---|
Step 2: a data grid (the DataGrid) Application detailed view
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '
';
},
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);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
In order for the data grid (the DataGrid) Detail View application, incorporated in the html page header 'datagrid-detailview.js' file.
We use 'detailFormatter' function to generate line detail content. In this case, we return empty for placing the edit form (form) of
Step 3: Create edit form (Form)
Edit form (form) is loaded from the server.
show_form.php
Step 4: Save or cancel editing
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' Methods to submit the form (form) data. When the data is successfully stored, folded and update the data line.
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}
When canceled editing 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 (edit: Leilin Peng Source: network intrusion deleted)