 Show Posts
|
|
Pages: 1 [2] 3
|
|
16
|
General Category / EasyUI for jQuery / Re: Set Focus in edatagrid editor when click add New Row
|
on: April 17, 2018, 10:30:54 AM
|
my edit code is: <html>
<head>
<link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.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="../themes/color.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>
<link rel="stylesheet" href="../css/w3.css">
<style>
.w3-button {width:100px;height:30px;}
</style>
</head>
<body>
<table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
<thead>
<tr>
<th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th>
<th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr>
</thead>
</table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
index: index,
field: 'pcn'
});
var ed2 =$(this).datagrid('getEditor', {
index: index,
field: 'unit'
});
var ed3 =$(this).datagrid('getEditor', {
index: index,
field: 'qty'
});
$(ed1.target).focus();
//$(this).edatagrid('editCell', {index: index,field: 'pcn'});
//setKeydown([ed1.target,ed2.target,ed3.target]);
},
onEdit:function(index,row){
var ed1 =$(this).datagrid('getEditor', {
index: index,
field: 'pcn'
});
var ed2 =$(this).datagrid('getEditor', {
index: index,
field: 'unit'
});
var ed3 =$(this).datagrid('getEditor', {
index: index,
field: 'qty'
});
$(ed1.target).focus();
}
});
</script>
</body>
</head>
|
|
|
|
|
17
|
General Category / EasyUI for jQuery / Set Focus in edatagrid editor when click add New Row
|
on: April 17, 2018, 09:45:38 AM
|
Hi anybody, please help me for code Set Focus in edatagrid editor when click add New Row. in my case combine between combogrid and text as editor. <html>
<head>
<link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.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="../themes/color.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>
<link rel="stylesheet" href="../css/w3.css">
<style>
.w3-button {width:100px;height:30px;}
</style>
</head>
<body>
<table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
<thead>
<tr>
<th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
onShowPanel: onShowPanel,
onHidePanel: onHidePanel,
}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th>
<th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr>
</thead>
</table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
var cbg=null;
var tb=null;
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
index: index,
field: 'pcn'
});
var ed2 =$(this).datagrid('getEditor', {
index: index,
field: 'unit'
});
var ed3 =$(this).datagrid('getEditor', {
index: index,
field: 'qty'
});
(ed1.target).focus();
//$(this).edatagrid('editCell', {index: index,field: 'pcn'});
//setKeydown([ed1.target,ed2.target,ed3.target]);
}
});
function setKeydown(tt){
for(var i=0; i<tt.length; i++){
var t = tt[i];
getInputBox(t).bind('keydown',{i:i},function(e){
if (e.keyCode == 13){
var next = getInputBox(tt[e.data.i+1]||tt[0]);
next.focus();
}
});
}
}
function getInputBox(target){
return $(target).data('textbox') ? $(target).textbox('textbox') : $(target);
return $(target).data('combogrid') ? $(target).combogrid('grid') : $(target);
}
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==78) {
var dg = $('#dg');
dg.edatagrid('addRow');
} else if (keyCode==67) {
$('#dg').edatagrid('cancelRow');
}else{
//alert(keyCode);
}
}
</script>
</body>
</head> Thanks |
|
|
|
|
18
|
General Category / EasyUI for jQuery / Re: datagrid with combogrid as editor keyevent (keypress) detect
|
on: April 17, 2018, 03:24:33 AM
|
|
i think it is difference with what i mean,
at this case i need blank edatagrid with combogrid as editor for new record, at my code i give keydown(keyboard) detection for add new data and cancel and my code has work, but my code has several problem:
1. can not focus on editor when add new row (blinking cursor at editor)
2. need combogrid editor keydown (enter key) detection
Thanks
|
|
|
|
|
19
|
General Category / EasyUI for jQuery / datagrid with combogrid as editor keyevent (keypress) detect
|
on: April 16, 2018, 11:21:48 PM
|
Hi, please help me i have problem with edatagrid with combogrid as editor, editor work perfect but until now i can not capture keypress on combogrid, anyone can explain to me.. Thanks here my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.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="../themes/color.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>
<link rel="stylesheet" href="../css/w3.css">
<style>
.w3-button {width:100px;height:30px;}
</style>
</head>
<body>
<table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
<thead>
<tr>
<th field="pcn" width="50" editor="{type:'combogrid',options:{required:true,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],onSelect: onSelectGrid,
onShowPanel: onShowPanel,
onHidePanel: onHidePanel,keyHandler: $.extend({}, $.fn.combogrid.defaults.keyHandler, {
enter: function(e){
onSelectGrid();
}
})}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:true}}">Unit</th>
<th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr>
</thead>
</table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
var cbg=null;
var tb=null;
var pono;
function getValue(){
pono = $('#reffpono').combogrid('getValue');
}
function onBeforeLoad(param) {
var opts = $(this).datagrid('options');
opts.url = '../control/get_product_receive.php?pono='+pono;
}
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts =cb.combogrid('options');
var grid = cb.combogrid('grid');
var row= grid.datagrid('getSelected');
// alert (row.price);
var dgs = $('#dg');
var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
// var index = $('#dgs').datagrid('getSelected');
// alert (index);
// alert (row.price);
var editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);
//$(editors[2].target).val(row.OS);
//$(editors[3].target).val(row.price);
//$(editors[4].target).val(row.price);
var e = jQuery.Event("keydown");
e.which = 13; // # Some key code value
$("input").trigger(e);
e.which = 9; // # Some key code value
$("input").trigger(e);
e.which = 9; // # Some key code value
$("input").trigger(e);
}
}
function onBeginEdit(index,row){
}
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
$('#dg').edatagrid({
onEndEdit:function(index,row){
var edQty = $(this).datagrid('getEditor', {
index: index,
field: 'qty'
});
//row.productname = $(ed.target).combobox('getText');
//var qty = $(edQty.target).text('getValue');
//alert (qty);
}
});
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==78) {
//alert("You hit the enter key.");
var dg = $('#dg');
dg.edatagrid('addRow');
var index = dg.edatagrid('getRows').length-1; // the editing row index
var ed = dg.edatagrid('getEditors', index)[0]; // get the first editor
$(ed.target).focus();
} else if (keyCode==67) {
//alert (keyCode);
//alert("Oh no you didn't.");
$('#dg').edatagrid('cancelRow');
}else{
//alert(keyCode);
}
}
</script>
</body>
</head>
|
|
|
|
|
20
|
General Category / EasyUI for jQuery / Calculate data grid cell when add new row
|
on: October 17, 2017, 02:01:20 AM
|
Hi, i have some problem when try to calculate 2 cell, not in edit cell but for add new row in datagrid here my code:
<script>
$(function(){
var lastIndex;
$('#dg').datagrid({
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$(this).datagrid('endEdit', lastIndex);
$(this).datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
},
onBeginEdit:function(rowIndex){
var editors = $('#dg').datagrid('getEditors', rowIndex);
var n1 = $(editors[2].target);
var n2 = $(editors[3].target);
var n3 = $(editors[4].target);
n1.add(n2).textbox({
onChange:function(){
var cost = n1.textbox('getValue')*n2.textbox('getValue');
n3.textbox('setValue',cost);
}
})
}
});
});
</script>
<table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
<thead>
<tr>
<th field="product" width="50" editor="{type:'combogrid',options:{required:true,panelWidth:480,idField:'pcn',textField:'product',mode:'remote',url:'../control/get_product_price_join.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},{field:'price',title:'price',width:70}
]],onSelect: onSelectGrid,
onShowPanel: onShowPanel,
onHidePanel: onHidePanel,}}">Product</th>
<th field="unit" width="30" editor="{type:'text',options:{required:false}}">Unit</th>
<th field="qty" width="50" editor="{type:'numberbox',options:{precision:0}}">Qty</th>
<th field="price" width="50" editor="{type:'text'}">Price</th>
<th field="amount" width="50" editor="{type:'text'}">Amount</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onClick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onClick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
saveUrl: '../control/save_quotation_detail.php',
updateUrl: '../control/update_qoutation_detail.php',
destroyUrl: '../control/delete_quotation_detail.php'
});
});
var cbg=null;
var tb=null;
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts =cb.combogrid('options');
var grid = cb.combogrid('grid');
var row= grid.datagrid('getSelected');
// alert (row.price);
var dgs = $('#dg');
var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
// var index = $('#dgs').datagrid('getSelected');
alert (index);
alert (row.price);
var editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);
$(editors[3].target).val(row.price);
$(editors[4].target).val(row.price);
}
}
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
Anyone can help my problem please? Best Regards Shiva |
|
|
|
|
22
|
General Category / General Discussion / Re: Can not set disabled or enabled textbox
|
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 |
|
|
|
|
23
|
General Category / General Discussion / Can not set disabled or enabled textbox
|
on: April 20, 2016, 11:34:38 PM
|
Hi, i have problem with setting disabled on textbox, here my code:
<input id="fullname" class="easyui-textbox" disabled="true" style="width:16%;height:25px;border-radius:4px;">
<a id="edit" href="#" class="easyui-linkbutton c1" style="width:120px;height:25x" onClick="editData()">Edit</a>
javascript code: function editData(){
$('#fullname').textbox({disabled: false});
}
i use button style in my code, anyone can help me Thanks Shiva |
|
|
|
|
30
|
General Category / General Discussion / Re: set url combogrid in datagrid editor by selected other combogrid or filter data
|
on: April 09, 2016, 08:49:08 PM
|
my directly test to page is successfully here my code: <?php
include 'koneksiMysql.php';
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 100;
$offset = ($page-1)*$rows;
$q = isset($_POST['q']) ? strval($_POST['q']) : '';
$customerid = isset($_GET['customerid']) ? strval($_GET['customerid']) : '';
$rs = mysql_query("SELECT `customer`.`customerid`, `customer`.`customername`,`productmaindata`.`btno`,`productmaindata`.`productdescription`,`productprice detail`.`harga` FROM `productmaindata` INNER JOIN `productprice detail` ON `productprice detail`.`productid` = `productmaindata`.`productid` INNER JOIN `productprice` ON `productprice`.`id` = `productprice detail`.`productpriceid` INNER JOIN `customer` ON `customer`.`customerid` = `productprice`.`custid` WHERE customerid='$customerid' order by `productmaindata`.`btno` ASC;");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
//echo ($customerid);
?>
please see attachment for result Best Regards Shiva |
|
|
|
|
