在easyui中,DataGrid可以通过detailview实现行的展开和收缩,利用这个特性可以实现基本的CRUD操作。
如下图:
展开行时,动态加载表单并装载数据,保存或取消表单操作时再收缩行。
首先,建立表格基本框架:
复制代码 代码示例:
First NameLast NamePhoneEmail
以上代码把DataGrid和工具栏都建好了,不用再编写JS代码。
2,接着,应用detailview并加载表单数据:
复制代码 代码示例:
$('#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);
}
});
3,表单定义:
复制代码 代码示例:
First Name | Last Name | ||
Phone |
4,保存表单的代码:
复制代码 代码示例:
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
});
}
});
}
原文参考:http://www.jeasyui.com/tutorial/app/crud3.php