Below is the complete html code with jQuery ajax call to consume node.js service
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forecasting - Bottoms Up(T&M)</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<style>
a {
display: inline-block;
color: white;
text-align: center;
padding: 4px 4px;
text-decoration: none;
background-color: #2c64b2;
}
a:hover {
color: white;
background-color: #827f7b;
}
</style>
</head>
<body>
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function(){
$('#dg').datagrid('selectRow', editIndex);
},0);
}
}
}
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'ID'
});
row.JanTotalBilling = row.Rate * row.JanActualHours;
row.FebTotalBilling = row.Rate * row.FebActualHours;
row.MarTotalBilling = row.Rate * row.MarActualHours;
row.AprTotalBilling = row.Rate * row.AprActualHours;
row.MayTotalBilling = row.Rate * row.MayActualHours;
row.JunTotalBilling = row.Rate * row.JunActualHours;
row.JulTotalBilling = row.Rate * row.JulActualHours;
row.AugTotalBilling = row.Rate * row.AugActualHours;
row.SepTotalBilling = row.Rate * row.SepActualHours;
row.OctTotalBilling = row.Rate * row.OctActualHours;
row.NovTotalBilling = row.Rate * row.NovActualHours;
row.DecTotalBilling = row.Rate * row.DecActualHours;
}
function actionApplyFilters(){
$('#dg').datagrid({
url:'http://samplesite.com:8182/BottomsUpBTMFiltered?parentCustomer='+$( "#parentCustomerId option:selected" ).text()+'&verticalShortname='+$( "#verticalShortnameId option:selected" ).text()
});
}
function actionClearAllFilters(){
$.messager.alert('Clear All Filters');
}
function actionSubmit(){
var rows = $('#dg').datagrid('getChanges');
if(!jQuery.isEmptyObject(rows)){
json = JSON.stringify(rows);
console.log('json before submit' + json);
$.ajax
({
type: "POST",
url: "http://samplesite.com:8182/BottomsUpBTM_save",
crossDomain:true,
dataType: 'json',
contentType: 'application/json',
data:json
}).done(function (data) {
console.log('inside done method ' + typeof data);
console.log('inside done method ' + JSON.stringify(data));
if(!jQuery.isEmptyObject(data)){
if(data.status == "SUCCESS"){
console.log("successfully saved");
$.messager.alert('SUCCESS','<p style="color:green;font-weight:bold;text-align:center">Data Saved !!!<p>');
}
}
});
}else{
$.messager.alert('ERROR','<p style="color:red;font-weight:bold">Modify rows and step off to save...<p>');
}
}
$(document).ready(function(){
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
var loginid = $.urlParam('loginid');
$.ajax
({
url: "http://samplesite.com:8182/PicklistValuesFiltered?loginid="+loginid,
crossDomain:true,
dataType: 'json',
contentType: 'application/json'
}).done(function (data) {
var pcArray = data;
$.each(pcArray,function(index,value){
$('#parentCustomerId').append($('<option>', {
value: value.parentcustomer,
text : value.parentcustomer
}));
});
});
$("#parentCustomerId").change(function(){
$.ajax
({
url: "http://samplesite.com:8182/PickVerticalShortName?parentcustomer="+$( "#parentCustomerId option:selected" ).text(),
crossDomain:true,
dataType: 'json',
contentType: 'application/json'
}).done(function (data){
var vsArray = data;
$('#verticalShortnameId').find('option').remove().end();
$.each(vsArray,function(index,value){
$('#verticalShortnameId').append($('<option>',{
value: value.Verticalshortname,
text : value.Verticalshortname
}));
});
});
});
});
</script>
<table width="100%"> <tr>
<td align="left"><h2>Forecasting - Bottoms Up(T&M)</h2></td>
<td align="right"><img src="images/Cognizant_Logo.png" alt="logo View"></td>
</tr>
</table>
<table align="center">
<tr>
<td><a href="BottomsUpBTM.html">T&M Adjustments</a></td>
<td><a href="BottomsUpBTMView.html">T&M View</a></td>
<td><a href="BottomsUpBFB.html">Fixed Bid Adjustments</a></td>
<td><a href="BottomsUpBFBView.html">Fixed BidView</a></td>
<td><a href="BottomsUpVSCForecast.html">Bottoms Up vs CForecast</a></td>
<td><a href="WorkingDays.html">Working Days</a></td>
<td><a href="CustomerAccess.html">Customer Access</a></td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td>
<label>Parent Customer:</Label>
<select id="parentCustomerId">
</select>
<label>Vertical Short Name:</Label>
<select id="verticalShortnameId">
</select>
<a href="#" class="easyui-linkbutton" onclick="actionApplyFilters()">Apply Filters</a>
<a href="#" class="easyui-linkbutton" onclick="actionClearAllFilters()">Clear All Filters</a>
<label>Forecasting Month: <B>Mar-2017</B></Label>
<label id="selectRowsMsg"></label>
</td>
</tr>
</table>
<br/>
<table id="dg" class="easyui-datagrid" iconCls="icon-save" title="Utilization Data for Adjustments" style="width:99%;height:450px" sortName="AssociateID" remoteSort="false" sortOrder="asc"
data-options="
iconCls:'icon-edit',
singleSelect:true,
toolbar:'#tb',
method:'get',
onClickCell:onClickCell,
onEndEdit:onEndEdit">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'AssociateID',sortable:true">AssociateID</th>
<th data-options="field:'ID',formatter:function(value,row){return row.AssociateName;}">Associate Name</th>
<th data-options="field:'ProjectId'">Project ID</th>
<th data-options="field:'ProjectName',align:'left',sortable:true">Project Name</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'Utilizationlocation',align:'left'">Utilization Location</th>
<th data-options="field:'Isonsite',align:'left'">Is Onsite</th>
<th data-options="field:'Projectbillability',align:'left'">Project Billability</th>
<th data-options="field:'CustomerID',align:'left'">Customer Id</th>
<th data-options="field:'Customername',align:'left',sortable:true">Customer Name</th>
<th data-options="field:'HorizontalShortName',align:'left'">HorizontalShortName</th>
<th data-options="field:'ManagerID',align:'right'">ManagerID</th>
<th data-options="field:'ManagerName',align:'right'">ManagerName</th>
<th data-options="field:'AllocationPrecentage',align:'right'">AllocationPrecentage</th>
<th data-options="field:'Status',align:'left'">Status</th>
<th data-options="field:'BU',align:'right'">BU</th>
<th data-options="field:'AllocationStartDate',align:'left'">Allocation Start Date</th>
<th data-options="field:'AllocationEndDate',align:'left'">Allocation End Date</th>
<th data-options="field:'ActualAllocationStartDate',align:'left',editor:{type:'datebox'}">Actual Allocation Start Date</th>
<th data-options="field:'ActualAllocationEndDate',align:'left',editor:{type:'datebox'}">Actual Allocation end Date</th>
<th data-options="field:'Rate',align:'right',editor:{type:'numberbox',options:{precision:1}}">Rate</th>
<th data-options="field:'JanActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jan hours</th>
<th data-options="field:'JanTotalBilling'">Jan Amount</th>
<th data-options="field:'FebActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Feb hours</th>
<th data-options="field:'FebTotalBilling'">Feb Amount</th>
<th data-options="field:'MarActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Mar hours</th>
<th data-options="field:'MarTotalBilling'">Mar Amount</th>
<th data-options="field:'AprActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Apr hours</th>
<th data-options="field:'AprTotalBilling'">Apr Amount</th>
<th data-options="field:'MayActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">May hours</th>
<th data-options="field:'MayTotalBilling'">May Amount</th>
<th data-options="field:'JunActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jun hours</th>
<th data-options="field:'JunTotalBilling'">Jun Amount</th>
<th data-options="field:'JulActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jul hours</th>
<th data-options="field:'JulTotalBilling'">Jul Amount</th>
<th data-options="field:'AugActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Aug hours</th>
<th data-options="field:'AugTotalBilling'">Aug Amount</th>
<th data-options="field:'SepActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Sep hours</th>
<th data-options="field:'SepTotalBilling'">Sep Amount</th>
<th data-options="field:'OctActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Oct hours</th>
<th data-options="field:'OctTotalBilling'">Oct Amount</th>
<th data-options="field:'NovActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Nov hours</th>
<th data-options="field:'NovTotalBilling'">Nov Amount</th>
<th data-options="field:'DecActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Dec hours</th>
<th data-options="field:'DecTotalBilling'">Dec Amount</th>
<th data-options="field:'Comments',align:'right',editor:{type:'textbox',options:{precision:1}}">Comments</th>
</tr>
</thead>
</table>
</table>
<table style="width:100%">
<tr>
<td align="center">
<div style="margin:10px;">
<a href="#" class="easyui-linkbutton" onclick="actionSubmit()">Save</a>
</div>
</td>
</tr>
</table>
</body>
</html>
Caesars Palace Casino Resort - Mapyro
ReplyDeleteFind 수원 출장샵 Harrah's Palace 창원 출장샵 Casino Resort, 수원 출장마사지 Valley 평택 출장안마 Center, 남양주 출장샵 CA (Mapyro) location, revenue, industry and
Thanks for sharing this informative article and keep providing articles like this ERP Software Companies
ReplyDelete