shivavalkyre
Newbie
Posts: 39
|
 |
« Reply #2 on: April 21, 2016, 12:24:48 AM » |
|
Hi, stworthy thanks for quick reply, but i have tried that code but it still not work for me here my complete code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/color.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<link rel="stylesheet" type="text/css" href="./css/demo.css">
<link rel="stylesheet" type="text/css" href="./css/navpanel.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./js/jquery.edatagrid.js"></script>
<script type="text/javascript" src="../js/accounting.js"></script>
<script type="text/javascript">
function codeClose() {
//alert('ok');
//$('#cc').panel('close');
//$('#cc').layout('panel','west').panel('close');
//$('#cc').layout('panel','center').panel('close');
//$('#cc').layout('resize');
$('#cc').hide();
//$('#tt').tabs('close', 'About');
$('#tt').tabs('close', 'Dependents');
$('#tt').tabs('close', 'Job Historical');
$('#tt').tabs('close', 'Salary');
$('#tt').tabs('close', 'Report To');
$('#tt').tabs('close', 'Document List');
$('#tt').tabs('close', 'Qualification');
$('#tt').tabs('close', 'Work Schedule');
}
window.onload = codeClose;
</script>
</head>
<body>
<div id="p" class="easyui-panel" title="Employee Information" style="width:1480px">
<table border="0" width="100%">
<tr>
<td>
<input id="sb" class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px;border-radius:8px;"></input>
<div id="mm">
<div data-options="name:'employeename'">Employee Name</div>
<div data-options="name:'supervisor'">Supervisor Name</div>
<div data-options="name:'jobtitle'">Job Title</div>
<div data-options="name:'employmentstatus'">Employment Status</div>
<div data-options="name:'subunit'">Sub Unit</div>
</div>
<hr>
</td>
</tr>
<tr>
<td>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">New Data</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-delete'">Delete</a>
<hr>
<table id="dg" class="easyui-datagrid" title="Employee List" style="width:1470px;" pagination="true" data-options="singleSelect:true,collapsible:true,url:'./control/get_personel.php',pagePosition:'both',onDblClickRow:onDblClickRow">
<thead>
<tr>
<th data-options="field:'kryid',width:80, sortable:true">ID</th>
<th data-options="field:'nama',width:190,sortable:true">Employee Name</th>
<th data-options="field:'JABATAN',width:250,align:'left',sortable:true">Job Title</th>
<th data-options="field:'StatusKry',width:180,align:'left',sortable:true">Employment Status</th>
<th data-options="field:'BagianName',width:200,sortable:true">Sub unit</th>
<th data-options="field:'location',width:280,align:'left',sortable:true">Location</th>
<th data-options="field:'supervisorid',width:280,align:'left',sortable:true">Supervisor</th>
<th data-options="field:'TGLMSK',width:50,align:'left',sortable:true,hidden:true">Join Date</th>
<th data-options="field:'TGLLHR',width:50,align:'left',sortable:true,hidden:true">Date of Birth</th>
<th data-options="field:'nokry',width:50,align:'left',sortable:true,hidden:true">Other No Employee</th>
<th data-options="field:'jkid',width:10,align:'left',sortable:true,hidden:true">JKID</th>
<th data-options="field:'Status_Nikah',width:10,align:'left',sortable:true,hidden:true">Marital Status</th>
<th data-options="field:'email',width:10,align:'left',sortable:true,hidden:true">Email</th>
<th data-options="field:'HP1',width:10,align:'left',sortable:true,hidden:true">Phone</th>
</tr>
</thead>
</table>
<div id="cc" style="width:99.9%;height:520px;">
<div data-options="region:'west'" style="width:215px;">
<div id="photo" class="easyui-panel" title="Photo" style="width:212px;height:240px;"><center><img src="../image/blank.jpg" style=" width:200;height:210;display: block;" border="0"> </img>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c7" style="width:190px" onclick="javascript:$('#tt').tabs('select', 'About')">About</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c2" style="width:190px" onclick="javascript:addTab('Dependents','http://localhost/BT/content/content_dependents.html')">Dependents</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c7" style="width:190px" onclick="javascript:addTab('Job Historical')">Job Historical</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c2" style="width:190px" onclick="javascript:addTab('Salary')">Salary</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c7" style="width:190px" onclick="javascript:addTab('Report To')">Report To</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c5" style="width:190px"onclick="javascript:addTab('Document List')">Document List</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c7" style="width:190px"onclick="javascript:addTab('Qualification')">Qualification</a>
</div>
<div style="padding:4;margin-left:5">
<a href="#" class="easyui-linkbutton c6" style="width:190px"onclick="javascript:addTab('Work Schedule')">Work Schedule</a>
</div>
</div>
<div data-options="region:'center'">
<div id ="tt" class="easyui-tabs" style="width:1250px;height:500px">
<div title="About"> <!-- start tab -->
<ul>
<li>
<label style="width:20px">Full Name</label>
<span style="margin-left:6.2em">
<input id="fullname" name="fullname" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
<span style="margin-left:6.2em">
<label style="width:30px">Sub Unit</label>
<span style="margin-left:6.1em">
<input id="subunit" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Date of Birth</label>
<span style="margin-left:4.8em">
<input id="dob" class="easyui-datebox" disabled="true" data-options="formatter:myformatter,parser:myparser" style="width:190px;height:25px;border-radius:4px;">
</span>
<span style="margin-left:6.5em">
<label style="width:30px">Location</label>
<span style="margin-left:6.4em">
<input id="location" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</span>
</li>
</ul>
<div style="margin:0.5"> </div>
<hr width="99%">
<ul>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Employee ID</label>
<span style="margin-left:4.8em">
<input id="employeeid" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
<span style="margin-left:6.2em"></span>
<label style="width:30px">Other Emp.No</label>
<span style="margin-left:3.5em">
<input id="othnoemp" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Job Title</label>
<span style="margin-left:7.2em">
<input id="jobtitle" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
<span style="margin-left:6.2em"></span>
<label style="width:30px">Supervisor</label>
<span style="margin-left:5.2em">
<input id="supervisor" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Employment Status</label>
<span style="margin-left:1.3em">
<input id="employeestatus" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Join Date</label>
<span style="margin-left:6.7em">
<input id="joindate" class="easyui-datebox" disabled="true" data-options="formatter:myformatter,parser:myparser" style="width:190px;height:25px;border-radius:4px;">
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Gender</label>
<span style="margin-left:7.7em">
<select id="gender" class="easyui-combobox" disabled="true" name="gender" style="width:190px;">
<option value="ML">Male</option>
<option value="FM">Female</option>
</select>
</span>
</li>
<div style="margin:10"> </div>
<li>
<label style="width:30px">Marital Status</label>
<span style="margin-left:4.3em">
<select id="maritalstatus" class="easyui-combobox" disabled="true" name="gender" style="width:190px;">
<option value="SL">Single</option>
<option value="MR">Married</option>
<option value="OT">Other</option>
</select>
</span>
</li>
</ul>
<ul>
<div style="margin:10"> </div>
<label style="width:30px"><b>Contact</b></label>
<span style="margin-left:0em">
</span>
</ul>
<div style="margin:0.5"> </div>
<hr width="99%">
<ul>
<li>
<div style="margin:10"> </div>
<label style="width:30px">Email</label>
<span style="margin-left:8.5em">
<input id="email" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;" data-options="validType:'email'">
</span>
</li>
<li>
<div style="margin:10"> </div>
<label style="width:30px">Phone</label>
<span style="margin-left:8.2em">
<input id="phone" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
</span>
</li>
</ul>
<hr>
<hr>
<span style="margin-left:2.0em">
<a id="edit" href="#" class="easyui-linkbutton c1" style="width:120px;height:25x" onClick="editData()">Edit</a>
</span>
<span style="margin-left:2.0em">
<a href="javascript:void(0)" id="mb" class="easyui-menubutton" style="width:150px" data-options="menu:'#mm1',iconCls:'icon-edit'">Create Document</a>
<div id="mm1" style="width:150px;">
<div data-options="iconCls:'icon-warning'">Warning Letter</div>
<div data-options="iconCls:'icon-memo'">Memo</div>
</div>
</span>
</div> <!-- tutup tab about-->
<div data-options="closable:true" style="overflow:hidden" title="Dependents">
</div> <!-- tutup tab dependent-->
<div data-options="closable:true" title="Job Historical">
</div> <!-- tutup tab job historical-->
<div data-options="closable:true" title="Salary">
</div> <!-- tutup tab salary-->
<div data-options="closable:true" title="Report To">
</div> <!-- tutup tab report to-->
<div data-options="closable:true" title="Document List">
</div> <!-- tutup tab Document List-->
<div data-options="closable:true" title="Qualification">
</div> <!-- tutup tab Document Qualification-->
<div data-options="closable:true" title="Work Schedule">
</div> <!-- tutup tab Document Qualification-->
</div> <!-- tutup tab -->
</div> <!-- Tutup Region Center -->
</div>
<script type="text/javascript">
$(function(){
$('#cc').layout();
setHeight();
});
function setHeight(){
var c = $('#cc');
var p = c.layout('panel','center'); // get the center panel
var oldHeight = p.panel('panel').outerHeight();
p.panel('resize', {height:'auto'});
var newHeight = p.panel('panel').outerHeight();
c.layout('resize',{
height: (c.height() + newHeight - oldHeight)
});
}
</script>
<!--<div id="photo" class="easyui-panel" title="Photo" Style="width:200px;height:250px"></div>-->
</td>
</tr>
</table>
</div>
<script>
var collapse= false;
function doSearch(value,name){
if (collapse==true){
//alert('You input: ' + value);
//$('#dg').edatagrid('load',{nama: 'Sugino',});
if(name=='employeename'){
$('#dg').datagrid({url:'./control/get_personel.php?nama='+ value +'&name='+ name});}
else if(name=='supervisor'){
$('#dg').datagrid({url:'./control/get_personel.php?supervisor='+ value +'&name='+ name});
}
else if(name=='jobtitle'){
$('#dg').datagrid({url:'./control/get_personel.php?jobtitle='+ value +'&name='+ name});
}
else if(name=='employmentstatus'){
$('#dg').datagrid({url:'./control/get_personel.php?employmentstatus='+ value +'&name='+ name});
}
else if(name=='subunit'){
$('#dg').datagrid({url:'./control/get_personel.php?subunit='+ value +'&name='+ name});
}
//$('#dg').datagrid({collapsed:true});
collapse= false;
$('#dg').datagrid({title:"Employee List",collapsed:false});
}
else{
$('#dg').datagrid({collapsed:false});
if(name=='employeename'){
$('#dg').datagrid({url:'./control/get_personel.php?nama='+ value +'&name='+ name});}
else if(name=='supervisor'){
$('#dg').datagrid({url:'./control/get_personel.php?supervisor='+ value +'&name='+ name});
}
else if(name=='jobtitle'){
$('#dg').datagrid({url:'./control/get_personel.php?jobtitle='+ value +'&name='+ name});
}
else if(name=='employmentstatus'){
$('#dg').datagrid({url:'./control/get_personel.php?employmentstatus='+ value +'&name='+ name});
}
else if(name=='subunit'){
$('#dg').datagrid({url:'./control/get_personel.php?subunit='+ value +'&name='+ name});
}
}
}
function onDblClickRow(index,row){
var kryid= row.kryid;
//alert (document.getElementById("dg").parentElement.nodeName);
if (collapse==false){
$('#dg').datagrid({title:"Personal Details",collapsed:true, onExpand:onExpand});
$('#cc').show();
//Proses Baca Database
$('#fullname').val(row.nama);
//$('#fullname').textbox({disabled: t});
$('#subunit').val(row.BagianName);
$('#employeeid').val(row.kryid);
$('#jobtitle').val(row.JABATAN);
$('#employeestatus').val(row.StatusKry);
$('#dob').datebox('setValue',row.TGLLHR);
$('#joindate').datebox('setValue',row.TGLMSK);
$('#othnoemp').val(row.nokry);
if (row.jkid==1){
$('#gender').combobox('setValue','ML')
}else{
$('#gender').combobox('setValue','FM')
}
if (row.Status_Nikah=="Menikah") {
$('#maritalstatus').combobox('setValue','MR')
}else {
$('#maritalstatus').combobox('setValue','SL')
}
$('#email').val(row.email);
$('#phone').val(row.HP1);
}
}
function onExpand(){
//$('#p1').html('');
$('#dg').datagrid({title:"Employee List",collapsed:false});
$('#dg').datagrid('reload');
$('#tt').tabs('close', 'Dependents');
$('#tt').tabs('close', 'Job Historical');
$('#tt').tabs('close', 'Salary');
$('#tt').tabs('close', 'Report To');
$('#tt').tabs('close', 'Document List');
$('#tt').tabs('close', 'Qualification');
$('#cc').hide();
}
//$(window).resize(function(){location.reload();});
function addTab(title,url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
//alert(title);
} else {
var content = '<iframe scrolling="yes" frameborder="0" src="'+url+'" style="width:100%;height:100%;display: block;"></iframe>';
//alert (content);
$('#tt').tabs('add',{
title: title,
content:content,
closable: true,
fit: true
});
}
//$('#cc').layout('collapse','west');
//$('#ttab').tabs('close', 'Welcome');
}
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
function currdate(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = yyyy+'-'+mm+'-'+dd;
return today;
}
document.getElementById("tanggal").innerHTML = currdate();
function editData(){
//$('#fullname').textbox({disabled: false});
$('#fullname').textbox('enable');
//alert(hasil);
}
</script>
</body>
</html>
i have several input where disabled true inside Tab 'About' and it will be enable when i click Edit Button using function edit Data. Perhaps i can find solution for my problem. Thanks Shiva |
