Any clue for me?
I want to create an input form at the top of the table. After submit the form, the form element to be clean, and the resulting data is instantly displayed in gridtabel.
I post code like this, what we need to change?
<?php require_once("../lib/fn_lib.php");
session_start();
isAjax();
privilegesPage();
?>
<script>
function tb_hapus_customer(){
$.messager.confirm('Konfirmasi','Yakin untuk menghapus?',function(hapusOK){
if (hapusOK){
var ids = [];
var rowss = $('#tt').datagrid('getSelections');
for(var i=0; i<rowss.length; i++){
ids.push(rowss.kode);
}
$.ajax({
type: 'POST',
url: 'process/del_customer.php',
data:{ var_array:ids },
success: function(result){
var result = eval('('+result+')');
if (result.success){
$.messager.show({
title: 'Success',
msg: result.msg
});
$('#tt').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
})
}
$(function(){
$('#tt').datagrid({
url: 'data/data_customer.php',
rownumbers: true,
pagination:true,
striped:true,
toolbar:'#toolbar',
frozenColumns:[[
{field:'ck',checkbox:'true',title:'all',width:75,align:'center'},
{field:'kode_customer',title:'Kode Customer',width:85},
{field:'nama_customer',title:'Nama Customer',width:250},
]],
columns:[[
{field:'status_customer',title:'Status',width:110},
{field:'alamat_customer',title:'Alamat',width:450},
{field:'kota_customer',title:'Kota',width:110},
{field:'kodepos_customer',title:'Kode Pos',width:85},
{field:'sales_area_customer',title:'Sales Area Penjualan',width:125},
{field:'telp1_customer',title:'Telp 1',width:85},
{field:'telp2_customer',title:'Telp 2',width:85},
{field:'tipe_customer',title:'Tipe',width:85},
{field:'fax_customer',title:'Fax',width:105},
{field:'email_customer',title:'Email',width:125},
{field:'npwp_customer',title:'NPWP',width:150},
{field:'payment_term',title:'Payment Term',width:125},
{field:'credit_limit',title:'Credit Limit',width:125},
{field:'credit_status',title:'Credit Status',width:125},
{field:'general_note',title:'General Note',width:150},
]]
})
$('#tb-edit-customer').linkbutton({
iconCls: 'icon-edit'
});
$('#tb-hapus-customer').linkbutton({
iconCls: 'icon-remove'
});
$('#tb-tambah-customer').linkbutton({
iconCls: 'icon-add'
});
// $("#tb-tambah-customer").live('click',function(){
// $('#dlg-buttons').show();
// var f_url = 'customer';
// buildForm(f_url);
// })
$("#tb-edit-customer").live('click',function(){
$('#dlg-buttons').show();
var row = $('#tt').datagrid('getSelected');
if (row){
var f_url = 'customer';
$.ajax({
url: "template/form/fa_"+f_url+".php?id="+row.id,
dataType: 'json',
timeout: 2000,
error: function() {
},
success: function(xr){
var ctn = xr.content;
editUser(xr.ftitle,f_url+".php?id="+row.id,ctn.replace(/\\/,""),xr.dtitle);
}
})
}
})
})
</script>
<style type="text/css">
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#field_form {
background:#EBF4FB none repeat scroll 0 0;
border:2px solid #B7DDF2;
width: 90%;
margin-bottom: 10px;
}
.field_form_confirm {
border:2px solid #B7DDF2;
width: 700px;
margin-bottom: 10px;
}
legend {
color: #fff;
background: #80D3E2;
border: 1px solid #781351;
padding: 2px 6px
}
</style>
<script type="text/javascript">
$(function(){
$('#tutup_form').linkbutton({
iconCls: 'icon-cancel'
});
$('#kode,#nama,#alamat,#kota,#telp1').validatebox({
required:true
})
$('#ttserta').tabs({
border:false,
});
$('#form_customer').form({
url:'process/fse_customer.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
document.location.reload(true);
}
});
})
</script>
<form id="form_customer" method="POST">
<table width="auto" border="0">
<tr>
<td>
<fieldset id="field_form"><legend><b>DATA CUSTOMER</b></legend>
<table border="0">
<tr><td width="100">Kode</td>
<td> :</td>
<td width="300"><input name='kode' id='kode' autocomplete="off" /> </td>
</tr>
<tr><td>Nama</td>
<td> :</td>
<td><input name='nama' id='nama' size="40" autocomplete="off"/> </td>
</tr>
<tr><td>Alamat</td>
<td> :</td>
<td><textarea name="alamat" rows="3" cols="25" autocomplete="off"></textarea></td>
</tr>
<tr><td>Kota</td>
<td> :</td>
<td><input name='kota' id='kota' style="width: auto;" autocomplete="off"/></td>
</tr>
<tr><td>Kode Pos</td>
<td> :</td>
<td><input name='kodepos' id='kodepos' style="width: auto;" autocomplete="off"/> </td>
</tr>
<tr><td colspan="3"><hr></td></tr>
<tr><td>Telp 1</td>
<td> :</td>
<td><input name='telp1' id='telp1' style="width: auto;" autocomplete="off" /> </td>
</tr>
<tr><td>Telp 2</td>
<td> :</td>
<td><input name='telp2' id='telp2' style="width: auto;" autocomplete="off" /> </td>
</tr>
<tr><td>Fax</td>
<td> :</td>
<td><input name='fax' id='fax' style="width: auto;" autocomplete="off"/> </td>
</tr>
<tr><td>Email</td>
<td> :</td>
<td><input name='email' id='email' style="width: auto;" autocomplete="off"/> </td>
</tr>
</table>
</fieldset></td>
<td>
<fieldset id="field_form"><legend><b>SETTING PENJUALAN</b></legend>
<table border="0">
<tr><td width="100">Tipe Customer</td>
<td> :</td>
<td width="300"><input name='tipe' id='tipe' autocomplete="off" /> </td>
</tr>
<tr><td>Area Penjualan</td>
<td> :</td>
<td><input name='sales_area' id='sales_area' autocomplete="off" /> </td>
</tr>
<tr><td>NPWP</td>
<td> :</td>
<td><input name='npwp' id='npwp' autocomplete="off" /></td>
</tr>
<tr><td>Credit Limit</td>
<td> :</td>
<td><input name='credit_limit' id='credit_limit' autocomplete="off"/> </td>
</tr>
<tr><td>Credit Status</td>
<td> :</td>
<td><input name='credit_status' id='credit_status' autocomplete="off"/> </td>
</tr>
<tr><td>Payment Term</td>
<td> :</td>
<td><input name='payment_term' id='payment_term' autocomplete="off"/> </td>
</tr>
<tr><td>Status Customer</td>
<td> :</td>
<td><input name='status_customer' id='status_customer' autocomplete="off"/> </td>
</tr>
<tr><td>Keterangan</td>
<td> :</td>
<td><textarea name="general_notes" rows="3" cols="25"></textarea></td>
</tr>
<tr><td> </td>
<td> </td>
<td> </td>
</tr>
<tr><td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</fieldset> </td>
</tr>
<tr><td> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#form_customer').submit()">Submit</a></td></tr>
</table>
</form>
<table id='tt'>
</table>
<div id="toolbar">
<a href="#" plain="true" id="tb-tambah-customer">Baru</a>
<a href="#" plain="true" id="tb-edit-customer">Edit</a>
<a href="#" plain="true" onclick="tb_hapus_customer()" id="tb-hapus-customer">Hapus</a>
</div>
