Hello everybody,
I try to build dynamic layout, add center layout and add datagrid+toolbar+form, datagrid working properly but problem happen when call edit, add toolbar button, below sample script:
//Create layout
//Function Create Layout and return panel
centerLayout = add_layout('center', 400, 'User Data');
centerLayout.load('php_script/table_user.php', function() {
dataGridUser = $('#grid_user').datagrid();
});
//Data Grid Table
<table id="grid_user" class="easyui-datagrid" style="width:600px;height:250px" url="php_script/json_table_user.php" toolbar="#toolbar_user" pagination="true" rownumbers="true" fitColumns="false" singleSelect="true" fit="true">
<thead>
<tr>
<th field="state" width="120" align="center" >Status</th> <!--styler="cellStyler"-->
<th field="login" width="120" align="left">Login</th>
<th field="real_name" width="200" align="left">Name</th>
<th field="address" width="200" align="left">Address</th>
</tr>
</thead>
</table>
<!-- Toolbar -->
<div id="toolbar_user">
<span> </span>
<input id="txt_user" style="line-height:26px;border:1px solid #ccc" value="Enter Name" size="40">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="search_user();">Search</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="new_user();">Add User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit_user();">Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delete_user();">Delete User</a>
</div>
<!-- End Toolbar -->
<!-- Dialog Form -->
<div id="dlg_user" class="easyui-dialog" style="width:400px;height:400px;padding:10px 10px" closed="true" buttons="#dlg-buttons-users">
<form id="fm_user" method="POST" novalidate>
<table class='tbledit'>
<tr><td>Login</td><td><input name="login" required="true" class="w200" ></td></tr>
<tr><td>Real Name</td><td><input name="real_name" required="true" class="w200" ></td></tr>
<tr><td>Address</td><td><input name="address" class="easyui-validatebox w200" ></td></tr>
</table>
</form>
</div>
<!-- End Dialog Form -->
<div id="dlg-buttons-users">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="save_user()">Simpan</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg_user').dialog('close')">Batal</a>
</div>
<script type="text/javascript">
var params = {
id: '',
mode: 'insert'
};
function cellStyler(value, row, index) {
if (value === 1) //background:url('images/datagrid_sort_asc.gif') no-repeat center center
return 'background:url(themes/icons/ok.png) no-repeat center center';
else
return 'background:url(themes/icons/cancel.png) no-repeat center center';
}
function new_user() {
$('#dlg_user').dialog('open').dialog('setTitle', 'Tambah Jenis service');
$('#fm_user').form('clear');
params.mode = 'insert';
}
function edit_user() {
var row = $('#dg_user').datagrid('getSelected');
if (row) {
params.id = row.id;
params.mode = 'edit';
$('#dlg_user').dialog('open').dialog('setTitle', 'Edit Jenis Service');
$('#fm_user').form('load', row);
}
}
function save_user() {
$('#fm_user').form('submit', {
url: 'php_script/save_user.php',
onSubmit: function(param) {
param.id = params.id;
param.mode = params.mode;
return $(this).form('validate');
},
success: function(result) {
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg_users').dialog('close'); // close the dialog
$('#dg_users').datagrid('reload'); // reload the user data
}
$.messager.show({
title: result.msg,
msg: result.msg
});
}
});
}
function delete_user() {
var row = $('#dg_users').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function(r) {
if (r) {
$.post('php_script/delete_user.php', {id: row.id}, function(result) {
if (result.success) {
$('#dg_users').datagrid('reload'); // reload the user data
} else {
$.messager.show({// show error message
title: 'Error',
msg: result.msg
});
}
}, 'json');
}
});
}
}
function search_users() {
$('#dg_user').datagrid('load', {
search: $('#txt_user').val()
});
}
</script>
Note:
I try debug and got msg like this:
"Uncaught TypeError: Cannot read property 'options' of undefined jquery.easyui.min.js:2701"
TIA,
