Permohonan CRUD untuk borang jEasyUI
Apabila menukar paparan grid data kepada 'detailview', pengguna boleh mengembangkan baris untuk menunjukkan beberapa butiran baris di bawah baris. Ciri ini membolehkan anda menyediakan beberapa susun atur yang sesuai untuk mengedit borang dalam panel perincian. Dalam tutorial ini, kami menggunakan komponen datagrid untuk mengurangkan ruang yang diduduki oleh borang edit.
Langkah 1: Tentukan grid data (DataGrid) dalam tag HTML
<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>
Langkah 2: Gunakan paparan terperinci pada grid data (DataGrid)
$('#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);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});Untuk menggunakan paparan terperinci pada DataGrid, perkenalkan fail 'datagrid-detailview.js' di kepala halaman html.
Kami menggunakan fungsi 'detailFormatter' untuk menjana butiran baris. Dalam kes ini, kami mengembalikan <div> kosong yang menyimpan borang edit. Apabila pengguna mengklik butang kembangkan baris ('+'), acara 'onExpandRow' akan dicetuskan dan kami akan memuatkan borang edit (borang) melalui ajax. Panggil kaedah 'getRowDetail' untuk mendapatkan bekas butiran baris supaya kami boleh mencari panel butiran baris. Buat panel dalam butiran baris dan muatkan borang edit yang dikembalikan daripada 'show_form.php'.
Langkah 3: Cipta borang pengeditan (Borang)
Borang pengeditan (borang) dimuatkan daripada pelayan.
<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(<?php echo $_REQUEST['index'];?>)">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<?php echo $_REQUEST['index'];?>)">Cancel</a> </div> </form>
Langkah 4: Simpan atau Batalkan Suntingan
Panggil fungsi 'saveItem' untuk menyimpan pengguna atau fungsi 'cancelItem' untuk membatalkan penyuntingan.
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
});
}
});
}Menentukan URL yang hendak disiarkan semula, kemudian mencari objek borang dan memanggil kaedah 'serahkan' untuk menyerahkan data borang. Apabila data berjaya disimpan, data baris akan runtuh dan dikemas kini.
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}Apabila membatalkan tindakan pengeditan, jika baris itu adalah baris baharu dan belum disimpan, padamkan terus baris itu, jika tidak runtuhkan baris itu.
