 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / on focus combobox autoopen
|
on: February 06, 2015, 11:59:15 PM
|
Hi, I have de following edatagrid $('#dgAcctManual').edatagrid({
url:"acctmov/acctmovmanual_retrieve.php",
updateUrl: 'acctmov/acctmovmanual_update.php?typeUpdate=update',
pageSize:15,
rownumbers: false,
pagination: true,
toolbar: '#tbAcctMovManual',
sortname: 'id',
sortorder: 'asc',
fitColumns:true,
autoSave: false,
remoteFilter: true,
showFooter:true,
pageList:[15],
singleSelect:true,
columns: [[
{field:'id' ,title:'N.' , sortable:true, width: 10},
{field:'acctidname' ,title:'Cuenta' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name1',url:'acctmov/get_utils.php?type=acct2&filter=3',selectOnNavigation:true,editable: true, required: false, width:300, panelWidth:300 } },sortable:true, width: 200},
{field:'stationname' ,title:'RBase' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=stations&filter=2',selectOnNavigation:true,editable: false, required: false, width:300, panelWidth:300 } },sortable:true, width: 20},
{field:'providername' ,title:'Prov.' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=provider&filter=2',selectOnNavigation:true,editable: false, required: false, width:300, panelWidth:300 } },sortable:true, width: 20},
{field:'employeename' ,title:'Emp.' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=employee&filter=2',selectOnNavigation:false,editable: false, required: false, width:300, panelWidth:300 } },sortable:true, width: 20},
{field:'var1name' ,title:'Reg.' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=var1&filter=2',selectOnNavigation:false,editable: false, required: false, width:300, panelWidth:300 } }, sortable:true, width: 30},
{field:'var2name' ,title:'CNeg.' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=var2&filter=2',selectOnNavigation:false,editable: false, required: false, width:300, panelWidth:300 } }, sortable:true, width: 30},
{field:'var3name' ,title:'Serv.' , editor:{ type:'combobox' , options:{valueField:'id', textField:'name',url:'acctmov/get_utils.php?type=var3&filter=2',selectOnNavigation:false,editable: false, required: false, width:300, panelWidth:300 } }, sortable:true, width: 30},
{field:'amountd' ,title:'Debe' , editor:{ type:'numberbox' , options:{min:0,max:999999999, precision: 2, required: false } },styler:cSAcctType1,sortable:true, width: 30,align:'right'},
{field:'amounth' ,title:'Haber' , editor:{ type:'numberbox' , options:{min:0,max:999999999, precision: 2, required: false } },styler:cSAcctType1,sortable:true, width: 30,align:'right'}
]],
onError: function(index,row){
$.messager.alert("ERROR" , row.msg,'error');
$('#dgAcctManual').edatagrid('cancelRow', index);
},
onBeforeEdit:function(index,row){
row.editing = true;
updateActionsAcctMovManual(index);
},
onAfterEdit:function(index,row){
alert('aca');
row.editing = false;
updateActionsAcctMovManual(index);
},
onBeforeSave:function(index,row){
$('#dgAcctManual').datagrid('endEdit', index);
$('#dgAcctManual').datagrid('reload');
row.editing = true;
},
onCancelEdit:function(index,row){
row.editing = false;
updateActionsAcctMovManual(index);
}
});
What I need is that after select first column value and press key ... the next column (stationname) gets automatically open to select the option... It this possible? Kind Regards |
|
|
|
|
5
|
General Category / EasyUI for jQuery / google map wihtin datagrid
|
on: April 28, 2013, 02:32:03 PM
|
I'm currently trying to use google maps within datagrid details!.. First expanded row show GoogleMap fine but after that nothing is showed ...! does anyone tried to use this? Kind regards, Here you can see cust_detail.php where google map is called and Detailed Row is generated ... <?php
$itemid = htmlspecialchars($_REQUEST['idcust']);
$addid = htmlspecialchars($_REQUEST['addr']);
include '../../conn.php';
$db=crearConexion();
$db->query("set NAMES utf8;");
$query="SELECT * FROM test.customer where idcustomer='$itemid'";
if(!$result1 = $db->query($query))
{
die('There was an error running the query [' . $db->error . ']');
}
$item = $result1->fetch_array(MYSQLI_BOTH);
$result1->close();
$db->close();
?>
<script type="text/javascript">
$(function () {
var gmap
var status
var mapDiv = document.getElementById('myMap');
options = {
center: new google.maps.LatLng(-34.8, 138.6),
scaleControl: false,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
navigationControl: false,
disableDoubleClickZoom: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
gmap = new google.maps.Map(mapDiv, options);
gmap.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
]
}
});
geocoder = new google.maps.Geocoder();
var addid = "<?php echo $addid; ?>";
//In this case it gets the address from an element on the page, but obviously you could just pass it to the method instead
var address = addid;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//In this case it creates a marker, but you can get the lat and lng from the location.LatLng
gmap.setCenter(results[0].geometry.location);
var locMarker = new google.maps.Marker({
map: gmap,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
//locPath.setMap(gmap);
});
</script>
<div id="detailer" style="height: 350px;">
<form method="post">
<table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;">
<td rowspan="3" style="width:60px">
<?php
$img = "sales/customer/user-128.png";
echo "<img src=\"$img\" style=\"width:60px;margin-right:20px\" />";
?>
</td>
<tr>
<td>Codigo</td>
<td><input name="idcustomer" class="easyui-validatebox" required="true"></input></td>
<td>Nombre</td>
<td><input name="name" class="easyui-validatebox" required="true"></input></td>
</tr>
<tr>
<td>Direccion</td>
<td><input name="address"></input></td>
<td>Mail</td>
<td><input name="mail" class="easyui-validatebox" validType="email"></input></td>
</tr>
</table>
<div style="padding:5px 0;text-align:right;padding-right:30px">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">Cancel</a>
</div>
<div id="myMap" style="height:200px;width: 200px">
map
</div>
</form>
</div> Here cust_main from datagrid is shown and where OnExpandRow is declared! <?php
require_once('../../access/auth.php');
include 'cust_abm.php';
?>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<div id="tableCust" style="height: 500px">
<table id="dg" style="width:auto;height:auto" toolbar="#tb" url="Sales/customer/cust_retrieve.php?type=gen" pagination="true" sortname="idcustomer" sortorder="desc" title="Clientes" singleselect="true" fitcolumns="true">
<thead>
<tr>
<th field="idcustomer" width="100">Cust. Code</th>
<th field="name" width="100">Name</th>
<th field="address" align="right" width="100">Address</th>
<th field="id" align="right" width="100">Id</th>
<th field="phone" width="100" align="center">Phone</th>
<th field="mail" width="100" align="center">Mail</th>
<th field="paymentcode" width="100" align="center">PayCode</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'sales/customer/cust_detail.php?idcust='+row.idcustomer+"&addr="+row.address,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
</script>
<div id="tb">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#custabm').window('open')" plain="true" >Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
|
|
|
|
|
7
|
General Category / EasyUI for jQuery / inner tabs or nested tabs called by ajax load not keep css style.
|
on: April 12, 2013, 11:44:19 AM
|
I'm starting a web site develop using PHP, jQuery EasyUI, AJAX, and CSS. On my first try using jeasyui's tabs everything was fine since all is included within main html.. Here you can see the code extracted from jQuery EasyUI tutorial <body>
<h2>Nested Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>The tab panel can contain sub tabs or other components.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
<div title="Sub Tabs" style="padding:10px;">
<div class="easyui-tabs" data-options="fit:true,plain:true">
<div title="Title1" style="padding:10px;">Content 1</div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
</div> As you can see everything works fine since it's all included on same html... Now I'm trying to get things divided in differents files to get everything more organized ... (here you can see index.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
ref="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js">
</script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js">
</script>
<script type="text/javascript" src="connections.js"></script>
<script type="text/javascript" src="codigo.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#linkajax").click(function(evento){
evento.preventDefault();
//$(document).getElementById('resultado').innerHTML='sales.html';
$("#resultado").load("sales.html");
});
})
</script>
</head>
<body >
<div id="main" class="easyui-tabs" style="border:0;width:auto;height:700px;">
<div title="Tab 1" iconCls="icon-reload" closable="false" onClick="listTab1()"
style="padding:10px;">
Tab 1
<table id="tab1_table" style="width:900px;height:650px"></table>
</div>
<div id="resultado" title="Tickets" iconCls="icon-reload" closable="false" style="
padding:10px;">
<a href="#" id="linkajax">Click</a>
</div>
</div>
</body>
</html> here... sales.html <link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js">
</script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js">
</script>
</head>
<body >
<div id="main2" class="easyui-tabs" style="border:0;width:auto;height:700px;">
<div title="Tab 1" iconCls="icon-reload" closable="false" style="padding:10px;">
Tab 1
</div>
<div title="Tickets" iconCls="icon-reload" closable="false" style=" padding:10px;">
Tab 2
</div>
</div>
</body> here.. the result https://www.dropbox.com/s/6lpgnzpodbqj54l/tab.pngHere you can see that nested tab has no css !... Does anyone have any suggestions? |
|
|
|
|
