<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">
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
index: index,
field: 'pcn'
});
var t = $(ed1.target).combogrid('textbox').focus();
t.focus();
},
onBeginEdit:function(index){
var ed1 = $(this).edatagrid('getEditor',{index:index,field:'pcn'});
var ed2 = $(this).edatagrid('getEditor',{index:index,field:'unit'});
var ed3 = $(this).edatagrid('getEditor',{index:index,field:'qty'});
setKeydown([ed1.target,ed3.target]);
}
});
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>
<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},
]],
onSelect: onSelectGrid,
onShowPanel: onShowPanel,onHidePanel: onHidePanel,onChange: onChange,
}}">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>
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = 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 editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);
}
}
function onChange(newValue, oldValue) {
if(cbg) {
var opts = cbg.combogrid('options');
grid=cbg.combogrid('grid');
var row= grid.datagrid('getSelected');
var dgs = $('#dg');
var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
var editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);
}
}
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);
}
</script>
</body>
</head>
